Home 7. Articles

INTRODUCTIONArticle examples

List of several article layouts using Article Teaser Template element:

Example 01

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/example01.jpg

3 Columns, 2 Rows, Background Image position

General:

  • 20px Gap between articles,
  • Medium title size,
  • H2 tag,
  • Vertical 3×2 image format,
  • Medium image base size.

Display:

  • Categories subtitle position,
  • Date subtitle position,
  • Comments bottom left position,
  • Reading time bottom left position,
  • View count bottom left position,
  • Post format on image in top left corner (only media – video, audio, gallery).

Example 02

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/example02.jpg

2 Columns, 2 Rows, Top Image position

General:

  • 30px Gap between articles,
  • Medium title size,
  • H2 tag,
  • Horizontal 3×2 image format,
  • Medium image base size.

Display:

  • Categories supertitle highlighted position,
  • Date supertitle position,
  • Comments bottom left position,
  • Reading time bottom left position,
  • View count bottom left position.

Example 03

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/example03.jpg

3 Columns, 3 Rows, Side Image position

General:

  • 10px Gap between articles,
  • Small title size,
  • H2 tag,
  • Vertical 16×9 image format,
  • Small image base size.

Display:

  • Categories supertitle position,
  • Date bottom left position.

Example 04

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/example04.jpg

4 Columns, 4 Rows, No Image

General:

  • 20px Gap between articles,
  • Medium title size,
  • H2 tag,
  • Single box design – Light background + Gray border.

Display:

  • Categories supertitle position,
  • Date bottom left position.

Example 05

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/example05.jpg

1 Columns, 2 Rows, Side Image Position

General:

  • 0px Gap between articles,
  • Large title size,
  • H1 tag,
  • Square Image format,
  • Single box design – Light background + Gray border,
  • Large Image base size.

Display:

  • Categories supertitle highlighted position,
  • Date subtitle position,
  • Comments subtitle position,
  • Reading time subtitle position,
  • View count subtitle position.

Slider Article Teaser Template

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

Example 01

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/slider-article-1.jpg

1 Column, 1 Row, 4 Slides

General:

  • Dark gradient background overlay,
  • Huge title size,
  • H2 tag,
  • Background image position,
  • Extra Large top / bottom spacing.

Display:

  • Categories supertitle highlighted position,
  • Date subtitle position,
  • Comments subtitle position,
  • Show on image, in top right corner, only media (video, audio, gallery) post format,
  • Light Outline button style.

Example 02

http://documentation.bold-themes.com/newstar/wp-content/uploads/sites/32/2018/05/slider-example-02.jpg

1 Column, 1 Row, 2 Slides

General:

  • Dark gradient from top overlay,
  • Huge title size,
  • H2 tag,
  • Background center image position,
  • Extra large top / bottom spacing.

Display:

  • Categories subtitle position,
  • Read more text – READ MORE
  • Accent Filled button style.

See in action

Check out video tutorial about article elements and different layouts in action. Make sure to subscribe to our YouTube channel!