Elementor Global Settings Guide: How to Use Elementor Site Settings for Your Entire Site

Elementor Pro Global Style Settings Guide

Elementor Pro provides global style setting function, just install Elementor Pro, you can make global settings, similar to the theme settings of the theme. This can help you preset the overall color style, font style, layout and element presets of your website, which greatly reduces the workload of post-production website production.

For example, we can set several global colors and select these global colors directly when setting the content color.

This tutorial will introduce the common features of global styles and settings of Elementor web editor, such as setting global fonts, colors, page content width, default spacing of elements and so on.

Go to [Site Settings

After installing and activating Elementor Pro, go to any page of the Elementor editor window and click on "Site Settings" as shown in the figure below, you will see the following configuration options.

Design System

The design system allows you to set global colors and global fonts.

Global Color Settings

The biggest benefit of setting global colors is the ability to quickly change the color style of your website. For example, if your site is currently dominated by green, you can quickly switch to a blue style by simply changing the colors in the global color settings. This requires that you design your pages with all colors using the global color configuration. If the colors were added manually, you will need to modify them manually.

Methods for setting and using global colors:

1. Go to Global Colors in Site Settings.
2. Set a few common global colors.
3. Use these global colors for configuration when designing pages.

The global settings contain system colors and custom colors. There are four system colors, which cannot be deleted, but can be modified. Custom colors can be added and renamed according to your needs.

After setting the global color, you can call the global color in the color settings of any element of Elementor.

Global Font Settings

Similar to global colors, global fonts can be customized to add more than one. When designing a page, using global fonts can increase efficiency and make it easier to change them consistently at a later stage.

The global font has four system font settings that cannot be deleted, but can be modified. Also you can add custom global fonts.

For a particular global font, you can set the following: font, size, thickness, case conversion, style (e.g., italic), decoration (e.g., underline, underline), line height, letter spacing, and word spacing.

Theme style/Global theme style settings

In Global Theme Styles, you can set the styles for fonts, buttons, images, and form fields.

Since each theme has different compatibility with Elementor, there is no unified solution. As shown in the image below, Elementor provides the option to disable its own colors and fonts feature and choose to inherit the theme configuration. With these two options, it can help you debug the styles.

Typography

In [Typography], you can set the text color, font style, paragraph spacing, link color and hover effect of the website content, as well as the color and font style of H1-H6 tags. You can also directly use the colors and fonts in the global settings to unify the typography style.

Button/Global Button Settings

In Global Button Settings, you can set the following properties of the button: text typography, text projection, regular color and background color, text color and background color on hover, border type and color, corner radius, and inner spacing.

Images/Global Image Settings

In the Global Image Settings, you can configure the following properties of the image: borders, corner radius, transparency, projection, CSS filters for normal and hover, and transition time from normal to hover state.

Form Fileds/Global Form Field Settings

When the site uses forms, such as contact forms and inquiry forms, the styling of the form fields can be configured here.

You can set the color and typography of field headings, the typography of the field itself, the regular and typed-in font color, the background color, the drop shadow, the border, the corner radius, and the internal spacing.

Setting

Site Identity settings (Site Identity)

Here you can upload and set the name, description, logo and site icon of your website.

Background global background settings

Here you can set the background color of the web page, solid color or gradient color can be set, you can also set the background image, and you can also set the background color of the mobile terminal separately.

Layout/Default layout settings (mobile breakpoints)

1. content width: Sets the default width of the content area of the page, the default value is 1140px. if you want the page to be wider or narrower, you can adjust it here.
2. Widget space: Sets the spacing between blocks of elements, defaults to 20px.
3. Page title selector: Used to hide page titles. If the theme's page title selector is not entry-titleIf you are using the Hello Elementor theme, you need to change it here. If you are using the Hello Elementor theme, there is no need to change it. You should only consider changing this setting if the Hide Header feature is not working.
4. Stretched Section Fit To: When using Elementor's section, you can turn on the "stretch section" feature to stretch the section to a specified width. Enter the parent element selector here (e.g. #primary,.wrapper,main etc.), the stretch will adapt to that selector. The default is bodyThe following is a list of the most important changes to the program, which usually do not need to be made.
5. default page layout: Sets the default layout of the page, which is full-width by default (Elementor full width), containing the header and footer. If set to Elementor canvasInstead of a header and footer, the page will be a blank canvas. If you select themeIf you want to use the theme, you can use the theme's settings. Different themes may offer different layout options, please debug and use them as needed.

Breakpoints

You can artificially add breakpoints for adapting your website to devices with different resolutions, often referred to as responsive.

Lightbox/Lightbox Setup

Lightboxes can be understood as pop-up windows for images, and the Global Lightbox tab gives you the ability to adjust the following settings:

1. Image light box: Slide switch to globally enable or disable the lightbox.
2. register: Only for multi-image galleries. If enabled, the counter is displayed in the upper left corner of the lightbox. For example, for a gallery containing 6 images, the counter will display 1/6, 2/6, etc. to indicate where the current image is in the gallery.
3. Fullscreen: When enabled, a clickable icon is added that allows the user to open the image in a full-screen lightbox.
4. Zoom: When enabled, a clickable icon is added that allows the user to zoom in on the image in the lightbox. Once zoomed in, the view can be panned and scrolled to see different areas of the image.
5. Share: When enabled, sharing functionality is added to the lightbox, allowing users to share images on Twitter, Facebook, and Pinterest, or download them to their computers.
6. Title: You can choose to display the title below the image in the lightbox. Choose from None, Title, Caption, Alt, or Description.
7. Description: Optionally, a description can be displayed below the image in the lightbox. Choose from None, Title, Caption, Alt, or Description.
8. background color: Select the background color and opacity of the lightbox.
9. UI Colors: Select the UI color. This affects lightbox arrows, point navigation, close buttons, etc.
10. UI Hover Color: Select the UI hover color. This affects the lightbox arrows, point navigation, close button, etc. when the user hovers over each button.

Custom CSS

When the existing design configuration does not meet your needs, you can define styles by adding custom CSS. But only if you have a good grasp of how CSS is written.

Summary:

With Elementor Pro's Global Style Settings feature, it's easy to preset and adjust your website's overall color styles, font styles, layouts and element presets. This not only improves design efficiency, but also ensures consistent website styling. Whether it's setting global colors, fonts, or adjusting the styles of buttons, images, form fields, and other elements, you can dramatically reduce post-production maintenance work. In addition, Elementor Pro also provides powerful custom CSS features, allowing users to achieve more sophisticated design needs, fully enhancing the user experience and visual effect of the website.