To create a new Page you need to follow these steps:
When you create a page you will see Switch Editor button. If you do see classic WordPress’ HTML editor, please click Switch Editor button to get Bold Builder editor.
In the lower part of the screen you can see Bold Builder main toolbar. Main toolbar options are:
See in action Toolbar options in the following video tutorial. Make sure to subscribe to our YouTube channel!
Once you add a section, place your mouse pointer over top area to show toolbar. Click ‘+’ to add a Row which is another basic content element. Now click ‘+’ in Row toolbar to add columns.
Next, place your mouse pointer over top area to show toolbar. Click ‘+’ to add a Row which is another basic content element. Now click ‘+’ in Row toolbar to add columns.
From Select Layout dialog you need to pick wanted layout of columns, e.g. 1/2+1/2 will add two columns with same width.
Note that Row element is based on Bootstrap’s 12 column grid, meaning you can have 1,2,3,4,6, and 12 columns in a row. Once you select the number of columns, you can set their width as well.
For example, the following row has two columns where left column is 3/4, and right one is 1/4.
Now when you have columns, you can repeat same process to add some content to columns:
Bold Builder allows you to set the row width independently from section’s width. In General Settings of Row element, you can select desired row width.
With this option you can box content in individual rows even if the section is set to wide. You can either box both columns, or select boxed left or right.
Note that this feature works best if section is set to wide, and there are two columns in a row.
Here are examples of each option:
1. Boxed 1200px
2. Boxed left 1200px
3. Boxed left 1200px, wide content
4. Boxed right 1200px
5. Boxed right 1200px, wide content
6. Boxed left and right 1200px
7. Boxed left and right 1200px, wide content
To edit content element properties, click Edit icon from element toolbar. You will see Edit dialog with various options, depending on which shortcode you are editing:
Watch Drag & Drop video tutorial:
All sections, rows, columns or elements can be copied and pasted on pages.
The best (and fastest) way to learn more about content creation and individual shortcodes (content elements) is to import demo and explore demo content.
Video tutorial below shows how this can be done.
It can be used to apply new CSS for that one specific element, or to create anchor links.
If you want to apply CSS, add desired ID to the field, for example ‘myID’. Then add CSS code to Additional CSS field in Customize panel. For example:
#myID { color: #fff; }
To create anchor links navigate to the Bold Page Builder and edit desired section. Insert in Custom Tab Element ID attribute:
Then in Appearance > Menus add a new Custom Link and as a URL insert custom ID atribute with #.
For example: #about
Here you can add existing class to apply its CSS to the section, or create new class with different CSS. If you want to apply custom CSS, add desired class name to the field, for example ‘myClass’. Then add CSS code to Additional CSS field in Customize panel. For example:
.myClass { color: #000; }
First thing you need to do in order for the color schemes to work is to define Accent and Alternate color. This is done in Settings >Bold Builder on your dashboard.
Then you can select desired color scheme within element, in Design tab.
*example from section
Here is a breakdown of what each color scheme does:
*Note that when section has background image or custom background color, color defined as background color within color scheme will not display.
The above examples refer to section, row, and column elements.
If the color scheme is defined in, for example, Headline element, it will affect superheadline, headline, and subheadline text. Subheadline and Headline will be first color of color scheme, and superheadline will be second color of color scheme.
In case of Button element, first color in color scheme will be the color of text, and second one will be background color.
In order to export the section you created from one page / site, and import it to another one, please follow these steps:
1. Open page you want to copy, and click on Copy button.
2. Then, click on the two arrows at the bottom of the screen.
3. On the pop up that appears, click export, and copy the symbols that appear.
4. After that select to add new section to the page / site where you want to copy it. Click on the blue button to add it.
5. Then again click on the two arrows on the bottom of the screen, paste the symbols you previously copied, and click ‘Import’ button.
6. Close the pop up, and on the Section settings panel click ‘Paste’. Make sure to save changes and now your section should be properly copied.