Random Article


 
Don't Miss
 

Frontend Builder – WordPress Content Assembler

 
 
Overview
 

Author: Br0
 
Date: Aug, 2013
 
Area: ,
 
Buyer Rating
 
 
 
 
 


 
$20.00


Summary

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 […]

0
Posted June 19, 2014 by admin

 
Features
 
 

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: 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 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: Video
Usage: Displays video
Frontend settings: Video URL, bottom margin, auto width (Use the width of the column), set manuel width, set height
Backend 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: Slider
Usage: Inserts a image or text slider
Frontend 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 margin
Backend 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: 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

 

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, 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: Testimonials
Usage: Display testimonial or similar content
Frontend 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: 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

 

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, colors for main elements, text, icon and background
Backend 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: Tab
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 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: 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

 

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

 

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

 

Sidebar

Display a wordpress sidebar

Title: Icon menu
Usage: Display a wordpress sidebar
Frontend settings: Select a wordpress sidebar that you want to display, set bottom margin
Backend settings: None

 

Separator

Insert a standard separator in a form of a line. It has 4 default styling options.

Title: Separator
Usage: Adds a separator in a form of a line
Frontend 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 margin
Backend 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: Code
Usage: Displays a code area
Frontend settings: Enter the code in a text area
Backend 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 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, 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 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

Change log

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

0 Comments



Be the first to comment!


Leave a Response

(required)