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.

Settings Menu
1. Open Settings Menu
Elementor Settings
2. Proceed to Site Settings

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:

WP Dashboard Settings
Theme Settings in WP Dashboard

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

Theme Settings - General Tab

Colors

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

How to Set Colors

  1. Open Site SettingsGeneral TabColors
  2. Click on the swatch you need to change
  3. Use the color picker to select a new color or simply add a color number in the input field
How to Set Colors

Typography

General Tab - 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

  1. Open Site SettingsGeneral TabTypography
  2. Click on the font you need to edit
  3. Set the needed parameters for this font
How to Set Fonts

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.

General Tab - Logo
General Tab - Logo Type - Image
General Tab - Logo Type - Text

Body Background

The choice is between Classic and Gradient Body Background types.

Set the needed parameters for Background and then.

General Tab - Body Background - Type Classic
General Tab - Body Background - Type Gradient

Global Container

General Tab - 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. 

Theme Settings - Elements Tab

Button

Elements Tab - 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.

Elements Tab - Blockquote

Form Fields

Elements Tab - 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.

Elements Tab - Table

Caption

Elements Tab - 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

Elements Tab - Slider Arrows
Elements Tab - Slider Bullets
Elements Tab - Slider Progress Bar
Elements Tab - Slider 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:

  1. First set your global colors in Site SettingsGlobal Colors tab;
  2. Then use this color palette to set default colors for website elements in Site SettingsTheme Settings tab;
  3. If you need to set a custom color for any element later on page/post, just edit its color locally in a widget.
Theme Settings - Gutenberg Tab
Gutenberg Tab - Columns
Gutenberg Tab - Pullquote