3. ● The meetup is 1.5 hours (approx)
● Let’s keep it personal (if possible use
video when you are speaking)
● Please mute your mic, when you are
not speaking.
● If you would like to speak, please use
the “Raise hand” feature
Please note that this session might be
recorded and will be shared with you after
the session is terminated.
For more information: legal@elementor.com
Welcome Notes
1. Press on the participants button
2. Than press “Raise Hand” button in this window
Julie Pires
Tom V
4. Meet the Boulder Leaders!!
Sharing Knowledge and Resources
Angela Bowman
@askpwgirl
Bethany Siegler
@uniquethink
Dave Warfel
@davewarfel
Ron Broome
https://events.elementor.com/elementor-boulder/
5. Where do you live?
Please put in chat and say hi!
Building Community
6. Agenda
How to switch your site to Elementor:
1. Create a Style Guide page.
2. Make best use of Global Colors
3. Set Typography
4. Style buttons
5. Save templates from other sites, such as Header, Footer, and Contact
Page and Import to your new site!
6. Custom CSS to selectors to add to every site
7. How to use custom fonts
8. What to include in your website Style Guide
● Heading 1-5 tags
● Body text
● Bullet and numbered lists
● Buttons including hover state
● Link colors
● Italic and bold fonts
● Logo variations
● Icons
● Colors
● Image size examples and styles (and captions)
● Section and column padding
● Post grid styling
● Block quotes
https://elementor.com/blog/web-design-style-guide/
9. Elementor Settings
● In order for Global Site Settings to work, you must disable the default colors and
fonts under Elementor > Settings.
10. Setting up Style Guide template in Elementor
1. Go to Templates > Saved Templates
2. Click Add New
3. Choose Template Type Page
4. Enter Style Guide for the template name
5. Click Create Template
6. In the Page Settings, choose Elementor Canvas for the Page Layout.
7. Add the items from the previous slide to the blank layout or import this sample file:
https://drive.google.com/file/d/10IDzlD1GB4xU2HicK0GpQM64f4_-S1_t/view?usp=sharing
11. Creating Color Palette
● Use existing logo and branding for guide
● Keep it simple - use shades of a color!
● Text, Heading, and Link colors - need to be dark with plenty of contrast against
background
● Background colors - needs to be able to contrast with white or black text
● Use the color wheel!
● Button or call to action colors
● Try a color palette generator using one of your brand colors:
https://www.canva.com/colors/color-palette-generator/
● Adjust colors for Accessibility
● https://www.canva.com/learn/color-meanings-symbolism/
12. Elementor Global Colors
● In Elementor Layout, click the hamburger menu and choose Site Settings.
● Set Global Colors:
○ Primary Colors are used for Headings and Icons.
○ Secondary Colors are used for List Items, Subheadings, Animated Headings, and Price Table
backgrounds.
○ Text Colors are used for Paragraphs and Menu items
○ Accent Colors are used for Links, Button backgrounds, Tab and Accordion headings, and
Badges
https://elementor.com/help/which-elements-are-impacted-by-the-default-color-palette/
13. Choosing Fonts
● Heading fonts can be fancier
● Body fonts should be simple
● Use font pairing guides
● Google fonts
● Typekit
● Fonts.com
https://www.canva.com/learn/the-ultimate-guide-to-font-pairing/
14. Global Fonts
● Primary - headline
● Secondary - subheads
● Body text
● Accent - buttons
● Others you want to add
● I usually select my fonts here to avoid loading too many
fonts on the site, but I don’t use these in the Typography
section because you can’t override them easily in layouts.
16. Buttons
● Text color
● Background color
● Border color and width
● Border radius
● Hover
● Consider a custom CSS class for alternate style of buttons
17. Miscellaneous settings
● Images: Rounded borders, etc.
● Form fields: How do you want Elementor form
fields to look?
● Site Identity: Set your logo and favicon right in
the global settings.
● Background: Choose your background color for
the whole site!
● Layout: Define your site content width
21. Enable Import Export Template Kit
Under Elementor > Settings > Experiments, make the Import Export Template Kit Active
22. Export Kit
You can export all the
settings with this site to use
on another site under Tools
> Import/Export Kit.
https://elementor.com/help
/export-kit/