Ribbons are particularly useful for showcasing pricing details, discounts, sale items, or pricing tables. In this guide, we'll walk you through a step-by-step process to seamlessly integrate corner ribbons into your Divi modules.
We'll use the Call To Action module in our example.
Go to the Call To Action Module Settings -> Advanced tab -> Custom CSS -> "Before" option and add this Custom CSS code:
content: 'New Style';
position: absolute;
top: 30px; /* Adjust as needed to position the ribbon */
left: -50px; /* Adjust as needed to position the ribbon */
width: 180px; /* adjust ribbon width as needed */
background-color: #ff5733; /* change background color of the ribbon */
color: #fff; /* change text color of the ribbon */
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px 10px;
transform: rotate(320deg);
z-index: 2;
text-align: center;
Adjust Visibility Settings:
Now, proceed to the "Visibility" option within the Call To Action Module Settings, located under the "Advanced" tab. Set the horizontal overflow to "hidden."
By following these steps, you can successfully add a ribbon to your Call To Action module. The above CSS code can be applied to sections, rows and columns as well, allowing you to incorporate ribbons into different parts of your layout.
It's recommended to use a background color for the module, column, row, or section to ensure the ribbon is displayed prominently and effectively.
That being said, if coding & customization aren't your thing, the plugin Divi Ribbon Module will allow you to do the same, but in a very user-friendly manner. 👍