Where WordPress themes end and Elementor takes over. A presentation for the Boulder Elementor meetup group in February 2022. Presented by Matt Wood.

1. 1
Hi! My name is Matt Wood
I am a designer & developer at YellowDog Denver. I’ve been working
in the graphic design, print and related industries since 1998. In 2019
I transitioned to a Jr. Web Developer role here at YellowDog, with no
prior web experience. I began working with WordPress, Elementor and
related tools such as Dynamic.ooo, Crocoblock suite & other related
plugins. Meetups such as the Boulder Elementor group have been
essential in my learning over the past two years.

2. 2
Where themes end & Elementor takes over
Elementor’s theme styler can be confusing at first, especially when
you are used to using a traditional WordPress theme.
Today I’ll go over the differences, what to watch out for,
and some tips & tricks to improve your Elementor experience.
+

3. 3
Agenda
Traditional WordPress with a theme vs. WordPress with Elementor Pro
How are they the same, what are the differences and what each approach is better at.
Elementor’s global fonts & global colors.
What are they, how do I set them up and what benefits do they offer me?
Elementor Pro’s theme styler
Which boxes do I check, and what happens when I do? What the heck is a “Theme Styler?
Headers & footers.
What are my options? How & where do I set the darn things up?
WooCommerce.
Where does Elementor improve the WooCommerce experience, and what options do I have when
customizing a WooCommerce shop with Elementor?
Tips, Tricks, and time for questions
Pitfalls to avoid and workflow hacks to improve your Elementor experience.

4. 4
Traditional WordPress (Super basic stuff you probably already know, but I didn’t)
• WordPress install
WordPress is a CMS (content management system). This allows you to keep your content in one
place, and your styling in another.
• WordPress dashboard
This is where you are able to add pages, posts, media files, menus and access plugins, themes
and site-wide settings.
• Theme
Traditionally, this is where you controlled the layout & styling of your pages via PHP templates
for pages, posts, headers, footers & archive pages.
Pro themes often include templates, advanced WooCommerce controls, header & footer controls,
sidebars & even page builders.
Pairing a Pro theme with Elementor Free is a good solution if you are comfortable with your
theme and only want the page builder functionality of Elementor.
Sometimes having a theme make choices for you can be helpful. Guardrails are ok and help you
to focus. Time & budget are always a factor.
+

5. 5
WordPress + Elementor Pro
• Using a Pro theme here can interfere with Elementor, causing confusion
& styling conflicts.
This is why Elementor suggests using Hello, which offers little to no styling, letting Elementor
take over and do the bulk of the work.
• Allows total customization, which can be overwhelming without a plan.
• Can also take longer, since you have to make more choices, and future
edits can also be more complicated.
• You can create custom headers, footers, post templates, page templates,
archive pages, etc. But, you can also create different templates for
different post types, different headers for different pages, & multiple
shop archive pages for different sections of your store among other
things.
+

6. 6
Global fonts & global colors
Global fonts & global colors help to minimize CSS used, and make future
edits easier. But, you have to be consistent with how you use them.
First, you have to Edit a
page with Elementor, and
hit the 3-bar menu to go
to Site Settings.
The global colors & fonts
in question.
Global colors. This is
where you can edit your
existing global colors.
Global fonts. This is
where you can edit your
existing global fonts &
set a fallback family.

7. 7
Global fonts & global colors
• Global fonts & colors use CSS variables to minimize the
amount of code that is repeated.
• You can add a Global color from any color picker, not just on
the Site Setting menu in the
Elementor editor.
• You can add a Global Font from any text box, not just the
Site Setting menu in the Elementor editor.
• Then you can make edits across the site from one location,
instead of having to go to each template, page and post to
update a brand color or font size.
• You can also set your responsive (tablet & mobile) settings
in the global fonts to keep things consistent and save time
while updating your mobile views.
You can create a global
color from any color
picker as you work.
Don’t forget to name it
something descriptive!

8. 8
Theme Styles (what the heck are these boxes?)
• This where everyone gets confused.
This is normal.
• Check the boxes on the Dashboard ->
Elementor -> Settings. This disables
Elementor’s default settings and makes
Elementor use your theme colors &
fonts. If you are using Hello, there are
no theme colors & fonts, just what you
set up in Site Settings under Global
Colors & Fonts.
In the Dashboard, go to
Elementor’s settings.
Checking these boxes will allow Elementor to become more
powerful than could ever imagine.

