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!
Section is the basic building block of Bold Builder. It is the first element added to the page, and it contains all other elements of the page.
Each new section is added by clicking on + button.
Here’s the break-down of all options in Section’s edit panel.
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.
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.
Please note that layout options may vary depending on which one of our themes you have.
Once you’ve added Row element, 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.
**Starting from the Bold Builder version 3.0.0, you can set different number of columns on each device (desktop, laptop, tablet, mobile).
Row element is based on Bootstrap’s 12 column grid, and you can have 1,2,3,4,5,6, and 12 columns in a row.
**5 columns feature was added from 3.0.0 version of Bold Builder.
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.
Two new features are added to Column element from the version 3.0.0.
Column alignment on mobile allows you to set different alignment depending on a device. For example, you can have column aligned left on desktop and laptop, and then center align it on tablet and mobile.
Second feature is column order which allows you to change order of the columns on different devices.
Now when you have columns, you can repeat same process to add some content to columns:
The following video explains how to add Row, Columns, and shortcodes.
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.
Video tutorial below shows how this can be done.
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.
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.
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.
Bold Builder elements can be edited by hovering over them.
*As mentioned above, not all 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.
Once you make changes to the Section or any other element, 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.
Please note that 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.
To override menu, just enter menu name in the Menu Name field.
The possible values for the settings can be found in the Theme Customization part as a preformatted text below the setting name. If you want to reset a setting to default value, just enter ‘null’ (without quotes). Click ‘+’ button to add new override and ‘-’ button to remove previously entered override.
Please have a look at the following example:
In order to edit / remove excerpt text, navigate to the Page editor, and in Screen Options (at the top of the dashboard) enable Excerpt field.
After that, scroll to the bottom of the page editor where you’ll find Excerpt text.
The Header background image represents featured image added to the page. In order to replace existing image with your own, click on the image, and when redirected, select image from Media Library.
In order to entirely remove the image, click on ‘Remove featured image’ button.
In order to remove entire Header from pages, make sure to check ‘Hide Default Headline’ field in Appearance >Customize >General Settings panel, or in Override Global Settings at the bottom of the page editor:
Custom Primary Menu Name
Enter name of the menu that you want displayed as the primary menu on specific post.
Custom Footer Menu Name
Enter name of the menu that you want displayed as the footer menu on specific post.
Images
Click Select or Upload Images to create gallery or add just a single image.
Grid Gallery
Check Grid Gallery to create grid gallery, otherwise gallery is displayed within a slider/carousel. Do not forget to upload the images you want to display as gallery and check Gallery Format in the Format box (on the right part of the page).
Video
In order to add Video post, enter Vimeo video URL, YouTube video URL or custom video shortcode in the Video field. Do not forget to check Video post format in the Format box.
Audio
If you want to create the Audio post, Audio field is where you enter audio shortcode or SoundCloud iframe embed code. Do not forget to check Audio post format in the Format box.
Link and Link URL
In order to create Link Post, enter link title in Link field and link URL in Link URL field. Do not forget to check Link format in the Format box.
Quote and Quote Author
To create quote post enter data in Quote and Quote Author fields. Do not forget to check Quote format in the Format box.
Override Global Settings
As with pages, here you can override global settings – for more info refer to the previous section “Override Theme Settings on Pages”.
If the single posts appear as they are not formatted, and are overlapping the menu, that probably means that their template page is not set correctly.
In order to fix this, make sure that the template page (Blog single) is published, and its slug is added to Settings page slug field in Appearance >Customize >Blog panel.
In order to edit / remove excerpt text, navigate to the Post editor, and in Screen Options (at the top of the dashboard) enable Excerpt field.
After that, scroll to the bottom of the page editor where you’ll find Excerpt text.
The Header background image on single posts represents featured image added to the posts or their template page (Blog single). In order to replace existing image with your own, click on the image, and when redirected, select image from Media Library.
In order to entirely remove the image, click on ‘Remove featured image’ button.
*Please note that once the featured image is added to the single posts’ template page, it will override the featured image added to the post.
In order to add sidebar to single posts, navigate to their template page (Blog single), and in Override Global Settings panel, select ‘Sidebar’ setting, and select its position (left / right).
To remove sidebar, select ‘No Sidebar’.
*Note that sidebar can also be displayed on selected posts, by adding it to the post’s Override Global Settings.
In order to remove entire Header from single posts, make sure to check ‘Hide Default Headline’ field in Appearance >Customize >General Settings panel, or in Override Global Settings at the bottom of the Blog single page editor:
Images
Click Select or Upload Images to create gallery or add just a single image.
Grid Gallery
Check Grid Gallery to create grid gallery, otherwise gallery is displayed within a slider/carousel.
Video
In order to add Video post, enter Vimeo video URL, YouTube video URL or custom video shortcode in the Video field.
Audio
If you want to create the Audio post, Audio field is where you enter audio shortcode or SoundCloud iframe embed code.
Custom Fields
Enter any number of key/value pairs, e.g. Year/2015, etc.
Override Global Settings
As with pages, here you can override global settings.
If the portfolio posts appear as they are not formatted, and are overlapping the menu, that probably means that their template page is not set correctly.
In order to fix this, make sure that the template page (Portfolio single) is published, and its slug is added to Settings page slug field in Appearance >Customize >Portfolio panel.
In order to edit / remove excerpt text, navigate to the Post editor, and in Screen Options (at the top of the dashboard) enable Excerpt field.
After that, scroll to the bottom of the page editor where you’ll find Excerpt text.
The Header background image on portfolio posts represents featured image added to the posts or their template page (Portfolio single). In order to replace existing image with your own, click on the image, and when redirected, select image from Media Library.
In order to entirely remove the image, click on ‘Remove featured image’ button.
*Please note that once the featured image is added to the single portfolio posts’ template page, it will override the featured image added to the post.
In order to add sidebar to portfolio posts, navigate to their template page (Portfolio single), and in Override Global Settings panel, select ‘Sidebar’ setting, and select its position (left / right).
To remove sidebar, select ‘No Sidebar’.
*Note that sidebar can also be displayed on selected posts, by adding it to the post’s Override Global Settings.
In order to remove entire Header from portfolio posts, make sure to check ‘Hide Default Headline’ field in Appearance >Customize >General Settings panel, or in Override Global Settings at the bottom of the Portfolio single page editor: