Elementor is the most popular page builder for WordPress. If you are a web designer or web developer like me, you will hear and see tons of articles and videos talking about Elementor. Elementor saves you a ton of time and is easy to use. If you want new widgets that are not in Elementor, you just create one for your own following Elementor Widgets document.
Today, I have to implement the ribbon in Elementor for one of my client sites, the method is simple and easy to apply to any widgets. So I would like to share it with you.
What we will build
Below is what I want to see on the website. The orange ribbon on the column.
Basically, you create two columns in your section. You add any widget (Icon Box, Image, or anything) to the column. We then add the HTML code widget at the beginning of the column. Finally, we added the HTML code and CSS to style the ribbon as shown above. That is the whole concept of how to create the ribbon for Elementor in this post.
Add an HTML widget for creating a ribbon (Top left ribbon)
For creating the ribbon, we will use the HTML widget. In this post, we will create two ribbon directions. One is on the top left of the column. Another is on the top right of the column.
Now add the HTML code and CSS below into the HTML widget. This code will create the ribbon on the top left of the column for us.
<style>
/* create the ribbon box */
.ar-ribbon-left-box {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 150px; /* it needs to create the square box */
height: 150px; /* it needs to create the square box */
overflow: hidden; /* it will hide the element when it is overflow */
}
/* rotate the ribbon */
.ar-ribbon-left-box .ar-elementor-ribbon-rotate {
/* rotate ribbon at top left of column */
/* you may change the value of both translateX() to meet your need */
-webkit-transform: translateY(-50%) translateX(-50%) translateX(45px) rotate(-45deg);
-ms-transform: translateY(-50%) translateX(-50%) translateX(45px) rotate(-45deg);
transform: translateY(-50%) translateX(-50%) translateX(45px) rotate(-45deg);
/* add margin-top for the ribbon. it pushes the ribbon from the left corner */
margin-top: 45px;
/* set text line-height */
line-height: 2;
/* set center aligment */
text-align: center;
/* set font and color */
color: #fff;
font-size: 11px;
font-weight: 300;
background-color: #d5a021;
}
</style>
<!-- the ribbon structure -->
<div class="ar-ribbon-left-box">
<div class="ar-elementor-ribbon-rotate">Remote Work</div>
</div>
Save the change, you should see the ribbon and text showing on each column now.
Add an HTML widget for creating a ribbon (Top right ribbon)
If you want to add the ribbon on the top right of the column. You will add the HTML code below to the HTML widget.
<style>
/* create the ribbon box */
.ar-ribbon-right-box {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 150px;
height: 150px; /* it needs to create the square box */
overflow: hidden; /* it will hide the element when it is overflow */
}
/* rotate the ribbon */
.ar-ribbon-right-box .ar-elementor-ribbon-rotate {
/* rotate ribbon at top right */
/* change translateX(50%) translateX(-45px) to fit your text */
-webkit-transform: translateY(-50%) translateX(50%) translateX(-45px) rotate(45deg);
-ms-transform: translateY(-50%) translateX(50%) translateX(-45px) rotate(45deg);
transform: translateY(-50%) translateX(50%) translateX(-45px) rotate(45deg);
/* put the ribbon from the corner */
margin-top: 45px;
/* set text line-height */
line-height: 2;
/* set center aligment */
text-align: center;
/* set font and color */
color: #fff;
font-size: 11px;
font-weight: 300;
background-color: #d5a021;
}
</style>
<!-- the ribbon structure -->
<div class="ar-ribbon-right-box">
<div class="ar-elementor-ribbon-rotate">WordPress</div>
</div>Save the change, you should see the ribbon and text showing at the top right of the column now.
Get rid of the space between the ribbon and the widget below
Because we added the div tag for our ribbon. It will create the space between our ribbon and the widget. To get rid of the space, you can set the negative margin-top for the widget. In my case, I created the ribbon for the Icon Box widget. So I placed the HTML widget above the Icon Box widget. Then I set the margin-top of the Icon Box widget as -20px via “Advanced tab>Layout”. Now I have no space between the ribbon and the Icon Box widget.
Wrap up
You will find other methods on how to create the ribbon for Elementor on the internet. My method is another option you can use. It is easy to customize my code to fit your needs. Using the CSS transform property is powerful.
With Elementor Pro, you can build almost everything you imagine. You control your design for almost every pixel. Beginners to Experts enjoy using Elementor Pro for creating the website. Give it a try if it is not your choice, 30-day refund policy without asking is offered from Elementor as well. Elementor is always my choice for WordPress.
That’s it for today.
