6. Theme Shortcodes

INTRODUCTIONTheme Shortcodes

List of all theme shortcodes.

All the content is built using Bold Builder page editor. You can read more about Bold Builders’ features here.

Before you start creating a page, make sure to check how our editor Bold Builder works – 4. Creating Pages and Posts. First you need to add a section, then a row, columns and finally elements (shortcodes) listed in the following sections.

Specially for Val theme is created a new tab in Section – Posts.

Section

Val theme includes section filtering in Posts tab.

Here is the list of available filters:

  • Category Filter – type Post Category slugs separated by comma and show only posts in the section from that category (e.g. sport, business),
  • Post Format Filter – type Post Filter Format separated by comma (e.g. post-format-video, post-format-audio),
  • Taxonomy Filter – type Taxonomy slugs (tags etc.) separated by comma (e.g. tag:highlight, michael-jackson),
  • Post Author Username – type Author username and show only his posts (e.g. martin),
  • Date Filter – type strtotime()-compatible string (e.g. 7 days ago, 1 month ago),
  • Order by  – order posts Default (by date), Comment count descending,  Post views, Review rate descending or Random,
  • Show Posts Already Displayed on This Page – choose to Show or Hide,
  • Show Posts in Next Post Containers – choose to show Default (use other container’s settings) or to Force Show and repeat posts on the page,
  • Show Sticky Posts  – choose to Hide, Show in list or Show sticky posts on top.

For example: The post categories that will display in the section should be defined in Category filter field. It should contain the slug of the categories, separated by comma. If you want posts from all categories to be listed in the section, leave this field empty.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/newstar-section.png

Note: If section contains Articles Container element which lists posts with defined post categories or other, it will overrun the ones defined in the Section panel.

For example: On the following screenshot, column in the middle will inherit Color tag defined in Articles Container. The settings in Section (filter by post tag: Gallery) will be overridden.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/section-articles.jpg

Row

Val theme allows you to set negative margin between rows in the section.
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/row-margin.jpg

Here is the example:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/row-margin-f.jpg

SECTION 01Accordion

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion-item.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion-elements.jpg

SECTION 02Advanced Progress Bar

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/advanced-progress-bar.jpg

SECTION 03Article Teaser Template

Article Teaser Template element provides several options:

General Tab:
  1. Columns – enter number (eg. 3),
  2. Rows – enter number (eg. 4),
  3. Gap – gap between posts (0px, 5px, 10px, 15px1 20px, 25px, 30px, 35px, 40px, 45px, 50px),
  4. Color scheme – select one of the color schemes from the dropdown.
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-template.jpg
Title Tab:
  1. Title size – Extra Small, Small, Medium, Normal, Large, Extra large, Huge, Extra Huge,
  2. H tag – H1, H2, H3, H4,
  3. Heading font weight – Inherit/default, Bolder, Bold, Normal, Lighter, Light,
  4. Dash – None, Top, Bottom, Top & Bottom,
  5. Content style – Clear, Solid Background, Border, Left Border, Angled Background, Raised Background, Raised Background with Border.
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-title-tab.jpg
Image Tab:
  1. Image position – No Image, No Image, keep proportion, Background / Bottom Text, Background / Middle Text, Background / Side Text, Top, Top / Overlapping Text, Side, 1/4 width, Side, 1/2 width, Side, 2/3 width,
  2. Image style – Clear, Border, Border & Shadow, Shadow, Left Border, Angled Background, Raised Background, Raised Background with Border,
  3. Image format – Square, Horizontal 16×9, Horizontal 3×2, Horizontal 2×1, Vertical 16×9, Vertical 3×2, Vertical 2×1,
  4. Image base size – Large, Medium, Small,
  5. Custom image height – Any height in pixels,
  6. Image lazy load – effect visible on page load view,
  7. Image hover effect – No effect, Zoom In, Zoom Out, To Grayscale, From Grayscale, To Dark, To Light, Zoom In & Blur.
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-image-tab.jpg
Display Tab:
  1. Show categories – No, Supertitle, Supertitle highlighted, Subtitle, Bottom left, Bottom right,
  2. Show author – No, Supertitle, Subtitle, Bottom left, Bottom right,
  3. Show date – No, Supertitle, Subtitle, Bottom left, Bottom right,
  4. Show excerpt – Yes, No,
  5. Show comments – No, Supertitle, Subtitle, Bottom left, Bottom right,
  6. Show reading time – No, Supertitle, Subtitle, Bottom left, Bottom right,
  7. Show view count – No, Supertitle, Subtitle, Bottom left, Bottom right,
  8. Show rating – No, Supertitle, Subtitle, Bottom left, Bottom right,
  9. Show post format – Hide, Show on image, Show on image, only media (video, audio, gallery), Show on image center, only media (video, audio, gallery), Show next to title, Show next to title, only media (video, audio, gallery),
  10. Show read more icon – Hide, Show on bottom, Show on left.
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-display-tab.jpg

