Product Updates + Strategy

Badges: how style and add to a post

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 LeadMedia 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 Badgessub-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
subscription model for publishers
Rebel Insights

In 2023, Publishers Take Back Control With Subscription Success

Users are ready to pay for content that delivers

The Rise of the Mature User

It's been a long and winding path, but in 2023 the subscription model continues its upward trajectory as a top revenue strategy for publishers of all sizes. The tug of war between platforms and publishers reached its peak in the last few years of the previous decade, leaving users desperate for a modern user experience that's clear of any clutter from the duopoly that is Google and Facebook. This is why intelligent paywall models are a top choice for users looking to consume content right from the source. When done correctly, the strategy can work for any type of media. The New York Times, a frequent showpiece example of the power of paywalls, is constantly reporting record-busting subscription numbers, with 7.6 million digital subscriptions in 2021.

And it all makes perfect sense. The subscription model eliminates the middleman — such as the platforms — so readers get the experience and content they want, and publishers get the cash they need.

Keep reading...Show less
The Most Secure CMS of 2023
Featured

The Most Secure CMS of 2023

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.

Keep reading...Show less
Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now