Help Center

Choosing a pre-designed template doesn’t mean you can’t make it uniquely yours.
With Elementor Webpage builder, you can effortlessly customize your site by changing colors, fonts, buttons style, layouts, and adding various effects.

Important Notice: Please note that changing site settings in WordPress will affect all pages on your website. Before making any changes, consider the potential impact on your site’s overall design, structure, and functionality. It’s a good idea to create a backup of your site before making® any major changes, in case you need to revert to a previous version. Additionally, you may want to test your changes on a staging site or in a development environment before implementing them on your live site.

Step-by-Step Guide #

1. Open Elementor Editor #

• Log into Your WordPress Admin Area:
• Enter your username and password to access the WordPress Dashboard.

Navigate to Pages:

• In the left-hand menu, go to Pages.
• Find the page you want to edit and click Edit with Elementor. This will open the Elementor editor.

2. Access the Site Settings #

• Open the Hamburger Menu
• In the Elementor editor, locate the hamburger menu (three horizontal lines) in the top left corner of the screen. Click on it to open the menu.
• Navigate to Site Settings
• In the dropdown menu, click on Site Settings. This will open the Site Settings panel on the left side of the screen.

Edit Global Settings

Global Colors #

1. Click on Global Colors:
   • In the Site Settings panel, click on Global Colors.
   • You can see and edit default color options such as Primary, Secondary, Text, and Accent. Click on any color box to choose a new color or enter a hex code.
   • To add a new color, click Add Color, name it, and set its value.

Global Fonts #

1. Click on Global Fonts:
   • In the Site Settings panel, click on Global Fonts.
   • Edit the default font options such as Primary, Secondary, Text, and Accent. Click on any font box to choose a new font family, size, weight, and style.
   • To add a new font, click Add Font, name it, and define its properties.

Theme Style #

1. Click on Theme Style:
   • In the Site Settings panel, click on Theme Style.
   • Typography: Set global typography for body text and headings (H1 to H6), including font family, size, weight, line height, and letter spacing.
   • Buttons: Define styles for buttons in their normal and hover states, including typography, text color, background color, border type, border radius, and box shadow.
   • Images: Set default border radius and box shadow for images.
   • Forms: Customize typography, text color, background color, border type, and padding for form input fields and labels.
   • Container: Define background, border, and box shadow settings for containers.

Settings #

1. Click on Settings:
   • In the Site Settings panel, click on Settings.
   • Background: Choose a color, gradient, or image for the site’s background, and adjust image settings like position, attachment, repeat, and size.
   • Layout: Set global content width, columns gap, section padding, and widgets space.
   • Lightbox: Toggle lightbox functionality for images and galleries, and customize lightbox overlay settings.
   • Page Transitions: Toggle page transitions on or off, choose transition effects, and set the duration.
   • Custom CSS: Add custom CSS to apply site-wide advanced customizations.

4. Save and Apply Changes #

• After making the desired changes, click the Update button at the bottom of the Site Settings panel to save and apply them.
• Preview Changes:
• To see how your changes will look, click the eye icon at the bottom of the Elementor panel to preview your site.
• Exit Site Settings:
• Once you are satisfied with your changes, click the Exit to Dashboard button to return to the WordPress Dashboard.

By following these steps, you can easily access and modify your Elementor site’s global settings directly from the page editor, ensuring a cohesive and consistent design across your entire website.