How to Create Custom Ribbon in Elementor - WpBuilt 1350476922971705023
How to Create Custom Ribbon in Elementor

How to Create Custom Ribbon in Elementor

  • Posted July 16, 2020 by Elementor Resources
  • Tutorials
  • 0 Comments

Step 1 :  Add a section we’re we will put our widgets.

Step 2 : Add column on the section, on this tutorial I’ll use a one column structure.

Step 3 : Now, we will create our custom price table with ribbon. In the column add a heading widget it will serve as the title of the ribbon tag.

 

Step 4 : Go to the advanced tab and add css class to the heading tag.

Step 5 : Add the following custom css below 

.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;
}

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

wp-cta.png

Get your FREE Web
Design Brief Template

Get your FREE Web
Design Brief Template

×

Cart