Home 7. Examples

INTRODUCTIONArticle examples

List of several article layouts using Article Teaser Template element:

Example 01

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/article-image-on-top.jpg

Image on top

General:

  • 60px Gap between articles,
  • Small title size,
  • H2 tag.

Image:

  • Image position top,
  • Horizontal 3×2 image format,
  • To Grayscale hover effect.

Display:

  • Categories supertitle position,
  • Date supertitle position.
  • Display arrow.

Example 02

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/article-image-on-side.jpg

Image on the side

General:

  • Medium title size,
  • H2 tag.

Image:

  • Image position side,
  • Vertical 4×3 image format,
  • Medium image base size,
  • From Grayscale hover effect.

Display:

  • Categories bottom left position,
  • Date bottom left position,
  • Author bottom left position.

Button

How to get full width button with arrow

Example

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/button-1.jpg

Button with arrow

General:

  • Icon position left,
  • Medium size button,
  • Alignment left.

Design:

  • Full width,
  • Clean style,
  • Show arrow.

Separator

How to display separator as arrow or dotted separator

Example 01

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/separator-1.jpg

Arrow separator

General:

  • Arrow border style,
  • Normal separator width,
  • Accent font and dark background color scheme.

Example 02

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/dotted-separator.jpg

Dotted separator

General:

  • Dooted border style,
  • Default separator width,
  • Inherit color scheme.

Single product

List of several product layouts using Single product element:

Example 01

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/single-product-three-columns.jpg

Three columns layout

General:

  • Add custom product image,
  • Show share icons.

Design:

  • Accent font and light background color scheme,
  • Three columns single product layout,
  • Normal title size,
  • Large price font size,
  • Bottom dash,
  • Borderless style,
  • Filled button style.

Example 02

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/single-product-hide-image.jpg

Hide image

Background image will display behind product if added as Inner background image to the Column.

Design:

  • Accent font and light background color scheme,
  • Simple single product layout,
  • Hide product image,
  • Hide product title,
  • Extra small title size,
  • Extra Large price font size,
  • Top dash,
  • Borderless style,
  • Filled button style.

Example 03

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/single-product-image-on-side-1.jpg

Image on side

Design:

  • Dark font and light background color scheme,
  • Image on side single product layout,
  • Extra large title size,
  • Extra Large price font size,
  • No dash,
  • Borderless style,
  • Filled button style.

Example 04

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/06/single-product-image-on-top.jpg

Image on top

General:

  • Add custom product image.

Design:

  • Inherit color scheme,
  • Simple single product layout,
  • Extra small title size,
  • Extra small price font size,
  • No dash,
  • Light border style,
  • Filled button style.

Cost Calculator

How to set Cost Calculator with Contact form 7

Example

http://documentation.bold-themes.com/stellarium/wp-content/uploads/sites/34/2018/07/stellarium-cc.jpg

Steps

  • We highly recommend importing our demo content that comes with pre-made contact forms that contain all necessary classes, as well as Cost Calculator with all the settings.
  • Create Cost Calculator per your needs (we used Cost Calculator Group element, and conditionals). More info on how Cost Calculator works can be found in online documentation.
  • To Contact form tab of Cost Calculator settings, add Contact form 7 ID, and check Display Next Button and Contact Form field.
  • In Design tab add OrderNatalChart class to Extra Class Name field, in order to make form visible by default.