How to Add Custom CSS in Elementor [PRO]

In this tutorial we learn how to add Custom CSS code to your Elementor website.

The tutorial will cover:
✔︎ What is CSS
✔︎ How to work with CSS in Elementor
✔︎ How to use CSS to enhance your designs
✔︎ CSS tips & tricks
✔︎ And much more!

Credits:

See Also:

Don’t forget to subscribe to our channel!

Timestamps:
00:00 - Intro to CSS
01:04 - Example 1 - Text Stroke
01:58 - Example 2 - Floating Animation
02:37 - CSS structure
03:18 - Applying rules to your design
03:53 - Outro

[devtanvir]

Custom CSS is a game-changer. I am using it in every web project.

[bySterling]

Great CSS 2:45 simple explanation and love floating effects!

[interiorflash]

In this 4 minutes i understand how CSS works 💪 wow ..love it ...

[douglascapron]

Great tutorial. However I keep getting error messages in the Custom CSS text box such as: expected (static | relative | absolute | fixed | inherit) but found webkit 'sticky'. for example

[katcd]

Hello, thank you! I have a question, is it possible to add multiple CSS in the classes CSS?

[itsmeKxnzo]

Your video is more helpfull. You will explain very simple💝

[jahanteach]

thank you for this great video, I understand step one, but when I try to use complex CSS in Elemtor pro, it didn't work. a CSS with Chile declaration. I try a lot but I cant. Css in this video was so easy. I will be thankful for any help.

[sudarshangain]

Thanks, sir your video is very helpful

[fabianschultz]

Is it possible to copy content from one pricing page to a new created pricing page via css id or css class?

[girafedigital]

I am trying to center an element (emementor alignment tools not working) in elementor. I don't know CSS at all. I have no idea what code to pop into the custom CSS box to center the element?

[Mr_Brian]

Kindly help, there isn't syntax highlighting or line number where I put the custom CSS. It's just one big blank text area.

[dreubz]

While i can appreciate the convenience of having a custom css area attached to all widgets, columns and sections. Is there a way to see all of it in one place for de-bugging purposes? I have come from beaver builder and with that, all the css is in one place. While a bit laborious to set up i think this is preferable in the long run when you need to come back to a project months later and you can see it all like that. Is there a way to see all of it in elementor?

[thungangothi]

I used code in this video with text of header. However, when I edit the color of text of content, it is faulty. I don't know why, please help me, thank all!

[niclienquan]

Do you have a video on how to optimize the size and make the website lighter in wordpress? thanks your video is very helpful

[michaelthomas]

Great tutorial. I'm sure that this is possible, but not quite sure how to accomplish it. I'm trying to reposition an image within a gallery widget using CSS. Are there any resources that can show me how to accomplish this? Many thanks.

[DrAGCs]

is it possible to add my own background video, do i need a custom css?

[mitkohubnerdasistderweg]

Heyo ;)
I am looking for a solution to a problem I am having with the Elementor widget TABS.
I am stuck right now. I want to set the tabs titles not on top but on the bottom for the mobile view. But this is not possible in the default settings. However, I am pretty sure that there is a CSS solution for this.
But my search so far has yielded no results. Maybe there is someone here who can help me.
I already work with the Flexbox

[tubebility]

I have some tips to share, but it's not showing up!

[troubleddreamer]

so form free to $200 JUST TO WRITE MY OWN CODE?!?!?!!??!?!!?!?!?!? 😭