In this blog post, we will delve into the various aspects of Elementor’s site settings, explaining their significance and how they contribute to creating a remarkable web presence.
Table of Contents
Accessing Elementor Site Settings
To begin customizing your Elementor website, you must access the site settings. In the WordPress dashboard, navigate to the “Pages” or “Posts“. Open a post or page with Elementor and at the left-top corner you’ll find the Hamburger icon, click on that and click on “Site Setting“. This is where you’ll find an array of options that allow you to control the global settings for your website.
Buy Elementor Pro
1. Global Colors
Global colors in Elementor are a way to define and manage a set of colors that can be used consistently throughout your website. Instead of manually specifying color codes for different elements on each page, you can define a global color once and then quickly apply it to various elements, such as text, backgrounds, buttons, and more.
Here is how it works:
Defining Global Colors: In the Elementor editor, you can access the global color settings. There, you can define a color palette by adding specific colors and giving them names. For example, you can add primary, secondary, and accent colors.
Applying Global Colors: Once you have set up your global color palette, you can apply these colors to different elements in your design. Instead of manually entering color codes, you can choose the desired global color from a dropdown or color picker tool. This way, if you change a global color later, it will automatically update across all instances where that color is used.
Updating Global Colors: If you want to change a global color, you can simply update its definition in the global color settings.
You will see the new color reflected throughout your website wherever you have used that global color, saving you the time and effort of manually updating individual elements.
2. Global Fonts
The main advantage of using global fonts is that they enable you to make changes to your typography site-wide from a central location, rather than having to manually update each individual element. If you decide to change the font style or size, for example, you can simply modify the global font settings, and all elements that are using that particular global font will automatically apply the changes.
Here’s how global fonts work in Elementor:
Font Selection: With Elementor, you can choose from a wide range of fonts, including Google Fonts and other web-safe fonts. You can browse the available fonts and select the ones you want to use on your website.
Font Styles: Once you have selected the fonts, you can customize their styles, such as font weight, size, letter spacing, line height, and more. These style settings will be applied to all the elements that use the global font.
Assigning Fonts: After setting up your global fonts, you can assign them to specific elements in your website design. This can be done using Elementor’s styling options. For example, you can apply the global font to headings, paragraphs, buttons, or any other text element within your pages.
Updates and Consistency: The advantage of using global fonts is that if you decide to change the font style or any other parameter, you only need to update the global font settings once, and the changes will be automatically reflected across all the elements using that font. This ensures consistency throughout your website you don’t have to manually update each element.
3. Typography
The Typography tab in Elementor’s site settings provides you with options to customize the typography settings for different elements of your website. Discover a variety of familiar settings you’re bound to encounter:
Body Font: This option allows you to set the default font for the body text of your website. You can choose from a list of available fonts or use custom fonts by integrating with third-party services like Google Fonts.
Heading Fonts: Elementor allows you to define different fonts for different levels of headings (H1, H2, H3, etc.). You can select fonts, adjust their sizes, and choose font styles (bold, italic, etc.) for each heading level.
Text and Link Colors: You can set the color of the text and links across your website. This includes options to define default colors as well as hover and active states for links.
Font Sizes: Elementor lets you control the font sizes for various elements like headings, paragraphs, lists, and more. You can specify sizes in pixels, ems, rems, or percentages.
Letter Spacing and Line Height: Elementor controls the letter-spacing (tracking) and line height (leading) for your website’s text, allowing you to fine-tune the spacing between characters and lines.
4. Buttons
In Elementor side settings you can find a tab called “Buttons“. There, you can define the button color, typography, hover color, text shadow, box shadow, and many more for your entire website and whenever you update, they will be automatically updated everywhere on your website.
Assigning Button: In the buttons tab, you can define typography, text shadow, text color, hover color, background type, background color, the background color on hover, box-shadow, border type, border size, border radius, and padding. Once you assigned these, by default your every button will be just you assigned.
Updating: Whenever you update anything in the buttons tab, all of your buttons will be updated globally.
5. Images
When it comes to images, Elementor offers several options under the Site Settings. Here’s an explanation of each:
Border type: It allows you to define the border type of an image. You can define a default, none, solid, double, dotted, dashed, and groove.
Border radius: You can set a border radius for every single corner or both of them.
Opacity: Select how much percentage you want the image’s opacity will be by default for all of the images in the entire website.
Box shadow: Choose the box shadow’s color and set the position for the box shadow and set the blur and spread of the box shadow.
CSS Filter: Through the CSS filter you can set blur, brightness, contrast, saturation, and hue for images.
Note: You can set above all of these for the hover effect also and additionally, you can set the hover transition duration.
6. Form Fields
The Form Fields tab in Elementor’s site settings provides you with options to customize the form field settings for different elements of the form. Discover a plethora of familiar settings awaiting you:
Label: In the label, you can design the label’s color, and set the label’s typography which will be appeared in every form of your website. You can set them from your global color and global typography.
Field: For your form’s field, you can choose typography from global typography or custom. They will make how your form’s fields will look like. Now you have 2 portions “Normal” and “Focus”. You’ll have choices of text color, accent color, background color, box shadow, border type, border radius, and padding for the “Normal” mode and for the “Focus” mode.
Additionally, you’ll have an option on the “Focus” mode, “Transition” is to set the duration of changes between “Normal” and”Focus” mode.
Now time to set the header and footer. You’ll not be able to get the header and footer Global custom option until you purchase the premium plugin of Elementor.
Purchase the Elementor and customize the header and footer.
7. Header
Header refers to the top section of a webpage that typically appears at the topmost part of the screen. It is a crucial component of the website’s layout and navigation structure. The header often contains elements like the website’s logo, menu or navigation links, contact information, search bar, and sometimes a call-to-action button.
It serves as a prominent way to introduce the website’s branding and provide essential navigation options for visitors. The header remains fixed or visible as users scroll down the webpage, ensuring easy access to key features and information throughout their browsing experience.
In the header site setting, you’ll have a choice for logo, tagline, and menu whether they will be shown or hidden and you can change them at any time. As well as, header layout, content width, content gap, and many more.
8. Footer
In the context of a website, the footer refers to the section located at the bottom of each webpage. It is a crucial part of the website’s layout and contains various important information and elements. While the header appears at the top of the page, the footer remains fixed at the bottom, providing a consistent presence as users scroll through the content.
A footer typically includes contact information, a sitemap, a disclaimer, social links, and copyright information.
9. Site Identity
When building a website with Elementor, you can easily manage and customize your site’s identity through the Site Identity settings. Behold, an intricate dissection of the pivotal elements:
Site Title: This is the main name or title of your website. It typically appears in the header area and may also be displayed in the browser’s title bar.
Site Description: The site description is a brief statement or slogan that accompanies your site title. It provides additional information or a catchy phrase that can help convey the purpose or unique selling proposition of your website.
Site Logo: The logo is a graphical representation or symbol that represents your website or brand. It can be an image or even stylized text that helps visitors identify your site visually. Elementor allows you to easily upload and position your logo using its drag-and-drop interface.
Site Icon/Favicon: The site icon represents your website in browser tabs, bookmark lists, and other areas. It helps users quickly identify your site visually. Elementor provides options to upload and set a custom site icon.
10. Background
The background settings let you customize the background appearance of your site. You can set a background color or image for the entire website, including the header, footer, and content areas. Additionally, you can set the mobile browser background for mobile phones.
11. Layout
Here are the key aspects of the “Layout” settings in Elementor:
Content Width: This option determines the maximum width of the content area on your website. You can choose between “Boxed” and “Full Width.” In the “Boxed” layout, the content is contained within a fixed width, while the “Full Width” layout expands the content to the full width of the browser window.
Widget Space: The Widget Space setting allows you to control the vertical spacing between these widgets. By adjusting the Widget Space value, you can increase or decrease the gap or padding between the widgets, thus altering the overall appearance and layout of your page.
Page Title Selector: The Page Title Selector allows you to control the appearance and styling of the page title. The page title is the text that appears at the top of a web page. It usually represents the title or subject of the page.
Default Page Layout: In Elementor, the “Default Page Layout” refers to the predefined layout template. That is applied to new pages created using Elementor. It allows you to set a default layout for your pages, ensuring consistency across your site.
12. Lightbox
Lightbox refers to a feature that allows you to display images or other media content in a pop-up window. When clicked, overlaying the current page. It provides a visually appealing way to showcase images without navigating away from the page.
Within the “Elementor Site Settings,” the Lightbox option enables or disables the Lightbox functionality globally for your entire Elementor-powered website. When enabled, any image or media element that has the lightbox feature activated will open in a lightbox when clicked.
By activating Lightbox you ensure that all images or media elements with the Lightbox feature are enabled. Images will consistently behave as a lightbox across the entire website. It offers a consistent user experience and saves you from manually enabling the lightbox for each individual image or media item.
13. Page Transition
With the Page Transition feature, you can choose from a variety of transition effects, such as fade, slide, zoom, and more. These effects can add a sense of fluidity and interactivity to your website, enhancing the overall user experience.
By enabling page transitions, you can create a smooth and seamless browsing experience for your visitors, making your website feel more dynamic and engaging. However, it’s important to use page transitions judiciously and ensure they don’t negatively impact the website’s performance or distract users from the content.
14. Custom CSS
Custom CSS gives you the ability to override or add additional CSS rules to your website’s design. By adding your own CSS code, you can modify the appearance, layout, and behavior of various elements on your website, such as fonts, colors, spacing, and more.
Conclusion
Elementor’s site settings provide a wealth of customization options that allow you to create a visually appealing and user-friendly website. From defining global styles to integrating with external services, Elementor empowers users to build and optimize their online presence with ease.
By understanding and utilizing these settings effectively, you can unlock the full potential of Elementor. So, dive into the site settings, experiment with different configurations, and unleash your creativity with Elementor.
