From Part 1, we set up 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 convenient to set the color and font 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 font 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 the default colors and fonts option, the site will use the color and font settings from your theme. The color and font settings can be found at Appearance>Customize or Theme settings which depend 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 the Elementor panel, click on the Burger icon located in front of the Elementor panel title. After that, you will see the Site Settings menu as shown below.
Click on Site Settings then we will see the Design System, Theme Style, and Settings sections. We will set our colors and fonts in the Theme Style section.
Design System (short explanation)
Global colors and Global fonts, These global settings are used across the site. They are set on top of the 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, by 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 font labels 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 to Typography, Buttons, Images, and Form fields across the site. When you disable default colors and fonts from Elementor settings, you need to 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 the 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 a 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 it via Theme Style. Below is the screenshot after the theme style is set.
Summary
In Part 2, we set the colors and fonts via Theme style in Site settings. Theme style is used across the site. Also, you can optionally set Global colors and Global fonts which are set on top of the theme style. Global colors and Global fonts apply to all content created by the Elementor editor. While Theme Style applies across the site including non-Elementor content and templates.
Next, we will make the change to our shop page in Part 3.
Tutorial on how to set up a flower shop with Elementor Pro
