INTRODUCTIONBold Builder Shortcodes / Elements

List of all plugin shortcodes/elements:

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.

Section

Section is a basic content element in the Bold Builder.

Detailed instructions about Section options read here.

Row

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

Detailed instructions about Row options and layout read here. You can find layout examples on this page – Row Layouts.

Column

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

Detailed instructions about Column options and layout read here.

ELEMENT 01Accordion

Accordion

Once you add Accordion element, make sure to add Accordion Item:

Accordion

Below is the list of elements that can be added to Accordion Item:

Accordion

Example:

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

ELEMENT 02Button

*From version 3.0.0 of Bold Builder new feature is added to Alignment field.
Alignment on mobile allows you to set different alignment depending on a device. For example, you can have button aligned left on desktop and laptop, and then center align it on tablet and mobile.

Button

Example:

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

ELEMENT 03Contact Form

Contact form

Example:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2023/11/contact-form-f.png

ELEMENT 04Countdown

Countdown

Example:

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

ELEMENT 05Counter

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

Example:

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

ELEMENT 06Custom Menu

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

Example:

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

ELEMENT 07Google Maps

IMPORTANT NOTE:
Please note that Google has, starting July 16, 2018, made certain API and billing changes. In order to enable billing, you will need to provide credit card or billing account to Google Maps platform. Please note that we are in no way associated with Google Maps and their payment system and for any questions and issues regarding payments and billing you will need to contact them. Please refer to their FAQ and their documentation to learn more about these changes.

Google maps require an API key for site domains. Follow the next steps:

  • First step is to get location’s longitude and latitude. This article explains how – Find or enter latitude & longitude.
  • When the location is added, please Get your API key.
  • Then locate the Google Map element in Bold Builder and enter your API key.

On Snazzy Maps are available all kinds of Google Map styles. The required map code is added to the Custom map style array field.

*Since Bold Builder version 3.1.0, it is possible to use static Google image map, instead of interactive map.

To display static image map, first go to mapstyle.withgoogle.com. You have two options – Cloud-based Maps styling, and standard style. Select whichever you find suitable for your site.

Once you make changes, click on the ‘Finish’ button at the bottom of the page.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2021/04/map_01.png

A pop up screen will appear with the URL that you need to copy. You need to copy the URL from ‘&style’ to ‘&size’.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2021/04/map_02.png

Copy that URL to ‘Custom map style array’ field in Google Maps element of Bold Builder.

And lastly, in the ‘Map type’ field select ‘Static Image’ option.

Google Map
Google Map

Once you add Google Maps element, make sure to add Google Maps Location (multiple locations available):

Google Map

Below is the list of elements that can be added to Google Maps element:

Google Map

Example:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2018/05/google-map-f.jpg

ELEMENT 08Headline

NEW AI FEATURE:
Starting with Bold Builder version 4.7.0 it is possible to use OpenAI API to generate content for Headlines – Read more about AI Features.

Headline

NEW FEATURE: From version 3.0.0 of Bold Builder two new features are added to Headline element.
1) You can set different headline size for different devices.
2) Alignment on mobile allows you to set different alignment depending on a device.

Headline

NEW FEATURE: Now you can select text transform options for Headline, Superheadline, and Subheadline within the element.

Headline

Frontend Example:

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

ELEMENT 09Icon

NEW FEATURE: Alignment on mobile allows you to set different alignment depending on a device. For example, you can have icon aligned left on desktop and laptop, and then center align it on tablet and mobile.

Icon

Example:

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

ELEMENT 10Image

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

NEW FEATURE: Alignment on mobile allows you to set different alignment depending on a device. For example, you can have image aligned left on desktop and laptop, and then center align it on tablet and mobile.

Image

Image element can include:

Image

NEW FEATURE: In order to trigger Lightbox on individual image element, you need to enter leave URL field empty and choose Target – Lightbox.

Image

Example:

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

ELEMENT 11Image Grid

Image Grid

Example:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2023/11/image-grid-f.png

ELEMENT 12Image Slider

Image Slider

Example:

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

ELEMENT 13Inner Row

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

Once you add Inner Row element, make sure to define layout and add Inner Column:

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

Example:

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

ELEMENT 14Latest Posts

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

Example:

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

ELEMENT 15OpenStreet Map

The following article is on how to get longitude and latitude for your location – Find or enter latitude & longitude.

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

Once you add OpenStreet Map element, make sure to add Location (multiple locations available):

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

Below is the list of elements that can be added to OpenStreet Map element:

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

Example:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2019/08/openstreet-map-f.jpg

ELEMENT 16Post Grid

Post Grid

Example:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2023/11/post-grid-f.png

ELEMENT 17Price List

Price List

Example:

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

ELEMENT 18Progress Bar

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

Example:

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

ELEMENT 19Raw Content

Raw Content

Example:

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

ELEMENT 20Separator

Separator

Example:

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

ELEMENT 21Service

NEW AI FEATURE:
Starting with Bold Builder version 4.7.0 it is possible to use OpenAI API to generate content for Service – Read more about AI Features.

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

Example:

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

ELEMENT 22Shortcode

NEW ELEMENT: Now you can add shortcodes of plugins such as Bold Timeline, Cost Calculator, Contact form 7, etc.

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2024/01/shortcode.png

Example:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2024/01/shortcode-f.png

ELEMENT 23Simple Cost Calculator

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

Once you add Simple Cost Calculator, make sure to add Simple Cost Calculator Item:

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

Example:

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

ELEMENT 24Slider

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

Once you add Slider element, make sure to add single Slider Item:

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

Slider Item can include:

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

Example:

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

ELEMENT 25Tabs

Tabs

Once you add Tabs element, make sure to add single Tab Title:

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

Tabs Item can include:

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

Example:

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

ELEMENT 26Text

NEW AI FEATURE:
Starting with Bold Builder version 4.7.0 it is possible to use OpenAI API to generate content for Text – Read more about AI Features.

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

Example:

https://documentation.bold-themes.com/bold-builder/wp-content/uploads/sites/33/2020/03/text_f.jpg

ELEMENT 27Video

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

Example:

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

Masonry Image Grid (deprecated)

Please note that this element is deprecated, and no longer in use. We recommend using Image Grid element instead.

Masonry Post Grid (deprecated)

Please note that this element is deprecated, and no longer in use. We recommend using Post Grid element instead.

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