Theme Settings
Theme settings contain settings for different website elements. Here you can define appearance for main structure elements like website header and footer, default button design, all texts and links, forms and much more.
Table of Contents
How to Access Theme Settings
Theme Settings are located in the Site Settings tab in your Elementor admin. You can open it when editing any page or post with Elementor, just click the settings menu icon in the top left corner, and then in Site Settings you’ll find the Theme Settings panel.
You can also quickly access Theme Settings, in your WordPress dashboard. For this checkout the YourWay tab in your dashboard and then proceed to Theme Settings:
Theme Settings - General Tab
Colors
- Text
- Main content text color
- Link
- Color used for links
- Link Hover
- Color used for links on hover
- Heading
- Color used for headings
- Main Background
- Background color for most of the content
- Alternate Background
- Alternative background color for some content sections
- Border
- Most borders and dividers
Logo
You can choose between Image and Text Logo types.
Using the Image Logo Type you can easily choose your website Logo image as well as the Retina Logo image (for devices with retina display).
Text Logo type allows setting Typography and Colors for Logo Title and Subtitle.
Global Container
Theme Settings - Elements Tab
The theme settings elements tab comes with five main elements sections and for sections with slider settings (see the image on the side).
These sections are Button, Blockquote, Form Fields, Table, Caption, and also Slider Arrows, Bullets, Progress Bar, Fraction sections.
Button
Slider
Arrows
Bullets
Progress Bar
Fraction
Values that are set here are applied to the Slider arrows used in ‘more posts’, single post gallery and archive post gallery.
Here you can:
- set arrows visibility, i.e. whether you want the arrows to be displayed always or on hover only;
- add needed text and icon for ‘previous’ and ‘next’ arrows and set typography for the text;
- choose Icon Position (before/after) and Text Direction (horizontal/vertical);
- set colors for normal and hover modes;
- choose the icon size and set needed width and height for the Arrows Box.
Here are also settings for arrow’s Container position and margin.
Values that are set here are applied to the Slider bullets used in ‘more posts’, single post gallery and archive post gallery.
Here you can:
- choose bullets type (Normal, Dynamic or Numbered);
- set colors for Normal, Active and Hover modes;
- set border, box-shadow, spacing and size for bullets.
There are also settings for bullets Container that allow to set colors, border, padding and margin and Container horizontal and vertical alignment.
Values that are set here are applied to the Slider progressbar used in ‘more posts’, single post gallery and archive post gallery.
Here you can set Background colors, box shadow, progressbar thickness and border.
There are also settings for a progressbar Container margin and position.
Values that are set here are applied to the Slider fraction used in ‘more posts’, single post gallery and archive post gallery.
Here you can set typography and colors, border and spacing, padding and margin and also horizontal and vertical alignment for the Slider fraction.
Theme Settings - Gutenberg Tab
Here you can set Gap between Gutenberg columns and Gallery columns.
Here you can set Gutenberg pullquote.You can set typography, colors, border, padding and box shadow, choose whether you want to hide or show the icon and set it.
Using Global Colors in Theme Settings
Theme settings (open article) contain settings for different website elements. Here you can define appearance for main structure elements like website header and footer, default button design, all texts and links, forms and much more. Along with other settings, colors for all these elements are set here. These will be default colors for these elements, yet of course you can change then for any specific instance locally.
We recommend following these steps:
- First set your global colors in Site Settings – Global Colors tab;
- Then use this color palette to set default colors for website elements in Site Settings – Theme Settings tab;
- If you need to set a custom color for any element later on page/post, just edit its color locally in a widget.