Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
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:
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);
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!
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?
Hi Amit,
You can use the Blog module for related posts. Just turn on the dynamic content toggle to show posts for current page.
Thank you Nelson! This tutorial was really helpful.
Awesome post. Is there a way to dynamically fill the ribbon with the category name of the blog post?
Hi Ernst,
So that’s actually asking the wrong question. I think you mean how to make the category meta in the blog module into a ribbon. I do plan to have a tutorial on highlighting the category, but not sure about making it a ribbon, but I’ll try to include that.
Yes! That’s what I meant! 😅
This is great, one question though. If I want to put the ribbon on the featured images in a blog module instead of on the corner of the entire module where would I paste the css? Or would that require something totally different?
I think doing the same method would put it on the entire blog module once, but to get them on each post you would need to target the post like .et_pb_post
Hi John,
You will have to show me what you are doing with a link as the tutorial itself works perfectly fine.
I had to add a border to the blurb in order for it to properly cut off the banner at the edges.
Hey John,
I thought I was experiencing this issue as well. Once you save your blurb the boundaries should cut off the ribbon on the edges for you. Once I left the visual builder I saw that the effect works properly.Edit:
I’m experiencing this issue as well. With a hover effect applied via the transform, I’m seeing the banner overlap in its default state and then it cuts off properly on the hover action.
https://boatclass.com/basic-boatclass/
Hi John, try typing “overflow: hidden;” in the “main element” input area.
Thanks for that tip! Worked like a charm.
Hi Nelon, very nice! I am wondering if I can add a hyperlink to the ribbon or part of the text in the content to make it clickable?
If you want to add a link to the ribbon so the approach will change because currently, we are using the After pseudo-element which is technically not the real element that is why we can’t provide a link in that. To create a ribbon with the link first you need to go to the Module Settings > Advanced > CSS ID & Classes and place the Custom Class in the module on which you want to show the ribbon. Let’s say the custom class you have given is pa-module.
After that, you need to place two snippets first is the jQuery and the second is the CSS.
jQuery : Place this code in the Divi > Theme Options > Integrations > Head Panel
jQuery(document).ready(function(){
jQuery(“.pa-module”).append(“READY“);
})
CSS: Place this code in Divi > Theme Options > Custom CSS Panel
.pa-module{
position: relative;
overflow: hidden;
}
a.pa-pseudo-link{
position: absolute;
display: block;
width: 240px;
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);
top: 2em;
right: -2.7em;
}
You can change the top and right value for placing the ribbon as per your liking. Please let us know if that helps. 🙂
Thank you Hemant, for the explanation. Where and how should specify the link url?
Apologies for the confusion. Please go to the link given below and there you can see the whole code.
http://pastie.org/p/1DWVAUgS8phH1vCoU1kEpf
You need to place the link URL in the anchor tag inside href attribute quotes. Once you go to the link given above, you will understand.
Please let us know if that helps. 🙂
sorry I was offline for several days and now the link with the code is not there any more. Can you paste it again? Thanks, Claudio
This is the code link: https://www.codepile.net/pile/KA62qpAo
Try the code and let us know how it goes. 🙂
How can I put this code over a video module with a youtube link? It shows below the youtube thumbnail but not above sadly. Would love some help if this is achievable!
I’m not sure as I have never tried that. Unfortunately we cannot provide custom solutions at this time.