5. Frontend Editor

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 that not all element options are available to be edited on the front-end.
Also, at the moment, only elements from the Bold Builder plugin can be edited on the front-end. Those that are specific for the theme you are using or those that have been customized for the theme can only be edited in back-end editor.

SECTION 01How to enable 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/2022/11/enable-frontend.png

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

SECTION 02Section 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.
https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2022/11/frontend_section.png
  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 03Elements 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 will be opened editor for specific element.
https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2023/06/BBicons.jpg

*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 04Saving 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.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2023/06/BBicons2.jpg

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 05Copy / 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.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2022/11/cut_copy.png

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.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2022/11/paste.png