Ribbons are a visually pleasing way of making an announcement on your website. While there are many situations where you can use ribbons but you often find these with Sales, Discounts, or Out of Stock announcements on Woocommerce stores.

Ribbons are used to tell the visitor about a sale or a discount as soon as they arrive at your website. In this tutorial, we will understand how you can add ribbons using Elementor.

Why Should You Use Ribbons?

Ribbons are a great way to instantly attract your visitor when you are making an announcement. For example, you have announced a discount on a certain product and then you apply the discount ribbon on that product's thumbnail, it will immediately get the user to click on the product.

Ribbons are visually appealing when used in a certain manner. They can help the user go through unrelated products and improve the conversions and sales of your website.

How To Add Custom Ribbons Using Elementor

To start the process, you need to add an Inner section where we will add the widgets.

Next, you will need to drag a column in the section. For this tutorial, we will be using a one-column structure.

Once you are done with the settings above, you can go ahead and create a title for your ribbon.

For the next step, move forward to the CSS Classes in the Advanced tab and add "gc-ribbon-style" in the field.

Below that you will need to add the following Custom CSS.

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

You are almost done. Publish it and check your website to see how it works.

This is how you can add ribbons to your products using Elementor. Make sure to join us on our Facebook and Twitter to keep getting frequent updates about our content.