The Frontend Editor, introduced from Uncode 2.2, is the new builder that many have been waiting for. With the Frontend Editor, you edit your content directly on the frontend of your website. You can see your layout as you build it, and you can preview exactly your design. Creating pages with the new Frontend Editor is very similar to the Backend method. The same Controls are available to add Rows, Columns, and Elements, and the only real difference is the workspace.

▶  

Toolbar

Within the new Frontend Editor, we have designed an unobtrusive workspace that stays out of the page as much as possible. This minimalist approach allows you to see your content and layout clearly, while still giving you access to the tools you need. The only things that really differentiates it from a frontend page are the Toolbar along the top, and the few icons at the end of the content to add new items. Note that you can also have the toolbar in a compact vertical layout that completely free your stage and design, screenshot .

The Toolbar provides access to many building tools. Let’s have a look at the Toolbar's components:

• Add: this icon allows you to add a new Row or Element (Posts, Heading, Text, etc...).
• Layouts: this accesses the Wireframe plugin library (if active) and the Template library.
• Minimize: modify the Toolbar from horizontal to compact vertical layout.
• Focus: activate the 'Safe Mode' for a simple editing experience.
• Arrows: these show the history states, allowing you to step backward throughout your actions.
• Gear: here you can access the page Custom CSS.
• Displays: here you can preview the page in desktop, tablet, and phone responsive mode.
• Exit: this exists the Frontend Editor and takes you to the frontend page.
• Backend: this closes the Frontend Editor and takes you back to the Backend Editor.
• Update: the Update button allows you to save all the work done in the Frontend Editor.

Controls

When you are in the Frontend Editor, it's when you mouse over a content area (over a Column) that you see the relative Grid structure, the Rows, and Columns Controls and the Elements Controls.

Rows and Columns Controls work together, are grouped together and are positioned at the beginning of each Column. To reach the Row Controls you have to over the contents that are part of that Row, in a nutshell, the contents of the Column. For ease of use, the Row controls are repeated along with the controls of each Column. You can switch between the Row and Column Controls by expanding them with a simple click on the small arrow icon (caret). These are the major controls you have available in the Frontend Editor:

• Row: illustrated with a Dark Blue color, allows you to edit the settings or drag the Row;
• Column: illustrated with a Mid Blue color, allows you to edit the settings or drag the Column;
• Element: illustrated with a Light Blue color, allows you to edit the settings or drag the Element;
• Add: only visible in an empty Column, allows you to add a new Element;

Settings and Options

When you over a Column or an Element, Controls appear to show the full range of options for that item. The majority of these Controls are similar, although there are a few specific to the item:

• Name: by pressing the name turns the cursor into the drag icon and it's used to drag the Element.
• Settings: the pen icon opens the Settings where you can then configure the options.
• Layout (only for Rows): the lines icon opens the Row Layout where you can change the number of Columns.
• Clone (not for Columns): this duplicates the Element, which is then added below the Element cloned.
• Add (only for Columns): this opens the Add Element dialog, where you can add any of the Elements.
• Remove: this deletes the chosen Element from the layout.

Drag Elements

To drag a Row, a Column or an Element you just have to place the mouse over the name. You see the mouse pointer becomes the drag icon, at this point you can drag the element to another position among those available for that Element.

Row Z-index

When you're over on a Row this Row will automatically have a z-index greater than all others: a Row with greater stack order is always in front of a Row with a lower stack order. This is only visible if you have Off-Grid elements and allows you to reach the Controls that in some may remain hidden.

Content Blocks

The Content Block is a unique Uncode feature. This feature gives the website designer the ability to use Uncode WPBakery Page Builder to create and store sections of content that can then be integrated into other pages and used across the site. Content Blocks are widely used for creating headers and footers.

When you over a header or a footer you see a Control similar to the Element Controls. When you click on these Controls you will be redirected to the Frontend Editor of the specific Content Block. Please note that the linkage between a page and its Content Blocks is made via the Theme Options (general) or Page Options (single page). You can find more information in the dedicated documentation.

Safe Mode

This visualization mode is activated by the Focus icon placed in the main Toolbar and aims to simplify the editing of the page in certain critical situations or if the user prefers a more schematic view of the grid, the dimensions and all the elements inserted.
When this mode is active all the controls present and all the grids are visible, the off-grid elements are reset, the elements hidden by the responsive options become semi-transparent and additional spaces are added to simplify editing in the presence of Inner Rows.

Page elements

There are areas of the page that are not directly editable in the Frontend Editor, as their content is generated in the Theme Options, in the Page Options or other areas of WordPress. In a nutshell, the contents are not generated with the Page Builder and for this reason, it is not editable with the Frontend Editor. These are areas like the Breadcrumb, the Sidebars, the Comments, etc...

Specifications and exceptions

To make the Frontend Editor faster and more usable, there are some non-essential features that have been disabled, please take note of them. However, these small differences are also indicated in the option description:

• Slides Scroll: to allow effective editing of the layout, the Slides Scroll features are completely disabled.
• Scroll Snap: to allow effective editing of the layout, the Scroll Snap features are completely disabled.
• Autoplay: the autoplay option of the carousels (both Posts, Media Gallery and Content Slider) is disabled.
• Loop: the loop option of the Content Carousel is disabled.
• Content Block VC: the Content Block with Column Container Settings set to Yes is disabled.
• VC Particles: this plugin is not designed for the Frontend Editor and cannot, therefore, be viewed and edited.
• VC Clipboard: this plugin is not designed for the Frontend Editor.
• Mobile Menu: the layout of the mobile menu doesn't cover the window height in the Frontend Editor.
• Dave's Live Search: this is disabled in the Frontend Editor.
• Column Link: links applied to columns are removed in the Frontend Editor.

Element hidden behind the Controls

The Inner Row and Inner Column Controls are internal to the Column itself. In rare cases, specify when you have a very small Element this could remain hidden under these Controls making it impossible to drag or open the settings. If this happens, our advice is to momentarily insert another Element in the Column (such as a Text Block) and to drag it to the first position so that the Element to be edited is pushed down. Another solution is to activate Safe Mode.

Keyboard Shortcuts

There are a few useful shortcuts that can speed up your workflow in the Frontend Builder. Don't underestimate the power of these shortcuts, when used during the design workflow they can make a big difference:

• alt + s: save the actual options window.
• alt + w: close the actual options window.
• alt + d: change tab forward.
• alt + a: change tab backward.