INTRODUCTIONFront-End Editor
PLEASE NOTE!
1. This option is available on themes starting from our “Law Firm” WordPress Theme to newer ones.
2. Some theme specific elements’ options are not available to be edited on the front-end.
SECTION 01Enable frontend editor
Once the editor is visible, navigate to the section / element you want to edit, and click on them.
SECTION 02Add New Section
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.
If you are editing page with pre-existing content, the ‘Add Section’ panel will display below last section (but above footer).
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.
How newly added section will display:
SECTION 03Section editor
- 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.
- 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.
- Cut – click on this option if you want to cut the section from one page and paste it elsewhere.
- Copy – this option allows you to copy the section from one page to the other, or to different part on the same page.
- 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.
- Delete – by clicking on this option you will delete entire section and its content.
SECTION 04Row / Column editor
Edit Row panel:
The Columns layout option (Row element → General tab) controls how wide the row is and how its columns are aligned inside that width. It has two parts:
1. Row width — the maximum content width of the row.
2. Columns structure — how the first/last columns behave within that width.
First you need to set the Row width, and its options are:
Default (wide), 1200px, 1300px, 1400px, 1500px, 1600px
If you select ‘Default (wide)’ as row width, the row will be full-width (as the section), and the structure options are disabled.
When you select one of the other width options (1200px, 1300px, 1400px, 1500px, 1600px), you’ll be able to set the column structure.
Here are the options for the content layout. You can find layout examples on this page – Row Layouts.
IMPORTANT NOTE:
For the best results, set the Section’s layout to ‘Wide’, then set the Row width to one of the boxed options, and only add two Columns to that Row.
Edit Column panel:
SECTION 05Add New Element
To open elements’ list, click on the green button in the bottom right corner.
On the left side you will see a list of available elements.
The elements are added by dragging them to desired column (*elements can only be added to the columns).
SECTION 06Drag & Drop
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.
SECTION 07Elements editor
*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 08Undo / Redo
When you enable frontend editor, undo / redo buttons will be visible in the bottom right corner.
Once you edit an element, undo button will become clickable.
And once you click on undo button, redo button will become clickable as well.
When you save changes and refresh the page the buttons will no longer be active, until you edit an element again.
SECTION 09Saving changes
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.
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 10Copy / Paste Section
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.
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.
