Instead of having to edit CSS code, or struggle with different theme customizers, you can now customize your WordPress theme by changing different global style settings straight from the Elementor panel.
In this video, you’ll learn how to set default:
✓ Backgrounds
✓ Body text, Headings, and Links
✓ Form Fields
✓ Buttons
✓ Images
✓ And much more!
hi-oh adds if from elemental today I’ll
show you how to use elementals powerful
theme style settings which are global
settings that allow you to set default
styling options for various elements
such as backgrounds
headings patents
formfields and images as you may know
installing a wordpress theme creates a
layer of design styles and rules this
means that any new element you add to
your site may inherit their style
settings which can cause your site
design to change as well when switching
themes elementals theme style settings
prevents this from happening by taking
over the global design layer previously
handled by the theme this way you can
easily control your site’s design and
ensure that you’ve consistently used
your branding elements and other
stylistic choices across your site so
let’s dive in and see how it works for
this tutorial of god I hadn’t created a
website for beuter a spa and salon
establishment but as you can see I
deliberately have installed it yet
let’s check out the home page
a button in the header as well as
throughout the page it also has heading
widgets set to h1
h2
and h3
as well as text-editor widgets to image
widgets
a forum widget
and a link in the footer I will use
elementals theme style settings to star
them so you can see exactly how it works
across the site simply click the
hamburger menu in the upper left corner
of any page or post to access the theme
style settings it’s important to know
that theme style effects show theme
styling options so in order for it to
affect elemental elements we need to
disable elementals default colors and
fonts in elemental settings I’ll go
ahead and click here to access and
change these settings
okay great now elemento will only
inherit the fonts and colors we set in
theme style
let’s go back and start styling first in
background I’ll go ahead and give it
this pink background color so now when I
publish or update these theme style
settings all pages on my site will
automatically get this background color
as well I’ll use the finder to open the
contact page so you can see simply press
command or control + E and search for
the page then hold down command or
control to open the page in a new tab
as you can see it received the same pink
background color as well
and I can still change it on the page
itself of course
it’s important to know that these themed
style settings will be applied globally
across your website unless an elements
already has its own specific style
applied to it okay
back on our home page in theme style
let’s move on to the typography
drop-down
I’ll start with the body which affects
all paragraph text across the site I’ll
go ahead and change the text color first
next the topography
you can adjust the paragraph spacing as
well
here you can style all links that appear
on the site in our case there’s one in
the footer
you can give them a color
topography
the same goes for the have estate
let’s move on to the headings on my site
I’ll give my H ones this dark pink red
color
and in typography change the font family
and some other settings
I’ll do the same for my h2s
like before I’ll give my h3s the same
color and fun family
and change some other topography
settings as well
let’s move on to the sides buttons
in typography I’ll set the font family
as well as some other typography
settings for the buttons normal studs
are set the text color to white and the
background color to the dark pink red we
used before
on hover I’ll go ahead and reverse it
I’ll also set the border radius to zero
so the button is a rectangle
next I’ll unlink the padding values and
add 20 pixels to the top and bottom and
now it’s time to style our form widgets
a bit let’s style the fields I’ll go
ahead and set the font family
and change the text color as well as the
background color for the normal state
next I’ll change the border type to
solid and give it some width and here
give it a nice color
unfocus so when clicking on the field
I’ll darken the text color I’ll also set
the border radius to change to 30 pixels
cool and here you can control the
transition duration if you like
next I’ll give the fielder custom
painting by unlinking these values and
setting them individually
and lastly you can globally star all
images on your site as well let’s scroll
back up and check it out
there are many things you can do here
such as giving them a border
or a buck cheddar but for this design I
leave it as is okay great we done
setting up our website style guide with
elements of steam style settings let’s
check out our contact page as you can
see all of the style changes we made in
theme style are automatically applied
here also any new element you add to
your site will automatically get the
global style you’ve set in theme style
by default
I’ll go ahead and drag in a form widgets
over here it has the same design as the
form widget on our home page cool
team styles are modular meaning only the
settings you change are affected and the
rest of your site styles remain the same
go back to the homepage so you can see
what I mean
I’ll go ahead and starve this button
differently so it really stands out in
topography I changed the font family
sighs and letter-spacing
I’ll change the text color to this dog
pink
Keller our slide the opacity all the way
down so it’s transparent next I’ll set
the border type to solid
and add a line on the bottom like so
great
now I’ll just copy this button and paste
the style on to the facial treatments
pattern
what I need to do is add some padding on
the top
and I’m then as you can see the style I
gave to battens in the theme style
settings are still applied to the
buttons on my page and any new button
widgets I add to my page will receive
this style by default but an element
that already has its own specific style
applied to it will stay that way
lastly just like any other element or
editing you might do theme style works
with the revisions and history controls
so you can undo and redo changes and can
always revert back to an earlier version
of your theme style design this could
come in handy if you need to change your
site style to fit a certain campaign for
example
theme style also works with draft and
publish modes so you can test the
changes and save them to draft without
having them affect your life site
your life sites will only get the
changes applied when you click the theme
styles publish and update button well
that’s it now you know how to use
elementals powerful theme style settings
allowing you to easily control your
site’s design and ensure that you’ve
consistently used your branding elements
and other stylistic choices across your
site have fun styling around and don’t
forget to subscribe to our YouTube
channel for more tips and tutorials ciao
for now
