Home 7. Articles

INTRODUCTIONArticle examples

List of several article layouts using Article Teaser Template element:

Example 01

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

Background Image, bottom text

General:

  • 1 Column,
  • 1 Row,
  • 40px gap,
  • Dark font, light background color scheme.

Title:

  • Title size – small,
  • H2 tag,
  • Content style – solid Background.

Image:

  • Image position – background / bottom text,
  • Image style – shadow,
  • Image format – square,
  • Image base size – large.

Display:

  • Show categories – supertitle,
  • Show date – supertitle,
  • Show excerpt – yes,
  • Show post format – Show on image, only media,
  • Hide read more icon.

Example 02

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-2.jpg

Angled Background image

General:

  • 1 Column,
  • 1 Row,
  • 40px gap,
  • Light font, alternate background color scheme.

Title:

  • Title size – small,
  • H2 tag,
  • Content style – clear.

Image:

  • Image position – background / bottom text,
  • Image style – angled background,
  • Image format – square,
  • Image base size – large,
  • Zoom In hover effect.

Display:

  • Show categories – supertitle,
  • Show date – supertitle,
  • Show post format – Show on image, only media,
  • Hide read more icon.

Example 03

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-3.jpg

2 Columns, 1 Row, No image

General:

  • 2 Columns,
  • 1 Row,
  • 25px gap,
  • Dark font, light background color scheme.

Title:

  • Title size – small,
  • H2 tag,
  • Heading font weight – bold,
  • Content style – clear.

Image:

  • Image position – no image, keep proportion,
  • Image style – border,
  • Image format – square.

Display:

  • Show categories – supertitle,
  • Show date – supertitle,
  • Hide post format,
  • Show read more icon – show on bottom.

Example 04

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-4.jpg

Background image, side text

General:

  • 1 Column,
  • 1 Row,
  • 40px gap,
  • Dark font, accent background color scheme.

Title:

  • Title size – medium,
  • H2 tag,
  • Content style – solid background.

Image:

  • Image position – background / side text,
  • Image style – shadow,
  • Image format – horizontal 16×9,
  • Image base size – large,
  • Custom image height – 360px,
  • Zoom In hover effect.

Display:

  • Show categories – supertitle,
  • Show date – supertitle,
  • Hide post format,
  • Hide read more icon.

Example 05

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-5.jpg

No Image, left border

General:

  • 1 Column,
  • 1 Row,
  • 10px gap,
  • Dark font, accent background color scheme.

Title:

  • Title size – extra small,
  • H2 tag,
  • Heading font weight – bolder,
  • Content style – left border.

Image:

  • Image position – no image,
  • Image style – clear.

Display:

  • Show categories – supertitle,
  • Show excerpt – yes,
  • Show post format – Show on image, only media,
  • Hide read more icon.

Example 06

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-6.jpg

Image on top

General:

  • 2 Columns,
  • 1 Row,
  • 25px gap,
  • Dark font, accent background color scheme.

Title:

  • Title size – small,
  • H2 tag,
  • Heading font weight – bold,
  • Content style – clear.

Image:

  • Image position – top,
  • Image style – shadow,
  • Image format – square,
  • Image base size – medium,
  • Image lazy load – yes,
  • To Light hover effect.

Display:

  • Show categories – supertitle highlighted,
  • Show excerpt – yes,
  • Hide post format,
  • Hide read more icon.

Example 07

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-7.jpg

Image on side, 2/3 width

General:

  • 1 Column,
  • 1 Row,
  • 5px gap,
  • Dark font, accent background color scheme.

Title:

  • Title size – large,
  • H2 tag,
  • Content style – solid background.

Image:

  • Image position – side, 2/3 width,
  • Image style – shadow,
  • Image format – horizontal 2×1,
  • Image base size – large,
  • Custom image height – 450px,
  • To Grayscale hover effect.

Display:

  • Show categories – supertitle,
  • Show date – supertitle,
  • Show excerpt – yes,
  • Show post format – show on image, only media,
  • Hide read more icon.

Example 08

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-8.jpg

Image on top, overlapping text

General:

  • 1 Column,
  • 1 Row,
  • 5px gap,
  • Dark font, accent background color scheme.

Title:

  • Title size – extra large,
  • H2 tag,
  • Content style – solid background.

Image:

  • Image position – top / overlapping text,
  • Image style – clear,
  • Image format – horizontal 2×1,
  • Image base size – large,
  • Custom image height – 600px,
  • Zoom In hover effect.

Display:

  • Show categories – supertitle highlighted,
  • Show excerpt – yes,
  • Hide post format,
  • Hide read more icon.

Example 09

http://documentation.bold-themes.com/val/wp-content/uploads/sites/36/2018/10/article-example-9.jpg

Image on top, left border

General:

  • 4 Columns,
  • 1 Row,
  • 40px gap,
  • Light font, alternate background color scheme.

Title:

  • Title size – small,
  • H2 tag,
  • Content style – clear.

Image:

  • Image position – top,
  • Image style – left border,
  • Image format – square,
  • Image base size – large,
  • Zoom In hover effect.

Display:

  • Show categories – supertitle,
  • Show author – bottom right,
  • Show date – supertitle,
  • Show rating – bottom left,
  • Show post format – Show on image, only media,
  • Hide read more icon.

Slider Article Teaser Template

List of several article layouts using Slider Article Teaser Template element:

Example 01

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

3 Slides, Side Content

General:

  • Number of slides – 3,
  • Medium top spacing,
  • Medium bottom spacing,
  • Content position – side,
  • Dark font, alternate background color scheme.

Title:

  • Title size – large;
  • H2 tag,
  • Solid Background content style.

Image:

  • Image base size – full,
  • Zoom In hover effect.

Display:

  • Show categories – supertitle,
  • Show date – supertitle,
  • Show excerpt – yes,
  • Show post format – Show on image, in top right corner, only media,
  • Hide read more icon.

Example 02

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

Wide slider

First please make sure to set the section’s layout to ‘Wide’.

General:

  • Number of slides – 2,
  • Medium top spacing,
  • Medium bottom spacing,
  • Content position – side,
  • Dark font, light background color scheme.

Title:

  • Title size – extra large;
  • H2 tag,
  • Solid Background content style.

Image:

  • Image base size – full,
  • Zoom Out hover effect.

Display:

  • Show categories – supertitle,
  • Show date – supertitle,
  • Show excerpt – yes,
  • Show post format – Show on image, in top right corner, only media,
  • Hide read more icon.