Creating a style guide for website using Elementor

Create a website style guide within Elementor to use for fast website development.

1. Creating a
Website Style Guide
With Angela Bowman

2. Welcome to
Elementor Boulder Meetup

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: [email protected]



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

7. STYLE GUIDE PAGE

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.

15. Typography
●Body font and color
●Link color and hover color
●Heading fonts

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

18. ACCESSIBILITY

19. Install accessibility plugin and test styles
Tota11y Plugin, from Khan Academy:
https://chrome.google.com/webstore/det
ail/tota11y-plugin-from-khan/oedofneiplgi
bimfkccchnimiadcmhpe?hl=en

https://www.w3.org/WAI/standards-guide
lines/wcag/

20. EXPORTING AND IMPORTING STYLE GUIDE

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/

23. Choose what to Export

24. CUSTOM STUFF

25. Helpful CSS for every site
https://gist.github.com/askwpgirl/d47a2ebad29e8b10da1535d5c83024ed
●Lists
●Custom button
●Last paragraph margin

26. Custom Fonts

27. RESOURCES

28. Helpful Resources
●Elementor Documentation: https://elementor.com/help/
●Elementor Tutorials: https://elementor.com/learn/
●Epic four-hour tutorial: https://www.youtube.com/watch?v=guUuaArckEw
●WP Tuts: https://wptuts.co.uk/category/elementor-tutorials/
●Old Meetup Videos and Slides:
○Introduction to Creating Elementor Layouts
○Introduction to Elementor Theme Builder
○Making Popups with Elementor

29. Thank you
See you next time