how_to_add_ribbon_in_elementor
Home » BLOG » WordPress » How to add ribbon in Elementor

How to add ribbon in Elementor

category:  WordPress

Elementor is the most popular page builder for WordPress. If you are web designer or web developer like me, you will hear and see ton of articles and videos talking about Elementor. Elementor saves you a ton of time and easy to use. If you want a new widgets that are not in Elementor, you just create one for your own following Elementor Widgets docucment.

Today, I have to implement the ribbon in Elementor for one of my client site, the method is simple and easy to apply to any widgets. So I would like to share with you.

Requirement

Below is what I want to see on the website. You will see the red ribbon with “New” text on each column.

ribbon on column 1
Ribbon on left top corner of column

For the design, I need to create three columns. Then I add Icon box widget on each column. Finally, I want to add the ribbon at the left top corner on each column.

Create HTML element for ribbon

What I do, I select the HTML widget then drag and drop the widget at the top position of Icon box widget.

html widget
Add HTML widget to your column

Now add the HTML code below into HTML widget. This code will create the ribbon element for us.

<div class="ar-elementor-ribbon ar-elementor-ribbon-left"><div class="ar-elementor-ribbon-inner">New</div></div>
add html code
Add HTML code into HTML widget

I want to add the ribbon to all three columns. So I add HTML widget for each column as well as the HTML code. Save the change.

Add style for ribbon

Now navigate to Appearance>Customize>Additional CSS Then add the CSS below into Additional CSS section.

.ar-elementor-ribbon.ar-elementor-ribbon-left {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    left: 0;
    right: auto;
}
.ar-elementor-ribbon {
    position: absolute;
    z-index: 1;
    top: 0;
    left: auto;
    right: 0;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 150px;
    overflow: hidden;
    height: 150px;
}
.ar-elementor-element .ar-elementor-ribbon-inner {
    background-color: #ef2e5e;
    margin-top: 30px;
    transform: translateY(-50%) translateX(-50%) translateX(30px) rotate(-45deg);
}
.ar-elementor-ribbon-inner {
    /*#change color and font here*/
    background-color: #db3157 !important;
    font-family: Oswald,Sans-serif;
    font-weight: 500;
}
.ar-elementor-ribbon-inner {
    text-align: center;
    left: 0;
    width: 200%;
    -webkit-transform: translateY(-50%) translateX(-50%) translateX(35px) rotate(-45deg);
    -ms-transform: translateY(-50%) translateX(-50%) translateX(35px) rotate(-45deg);
    transform: translateY(-50%) translateX(-50%) translateX(35px) rotate(-45deg);
    margin-top: 35px;
    font-size: 13px;
    line-height: 2;
    font-weight: 800;
    text-transform: none;
    background: #000;
    color: #fff;
}

Save the change, you should see the ribbon and text showing on each column now.

additional css

And that’s it for today. Play around with CSS and change it to fit your need.

  •  
  •  
  •  
  •  
  •