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.
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.
In the lower part of the screen you can see Bold Builder main toolbar. Main toolbar options are:
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 in a Row element to show toolbar. Click ‘+’ to select number of columns in that row and their width.
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:
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:
All sections, rows, columns or elements can be copied and pasted on pages.
See in action Drag&Drop feature and quick preview from backend or edit function from frontend in the following video tutorial.
Make sure to subscribe to our YouTube channel!
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.
To use Custom menu on a page, just enter menu name in Menu Name input box.
The best (and fastest) way to learn more about content creation and individual shortcodes (content elements) is to import demo and explore demo content.
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:
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”.
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.
Packages are created as standard WooCommerce products.
In order to create subscription for packages, you can use WooCommerce Subscriptions add-on.
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.
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!
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.
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.
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.
Additional feature that is added to listings is an option to view in which package is each of the listings, on All Listings list.