INTRODUCTIONCreating Pages and Posts
In this section you can find all the information needed to create your pages, your blog posts and your listing items.
SECTION 01Creating Pages
Simple pages are usually referred in WordPress as static contents. That means that the information displayed on a page doesn’t change, or doesn’t change often. A great example of a page would be the About or Contact Us section of a website.
To create a new Page you need to follow these steps:
- Navigate to Pages in your wp-admin sidebar and click Add New option.
- Input a new name for your page, then enter the content using Bold Builder.
- Set page settings and add Override Global Settings if needed.
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 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.
In the lower part of the screen you can see Bold Builder main toolbar. Main toolbar options are:
- Undo – you can undo your changes to page layout using this button.
- Redo – you can redo your changes to page layout using this button.
- 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.
- 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.
- Preview – the same as Preview button on the Page edit form – by clicking on it you can preview the current page layout.
- 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 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.
General settings:
- Layout – here you can select the width of the section.
- Top / Bottom spacing – set the top and bottom padding of the section.
- 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.
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.
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).
- 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.
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.
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.
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.
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.
SECTION 06Drag & 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:
Watch Drag & Drop video tutorial:
All sections, rows, columns or elements can be copied and pasted on pages.
SECTION 07Hide 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 08Export 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.
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.
SECTION 09Front-end Editor
Starting with Bold Builder version 4.0.0 it is possible to edit most of the elements on the front-end.
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.
- 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.
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.
SECTION 10Override Theme Settings on Pages
As mentioned in section 3 – Theme customization, all global settings can be overridden on any single post or page. In the Settings box, you will find Override Global Settings dropdown which allows you to choose which setting you want to override.
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:
SECTION 11Excerpt text and Header background image
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:
SECTION 12Creating Blog Posts
Posts are based on standard WP functionality with some additional settings:
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”.
ARTICLE 01FAQ
In this section you will find the most common questions regarding the editing of single blog posts.
Post is overlapping the menu
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.
How to edit / remove Excerpt text?
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.
How to change / remove Header background image?
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.
How to add / remove sidebar from single posts?
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.
How to entirely remove Header from single posts?
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:
SECTION 13Creating Packages
In the section below, you'll find how to create product category for packages, as well as packages and subscription.
1. Category
Before creating packages, first you need to create product category for those packages. The category needs to be named ‘Listing Package’, with a slug ‘listing-package’.
All the listing packages that you want to sell should be added to this category.
2. Packages & subscription
Packages are created as standard WooCommerce products.
In order to create subscription for packages, you can use WooCommerce Subscriptions add-on.
SECTION 14Listing Categories
First category that needs to be created is the root category. The category should be named ‘_listing_root’, with the same slug.
This category should contain custom fields that you want to be available in all other categories, as default fields. These fields will be visible in all listings’ interface.
Once the root category is created, add its slug to Root Category Slug field in Appearance >Customize >Bello General Options.
Listing categories are based on standard WP functionality with some additional settings. You will learn more on additional settings in the section below.
SECTION 15Custom Fields
Custom Fields panel is where you define both the fields one category will have, as well as the look of the user's front end.
Fields are grouped in special field groups in order to show them in coherent way. Bello theme has five groups and eight widgets that you can use. List of fields can be found on the following link.
For the fields to be defined and displayed on the Listing, they need to contain the following information:
1. Heading for the same set of fields.
heading_contact;Contact Information;heading
The field title is ‘heading_contact’, then goes the label (in this case ‘Contact Information’), and ‘heading’ is a field type.
Here is an example from Accommodation category, and its contact fields.
On the listing’s frontend, the heading will display like this:
2. Then, optionally, you can add description for this group of fields.
desc Use the following fields to show all the contact information about your business on the details page. Note that some of the fields might not be displayed, depending on the subscription you have for your listing.
First, it needs to have ‘desc’ added, with an empty space in front, and then you can define description, in a new line, with two empty spaces in front.
On the listing’s frontend, the description will display like this:
3. Lastly, each field needs to be defined, by first adding field title, then name, field type, and, optionally widget slug, so that this field can be displayed in BT Listing widget.
contact_address;Address;text;widget_contact_details
The ‘contact_address’ is a field title, ‘Address’ is a name, field type is ‘text’, and widget with a slug ‘contact_details’.
Field title – Used for identifying a metabox field, these must be unique, not only within a category, but also within parent and child categories.
Name – Used for the label of the field.
Field type – Field type being used.
Widget slug – Used to define field group in one of the widget areas. You can learn more about widgets’ settings in the following chapters.
On the listing’s frontend, the fields will display like this:
The example above is for contact details’ fields. These fields are input type fields. There are also checkbox fields (Amenities), image galleries (Media), etc.
When you save the category, after adding all custom fields, you will have an option to select the package in which the fields will be available, as well as the search options.
See how to add custom fields to a category in the following video tutorial.
Make sure to subscribe to our YouTube channel!
Custom Fields video tutorial
SECTION 16Custom Field Settings
Custom Field Settings panel is where you define search options for each of the fields in the category, as well as the package in which that field will be available.
The ‘Search’ and ‘Advanced Search’ allow you to set the fields available for these options. You can set any of the fields added to the field groups to be available in either Search or Advanced Search.
*Please note that the search options are mutually exclusive, meaning that one field can be enabled only in one of the search options.
When ‘Mandatory’ option is enabled, Listing creator/user will be required to fill in that field.
Packages option defines in which package will this field be available for Listing creators/users.
Default package is a free package that anyone can use to create Listing. This package usually has the least fields available from all the packages.
Other packages are paid packages. They usually have most of the fields available for Listing creator/user, depending on their price. These paid packages can be created and edited in WooCommerce Products panel.
You can learn more on how to create packages in our previous chapter.
Each listing category allows you to add images that will represent that category on the map. They will display as pins, and you can add the one that will display by default, and one that will be visible when that category is selected.
SECTION 17Widget
Field groups displayed as widgets.
In order to have field group / custom field displayed in one of the widget areas, you need to add necessary slug to each of the fields.
The slug needs to be in the following form:
widget_contact_details
There are eight widgets available in Bello theme. You can find more info on them on this link. Note that new groups can, at the moment, only appear underneath the main column content for each of the listings, and not in widget area. Hierarchy in the main column is such, that any new group other than the ones named bello will be shown below main content (text), excerpt, Media, MediaVideo and FAQ, but above the Amenties.
After that, the slug should be added to BT Listing widget, in Appearance >Widgets panel. The widget can be added to any of the widget areas – sidebar, header widgets, etc.
The fields will look like this on the frontend when added to sidebar.
SECTION 18Single Listing
When creating new listing in the backend, first select category (s) in which the listing will be, and save those changes (publish listing or save draft).
Only then you’ll be able to see all the custom fields of that category (s) in single listing.
From theme version 1.1.0, there are several new fields added to the backend editor of single listings.
- Featured Listing – this field allows you to choose whether the listing will be featured or not. You can set it to inherit the settings of the package it is in, meaning, if the package is featured, the listing will also be made featured, and vice versa. Or you can set to be featured independently from the package it is in.
- Package – this field allows you to change the package in which your listing is added. Note that you can only switch between packages if you have premium packages purchased.
Additional feature that is added to listings is an option to view in which package is each of the listings, on All Listings list.
