SECTION 01Creating pages

In this section you can find all the information needed to create your pages using Bold Builder plugin.

IMPORTANT NOTE:
Some of the following options / features of Bold Builder may be different if you are using our Premium Themes: Bold News, Fast Food, Food Haus, Kids Club, Industrial, Fitness Club, Organic Food, Finance, Estato, Craft Portfolio, Shopscape, Hotel California, Showcase and Medicare.

To create a new Page you need to follow these steps:

  1. Navigate to ‘Pages‘ in your wp-admin sidebar and click ‘Add New option‘.
  2. Input a new name for your page, then enter the content using Bold Builder.

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.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2017/11/new_page.jpg

SECTION 02Bold Builder toolbar

Once you do that, you will see box with big ‘+’ button. Click on it to add a section which is basic content element in the plugin.
https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2018/05/Screenshot_1.jpg

In the lower part of the screen you can see Bold Builder main toolbar. Main toolbar options are:

  1. Undo – you can undo your changes to page layout using this button.
  2. Redo – you can redo your  changes to page layout using this button.
  3. Paste – you can paste clipboard contents to the bottom of the page layout. Just next to the paste button you can see a number which represents the number of items currently present on the clipboard.
  4. Clipboard Manager – This is unique feature of Bold Builder. You can easily copy and paste contents between different web sites. More info can be found in the section below.
  5. Preview – the same as Preview button on the Page edit form – by clicking on it you can preview the current page layout.
  6. Save – the same as Update button on the Page Edit Form – updates the layout of the page by saving the changes.

See in action Toolbar options in the following video tutorial. Make sure to subscribe to our YouTube channel!

SECTION 03Section options

Section is a basic content element in the Bold Builder. Each new section is added by clicking on + button. Here's a breakdown of its options.
Section Options
General settings:
  • Layout – here you can select the width of the section.
  • Top / Bottom spacing – set the top and bottom padding of the section. You can set different spacing for desktop and mobile devices.
  • Full screen – if full screen is selected, section will take up full viewport of the browser. Top and bottom spacing will be ignored.
  • Vertical align (for full screen section) – set the content’s vertical align when the section is set to full screen.
  • Lazy load background image – defer the loading of background image on a page.
Design settings:
  • Color scheme – select the content’s color scheme. If there is no custom background color or image set, section’s background will adjust to background of the selected color scheme.
  • Background color – set the section’s background color. Color won’t be visible if the background image is selected.
  • Background image – set the section’s background image.
  • Background overlay – here you can set the overlay of the section’s background.
  • Parallax – set if the section will have parallax or not. If the field is left empty, section will not have parallax, and if the value is added, the parallax will work.
  • Parallax offset in px – set the section’s offset.
  • Background parallax zoom start / end – set the background image to zoom in and out on scroll.
  • Background parallax blur start / end – set the background image to blur in and out on scroll.
  • Background parallax opacity start / end – set the background image to change opacity on scroll.
  • Top / Bottom Section Coverage Image – set the images that will display on top or bottom of section.
Video settings:
  • YouTube background video – paste the video’s URL to set it as a background.
  • Video settings – set desired settings for the video. You can find settings on the following link.
  • MP4 / OGG / WEBM background video – paste the video’s URL to set it as a background.
  • Show video on mobile devices – select if the video will be loaded on mobile or not. If it’s disabled add background image to the section.
Responsive settings:
  • Here you can select whether the section will be visible or hidden on certain screen sizes.
Custom settings:
  • Publish / expiry date – this feature allows you to set the time and date when the section will be published or when it will expire (meaning it will no longer be visible).
  • Animation – select the animation style of the section.
  • Element ID – can be used to apply new CSS for that one specific element, or to create anchor links.
  • Extra Class Name(s) – here you can add existing class to apply its CSS to the section, or create new class with different CSS.
  • Inline style – this field is used for inline CSS that will apply to the section.

To create a new Page you need to follow these steps:

  1. Navigate to ‘Pages‘ in your wp-admin sidebar and click ‘Add New option‘.
  2. Input a new name for your page, then enter the content using Bold Builder.

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.

SECTION 04Row layout

Following element that needs to be added to the section is Row. This elements defines number of columns and their width in section.

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.

Row layout

Bold Builder allows you to set the row width independently from section’s width. In Edit panel of Row element you can select row width to be 1200px or 1400px, with boxed and wide layout options for content.

You can adjust whether the content will be boxed or wide, and if that will apply to only first or last column, or both.

Note that this feature works best if section is set to wide, and there are two columns in a row.

Row layout

Here are the options for the content layout. You can find layout examples on this page – Row Layouts.

Row layout

SECTION 05Column layout

Following element that needs to be added is Column. This element is where Bold Builder shortcodes are added.

Once you’ve added Row element, click ‘+’ in Row toolbar to add columns.

Column layout

From Edit Layout dialog you need to pick wanted layout of columns, e.g. 1/2+1/2 will add two columns with same width.

NEW FEATURE: Starting from the Bold Builder version 3.0.0, you can set different number of columns on each device (desktop, laptop, tablet, mobile).

Column layout

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.
The most used structures are:
1/1+1/1
1/2+1/2
1/3+1/3+1/3
1/4+1/4+1/4+1/4
1/5+1/5+1/5+1/5+1/5
1/6+1/6+1/6+1/6+1/6+1/6

or combinations:
1/3+2/3
1/4+2/4+1/4
3/4+1/4
5/12+7/12
1/12+10/12+1/12

NEW FEATURE: 5 columns feature was added from 3.0.0 version of Bold Builder.

Column layout

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:

Column layout

NEW FEATURE: Two new features are added to Column element (from the version 3.0.0.):

  1. 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.
Column layout

2. Second feature is column order which allows you to change order of the columns on different devices.

Column layout

Now when you have columns, you can repeat same process to add some content to columns:

Column layout

The following video explains how to add Row, Columns, and shortcodes:

SECTION 06Drag & Drop

All the elements can be moved in backend using drag & drop.

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

You can use ‘up’ and ‘down’ arrows on your keyboard to scroll through the page.

Once you scroll to the column where you want to place the element, hover over it till you see pale blue color. The color indicates that the element can be placed there.

Please have a look at the screenshot.

Edit Image

Watch Drag & Drop video tutorial:

SECTION 07Edit Elements

To edit content element properties, click Edit icon from element toolbar.
Edit Image

You will see Edit dialog with various options, depending on which shortcode you are editing:

Edit Image

All sections, rows, columns or elements can be copied and pasted on pages.

Copy, Paste, Copy+, Edit

IMPORTANT NOTE:
The best (and fastest) way to learn more about content creation and individual shortcodes (content elements) is to import demo and explore demo content – Read more.

SECTION 08Hide on Responsive / Expiry Date

Bold Builder enables you to hide elements on different screen sizes. It also allows you to set when an element will be published and when it will stop displaying (expire).

Video tutorial below shows how this can be done:

SECTION 09Element ID / Extra Class Name

Element ID

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;
}
Custom Tab

To create anchor links navigate to the Bold Page Builder and edit desired section. Insert in Custom Tab Element ID attribute:

Element ID

Then in Appearance > Menus add a new Custom Link and as a URL insert custom ID atribute with #.

For example: #about

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2020/01/Screenshot_2.jpg
Extra Class Name(s)

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;
}
Custom CSS Class

SECTION 10Color Schemes

Color Schemes can be defined in Section, Row, Column, and several other elements (Headline, Button, Service, etc.)

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.

Color Schemes

Then you can select desired color scheme within element, in Design tab.

Example from the Section:

Color Schemes

Here is a breakdown of what each color scheme does:

  • Light: Black/White – background will be white and text will be black.
  • Dark: White/Black – background will be black and text will be white.
  • Accent/Black – background will be black and text will be accent color.
  • Black/Accent – background will be accent color and text will be black.
  • Accent/White – background will be white and text will be accent color.
  • Black/Alternate – background will be alternate color and text will be black.

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

Headline colors
Headline colors

In case of Button element, first color in color scheme will be the color of text, and second one will be background color.

Button Colors
https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2023/11/new_button_preview.jpg

SECTION 11Export Section

Here is how to export Bold Builder section(s) from one page to the other, or from one site to the other.

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.

Copy + Paste

2. Then, click on the two arrows at the bottom of the screen.

Copy + Paste

3. On the pop up that appears, click export, and copy the symbols that appear.

Copy + Paste

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.

Copy + Paste

5. Then again click on the two arrows on the bottom of the screen, paste the symbols you previously copied, and click ‘Import’ button.

Copy + Paste

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.

Copy + Paste

SECTION 12One Page site

In order to create one page site, please follow the instructions below:

1. First of all, navigate to the Bold Page Builder and edit desired section. Insert in required Custom Tab Element ID attribute:

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

2. Then in Appearance > Menus add a new Custom Link and as a URL insert custom ID atribute with #.

For example: #about

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

SECTION 13Custom CSS Field

Here is a breakdown of how Custom CSS field works on individual pages.

IMPORTANT NOTE:
The CSS code added through this field will NOT work on template pages, such as Shop or Blog page. It only works on regular pages. For template pages use page’s CSS class and paste the code in Additional CSS field in Appearance > Customize panel.

If you need to apply CSS code to just one particular page, you can do that by adding the code to Custom CSS field.

Custom CSS field is located at the top of the page, just under the page title.

Custom CSS

Once you click on the field, the pop up will appear, and that is where you can paste your code. When you add CSS code, click on the save button.

Custom CSS

When the CSS code is added to the field it will display in blue color.

Custom CSS

SECTION 14Custom icons

Please refer to the instructions (in .pdf documenta) below on how to add custom icons to your theme using Bold Builder: