Wordpress frontend builder

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!

Drag & drop


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.

Tons of options


All of the ellements that you can add on the page have tons of options that you can use to “fine-tune” a specific ellement or the entire web page.

Live preview


You can live preview all of the ellements that are placed on the stage. You can hide controlls at any time to get the same “feeling” as a visitor.

'Clone' option


Every ellement in our Wordpress Frontend Builder can be cloned and then draged to a different position. This option saves a lot of time.

Step-by-step instructions

Step 1 - Activating the plugin

After installing Wordpress Frontend Builder you need to create a blank page and activate the Frontend Builder for that page. You do that by clicking on the “Frontend Builder” icon on the top-right of the tinyMCE editor.

Step 2 - Starting the “edit” process

When you click the Frontend Builder link you will get a screen as shown in the image above. Click on the “Edit page” button to get started with editing your page with Frontend Content Builder.

Step 3 - First look at the Frontend Builder

In the middle of the page there is a full width button for adding new rows. On the left side there is a list of ellements that you can insert into your webpage.nnTip: Header and footer are the same as in the theme that you have installed and activated on your Wordpress.

Step 4 - Adding your first row

When you click on the “Add new row” button you will be offered a layout for that row. You can choose from 8 row layouts.nnTip: When you set up your row the way you want to, you can clone it and drag it to a different position on the page

Step 5 - Adding your first ellement

Select an element that you want to add on the left sidebar. Drag & drop it into one of the fields that you have created using “Add new row” button and you have your first item.nnTip: Selected elements are highlighted with blue color and the options for editing are on the right sidebar

Step 6 - Editing your ellement.

When you drop the element that you dragged, a right sidebar will appear with options for editing that specific element. The changes that you make to the element are live but it will take them 2-3 secs to appear on your page. The selected element is highlighted so it will be easy for you to know which element is being edited.nnTip: When you are done editing an element you can clone it and drag it to a different position. This will save you a lot of time.

Step 7 - Saving your work

When you're finished building your page, make sure to save your work by clicking the "Save Page" button, on the topmost left side of the screen. Save often.

Wordpress Frontend Builder Elements

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.n
Shorcode (for using outside of the builder):
[ fbuilder_h type="h1" bot_margin="24" align="left"] Text [ /fbuilder_h ]

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, ...)
Shorcode (for using outside of the builder):
[ fbuilder_text autop="true" bot_margin="24" align="left"] Text [ /fbuilder_text ]

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”.
Shorcode (for using outside of the builder):
[ fbuilder_alert type="info" text="This is an alert" icon="icon-warning-sign" style="clean" main_color="#27a8e1" text_color="#376a6e" icon_color="#27a8e1" bot_margin="24" ] Text [ /fbuilder_alert ]

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”.n
Shorcode (for using outside of the builder):
[ fbuilder_alert title="Lorem ipsum" icon="icon-bell" link="" order="icon-after-title" style="clean" icon_size="70" bot_margin="24" title_color="#376a6e" icon_color="#376a6e" back_color="#999999" title_hover_color="#27a8e1" icon_hover_color="#376a6e" text_hover_color="#376a6e" back_hover_color="#27a8e1" ] Text [ /fbuilder_alert ]

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”.
Shorcode (for using outside of the builder):
[ fbuilder_button text="Read more url="" icon ="no-icon" type="standard" h_padding="10" v_padding="10" bot_margin="24" font_size="16" icon_size="16" text_align="left" icon_align="right" fullwidth="false" round="false" fill="true" text_color="#376a6e" back_color="" hover_text_color="#27a8e1" hover_back_color="" ] Text [ /fbuilder_button ]

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”.n
Shorcode (for using outside of the builder):
[ fbuilder_post id="1" hover_icon="icon-search" button_text="Read more" style="clean" bot_margin="24" back_color="" border_color="#27a8e1"button_color="#27a8e1"button_text_color="#ffffff" button_hover_color="#57bce8" button_text_hover_color="#ffffff" head_color="#232323" meta_color="#232323" meta_hover_color="#27a8e1" text_color="#232323" ]

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”.
Shorcode (for using outside of the builder):
[ fbuilder_image desc="" text_align="left" link="" link_type="lightbox-image" hover_icon="icon-search" hover_icon_size="30" bot_margin="24" round="false" border="false" border_color="#376a6e" desc_color="#376a6e" back_color="#ebecee" border_hover_color="#376a6e" desc_hover_color="#376a6e" back_hover_color="#ebecee" ] SRC [ /fbuilder_image ]

Video

Display a YouTube, Vimeo or any other video clip.
Shorcode (for using outside of the builder):
[ fbuilder_video url="" auto_width="true" bot_margin="24" width="620" height="310" ]

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”.
Shorcode (for using outside of the builder):
[ fbuilder_nav_menu wp_menu="" type="horizontal-clean" menu_title="Nav menu" bot_margin="24" text_color="#232323" hover_color="#27a8e1" hover_text_color="#ffffff" back_color="" sub_back_color="#f4f4f4"sub_text_color="#232323" separator_color="#ebecee" ]

Icon menu

Create a unique icon menu that perfectly suits your needs.
Shorcode (for using outside of the builder):
[ fbuilder_icon_menu icon="icon-cogs|icon-key|icon-group" url="#|#|#" align="left" link_type="standard|standard|standard" bot_margin="24" icon_size="24" round="false" icon_color="#376a6e" back_color="" icon_hover_color="#27a8e1" back_hover_color="" ]

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”.
Shorcode (for using outside of the builder):
[ fbuilder_testimonials name="John Dough" profession="photographer / fashion interactive" quote="lorem ipsum dolor sit amet" url="" image="" style="clean" bot_margin="24" name_color="#376a6e" quote_color="#376a6e" main_color="#27a8e1" back_color="" ]

Sidebar

Display a wordpress sidebar.
Shorcode (for using outside of the builder):
[ fbuilder_sidebar name="1" bot_margin="0" ]

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”.
Shorcode (for using outside of the builder):
[ fbuilder_tabs active="true|false|false" title="title 1|title 2|title 3" image="||" style="clean" bot_margin="24" title_color="#376a6e" text_color="#376a6e" active_tab_title_color="#376a6e" active_tab_border_color="#27a8e1" border_color="#ebecee" tab_back_color="#376a6e" back_color="#f4f4f4" ]Content 1|Content 2|Content 3[ fbuilder_tabs ]

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”.n
Shorcode (for using outside of the builder):
[ fbuilder_accordion active="true|false|false" title="title 1|title 2|title 3" image="||" style="clean-right" bot_margin="24" title_color="#376a6e" text_color="#376a6e" trigger_color="#376a6e" main_color="#27a8e1" border_color="#376a6e" back_color="" ]content 1|Content 2|Content 3[ fbuilder_accordion ]

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”.
Shorcode (for using outside of the builder):
[ fbuilder_search text="Search" bot_margin="24" round="flase" text_color="#376a6e" border_color="#ebecee" back_color="" text_focus_color="#376a6e" border_focus_color="#376a6e" back_focus_color="" ]