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=""]

Build on a Better PlatformReady to See More?
Request a Proposal
Learn More About RebelMouse’s High-Performing Infrastructure
Featured

Learn More About RebelMouse’s High-Performing Infrastructure

To ensure every site powered by RebelMouse is high performing, secure, and optimized for user experience, we only use the best and most reliable methods to host our infrastructure. Here's a detailed look at some of the services and security measures we use every day to secure maximum stability and security for each of our sites.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal
An Important Note on Site Quality From Google’s Search Expert
Rebel Insights

An Important Note on Site Quality From Google’s Search Expert

Do you ever wonder if a few typos can impact your site’s search performance? According to Google’s Search Advocate John Mueller, it takes more than just a few grammatical missteps for Google’s crawler to determine your site’s quality.

During a New Year’s Eve Office Hours hangout, Mueller said that if certain portions of a website are deemed low quality, it can negatively impact the site’s search ranking overall. A good example of this is a site that has different language versions within the same domain. If the site has a French-language version that is made up of quality content, but the English translation isn’t up to the same standard, the ranking of the French version of the site could be negatively impacted.

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