Frontend Builder – Wordpress Content Assembler
Design your web page with a simple drag and drop system. Customize the elements with intuitive sidebar options. A modern, must-have solution for your website!
With its intuitive frontend and backend options it is very easy to create a unique web page. The drag & drop system make this plugin an easy-to-use solution for all users regardless of their skill level as designers or developers. On the other hand developers will find this plugin useful because they can assign this plugin to their templates with their own shortcodes and enable their potential users to design their own web pages using template’s elements.
Wordpress Frontent Builder / Assembler Drag & Drop system By simply dragging and dropping elements on the stage you can add all the content that you need regardless of the template that you are using.
Live preview As you are adding or editing elements to your webpage you are actually modifying your website live. You can hide controls at any time to get the same “feeling” as a visitor.
Tons of options All of the elements that you can add on the page have tons of options that you can use to “fine-tune” a specific element or the entire web page.
“Clone” options Every element in our WordPress Frontend Builder can be cloned and then dragged to a different position. This option saves a lot of time.
Wordpress Shortcodes Frontend builder uses wordpress shortcodes as display functions. There is no need to modify your theme. Just map them and your good to go.
Pre-made UI system Every control is at your disposal. Each control has multiple parameters to best suit the attribute you want to use it on.
Customizable Responsive dimensions and margins are changeable. Some or all default shortcodes can be removed. New shortcodes can be included.
Fully optimized No unnecessary scripts are included. Frontend editing is done virtually, on the separate page from the one used as a display.
Core elements of Frontend Builder for Wordpress - Heading - Text / HTML - Button - Image - Video - Testimonials - Tabs - Accordion - Alert box - Features - Featured post - Nav menu - Icon menu - Sidebar - Search box - Slider - Code - Separator
Each of these elements have 5-20 options for settup so the number of variations is huge.
An example of Fronted Builder for Wordpress with & without controls WordPress Front-end Builder elements explained
Image
Displays an image to your web page. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: ImageUsage: Displays an imageFrontend settings: Insert URL to the image or upload an image, image description, text alignment, insert link, link type (new tab or lightbox), choose the hover icon, bottom margin, round edges, add bottom border, choose the colors for border, border hover, description text, description text hover, description background and description background hover.Backend settings: Set font options for image description: font family, font style, font size, line height
Video
Display a YouTube, Vimeo or any other video clip.Title: VideoUsage: Displays videoFrontend settings: Video URL, bottom margin, auto width (Use the width of the column), set manuel width, set heightBackend settings: None
Slider
Insert a slider into your web page. It can be used to display a classic image slider or it can display a Text/HTML versions. Tons of options are included along with the option for vertical sliding of elements.Title: SliderUsage: Inserts a image or text sliderFrontend settings: Set the number of elements/slider that you want in your slider, add a slider with text or image, align the text, choose vertical or horizontal mode, set how many sliders are displayed preview, set the autoplay option, set the bottom marginBackend settings: Set font options for slider text: font family, font style, font size, line height
Features
Title, icon and text. Used to display features, services or options for your website. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: FeaturesUsage: Promoting items, displaying featuresFrontend settings: Title, icon, content, link, set the order of items inside this element, set the style to clean, rounded or squared, bottom margin, title size, icon size, title color, icon color, text color, background color, title hover color, icon hover color, text hover color, background hover color.Backend settings: Set font options for both title and content: font family, font style, font size, line height
Button
You have tons of options for setting up your button just the way you like it. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: ButtonUsage: LinkFrontend settings: Text, URL, link type (new tab or lightbox), font size, text alignment, colors for text and text hover, insert icon (font awesome icons), icon size, icon alignment, bottom margin, full width, roundness, fill/border, background color, background hover color.Backend settings: Set font options for your button: font family, font style, font size, line height
Testimonials
Tons of options for displaying a testimonial on your web page. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: TestimonialsUsage: Display testimonial or similar contentFrontend settings: Name, profession, quote, URL (if you want to link the testimonial), insert thumbnail (80×80px), choose between 3 styles: clean, squared, rounded, bottom margin, name color, quote text color, main color, background color.Backend settings: Set different options for name font, quote font, profession font such as: font family, font style, font size, line height
Heading
Heading element displays your heading style. It is generaly used for titles but you can use it how you see it fit. The options for editing your heading styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”. Here you can set different fonts, styles, sizes and line heights for each of the 6 heading styles. 630+ Google fonts are supported.Title: HeadingUsage: Titles, text contentFrontend settings: Select type (H1 to H6), bottom margin, text, text alignmentBackend settings: Set different options for each heading style such as: font family, font style, font size, line height
Alert box
Displays an alert box into your webpage. You can choose between 4 styles or you can set it up yourself. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: Alert boxUsage: Displays an alertFrontend settings: Choose the type for your alert box: info, success, notice, warning; Choose the style: clean, rounded, squared; Set it to custom and manage: icon, colors for main elements, text, icon and backgroundBackend settings: Set font options for the text inside the box: font family, font style, font size, line height
Tabs
Design your tabs just the way you want them with tons of options inside our Frontend Builder. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: TabUsage: Insert tab elementFrontend settings: Insert new element, sort elements, set active state, title, text, image for each item, set the style for the entire tabs element to clean, rounded, squared, bottom margin, tab title color, text color, active tab title color, active tab border color, border color, tab background color, background colorBackend settings: Set different options for name font, quote font, profession font such as: font family, font style, font size, line height
Accordion
Accordion menu is an excellent content display element allowing you to display large amount of content without overloading your page. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: AccordionUsage: Text, image, video displayFrontend settings: Add new element, set the active state, title, content, image for each element, set the style, bottom margin, title color, text color, trigger color, main color, background color, border color for the entire accordion.Backend settings: Set font options for both text and content: font family, font style, font size, line height
Search box
Insert a search box into your web page. There are tons of options for editing this element. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: Search boxUsage: Displays a search boxFrontend settings: Set text inside the box, bottom margin, round edges, set colors for text, border, background, text focus, border focus, background focus. Backend settings: Set font options for search text: font family, font style, font size, line height
Text / HTML
A simple field for formating your text area that can also be used to place any HTML content that you have (slider, custom plugin, ...)Title: Text / HTMLUsage: Text formatting area, HTML supportedFrontend settings: Insert text / HTML, option to format new lines, text alignment, bottom margin.Backend settings: Set font options for text : font family, font style, font size, line height
Icon menu
Create a unique icon menu that perfectly suits your needs.Title: Icon menuUsage: Displays a custom icon menuFrontend settings: Add, order or delete menu items, choose icon, URL and link type for each item, set bottom margin, icon alignment, icons size, round edges, colors for: icons, background, icon hover, background hover.Backend settings: None
Sidebar
Display a wordpress sidebarTitle: Icon menuUsage: Display a wordpress sidebarFrontend settings: Select a wordpress sidebar that you want to display, set bottom marginBackend settings: None
Separator
Insert a standard separator in a form of a line. It has 4 default styling options.Title: SeparatorUsage: Adds a separator in a form of a lineFrontend settings: Choose the style of the separator: solid, dashed, dotted, double; set the color of the separator, set the width of the line, set the bottom marginBackend settings: None
Code
Displays a code area. The styling for this element is pulled directly from the template that you have installed and activated.Title: CodeUsage: Displays a code areaFrontend settings: Enter the code in a text areaBackend settings: None
Featured post
Displays a featured post element. All you need to do is to import one of your posts into it. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: Featured postUsage: Displays a post in a boxFrontend settings: Select a post from your archive, set the hover icon, button text, element style: clean, rounded or squared; bottom margin, colors for background, border, button, button text, button hover, button text hover, heading, meta links, meta hover and text.Backend settings: Set font options for title, content, meta link, button: font family, font style, font size, line height
Nav menu
Displays a nav menu from WordPress. The options for editing text styles can be found in the backend of the WordPress Frontend Builder “Wordpress menu > Frontend builder > Typography options”.Title: Nav menuUsage: Displays a WP nav menuFrontend settings: Choose a wordpress nav menu, choose the type of the menu, bottom margin, set colors for: text, hover, hover text, background, sub-menu background, sub-menu textBackend settings: Set font options for main text, sub-menu text: font family, font style, font size, line height
Change log Version 1.12 – 27/08/2013 - Content is now saved in native wordpress DB tables - Included custom css field in the backend and custom class inputs for shortcdoes - Replaced Admin bar text buttons with builder icon button - Optimized backend option saving - Fixed default colors - Fixed Plugin page URI - Fixed backend save button loader - Fixed password protected pages
Version 1.11 – 21/08/2013 - Included wordpress editor (TinyMCE) - Included color for heading shortcodes - Included link and link type options for slider - Fixed rounded nav menu - Fixed nav menu fonts - Fixed Drop down menu z-index - Fixed content overlapping controls - Deactivated text-decoration on font gliphs - Scripts are now located in the footer (no more jquery is not a function bug)
Version 1.1 – 16/08/2013 - Included wordpress admin bar buttons: - Edit in Frontend - Activate Frontend Builder - Included load button (now you can load whole content of the other page) - Translation ready (optimized plugin for translation and included .pot file) - Fixed css for interface buttons and lists - Fixed Row 3-1-3 image not showing
Version 1.05 – 10/08/2013 - Builder is now compatible with modern admin plugin.
Version 1.04 – 09/08/2013 - Accordion shrotcode improvements: - Included "fixed height" option - Included "trigger active color" option - Included "title active color" option - Tabs no longer display as unordered list - Add new row button fixed - Fixed font size on shrotcode control bars
Version 1.03 – 08/08/2013 - Fonts no longer require HTTP to load (no more 342 error if your http requests are disabled) - Typography section optimized server side (it will take less time, and less resources to load typography page in the backend) - Fixed page switching in the frontend
Version 1.02 – 07/08/2013 - Included rows: - Two fourths + One half - One half + Two fourths - Five fifths - Fixed module deleting - Fixed sortable controls - Fixed vertical option on slider shortcode - Fixed borders on search shortcode - Theme font no longer affects the interface - Fixed iframe width
Version 1.01 – 06/08/2013 - Included plugin description - Fixed 275 php error - Fixed column cloning - Fixed button not opening new tab links - Included hover icon size for image shortcode