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.

Tip: 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.

Tip: 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.

Tip: 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.

Tip: 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

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.

Title: Heading
Usage: Titles, text content
Frontend settings: Select type (H1 to H6), bottom margin, text, text alignment
Backend settings: Set different options for each heading style such as: font family, font style, font size, line height
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, ...)

Title: Text/HTML
Usage: Text formatting area, HTML supported
Frontend settings: Insert text / HTML, option to format new lines, text alignment, bottom margin.
Backend settings: None
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”.

Title: Alert box
Usage: Displays an alert
Frontend 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, main color, text color, icon color, background color
Backend settings: Set font options for the text inside the box: font family, font style, font size, line height
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”.

Title: Features
Usage: Promoting items, displaying features
Frontend 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
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”.

Title: Button
Usage: Link
Frontend settings: Text, URL, link type (new tab or lightbox), font size, text alignment, text color, text hover color, 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
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”.

Title: Featured post
Usage: Displays a post in a box
Frontend settings: Select a post from your archive, set the hover icon, button text, element style: clean, rounded or squared; bottom margin, background color, border color, button color, button text color, button hover color, button text hover color, heading color, meta links color, meta hover color, text color.
Backend settings: Set font options for title, content, meta link, button: font family, font style, font size, line height
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”.

Title: Image
Usage: Displays an image
Frontend 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 border color and border hover color, description text color, description text hover color, description background color, description background hover color.
Backend settings: Set font options for image description: font family, font style, font size, line height
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.

Title: Video
Usage: Display video
Frontend settings: Video URL, bottom margin, auto width (Use the width of the column), set manuel width, set height
Backend settings: None
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”.

Title: Nav menu
Usage: Displays a WP nav menu
Frontend 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 text
Backend settings: Set font options for main text, sub-menu text: font family, font style, font size, line height
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.

Title: Icon menu
Usage: Displays a custom icon menu
Frontend 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
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”.

Title: Testimonials
Usage: Display testimonial or similar content
Frontend settings: Name, profession, quote, URL (if you want to link the testimonial), insert thumbnail (80 x 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
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

Title: Sidebar
Usage: Displays a wordpress sidebar
Frontend settings: Select a wordpress sidebar that you want to display, set bottom margin
Backend settings: None
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”.

Title: Tabs
Usage: Insert tab element
Frontend 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 color
Backend settings: Set font options for your tab item: font family, font style, font size, line height
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”.

Title: Accordion
Usage: Text, image, video display
Frontend 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
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”.

Title: Search box
Usage: Displays a search box
Frontend 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
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="" ]