7. Articles

INTRODUCTIONArticle examples

List of several article layouts using Article Teaser Template element:

Example 01

https://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

https://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

https://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

https://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

https://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

https://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

https://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

https://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

https://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

https://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

https://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.