In this tutorial we learn how to and where to apply it.
The tutorial will cover:
✔︎ What is CSS
✔︎ How to work with CSS in Elementor
✔︎ CSS tips & tricks
✔︎ And much more!
Credits:
Floating Animation CSS
Text Stroke CSS
See Also:
Help Center Doc
Hey there. its Ash from Elementor.
Today we’re going to learn about CSS, what it is, and how to add it within Elementor.
CSS is the language which allows us to control the presentation of elements, layout, colors, effects, behaviors, and more.
You can learn how to write CSS by visiting w3schools.com/css, or by any other resource you find online.
The Elementor editor lets us create amazing websites with ease, while showing us a real time preview. It then automatically creates the necessary code for us in the background.
But how can we achieve a unique design or animation that can’t be done with the editor alone? Like this text stroke here? Or how to add special animations like these floating shapes here?
This is where custom CSS comes in! With Elementor Pro, we can add custom CSS to every Section, Column or Widget.
Okay let’s take a few steps back to the initial state, and start with our first example.
In order to achieve the text stroke effect, I searched for “CSS text stroke”, and found this snippet of CSS.
This link will also be available for you in this video description.
Let’s copy the code snippet.
Back on our page, simply select the element you would like to apply the code to, directly, or through the Navigator. Now go to Advanced Tab.
Open “Custom CSS”. Here you can add your code and you’ll see the changes instantly!
OK great, now I’ll just have to dive into the code and change the properties here, let’s replace 1px with 2px, and white instead of black. Magic!
Next, we’ll add the floating animation with CSS.
I searched for “CSS floating animation” and found this piece of CSS. The link for this snippet is also attached in the video description for your convenience.
I can see in the preview here, it animates the grey square and is exactly what I need for my background shapes. So let’s copy it.
Let’s go to our image, Advanced tab, and in Custom CSS, let’s paste in the code.
But nothing is happening. Do not worry. We will make some small adjustments to make it work.
Before we do this however, let first learn how CSS is constructed.
CSS is built from selectors, which tell the browser “Hey, search for h1 element” as an example.
Right after, we have declarations – which can be seen in the curly brackets,
These are the rules which are applied to the selector.
Inside we have properties …and values.
A semicolon (;) is used to separate properties.
If you see a dot, it means “Hey, search for an element with a specific class name”
And if you see a Hashtag it means a unique ID name. Which is like a class name, but can’t be used more than once.
We can select every element, go to the advanced tab and give it a class name or unique ID.
Now back in our code.
You can see we have a dot here, which means it’s a class – going by the name ‘floating’.
So all we have to do is copy the class name, open the advanced tab, and paste the same class name to our element, here.
An alternate method is to simply replace the class with the word ‘selector’. This tells the Elementor editor to apply the CSS to this currently selected element. And as you can see it gives us the same result.
And there we have it, you now know what CSS is and how to apply it to every element within the Elementor editor.
How will you use custom CSS in your website? Share with us in the comments below your creations, and don’t forget to like and subscribe to our channel.