Here is the example:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-teaser-f.jpg

SECTION 04Articles Container

As mentioned in the Section description, if Section contains Articles Container element and you define for example different Post Categories than noted in the Section (Post tab) all post settings will be overrun.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-container.jpg

Article Container element provides several options:

  1. Post category filter – type Post Category slugs separated by comma (eg sport, business),
  2. Post format filter – type Post Filter Format separated by comma (eg. post-format-video, post-format-audio),
  3. Taxonomy filter – type Taxonomy slugs (tags etc.) separated by comma (eg. tag:highlight, michael-jackson),
  4. Post author username – type Author username (eg: martin),
  5. Date filter – type strtotime()-compatible string (eg, 7 days ago, 1 month ago),
  6. Show sticky posts – Hide, Show in list, Show on top,
  7. Show posts already displayed on this page -Show/Hide,
  8. Show posts in next post containers – Default (use other container’s settings) or Force Show,
  9. Order by – Default (ordered based on the publish date), Comment count descending, Post views descending, Review rate descending.

Here’s the example:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-container-1.jpg

In the screenshot, Section has defined Style tag in Post Tab. Middle column contains Articles Container (with Article Teaser element) which has Post Tag – Museum.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-container-f.jpg

SECTION 06Button

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/button.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/button-f.jpg

SECTION 07Contact Form 7

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2019/09/cf-7.jpg

SECTION 08Cost Calculator

Documentation on Cost Calculator plugin can be found on the following link.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/CC.jpg

Cost Calculator can include:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/cc-elements.jpg

SECTION 09Countdown

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/countdown.jpg

SECTION 10Counter

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/counter.jpg

SECTION 11Custom Menu

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/custom-menu.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/custom-menu.jpg

SECTION 12Google Maps

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

  • First step is to make sure to update the theme to the newest version.
  • When the theme is updated, please Get your API key.
  • Then locate the Google Map element in Rapid Composer and enter your API key.

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

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/google-maps.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/google-maps-location.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/google-map-elements.jpg

SECTION 13Headline

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/headline.jpg

Val theme allows you to edit Headline and choose style: Italic and Outline.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/11/Outline-font.png
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/headline-f.jpg

SECTION 14Icon

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/icon.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/icon-f.jpg

SECTION 15Image

Recommended image sizes:

  • Logo – 380px x 180px (large logo 450px x 200px);
  • Post’s featured image – 1920px x 1280px;
  • Product image – 1200px x 1200px.

*Note that these are the sizes used on our demo.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image.jpg

Image element can include:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-elements.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-f.jpg

SECTION 16Image Grid

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

SECTION 17Image Slider

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-slider.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/image-slider-f.jpg

SECTION 18Inner Row

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/inner-row.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/inner-row-layout.jpg

SECTION 19Masonry Image Grid (deprecated)

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/masonry-image-grid.jpg

SECTION 20Masonry 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/val/wp-content/uploads/sites/36/2018/10/masonry-post-grid.jpg

SECTION 21OpenStreet 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/val/wp-content/uploads/sites/36/2019/08/openstreet-map.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2019/08/openstreet-map-item.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2019/08/openstreet-map-elements.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2019/08/openstreet-map-f.jpg

SECTION 22Post Grid

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

Please note that the page set as the main Blog page in Reading Settings lists posts by default. Post Grid element should not be added to that page.

In order to have blog posts listed as Grid, proceed to create new page and add Post Grid element to it. Set the main Blog page as its Parent page.

SECTION 23Price List

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/price-list.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/price-list-f.jpg

SECTION 24Progress bar

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/12/percentage-bar.jpg

SECTION 25Promo Title

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/promo-title.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/promo-title-f.jpg

SECTION 26Raw Content

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/raw-content.jpg

SECTION 27Separator

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/12/separator.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/separator-f.jpg

SECTION 28Service

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/service.jpg

SECTION 29Simple Cost Calculator

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/simple-cost-calculator.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/simple-cost-calculator-item.jpg

SECTION 30Slider

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider.jpg

Slider element can contain Slider Item and Slider Article Teaser Template elements.

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-elements.jpg

1. Slider Item:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-item.jpg

2. Slider Article Teaser Template:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-article-teaser.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/slider-f.jpg

SECTION 31Tabs

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/tab.jpg

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

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/tab-item.jpg

Tabs Item can include:

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/accordion-elements.jpg

SECTION 32Text

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/text.jpg
https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/text-f.jpg

SECTION 33Video

https://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2017/11/video.jpg