9. 9
Theme Styles (what the heck are these boxes?)
• Read this article:
https://elementor.com/help/how-elementors-theme-style-and-design-system-options-work-
together/
• Checking these boxes also allow Elementor to control Typography, Buttons, Form Fields & Im-
ages, & if you are using Hello, headers & footers (mostly for Elementor Free, since Elementor Pro
already has headers & footers in Templates -> Theme Builder.)
• This is what allows Elementor to take over from a theme and lets you create your own, more
custom theme.

10. 10
Theme Styles (what the heck are these boxes?)
• A full-featured Pro theme, such as Astra Pro, will have buttons, typography, etc in the theme
customizer and may be quicker to set up, but not exactly what you want.
Astra’s Theme customizer.
Substitute your theme of
choice here for more or
less options.
Astra Pro has many many options. Other Pro
themes will have similar amounts of options.
Mixing Elementor Pro with a Pro theme can
cause conflicts & confusion.

11. 11
Headers & Footers
• Elementor Pro: Controlled from Templates -> Theme Builder. Allows multiple options and display
settings. For example, a different header for your home page vs interior pages, different footer
on blog posts or shop pages.
The new theme builder, love it or hate it. Add as many headers &
footers as you want from here.

12. 12
Headers & Footers
• Elementor Free + Hello: Controlled from Site Settings while editing a page with Elementor. This
is one of Elementor’s quirks. Only allows one header & footer per site, but is free and uses the
Elementor builder to allow customization.
This option will only appear if you have the Hello theme activated.
From here you can use Elementor to build a header & footer layout
for your site.

13. 13
Headers & Footers
• Traditional theme: Controlled from the Dashboard -> Appearance -> Customize menu. Varies
from theme to theme, may offer exactly what you want but you are stuck with what they offer
you.
Astra’s header builder

14. 14
Headers & Footers
• Menus are always controlled from the WordPress Dashboard, and aren’t accessible in Elementor
or your Theme until you create them in the Dashboard first. (It’s gotten me more than once)
Appearance -> Menus. Don’t forget to save!
Learn from my mistakes.

15. 15
WooCommerce
• Elementor Pro now offers Cart, Checkout, My
Account and Single Product page & Archive
(shop) page. For more information, read this ar-
ticle: https://elementor.com/blog/new-woocom-
merce-builder-features/
• For Cart, checkout, My Account pages: go to the
page created during WooCommerce setup, & Edit
with Elementor
Elementor Pro’s new-ish WooCommerce widgets.
Checkout, Cart & My Account should be used on
their respective pages.

16. 16
WooCommerce
• For Single Product & shop archive, create with Elementor’s Template -> Theme Builders. Can
create multiple types and assign display properties using taxonomies, tags, etc.
• Elementor Free + Hello: Offers little to no WooCommerce customization and isn’t recommended.
• Traditional Theme: Control WooCommerce via the customizer and varies from theme to theme.
• Other plugins can extend WooCommerce + Elementor, such as JetWooBuilder and CoDesign-
er (formerly called Woolementor). These allow control over all the shop and checkout steps, but
more power = more responsibility.

17. 17
General tips & tricks
Try to set up as much as you can at the beginning of a project to save
time later.
This includes desktop, tablet & mobile settings for global fonts. Text styles for repeated ele-
ments, such as buttons. Otherwise, going back and editing everything later is a pain.
Save reusable sections as templates, and reuse them when possible.
Save them as a template. Save them as a Global Widget. Or insert them via Shortcode. Don’t
forget to set up responsive views first before reusing something throughout the site, or you will
have to go back and edit them all anyways.
Custom headers & footers can be tricky, especially in mobile views.
It’s possible to create a desktop navigation and a mobile navigation and have them only display
on their respective screen sizes. Not the most elegant solution, but sometimes you have dead-
lines. You have to weigh all the costs, whether to add another plugin, spend more time now, scrap
some of the custom design, or have site speed prioritized.
Cheap -> Fast -> Good. Pick two.

18. 18
General tips & tricks (continued)
• Remember to save your hover state colors as global
colors for reuse later to add consistency & save
time.
• Try to name things descriptively, so when you go
back in 3 months to update something you aren’t
completely lost.
ELEMENTOR HEADER #3456 isn’t helping anybody.
Seriously.
Name your templates.
Future you will be much happier.

19. 19
General tips & tricks (continued)
• Elementor has keyboard shortcuts that are very useful.
https://elementor.com/help/hotkeys/
ctrl/cmd + e - Finder. You can jump to other pages, posts, etc.