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.

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:

After clicking the Theme Settings you will be redirected to a default kit preview with Elementor Settings menu, this ensures convenient editing with visual reference.

Theme Settings - General Tab

The theme settings general tab comes with five sections (see the image on the side), which represents the main style settings of the site.

These sections are: Colors, Typography, Logo, Body Background, and Global Container.

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

How to Set Colors

Open Site Settings – General Tab – Colors
Click on the swatch you need to change
Use the color picker to select a new color or simply add a color number in the input field

Typography

Base Font: Overrides Body Text font set in the Global Fonts setting
H1 – H4 Fonts: Override Primary Headline font set in the Global Fonts settings
H5 – H6 Fonts: Override Secondary Headline font set in the Global Fonts settings

How to Set Fonts

Open Site Settings – General Tab – Typography
Click on the font you need to edit
Set the needed parameters for this font

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.

Body Background

The choice is between Classic and Gradient Body Background types.

Set the needed parameters for Background and then.

Global Container

Here you can set global settings such as Container Max Width, Content Max Width and Content Horizontal Padding that will be used as default settings for Container and Content in Header Top, Header Middle, Header Bottom, Main, Heading, Footer Widgets and Footer parts.

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

Values that are set here are applied to default buttons and buttons used in default forms added via Gutenberg Block editor.

You can set typography, button colors for normal and hover modes, border, padding and box/text shadows.

Blockquote

Values that are set here are applied to default blockquotes added via Gutenberg Block editor.

You can set typography, colors, border, padding, and box-shadow, choose whether you want to hide or show the icon and set it.

Form Fields

Values that are set here are applied to default forms added via Gutenberg Block editor.

You can set typography, colors for normal and focus modes, border, padding, and box-shadow.

There are also settings for the Label typography and color.

Table

Values that are set here are applied to default tables added via Gutenberg Block editor.

You can set typography and colors for table content, Header and Footer.

Caption

Values that are set here are applied to default captions.

You can set typography, colors, border, padding, and gap.

There are also separate settings used for classic wp-caption images.

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.

YourWay Docs

Categories