Skip to main content

Related articles (blog)

The Related Articles section is a powerful tool to increase your readers' engagement. By showing relevant blog posts at the bottom of an article, you encourage visitors to stay on your website longer and consume more of your content.

Note: This section is specifically designed for the Article page (blog post) and will automatically display articles from the same blog category.

General Layout & Design​

Adjust the visual style of the section so that it aligns perfectly with the rest of your blog:

  • Color schemes: You can set two different color schemes:
    • General color scheme: For the background of the entire section.
    • Card color scheme: For the background of the individual article cards.
  • Section display (Type): Determine whether the background of this section spans the full width (Full width / Edge-to-edge) or is shown centered within a frame (Box / Container).
  • Height & Background height: Choose whether the section automatically grows with the content (Auto) or work with a fixed height (Fixed). With a fixed height, you can use a slider to determine how far the background color extends (separately adjustable for desktop and mobile).

Spacing (Whitespace)​

Ensure the right balance on the page by adjusting the margins (outer space) and padding (inner space). You can choose the theme's default spacing or remove the whitespace completely (None).

Slider Settings​

Related articles are presented in a swipeable carousel. You have full control over how this slider behaves on different devices:

  • Articles in view (Slides per view):
    • Desktop: Choose 3, 4, 5, or 'auto'.
    • Tablet & Mobile: Choose whole or 'half' views here (such as 1.5 or 2.5). A half view at the side invites the visitor to swipe further.
  • Navigation & Effects:
    • Pagination: Enable or disable the navigation dots below the slider.
    • Playful staggering (Alternate offset): Check this to place the article cards alternately slightly higher or lower for a dynamic effect.
    • Carousel overflow: Determine whether the slider is cut off cleanly at the frame or visually extends to the edge of the screen.

Text & Buttons​

Guide the related articles with an inviting heading and optional buttons:

  • Alignment: Align the title and the introductory text to the left, center, or right.
  • Title Formatting: Adjust the SEO HTML tag, the visual size (H1 to display), and the font weight of the title.
  • Content (Rich text): Use this field for a short explanation (e.g., "Did you find this interesting? Then read these articles too").
  • Action buttons (Buttons): Add up to two buttons below the text (e.g., "View all news").
    • Give the button a label and link a URL.
    • Check Secondary button style for an 'outline' look.
    • Optionally add an icon (such as a right arrow).