Blog

CSS codes for Elementor tutorials

Anait Boyajyan
February 21, 2024
No Comments

On this page, you can grab the codes for Elementor tutorials from my channel and use them in your projects. Just adjust the code as necessary, change the class names, colors, pixel values and much more.

Different font sizes on one line in CSS and Elementor

https://www.youtube.com/watch?v=gTFCnuK9kGAu0026t=17s

In the ‘Text Editor’ widget in Elementor, go to ‘Content’, switch to ‘Text’ editor instead of Visual and type your text. Then wrap the parts of your text you would like to have bigger in ‘span’ and give it a class name of your choice.

I want <span class="big-text">this part</span> of text to be bigger. And <span class="bigger-text">this part</span> to be even bigger.

Then go to CSS (I am using Simple CSS and JS plugin) and give your classes font sizes. You can also change the color, fonts etc.

.big-text {
	font-size: 28px;
}

.bigger-text {
	font-size: 38px;
}

How to put text in the middle of a circle in CSS and Elementor

Using a text editor widget, type your number, give it a class (in my case, I used the class “bullet-number”) and then head over to your CSS and customize the code below. I am using Simple CSS and JS plugin.

.bullet-number p{
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #ffffff;
	margin-bottom: 0px;
}

.bullet-number {
	background-color: #41b7e1;
	width: 70px !important;
	height: 70px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

Apply gradient to text in CSS and Elementor

Type your text using a Text Editor widget, give it a class (in my case, class “gradient”) and then style your class in CSS:

.gradient p{
	background-image: linear-gradient(to right, rgba(76, 138, 198, 1),rgba(136, 196, 67, 1));
	-webkit-background-clip: text;
	display: inline-block;
	-webkit-text-fill-color: rgba(255, 255, 255, 0);
}

Bullet list with custom bullets in CSS and Elementor

Create a bullet list using a Text Editor widget in Elementor, give it a class (in my case, “bullet-list”) and then head over to Custom CSS plugin and add the code below. Don’t forget to place the URL to your image from your WordPress media in the brackets!

.bullet-list li{
	list-style: none;
	list-style-image: none;
	background: url(https://yoururltotheimagehere.jpg) no-repeat 0 0.2em;
	background-size: 1em;
	padding-left: 1.5em;
}

How to remove line break on mobile and tablet devices in CSS and Elementor

In the text editor widget, add a line break using <br> tags:

This is the first sentence. <br> This is the second sentence on a new line.

Then in the ‘Custom CSS’ field, use the code below to remove the line breaks on small screens:

@media (max-width: 1023px){
selector br{
	display: none;
	}
}

How to create text with columns in CSS and Elementor

Type your text in the text editor widget and go to ‘Custom CSS’ field to add the code below:

selector {
	column-count: 2;
	column-gap: 60px;
	width: 900px;
}

Use different fonts in one line in CSS and Elementor

https://www.youtube.com/watch?v=pEIB7Obm2OMu0026t=65s

Using a text editor widget, type your text in the ‘Text’ editor, instead of Visual. Use the <span> tags and a class name to wrap the words or pieces of text that you would like to appear in different font:

I want <span class="fancy-text">this text </span> to be fancy.

Then go to your CSS and add the code below. I am using Simple CSS and JS plugin and the class name “fancy-text”:

.fancy-text{
	font-family: 'Brush Script MT';
	font-size: 28px;
	color: red;
}

Create EDITABLE circular checkmark bulleted list in Elementor and custom CSS

Create a bullet list using a Text Editor widget in Elementor, add a class name (I am using “bullet-list-checkmark”) and use the code below in your Custom CSS and JS plugin:

.bullet-list-checkmark li{
	font-size: 21px;
	list-style: none;
	list-style-image: none;
	position: relative;
	padding-left: 1.5em;
}

.bullet-list-checkmark li:before{
	content: " ";
	display: block;
	border: solid 0.5em red;
	border-radius: 0.5em;
	position: absolute;
	left: 0px;
	top: 12%;
}

.bullet-list-checkmark li:after{
	content: " ";
	display: block;
	width: 0.3em;
	height: 0.6em;
	border: solid white;
	border-width: 0 0.145em 0.145em 0;
	position: absolute;
	left: 0.35em;
	top: 20%;
	transform: rotate(45deg);
}

How to shrink image on hover using Elementor and custom CSS

Use an image widget to place your image in Elementor and add a class (in my case “image-shrink”). Then go ahead and style that class in Simple Custom CSS and JS plugin:

.image-shrink:hover{
	transform: scale(0.95);
	transition: transform 0.7s ease;
}

.image-shrink {
	transition: transform 0.5s ease;
}

How to use different color for bullet symbol and text in a bullet list in Elementor and CSS

Create a bullet list using a Text editor widget, give it a class name (I am using “bullet-list”) and use the code below in the Custom CSS and JS plugin:

.bullet-list li::marker{
	color: red;
}

If you want to color just a specific bullet (for example the second bullet in the list), use this code:

.bullet-list li:nth-child(2)::marker{
	color: red;
}

Insert inline image or graphics in text in Elementor and CSS

Type your text using a Text editor widget, switch over to the ‘Text’ tab instead of ‘Visual’ and use the code below:

I want my image <img src="https://yourimagelink.png" style="width: 20px; position: relative; top: 4px;">to appear in this text.

First, create a popup in your Elementor Pro and in the ‘Advanced’ section of Popup settings, go to ‘Open by selector’. Type your selector (I am using “.trigger”). Then on your regular page, in your text, use the following code in the ‘Text’ editor instead of ‘Visual’ one:

I want my popup to appear when I click <a class="trigger" href="#"> HERE</a>.

Create a button in the middle of the text with Elementor and CSS

In the text editor widget, wrap the word in your text that you want to turn into button into the following piece of code in the ‘Text’ editor instead of ‘Visual’:

Click <a class="my-button" href="https://www.yourlinkhere.com" target="_blank" rel="noopener">here</a> to open a new window.

Then go to the CSS and style your class (in my case I used the name “my-button”:

.my-button {
	background-color: red;
	color: white;
	border-radius: 4px;
	padding: 5px 15px;
}

Adjust alignment and spacing in lists in CSS and Elementor

Create an unordered list using the Text Editor widget in Elementor, assign it a class (my class name is “my-list”) and edit that class in CSS:

.my-list ul{
	margin-left: 1em;
	list-style-position: outside;
}

.my-list ul li{
	padding-left: 0.5em;
	margin-bottom: 0.5em;
}

.my-list p{
	margin-bottom: 0.5em;
}

If you are using an ordered list, you can use the same code as above, but instead of ‘ul’, write ‘ol’:

.my-list ol{
	margin-left: 1em;
	list-style-position: outside;
}

.my-list ol li{
	padding-left: 0.5em;
	margin-bottom: 0.5em;
}

.my-list p{
	margin-bottom: 0.5em;
}

Create a short line above text or a title in CSS and Elementor

Type your heading using a heading widget in Elementor and use the following code:

selector::before{
	content: ' ';
	border-bottom: solid red 6px;
	width: 40px;
	position: absolute;
	margin-top: -0.5em;
}

Horizontal tab titles on mobile in CSS and Elementor

Use the “Tab” widget to create your tab in Elementor. Then go to the ‘Custom CSS’ field of the widget and add the following code:

selector .elementor-tabs-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        -webkit-box-pack: center;
        list-style: none;
    }
    
    selector .elementor-tab-desktop-title {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    selector .elementor-tab-mobile-title {
        display: none;
    }
    
    selector .elementor-tab-desktop-title a:hover {
        opacity: 0.5;
    }
    
    selector .elementor-tab-desktop-title.elementor-active a{
        color: red !important;
    }
    
    selector .elementor-tab-desktop-title a{
        color: black !important;
    }

Create a non-breaking hyphen in CSS and Elementor

Write your text using a heading widget for example, and type it wrapping the word that’s using the hyphen in “span” tags as shown below:

We are working with <span style="white-space: nowrap;">use-cases</span>here.

How to make custom highlights in CSS and Elementor

Using the text widget, type your text and in the ‘Text’ editor instead of ‘Visual’, wrap the word that you would like to highlight in <span> tags:

Have a <span> beautiful </span> day!

To get the code for the gradient, I am using https://cssgradient.io/

Then go to the ‘Custom CSS’ field if you are using Elementor Pro and using one of the two ways below, create your gradient.

First way:

selector span{
	background: linear-gradient (0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(246,255,180,1) 40%, rgba(246,255,180,1) 60%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
	padding-left: 10px;
	padding-right: 10px;
}

Second way:

selector span::before{
	content: '';
	left: 0px;
	right: 0px;
	background: #ffa290;
	position: absolute;
	height: 20px;
	z-index: -1;
	top: 20px;
}

selector span{
	position: relative;
}

If you are not using Elementor Pro, using the text editor widget, wrap the word in <span> tags in the text, not visual editor and add a class to it:

Have a <span class="thick-line-gradient">beautiful</span> day!

Then go to the Custom CSS and JS plugin and style your class as follows for the first way:

.thick-line-gradient{
	background: linear-gradient (0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(246,255,180,1) 40%, rgba(246,255,180,1) 60%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
	padding-left: 10px;
	padding-right: 10px;
}

Or this for the second way:

.thick-line-gradient::before{
	content: '';
	left: 0px;
	right: 0px;
	background: #ffa290;
	position: absolute;
	height: 20px;
	z-index: -1;
	top: 20px;
}

.thick-line-gradient{
	position: relative;
}

How to create mega menu with columns in CSS and Elementor

Use the nav menu widget to place your menu and in the ‘Custom CSS’ field use the code below. Adjust the child elements in the list.

@media (min-width: 1024px) {
    selector .elementor-nav-menu li:nth-child(1) .elementor-nav-menu--dropdown{
    column-count: 2 !important;
}

selector .elementor-nav-menu li:nth-child(1) .elementor-nav-menu--dropdown li:nth-child(5) {
    break-before: column !important;
}

selector .elementor-nav-menu li:nth-child(1) .elementor-nav-menu--dropdown li:nth-child(1) {
    font-size: 21px !important;
}

}

If you are using Elementor FREE, just give your nav menu a class and edit that class in your CSS. I am using Custom CSS and JS plugin and the name of the class “custom-menu”:

@media (min-width: 1024px) {
    .custom-menu .elementor-nav-menu li:nth-child(1) .elementor-nav-menu--dropdown{
    column-count: 2 !important;
}

.custom-menu .elementor-nav-menu li:nth-child(1) .elementor-nav-menu--dropdown li:nth-child(5) {
    break-before: column !important;
}

.custom-menu .elementor-nav-menu li:nth-child(1) .elementor-nav-menu--dropdown li:nth-child(1) {
    font-size: 21px !important;
}

}

How to create square and circular images in CSS and Elementor

Use the image widget to place an image in Elementor and type the following code in the ‘Custom CSS’ field if you are using Elementor Pro:

selector img{
	width: 400px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

If you are not using the Pro version, but Elementor FREE, give your image a class (for example “rounded-image”) and use the same code in the Simple CSS and JS plugin:

.rounded-image img{
	width: 400px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

To create a square image, just remove the border-radius property.

How to create a horizontal list in Elementor and CSS

Using a text editor widget, create an unordered (bullet) list in Elementor. Then go to the ‘Custom CSS’ field if you are using Elementor Pro and add the following code:

selector ul{
	display: flex;
	list-style-type: none;
	padding-left: 0px;
}

selector li{
	padding-right: 40px;
}

If you are using Elementor FREE, give your list a class (for example “horizontal-list”) and use the same code from above in your CSS. I am using Simple CSS and JS plugin:

.horizontal-list ul{
	display: flex;
	list-style-type: none;
	padding-left: 0px;
}

.horizontal-list li{
	padding-right: 40px;
}

How to create an ordered list with numbers in circles in CSS and Elementor

Create an ordered list using a text editor widget in Elementor and add the code in the Custom CSS field:

selector li{
	font-size: 22px;
	color: black;
	font-weight: 600 !important;
	line-height: 2em;
	position: relative;
	padding-left: 0.8em;
}

selector li::before{
	content: "";
	background-color: red;
	position: absolute;
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	z-index: -1;
	left: -1.5em;
	top: 0.2em;
}

selector li::marker{
	color: white;
}

If you are using Elementor FREE, give your list a class (for example “circular-list”) and use the same code from above in your CSS. I am using Simple CSS and JS plugin:

.circular-list li{
	font-size: 22px;
	color: black;
	font-weight: 600 !important;
	line-height: 2em;
	position: relative;
	padding-left: 0.8em;
}

.circular-list li::before{
	content: "";
	background-color: red;
	position: absolute;
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	z-index: -1;
	left: -1.5em;
	top: 0.2em;
}

.circular-list li::marker{
	color: white;
}

Create custom graphics above titles in CSS and Elementor

Create a heading using a Heading widget (for example Heading 2 or h2) in Elementor and add the following code in the Custom CSS field. Don’t forget to change the h2 selector – if you are using Heading 5 for instance, write h5 instead:

selector h2::before{
	content: ' ';
	background-image: url('https://yourimagelink.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	position: absolute;
	width: 80px;
	height: 25px;
	top: -30px;
	left: -20px;
}

If you are using a FREE version of Elementor, you can add the same code to your heading class in the custom CSS:

h2::before{
	content: ' ';
	background-image: url('https://yourimagelink.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	position: absolute;
	width: 80px;
	height: 25px;
	top: -30px;
	left: -20px;
}

How to put images in semi circle and quarter circle in CSS and Elementor

Place an image on your Elementor page using an Image widget. In the Custom CSS field add the following code to add a semi circular image:

selector img{
	width: 300px;
	height: 150px;
	object-fit: cover;
	border-radius: 150px 150px 0px 0px;
}

To create a quarter circle of an image, use the following code:

selector img{
	width: 400px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 100% 0% 0% 0%;
}

How to create custom image masks with PNG layers in CSS and Elementor

Use an image widget to place the image on your Elementor page. This is the image that will be showing through your mask, not the mask itself. Go to the Custom CSS field and add the following code:

selector img{
	-webkit-mask-image: url(https://yourimagemask.png);
	mask-image: url(https://yourimagemask.png);
	-webkit-mask-size: 600px;
	mask-size: 600px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
}

If you are using a FREE version of Elementor, give your image a class (for example “image-mask”) and add the same code in your custom CSS plugin. I am using Custom CSS and JS plugin.

.image-mask img{
	-webkit-mask-image: url(https://yourimagemask.png);
	mask-image: url(https://yourimagemask.png);
	-webkit-mask-size: 600px;
	mask-size: 600px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
}

How to create custom image masks with linear gradients in Elementor and CSS

Use the Image Widget to place an image on your Elementor page. Then type the following code in the Custom CSS field if you are using Elementor Pro:

selector img{
	mask-image: linear-gradient(270deg,black 70%,transparent 100%);
	-webkit-mask-image: linear-gradient(270deg,black 70%,transparent 100%);
	width: 400px;
}

How to create custom image masks with text layers in Elementor and CSS

Use the text editor widget to place the text on your Elementor page. In the Custom CSS field of your Elementor Pro, type the following code:

selector {
	background-image: url(https://yourimagelink.jpg);
	background-size: cover;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent !important;
	background-position: 0px -280px;
}

If you are using Elementor FREE, give your image a class (for example “image-clip”) and add the same code in your CSS plugin:

.image-clip {
	background-image: url(https://yourimagelink.jpg);
	background-size: cover;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent !important;
	background-position: 0px -280px;
}

Style the file upload button in Elementor forms and CSS

Use the form widget in Elementor Pro to add a form and use the ‘File Upload’ item to add the upload button to the form. In the Advanced panel add the CSS class to your form (for example, I am using ‘upload-form’). Then add the following custom CSS code – I am using custom CSS and JS plugin:

.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button {
    border: 0px solid #CCC;
    border-radius: 20px;
    background-color: #f0f0f0 !important;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin-right: 15px;
}

How to change the color or remove the ‘No file chosen’ label of the file upload button in Elementor forms using CSS

To change the ‘No file chosen’ label color, add the following custom CSS code – I am using custom CSS and JS plugin.

.upload-form .elementor-field-type-upload input[type="file"]{
    color: red !important;
}

To remove (hide) the ‘No file chosen’ label:

.upload-form .elementor-field-type-upload input[type="file"]{
    font-size: 0px !important;
}

Change the text for the file upload button and label in Elementor forms using CSS

.upload-form .elementor-field-type-upload input[type="file"]::before{
    content: 'Browse files';
    background-color: grey;
    padding: 10px 15px;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    line-height: 3em !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

.upload-form .elementor-field-type-upload input[type="file"]::after{
    content: 'You have not chosen any files yet';
    font-size: 14px !important;
    padding-left: 10px;
}

.upload-form .elementor-field-type-upload input[type="file"]{
    font-size: 0px;
}

.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button{
    display: none;
}

Add a custom icon to the file upload button in Elementor forms and CSS before or after the text

The first way

In the first way, use the code from the previous tutorial (see above) to change the text of the file upload button to anything you want but adding an icon from the FontAwesome font before the actual button text. I am using ‘Browse files’ text:

.upload-form .elementor-field-type-upload input[type="file"]::before{
    content: 'f093' '  Browse files';
    background-color: grey;
    padding: 15px 15px;
    border-radius: 25px;
    color: white;
    font-size: 15px;
    line-height: 1em !important;
    font-family: FontAwesome, Open Sans;
    font-weight: 400;
    display: inline-block;
}

.upload-form .elementor-field-type-upload input[type="file"]::after{
    content: 'You have not chosen any files yet';
    font-size: 14px !important;
    padding-left: 10px;
}

.upload-form .elementor-field-type-upload input[type="file"]{
    font-size: 0px;
}

.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button{
    display: none;
}

The second way

In the second way, you can use a custom svg icon that you uploaded in your WordPress media:

.upload-form .elementor-field-type-upload input[type="file"]::before{
    content: url('place the link to your svg icon in your media here') '  Browse files';
    background-color: grey;
    padding: 10px 15px;
    border-radius: 25px;
    color: white;
    font-size: 15px;
    font-family: Open Sans;
    font-weight: 400;
    display: inline-block;
}

.upload-form .elementor-field-type-upload input[type="file"]::after{
    content: 'You have not chosen any files yet';
    font-size: 14px !important;
    padding-left: 10px;
}

.upload-form .elementor-field-type-upload input[type="file"]{
    font-size: 0px;
}

.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button{
    display: none;
}

The third way

The third way is using a custom svg icon as a background – my preferred way.

.upload-form .elementor-field-type-upload input[type="file"]::before{
    content: 'Browse files';
    background-color: grey;
    background-image: url('place the link to your svg icon in your media here');
    background-size: 20px 20px;
    background-repeat: no-repeat !Important;
    background-position: 15px 11px;
    padding: 10px 20px 10px 45px;
    border-radius: 25px;
    color: white;
    font-size: 15px;
    font-family: Open Sans;
    font-weight: 400;
    display: inline-block;
}

.upload-form .elementor-field-type-upload input[type="file"]::after{
    content: 'You have not chosen any files yet';
    font-size: 14px !important;
    padding-left: 10px;
}

.upload-form .elementor-field-type-upload input[type="file"]{
    font-size: 0px;
}

.upload-form .elementor-field-type-upload input[type="file"]::file-selector-button{
    display: none;
}

How to style radio and checkmark field box in CSS and Elementor forms

Use the form widget in Elementor Pro to add a form and use the ‘radio’ item to add the radio boxes to the form. You can also use the checkmark boxes. The difference between radio and checkmark box is that the radio box allows you to check only one option, while with checkmark boxes, you can choose multiple options.

In the Advanced panel add the CSS class to your form (for example, I am using ‘upload-form’). Then add the following custom CSS code – I am using custom CSS and JS plugin.

/* This hides the default radio box circles */
.upload-form .elementor-field-option input[type="radio"] {
    display: none !important;
}


/* This customizes the color of your labels */
.upload-form .elementor-field-option label{
    color: black !important;
}


/* This adds the custom radio box circles for unchecked and checked states */
.upload-form .elementor-field-option input ~ label::before{
	content: '\00a0';
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid blue !important;
	margin-right: 10px !important;
	font-size: 14px !important;
	line-height: 17px !important;
}


/* This customizes only the checked state of the radio box circle */
.upload-form .elementor-field-option input:checked ~ label::before{
	background-color: blue;
	box-shadow: inset 0px 0px 0px 3px white !important;
}


/* This adjustes the spacing between the options */
.upload-form .elementor-field-option{
    margin-bottom: 2px !important;
}

For checkbox, just simply replace type=”radio” with type=”checkbox” in the code provided. So for example to hide the default box, use this:

.upload-form .elementor-field-option input[type="checkbox"]{
	display: none !important;
}

Style radio and checkmark field box in CSS and Elementor forms with custom icons

To add a custom icon, instead of just simple filled circle to your radio boxes, add the following code using one of the ways below:

First way – using a FontAwesome icon:

/* This hides the default radio box circles */
.upload-form .elementor-field-option input[type="radio"] {
    display: none !important;
}

/* This customizes the color of your labels */
.upload-form .elementor-field-option label{
    color: black !important;
}


/* This adds the custom radio box circles for unchecked and checked states */
.upload-form .elementor-field-option input ~ label::before{
	content: '\00a0';
        font-family: 'FontAwesome';
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid blue !important;
	margin-right: 10px !important;
	font-size: 14px !important;
	line-height: 17px !important;
}


/* This customizes only the checked state of the radio box circle */
.upload-form .elementor-field-option input:checked ~ label::before{
	content: '\f00c';
	color: blue;
}


/* This adjustes the spacing between the options */
.upload-form .elementor-field-option{
    margin-bottom: 2px !important;
}

Second way – using a custom svg icon from your WordPress media library:

/* TO ADD A COMPLETELY CUSTOM SVG ICON FROM YOUR WP LIBRARY */

/* This hides the default radio box circles */
.upload-form .elementor-field-option input[type="radio"]{
    display: none !important;
}

/* This customizes the color of your labels */
.upload-form .elementor-field-option label{
    color: black !important;
}


/* This adds the custom radio box circles for unchecked and checked states */
.upload-form .elementor-field-option input ~ label::before{
    content: '\00a0';
    font-family: 'FontAwesome';
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid black !important;
    font-size: 14px !important;
    line-height: 17px !important;
    margin-right: 10px !important;
}


/* This customizes only the checked state of the radio box circle */
.upload-form .elementor-field-option input:checked ~ label::before{
    content: '\00a0';
    background-image: url('https://youriconlinkhere.svg');
    background-repeat: no-repeat;
    background-size: cover !important;
}


/* This adjustes the spacing between the options */
.upload-form .elementor-field-option{
    margin-bottom: 2px !important;
}

For checkbox, just simply replace type=”radio” with type=”checkbox” in the code provided. So for example to hide the default box, use this:

.upload-form .elementor-field-option input[type="checkbox"]{
	display: none !important;
}

How to style form fields in Elementor with CSS

Use the form widget in Elementor Pro to add a form and in the Advanced panel add the CSS class to your form (for example, I am using ‘upload-form’). Then add the following custom CSS code – I am using custom CSS and JS plugin.

.upload-form .elementor-field-textual {
	border-radius: 10px;
	border: 0px solid red !important;
	background-color: #f0f0f0 !important;
	margin-top: 8px;
	margin-bottom: 12px;
}

.upload-form .elementor-field-label{
	font-size: 14px;
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
}

.upload-form .elementor-field {
	font-size: 14px;
	font-weight: 400 !important;
	font-family: 'Open Sans', sans-serif !important;
}

.upload-form .elementor-button[type="submit"]{
	background-color: #e56458 !important;
	border-radius: 20px !important;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 16px;
	font-weight: 600;
}

Make text tables in Elementor using CSS only

Use the text widget in Elementor to create your content for the table using paragraphs and unordered list. Then go to the Custom CSS field if you are using Elementor Pro and add the following code if you want to make the table with 4 columns for example:

selector {
    column-count: 4;
    column-gap: 0px;
    font-family: 'Roboto', sans-serif;
    width: 800px !important;
}

selector ul{
    list-style-type: none !important;
    margin-left: 0px;
    padding-left: 0px;
}

selector p{
    font-weight: 700;
    color: black;
    margin-bottom: 5px;
}

selector ul li:nth-child(odd){
    background-color: #e7e7e7;
}

selector ul li,
selector p {
    padding-left: 15px;
}

selector ul li{
    padding-top: 5px;
    padding-bottom: 5px;
}

selector ul:nth-child(2) li{
    border-radius: 15px 0px 0px 15px;
}

selector ul:nth-last-child(1) li{
    border-radius: 0px 15px 15px 0px;
}

selector ul:not(:nth-child(2)),
selector p:not(:nth-child(1)){
    text-align: center;
}

If you are not using Elementor Pro, but a free version, just assign a class to your text editor widget (for example ‘table-text’) and edit this class in your CSS. I am using Simple Custom CSS and JS plugin:

.table-text {
    column-count: 4;
    column-gap: 0px;
    font-family: 'Roboto', sans-serif;
    width: 800px !important;
}

.table-text ul{
    list-style-type: none !important;
    margin-left: 0px;
    padding-left: 0px;
}

.table-text p{
    font-weight: 700;
    color: black;
    margin-bottom: 5px;
}

.table-text ul li:nth-child(odd){
    background-color: #e7e7e7;
}

.table-text ul li,
.table-text p {
    padding-left: 15px;
}

.table-text ul li{
    padding-top: 5px;
    padding-bottom: 5px;
}

.table-text ul:nth-child(2) li{
    border-radius: 15px 0px 0px 15px;
}

.table-text ul:nth-last-child(1) li{
    border-radius: 0px 15px 15px 0px;
}

.table-text ul:not(:nth-child(2)),
.table-text p:not(:nth-child(1)){
    text-align: center;
}

Vertically center bullets with long text in CSS and Elementor

Create an unordered or bullet list using a Text editor widget in Elementor. Then clear your list style to remove the default bullets set as ‘markers’, add a custom circular bullet using a before pseudoelement and set the list item display property to flex in order to centrally align the content. Now if you have multiple lines within your list items, the text will be vertically centrally aligned with the bullets. Go to your Custom CSS field of the text editor widget and add this code:

selector li{
	font-size: 18px;
	list-style: none;
	list-style-image: none;
	position: relative;
	padding-left: 0em;
	display: flex;
	align-items: center; /*You can set it to start, center or end*/
	margin-bottom: 20px;
}

selector li::before{
	content: " ";
	display: block;
	border: solid 0.2em grey;
	border-radius: 0.5em;
	margin-right: 15px;
	margin-left: 0px;
	padding-left: 0px;
}

selector ul{
    padding-left: 0px;
}

If you are using a custom image or svg file as a bullet, use the code below and place the URL to your bullet image in the background url:

selector li{
    list-style: none;
    list-style-image: none;
    margin-bottom: 20px;
    background: url(https://yourmedialinkhere.svg) no-repeat 0em;
    background-size: 1em;
    padding-left: 1.8em;
}

selector ul{
    padding-left: 0px;
}

If you don’t have Elementor Pro, just assign a class to your text editor and replace the ‘selector’ with the class name in your CSS editor.

Change font color of certain repeated words in JS and Elementor

Use the text editor widget to type your text in Elementor and assign that text a class. For example, I am using the class “dummy-text”. The class “red-text” is the name of my class that I will style in CSS to give those words or spans a specific look. You can name these classes anything you want. Then, place the ‘HTML’ widget on your web page in Elementor editor and add the Javascript (JS) code below. Don’t forget to adjust the name of your class (instead of “dummy-text”), as well as “red-text” and to replace the word “ipsum” below with any word in your text that you would like to change the color or the style of or to highlight.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

$(function() {
  
  // Find a specific word
  const regex = /ipsum/ig;
  
  $(".dummy-text").html(
    $(".dummy-text").html().replace(
    regex,
    "<span class='red-text'>$&</span>"
  ));
});

</script>

Then, go to your CSS and define the class “red-text” (or any other name of the span class that you put in your JS code above) and that’s it!

Direct checkout in WooCommerce & Elementor (skip the cart page)

First, make sure to enable the ‘Go to cart page after successful addition’ in your WooCommerce > Product settings. This will make the ‘Add to cart’ button go to the Cart page that we will now redirect to the Checkout page.

Then, using a Code Snippets plugin, we will add a few lines of PHP code, so no paid plugins are necessary to skip the Cart page and create a direct Checkout!

Just add the code below in your Code Snippets (add a new PHP code there) and paste these few lines below and select ‘Run only on site front-end’:

//skip cart and go straight to checkout
add_filter( 'woocommerce_add_to_cart_redirect', 'skip_wc_cart' ); 
function skip_wc_cart() {
   return wc_get_checkout_url();
}

//remove the "has been added to your cart" message
add_filter( 'wc_add_to_cart_message_html', '__return_false' );

Custom Step 1,2,3 ordered lists in Elementor and CSS

Using your Text Editor widget, add your ordered list. Then, if you are using Elementor Pro, use the ‘Custom CSS’ field in the Advanced panel of the widget and add the following CSS to add the word ‘Step’ before every number (counter) of the list items. You can change the word ‘Step’ for anything you like in the CSS code below:

selector ol li{
	counter-increment: li;
}

selector ol li::marker{
	content: 'Step ' counter(li) ': ';
	font-weight: 600;
	color: red;
}

selector ol{
	list-style-position: inside;
	padding-left: 0px;
}

If you want to place the words ‘Step 1, 2, 3’ ABOVE the list item, then you need to use a before pseudoelement instead of a marker and use display: block on it. Use the code below:

selector ol li{
	counter-increment: li;
	margin-bottom: 20px;
}

selector ol li::before{
	content: 'Step ' counter(li) ': ';
	font-weight: 600;
	color: red;
	display: block;
}

selector ol{
	list-style-type: none;
	padding-left: 0px;
}

If you don’t have Elementor Pro, just assign a class to your text editor and replace the ‘selector’ with the class name (including the dot – ‘.’) in your CSS editor.

Zoom image effect on hover using Elementor and CSS

To create a smooth zoom in effect on image hover, use the Image widget to place your image, set the section width in pixels and then go to your Custom CSS field within the Advanced tab if you are using Elementor Pro. Add the following code:

selector img:hover{
	transform: scale(1.3);
}

selector img{
	transition: 1s ease;
}

selector{
	overflow: hidden;
}

If you don’t have Elementor Pro, just assign a class to your image widget and replace the ‘selector’ with the class name (including the dot – ‘.’) in your CSS editor.

Current post highlight in the category-based post list in Elementor

If you want to create a post list including the posts of the same category like the post that you are currently viewing, include that current post in that list and highlight it in the list, you can do so using a Code snippet. The widget ‘Related posts’ in Elementor doesn’t include the current post in the list, so even though you can filter the posts based on the category you are currently viewing, this is difficult to achieve just with Elementor.

However, you can use the following procedure:

Use the Posts widget to create your post list on your Single Post template. Then assign a CSS class to this post widget (for example ‘post-list’). Go to Advanced > Query, leave Source to ‘Posts’ and in the Query ID type “my_custom_filter”.

Then, using a Code Snippets plugin, we will add a few lines of PHP code, so no paid plugins are necessary!

Just add the code below in your Code Snippets (add a new PHP code there) and paste these few lines below and select ‘Run only on site front-end’. Then save and activate the code.

add_action( 'elementor/query/my_custom_filter', function( $query ) {
  //get ID of current post
  $id = get_queried_object_id();
  // get current taxonomy - in this case the category
  $tax = get_the_terms( $id, 'category');

  $tax_query = array(
    array(
      'taxonomy' => 'category',
      'field' => 'slug',
      'terms' => $tax[0]->slug,
    ),
  );

  $query->set( 'tax_query', $tax_query );

} );

// Add CSS class to current post in post list
add_filter('post_class', 'highlight_current_post', 10, 3);
function highlight_current_post($classes, $class, $post_id) {
    if (is_single() && in_the_loop()) {
        // Get ID of current post
        $current_post_id = get_queried_object_id();
        if ($post_id == $current_post_id) {
            $classes[] = 'current-post';
        }
    }
    return $classes;
}

This will filter the post list based on the category of the post that you are currently viewing, include that current post in the list and assign a class ‘current-post’ to the current post in that list that you can then use to style and highlight in CSS.

You can then go to your CSS editor and style that class as follows:

.post-list .elementor-post.current-post a{
	color: red;
}

Remember that we assigned the class ‘post-list’ to our Posts widget on the Single post template page, but you can use any other class name that you used. And the ‘current-post’ class is the class name generated by the PHP code above for our current post in the list.