Code by Day | Explore By Weekend
How To Add A Simple Corner Ribbon To Any Divi Module Tutorial by Pee Aye Creative

How To Add A Simple Corner Ribbon To Any Divi Module

This quick tutorial will show you how to add a simple corner ribbon to any Divi module directly in the module with some CSS!

Add A Corner Ribbon To Any Divi Module

So the idea here with this tutorial is to keep it simple, and avoid CSS classes and pasting snippets in Theme Options or your child theme. So I wanted you to be able to add a corner ribbon directly in the Divi Builder, to any Divi module, without span tags or custom classes, and it works great!

I added this to my Beyond The Builder website design course page. I wanted to indicate which lessons were ready now, and which ones were in progress. You can see the screenshot below of how it turned out:

Example of a CSS corner ribbon on a Divi Module Tutorial by Pee Aye Creative

You’ll notice I have two colors of ribbons, and that’s the beauty of this. You can customize each module’s ribbon color, text, size, etc.

Paste The CSS Code For The Corner Ribbon To Any Divi Module

Copy the CSS snippet below. Now go to the section, row, column, or module where you want to place the ribbon. Opent the settings and go to the Advanced tab. Open the Custom CSS toggle, and look for the “After” input area. That’s where you need to paste the snippet.

content: 'Ready';
position: absolute;
display: block;
right: -60px;
top: 30px;
width: 200px;
padding: 2px 10px;
background-color: #2cba6c;
color: #fff;
font-size: inherit;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
transform: rotate(45deg);
adding a corner ribbon to any Divi module

Customize The Corner Ribbon However You Want

Now, here’s where you will need to customize it. You can pretty much change anything here, and you probably will have to. If I change the text “Ready” to something longer, then it will either need a smaller font size or will need positioned differently. You can adjust the “right” and “top” values as well. And the padding, background color, literally anything. So play around with this, try to learn what each value is doing, and have fun! And that’s how you add a simple corner ribbon in Divi!

10

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Amit Suvarna
Amit Suvarna
1 month ago

Wow thats awesome. Will definitely try it out on the blog that Im building.

I was wondering if there is a way to make related posts show through Divi. Another question: Is there a way to add featured images for the Category Taxonomy to get dynamically called by a Divi header perhaps?

Asha
Asha
1 month ago

Thank you Nelson! This tutorial was really helpful.

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 3,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart