RebelMouse Talk to Us
Badges: how style and add to a post

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


[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Fdac11579-409a-4a97-8ced-881cbc732617%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=472&h=41cbb18098dbdf014f9b2b71d687ae27889268f4311f0295cddeb69db5a7704e&size=980x&c=1165623769 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Fdac11579-409a-4a97-8ced-881cbc732617%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D472%26h%3D41cbb18098dbdf014f9b2b71d687ae27889268f4311f0295cddeb69db5a7704e%26size%3D980x%26c%3D1165623769%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

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

1. Set up your badge images: this can be done by going to the Hamburger Menu > Badges.

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F726c2c3a-061e-4278-af51-bd6e00de94a2%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=206&h=167789a68971dc1c134312d8768e9133136e7e7bf07e54a2371c5474fb61e317&size=980x&c=213717526 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F726c2c3a-061e-4278-af51-bd6e00de94a2%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D206%26h%3D167789a68971dc1c134312d8768e9133136e7e7bf07e54a2371c5474fb61e317%26size%3D980x%26c%3D213717526%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

2. Add a new Badge: in this order you'll be asked to

1) Select a design for your badge by uploading an image / pasting an image URL.

2) Select your Badge's name to identify it.

3) Link your Badge to a tag so it appears automatically when that tag is used.

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F95be05de-d4b9-4dbf-a58d-ee4a99ec16a0%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=605&h=335085c6afb9eade4393eae0b363d0ce8acfc0319ef17e0c1914bbdcf6ccb749&size=980x&c=1062876814 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F95be05de-d4b9-4dbf-a58d-ee4a99ec16a0%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D605%26h%3D335085c6afb9eade4393eae0b363d0ce8acfc0319ef17e0c1914bbdcf6ccb749%26size%3D980x%26c%3D1062876814%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

For tags to appear, you'll have to assign them to a Post in the Entry Editor during its creation (or you can edit an old post). For example:

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F9a76d37a-a3ce-4ef1-b168-ecf3cca13c55%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=888&h=2978912a8003a7897f295f1b02371405f6085e44a18f51271e9427389fef4b4d&size=980x&c=2480669219 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F9a76d37a-a3ce-4ef1-b168-ecf3cca13c55%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D888%26h%3D2978912a8003a7897f295f1b02371405f6085e44a18f51271e9427389fef4b4d%26size%3D980x%26c%3D2480669219%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

In the Advanced gear in the Entry Editor, I've selected a Badge for this post.
You can:
- Choose more than one badge to be displayed (you'll always need to create them first in the 'Badges' link)
- Choose which badge is the primary one

Then, you can actually customize how your Badges look in the Layout & Design tool.

First, make sure it's set to be displayed in the Element Order, in the settings of the Lead Media inside the Post Page:

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Fe2ccdd26-c4f0-4229-9e2e-16d48b8b050f%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=214&h=eef76d62c74e8eb2bef11b0adc893367ff7642cdfe8b0881432296d94bcbfedb&size=980x&c=2870358480 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Fe2ccdd26-c4f0-4229-9e2e-16d48b8b050f%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D214%26h%3Deef76d62c74e8eb2bef11b0adc893367ff7642cdfe8b0881432296d94bcbfedb%26size%3D980x%26c%3D2870358480%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

You can do CSS per element to them as well, by clicking on the styles card and scrolling down to the Badges sub-elements:

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Ff2136366-b1b4-42ec-8b79-f73bb722da5f%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=290&h=55c21cb41a50f2a1c63ffead6b165984ef9c07b27661788ad06c6cd29f1177ff&size=980x&c=301455516 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Ff2136366-b1b4-42ec-8b79-f73bb722da5f%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D290%26h%3D55c21cb41a50f2a1c63ffead6b165984ef9c07b27661788ad06c6cd29f1177ff%26size%3D980x%26c%3D301455516%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Fd8ff25cb-48dd-41de-aeee-9a1e6049c603%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=714&h=18af15585fd6eba19870ce4da0e6c3632c2d19a0d1b6dc9d91c3af558b8e44d9&size=980x&c=195965605 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Fd8ff25cb-48dd-41de-aeee-9a1e6049c603%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D714%26h%3D18af15585fd6eba19870ce4da0e6c3632c2d19a0d1b6dc9d91c3af558b8e44d9%26size%3D980x%26c%3D195965605%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

So, here's an example of a Post displaying a badge I've set up:

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Fd3c80df2-81ae-4616-b470-ca69568d06dd%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=871&h=95d502f2ad5b87ec3f51d480f846ab2fae0882e3178857b06a56163da6e05a9a&size=980x&c=2745588869 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Fd3c80df2-81ae-4616-b470-ca69568d06dd%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D871%26h%3D95d502f2ad5b87ec3f51d480f846ab2fae0882e3178857b06a56163da6e05a9a%26size%3D980x%26c%3D2745588869%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

What Is RebelMouse?
Request a Proposal
The Most Secure CMS of 2022
Featured

The Most Secure CMS of 2022

Why RebelMouse Is the Most Secure CMS on the Web

Delivering a secure, high-performing environment with extreme reliability is essential to all of our clients at RebelMouse. We only use industry-leading, reliable approaches to host our infrastructure. This ensures maximum stability and security for all of our clients’ data. Here are just some of the reasons we’re able to maintain a hard-bodied product that’s flexible, too.

Most websites get hacked. RebelMouse has never been hacked.

Keep reading... Show less
Google Made Major Changes to Its Formula for Page Speed. Here’s What to Do About It in 2022.
Rebel Insights

Google Made Major Changes to Its Formula for Page Speed. Here’s What to Do About It in 2022.

Make sure your site is set up for success in 2022.

In the spring of 2020, Google let the world know that its Core Web Vitals would become the new benchmark for measuring a site's performance in its search results, known as the page experience update. Fast forward to more than a year later in August 2021 when, after much anticipation, Google's page experience update became official.

Since its rollout, developers have felt the impact of how their publishing platforms stack up against the new standard. Important decisions around the architecture of your site can now make or break your site's performance in the eyes of Google.

HTTP Archive, a tracking platform that crawls the web to identify trends and record historical patterns, has revealed how top content management systems (CMS) have weathered the page experience update through the creation of its Core Web Vitals Technology Report. RebelMouse consistently outperforms major CMS platforms on Google's most critical metrics since its rollout and into 2022:

Getting superior scores on Google's performance benchmarks isn't easy, either. The Ahrefs blog analyzed Core Web Vitals data from the Chrome User Experience Report (CrUX), which is data from actual Chrome users, to see how the web stacks up against Core Web Vitals. Their study found that only 33% of sites on the web are passing Core Web Vitals.

data from Ahrefs tracked on a line chart finds that shows only 33% of sites on the web pass Google's Core Web Vitals From Ahrefs.

Luckily, performing well on Core Web Vitals is possible with thoughtful, strategic changes to your site’s codebase. Here's what you need to know and how we can help.

Keep reading... Show less
Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now
What You Need to Know About Alt Text for Search
Rebel Insights

What You Need to Know About Alt Text for Search

Alt text is an important part of any search strategy, but many content creators may not even be familiar with what it is. Here’s what you need to know about alt text and how it can improve your content’s usability and performance on search.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal