Styling Your Related Posts Block

A full walkthrough of the Customizer options for changing how your Related Posts block looks.

ProFull style control is a Pro and Pro+ feature. Every plan gets the plugin’s clean default design; this page covers customizing it further.

Open Appearance → Customize → Related Posts (or use the quick-link on the plugin’s Dashboard page, which jumps straight into this section). Settings are grouped into six clusters, under a card style picker:

The same settings are also on Ariadne Related Posts → Settings → Card design (since 1.9.63). Both places edit the same values, so a change saved in one shows in the other. Use the Customizer when you want the live preview.

Card style picker

The quickest way to change the look. At the top of the section, pick one of seven styles, each shown as a small preview: Classic cards, Text on image, Glass cards, Wide banners, Scrolling row, Compact list, or Numbered list. One click sets the layout, image and card options together, and the preview updates at once. Every setting below stays editable afterwards; once you change one, the picker shows that you’re on a custom look.

Layout arrangement

Choose Row (a horizontal scroll), Grid, List, or Masonry. Grid and List also offer several row-style treatments — boxed cards, divided rows, a numbered list, or a bordered box — along with grid column counts for desktop and mobile separately, border style, drop shadow, and background color.

Elements to show or hide

Toggle the date, author, category, and tag meta fields, the excerpt, a category “eyebrow” label above the title, a numbered ranking badge, and an optional call-to-action button.

Text

Heading style (several decorative treatments, from a plain underline to a filled badge), font choices including curated Google Fonts, title and meta text styling, hover effects on the title link, and excerpt length.

Image

Image position (top, left, below the text, or behind the text), shape, corner roundness, edge-to-edge bleed, and size.

“Behind the text” is the text-on-image style: the picture fills the whole card and the title sits on a soft dark fade over its lower part, in white so it stays readable on any photo. In Grid and Row the cards follow the image shape you choose (portrait suits it best); in List each card becomes a wide banner.

With “Behind the text”, Text panel on the image offers a second look, Glass: instead of the dark fade, the title sits on a frosted panel floating over the lower part of the picture. The panel stays dark enough for white text to read well on any photo, and readers who turn on “reduce transparency” get a solid panel. The Glass cards style in the picker sets this up in one click.

Icon

An optional icon next to the block’s heading, with a choice between a smart default color or a custom one, and an option to repeat the same icon as a small badge on each card’s image.

Divider

Show or hide divider lines between cards, and set an accent color for them.

Inline Related Post has its own independent styling

If you’re also using inline related posts, it’s a fully separate section in the Customizer with its own settings across the same six clusters — nothing is shared between the two by default. To make them match, set the same options in both.

Custom CSS

For anything the controls above don’t cover, WordPress’s own built-in Appearance → Customize → Additional CSS applies after every other setting, so it reliably wins over the plugin’s own styles without needing !important.

If you’d rather start from nothing

A “Disable default styles” checkbox turns off the plugin’s own stylesheet entirely, useful if you’re styling the block completely from your theme or Additional CSS instead. See starter CSS for related posts for two complete, ready-to-paste stylesheets to begin from.