Drag and Drop Page Editing in WordPress: Front End Page Builder Plugin
Today we have another review of a front-end page editing plugin. This plugin is created by the folks at Shindiri Studio, a Serbian based company which publishes themes and plugins on ThemeForest. Named the Front End Page Builder, it is billed as a “WordPress Content Assembler” and is available for purchase for just $20.
Create WordPress websites from scratch without using a single line of code
In this review we are going to take a look behind the scenes at how it functions and see how easy it is to build pages within WordPress.
Installation & Settings
Once you have uploaded and activated the plugin, you will see a new menu option named “Frontend Builder” which houses the main settings for the plugin. If you visit the link you will see three tabs: General Options, Typography Options and Color options. General options allows you to paste in some custom CSS, choose widths for various display devices etc:
Typography options allows you to set which font to use for many things around your site – headings, buttons, counter, graphs etc – all the included shortcodes are available to customise here or simply leave as default.
Finally, the color option tab allows you to set colors for backgrounds, text, titles and so on:
Once you are happy with your settings here, you can go ahead and create your first page.
Creating a Page
Visit “Pages” > “Add New” and you will see a new red tab, next to Visual and Text called “Frontend Builder”, before you begin though you must give your page a name and save it. Then click the tab to begin.
If you now hit the “Edit Page” button a new screen is loaded which is where you can start creating your page.
At first this screen looks a little overwhelming but once you take a look around its not too bad. Vertically down the left hand side are a row of icons which are your main elements and shortcodes which you will be adding to the page. If you hover over each one a popup tells you the name of each one.
The main bar which runs horizontally along the top of the screen is for functions like saving, loading a page, hiding the builder tools and there are also icons for setting the display size so you can test responsiveness.
In the main frame in the center is a preview of your page, with an “Add New Row” button which is what you need to click to begin adding content to your page.
You will see a range of layout options so choose which one you require and a new view will appear and you can then begin dragging and dropping content.
Each block that you drag over to the page will have an options box which shows on the right hand side – this is where you set the options for it, for example if you add a text box you can set the text to be displayed, colors, fonts etc:
Once you are happy with your page arrangement, you can hit “Save Page” and then “Preview Page” to see how it looks on the main site. You also have the option to “Save as Page Template” if you wish to reuse this layout on other pages.
You certainly aren’t short of available elements with this plugin, here is a run-down of what’s included :
- Heading – Insert a simple heading and set its < H > value, color, alignment and bottom margin.
- Image – Add an image to the page either from some URL or from your desktop.
- Accordion – Standard sortable accordion element with lots of options for editing.
- Nav Menu – Displays a WordPress menu that you select. There are 9 options for displaying your WP menu
- Separator – A standard separator in a form of a line, double line or a dotted line with simple settings.
- Text / HTML – Standard text field that supports HTML content. Insert shortcodes via this element.
- Testimonials – Add a testimonial element with image, name, profession and a quote.
- Toggle – Similar to accordion except that the element that you open, stays opened.
- Icon Menu – Display 1 or more icons in a form of a menu with link and hover settings
- More Tag – Insert a more tag in a post and the content above will become excerpt content.
- Bullet List – Display a standard bullet list with lots of options and settings for customizing.
- Tabs – Standard tab element with tons of options for modification. The default one is the Division version.
- Code – Creates a standard code HTML tag. The styling option for this element are pulled from the template
- Sidebar – Imports a WordPress sidebar. Styling options for this element are located in the template options
- Button – Insert a simple button or a complex, fullscreen element. Tons of options.
- Tour – Similar to tabs element except you get the tabs on the left side in a form of a tour element
- Alert Box – Add a predefined alert box to the web page or create a custom one with Frontend Builder.
- Search Box – Adds a functional search box to your template with tons of options for editing the element.
- A number of charts, bars and counters
- Video – Embed a video to your page. All major website are supported: YouTube, Vimeo, Dailymotion, …
- Slider – Insert a slider with either images or text. Customize controls and appearance.
- Audio – Insert playback controls for your audio file. You can add mp3 links or ogg links.
- Creative Posts Slider – Slide / drag posts left or right with this creative element. Set the number of items and hover actions.
- Features – An element that unites Title > Icon > Text in one go. This element is “Features” element.
- Featured Post – Create and name a standard post from WordPress backend and publish it.
- Contact Form – Insert a fully customizable contact form with additional optional field and standard controls.
- Recent Posts – This element always displays the latest post from your back-end. Simmilar to Featured post.
This is a powerful plugin, I liked it – setup and install was a breeze and it was very easy to use. The amount of included elements is great – I did notice a small bug which was when I created a button and gave it background color this wasn’t applied on the front-end as the theme I choose to test with was overwriting it, this is an easy fix for them though. The actual plugin itself looks good – the page editing area blends in with WordPress itself. I would have probably kept the settings area matching WordPress also as they have added a dark background and tabs, end-users are used to how the WordPress admin UI looks so its generally best practice to match this with your plugin.
I can see two users for this plugin – it looks handy for designers creating sites for their clients, hand coding each required page takes time so using this plugin you are cutting down on development time. Also, it could be handy for end-users who want to add new pages to their site without having to hire a designer each time. If either of these scenarios sound like you then give it a go – at a cost of just $20 this plugin represents great value.