INTRODUCTIONArticle examples
List of several article layouts using Article Teaser Template element:
Example 01
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
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
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
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
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.
Example 01
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
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!