Introduction to Custom CSS in Elementor Pro

Опубликовано: 05 Октябрь 2024
на канале: Design School by Wpalgoridm
13,688
like

Hey Designers! CSS can change any property of your websites' HTML elements such as colour, border, background colour, box shadow and literally anything that you see on your Wordpress website.

► Get Elementor Pro — https://wpalgoridm.com/elementor

We will use Custom CSS feature built into Elementor Pro to achieve incredible and amazing customisations.

Here are just some of the many things that you can do with CSS! Don't worry just copy the code from below into custom CSS field in Elementor and just change values!

Click on Section/Column/Widget and under advanced tab head over to custom CSS. Paste the following code there to achieve various effects!

#1: Change the background colour of any Section/Column/Widget:

selector{
background-color: blue;
}

#2 Set a dotted border across any Section/Column/Widget:

selector{
border: 5px dotted blue;
}

#3 Change text colour of Heading/Text Editor Widget:

selector{
color: blue;
}

#4 Change font size of text in any text widget such as Heading/Text Editor widget:

selector{
font-size: 20px;
}

#5 Add Subtle Box shadow to any Column/Section/Widget:

selector{
box-shadow: 5px 5px 10px blue;
}

But wait there's a lot more you can do by pasting a single piece of code so stay tuned for all that.
Header tutorial:    • WordPress header tutorial : Build cus...  

Elementor basics tutorial:    • Elementor basics : In-Depth Tutorial[...  

Wordpress theme used in the video [Mandatory]: https://wordpress.org/themes/generate...

Get Elementor Pro here: https://elementor.com/pro

Make sure you subscribe and never miss out on a single amazing design tutorial.

Happy designing! Peace.

*Some Important Links*

Elementor Custom Breakpoints Tutorial:
   • Elementor custom breakpoints: Solving...  

Join the Facebook Group:   / designschoolwp  

Design your website:    • Design WordPress website  

Build your website:    • Build WordPress Website  

Customise your website:
   • Customize WordPress website