The ribbon is great to get user’s attention to the part of your website you want them to look – or to feature one of the plans inside your pricing page. It doesn’t matter the way you want to use a ribbon. But, now I’ll document here the best way to create a ribbon in CSS.
Without further ado, let’s start.
What’s the best way to create a ribbon in CSS
If you are already novice at CSS, you have already gone through some code snippets around the web to create this feature faster. Maybe you found some examples in codepen.io.
But, I believe knowing how to do it is not enough. You need to learn how to do it fast.
Imagine that a client wants to feature something on their website. If you have a clever and quick way to add it they will love your support.
Usually, web designers take days to give simple solutions to their clients. If you master a way or two of doing things right – you can solve your client’s issues faster.
CSS ribbon generator
That’s it. You’ll use a generator to get it done. It’s easier, faster and there’re lots of options to visually customize your CSS ribbon before just copying and pasting into your WordPress website.
How to use the ribbon generator
First of all, access the link above to be redirected to the CSS ribbon generator.
Then, go to Ribbon Properties to customize your ribbon text, start color, end color, and position to match your project design.
You can click on Presets too to select a good combination of colors. I like the green one.
Look at the Ribbon Preview on the right to follow the changes you are doing to the ribbon.
Then, copy the CSS Code starting from the .ribbon (the .box is needed just for the preview generator).
Finally, paste the HTML Code where you want it to appear on your website.
<div class="box"> <div class="ribbon"><span>POPULAR</span></div> </div>
If you are using Extra theme or Divi theme: remember to paste the HTML code inside the Code Module.
If the ribbon is not well positioned, play with the top and right properties until it’s aligned with your column.
Also, go to Code Module > Advanced > Main Element and set margin-bottom: 0 to remove the gap between the Code Module and the other Modules.
Do you think this is the best way to create a ribbon in CSS?
How did you like this tutorial? It’s pretty easy, but I never get tired of documenting great tips and tricks to create better websites faster.