INTRODUCTIONFront-End Editor

Starting with Bold Builder version 4.0.0 it is possible to edit most of the elements on the front-end.

PLEASE NOTE!
1. This option is available on themes starting from Law Firm to newer ones.
2. Not all element options are available to be edited on the front-end.
3. At the moment, only elements from the Bold Builder plugin can be edited on the front-end. Those that are theme specific or those that have been customized for the theme can only be edited in back-end editor.

SECTION 01Enable frontend editor

In order to enable frontend editor on specific page, click on the button in the bottom right corner.
https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2024/05/enable-fe.png

Once the editor is visible, navigate to the section / element you want to edit, and click on them.

SECTION 02Add New Section

Once you enable FE editor, you can start by adding a new section (with row and columns).

The latest Bold Builder update allows you to add new section (and row and columns) from the frontend editor.

If you are editing newly created page in frontend editor, the ‘Add Section’ panel will be visible first.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2024/05/new-page-section.png

If you are editing page with pre-existing content, the ‘Add Section’ panel will display below last section (but above footer).

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2024/05/new-section.png

To add a section click on one of the columns’ number options.

This will add section, row, and selected number of columns to the page.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2024/05/choose-columns.png

How newly added section will display:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2024/05/added-section.png

SECTION 03Section editor

In order to see edit options for the Section element, hover over the section number (top left corner). Here is the breakdown of available options.
Front Editor
  1. Edit – clicking on this button will open front-end editor for the Section element. Please note that not all edit options are available in the front-end editor.
  2. Edit in the back-end editor – click on this option if you want to edit in the back-end editor. Note that if you hover over this button, you will see an option to open back-end editor in a new tab.
  3. Cut – click on this option if you want to cut the section from one page and paste it elsewhere.
  4. Copy – this option allows you to copy the section from one page to the other, or to different part on the same page.
  5. Paste – click on this button will paste previously cut / copied section(s) below this section. Note that if you hover over this button, you will see an option to paste section(s) above the current section.
  6. Delete – by clicking on this option you will delete entire section and its content.

SECTION 04Row / Column editor

Clicking on a specific row or column element will open the edit panel with available options that can be edited in frontend editor.

Edit Row panel:

Front Editor

Edit Column panel:

Front Editor
*Please note that the available options might differ if you are using one of our premium themes.

SECTION 05Add New Element

Starting with Bold Builder version 4.9.2, you can also add individual elements through frontend editor.

To open elements’ list, click on the green button in the bottom right corner.

Front Editor

On the left side you will see a list of available elements.

Front Editor
*Please note that the available elements might differ if you are using one of our premium themes.

The elements are added by dragging them to desired column (*elements can only be added to the columns).

Front Editor

SECTION 06Drag & Drop

In addition to new elements being added through drag & drop, the pre-existing elements can also be moved from column to column using this method.

To move an element, left click on it and hold. Then start dragging it to the column where you want to place it.

When moving the element around you will see an orange colored border where it is possible to place the element.

Additionally, the text will display to indicate exactly above or below what element you can drop it.

Please have a look at the screenshot below.

Front Editor

SECTION 07Elements editor

In order to edit Bold Builder elements on the frontend, you need to first hover over an element you want to edit, and when light blue overlay appears, left click on that element. On the left side you will see editor for that specific element.
Front Editor

*As mentioned above, not all options are available to be edited on the front-end.
For most elements, available options for frontend editing are those that, in the backend, are in ‘general’ and ‘design’ tabs.

Lastly, if you are using one of our premium themes, note that elements specific to that theme, or those that have been additionally customized for the theme, might not be editable on the frontend, or not have all options available on the frontend to edit.

SECTION 08Saving changes

Once you make changes to the Section or any other element, red "save icon" will appear in the bottom right corner.

In order to save the changes made on the page, you need to click on the save icon before refreshing the page or going to other pages.

Front Editor

IMPORTANT NOTE:
When you edit in one of the editors (back-end or front-end) you need to save changes before switching to the other editor, otherwise they won’t be saved.
E.g. If you are editing in back-end editor, first click on ‘Update’ button, and then go to front-end of the page where you can further edit in front-end editor.

SECTION 09Copy / Paste Section

Here is how to copy and paste sections from the frontend editor:

Click on one of these two options to select the section:

If you click ‘Cut’, the section will be removed from that position / page, and added to clipboard.
If you click ‘Copy’, the section will remain in the same place, and it will also be added to clipboard.

Front Editor

Then navigate to another section on the same or some other page, and click the ‘Paste’ option.
Note that if you hover over this button, you will see an option to paste section above the current section.

Front Editor