How to Style and Add Badges to Posts

Badges have multiple uses. Some clients use them to flag their promoted content, others just like to have a cool way to categorize their content.


If you want to set up some badges for your site, here's a full step-by-step tutorial:

1. Set up your badge images. Go to Badges in the left-hand navigation menu.

2. Then, add a new badge. You'll be asked to:

  • Select a design for your badge by uploading an image or pasting a URL to an image.
  • Select your badge's name to identify it.
  • Link your badge to a tag so it appears automatically when that tag is used.

For tags to appear, you'll have to assign them to posts in the Entry Editor during their creation. If you haven't been doing this, no fear — you can edit older posts to add them after the fact. For example:

In the Advanced Settings menu (gear icon) of the Entry Editor, I've selected a badge for an existing post.

There is some other flexibility to be had with badges. You can:

  • Choose to have more than one badge displayed (but you'll always need to create them first as described above).
  • Choose which badge should be the primary one for a post.

You can also customize how your badges look in the Layout & Design tool. First, make sure your layout is set to be displayed in Element Order, in the settings of the Lead Media element inside the Post page:

You can add CSS per element to badges as well. To do so, click on the Styles card and scroll down to the badges' sub-elements:

Here's an example of a post displaying a customized badge: