From Part 1, we setup our flower shop with Elementor Pro and Starter templates plugins. Here is the final result from Part 1.
Disable Default Colors and Fonts from the theme
This Part 2, we will change the colors and fonts for our shop. First, we need to disable the default color theme and fonts from the current theme.
We disable the default color and fonts from our theme because we want to set these settings via Elementor. It is convenience to set the color and fonts settings in one place. And it can be set right at your content editor which is Elementor editor in this case.
In order to disable the color and fonts theme, we navigate to Elementor>Settings>General. We mark on Disable Default Colors option and Disable Default Fonts option as shown below.
If you don’t disable default colors and fonts option, the site will use the color and fonts settings from your theme. The color and fonts settings can be found at Appearance>Customize or Theme settings which depends on each theme.
Set our color and fonts via Elementor
Navigate to Templates>Theme Builder>New Shop page (which is the shop template we built in Part 1). Then click on “Edit with Elementor“.
At elementor panel, click on Burger icon where locates in front of elementor panel title. After that, you will see Site Settings menu as shown below.
Click on Site Settings then we will see Design System, Theme Style and Settings sections. We will set our colors and fonts in Theme Style section.
Design System (short explanation)
Global colors and Global fonts, These global settings are using across the site. They are set on top of theme style.
It is useful for the content editor who needs to add the content and need to use the color and fonts from the site settings. For example, adding the heading title 1(H1), the content editor, can choose the preset heading title style from Global colors and Global fonts.
Web designers can rename the default colors and fonts label for users. For example, rename “Primary” to “Text Link”. Also, web designers can create new colors and fonts as well.
So design system is useful when you want to control the colors and fonts constantly across the site when the content editor adds or edits the content via Elementor.
Theme Style (short explanation)
Theme style is set Typography, Buttons, Images and Form fields across the site. When you disable default colors and fonts from Elementor settings, you need set this theme style.
Theme style will apply to all content and templates are created by Elementor and non-Elementor (other content editors).
So theme style is a must setting for your site. On top of theme style, you can set Global colors and Global fonts.
Settings
Custom CSS is a setting that I set often when I need to set the custom stylesheet for the site.
Set your own color and fonts
Now, we know we need to set theme style for our site. Optional, you can set Global colors and Global fonts. Go ahead and make the changes you like.
For Global colors, if you want to know which default color(Primary, Secondary, Text and Accent) impacts which part of your site. Please follow “Which Elements Are Impacted By Default Color Palette“
For my site, I set the colors and fonts below.
- Red: #f34f3f
- Black: #181818
- Grey: #AFAFAF
- Header font: PlayFair Display
- Body font: Lora
I set via Theme Style. Below is the screenshot after theme style is set.
Summary
At Part 2, we set the colors and fonts via Theme style at Site settings. Theme style is used across the site. Also, you can optionally set Global colors and Global fonts which set on top of theme style. Global colors and Global fonts apply to all content created by Elementor editor. While Theme Style applies across the site including non-Elementor content and templates.
Next, we will make the change for our shop page in Part 3.
