Pee-Aye Creative How To Add A Simple Corner Ribbon To Any Divi Module Tutorial by Pee Aye Creative

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

The Quick And Easy CSS Corner Ribbon

Notice I said “simple” in the title. I realize you could make these fancier, but if you want quick and easy corner ribbon, this is for your.

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!

1

That’s it!

I hope you have enjoyed learning How To Add A Simple Corner Ribbon To Any Divi Module. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

We have more cool stuff coming for our subscribers!

Please share this post!

Go To Group

Recent Posts

How To Create A Single Field Divi Email Optin Module

This tutorial will show you how to style and customize the Divi Email Optin module and make a horizontal single field optin layout for your email signups!

Where Are The Missing Divi Customizer Settings?

Where are the missing Divi theme Customizer settings? Divi is slowing depreciating these, and for good reason! I’ll explain this all in the video and post.

What Is The Best Hosting Provider For Divi Websites

Learn how to choose the best hosting service provider for your Divi website to keep it running fast and avoid issues with the Divi Builder.

Leave A Response!

become partners with Pee Aye Creative

We send out a roundup email once or twice a month with tutorials and new products, so that’s what you will get!

Subscribe to our helpful Divi videos!

Visit Our Channel



Source