Home 3. Creating Pages

SECTION 01Creating Pages

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

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.

http://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.
http://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. Once you click clipboard manager button and then click Export, Bold Builder exports.
  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 03Row Layout

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.
http://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2017/11/bold_builder_02.jpg

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.

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

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.

http://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2019/01/Screenshot_1-1.jpg

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

http://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2017/11/bb-columns.jpg

SECTION 04Drag & Drop

You can rearrange elements using drag and drop, clone and clipboard commands.

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:

http://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2018/05/Screenshot_2.jpg

Watch Drag & Drop video tutorial:

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

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

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

SECTION 05Hide on Responsive

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.