Jim R Web logo

Global Layout Settings

From: https://elementor.com/help/global-layout-settings/

Control global layout settings from Elementor’s Global Settings.

From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings > Layout.

  1. Content Width (px): Set a default width for your content area
  2. Widgets Space (px): Set the space between widgets
  3. Page Title Selector: If you want to hide your page title, enter its CSS selector here
  4. Stretched Section Fit To: Choose the parent element to which stretched elements will fit
  5. Default Layout: Set the page layout for new pages, choosing from either Default, Elementor Canvas, or Elementor Full Width

Important: Only pages that use Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Pages that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

Breakpoints

  1. Tablet: Set the breakpoint for tablet devices. Below this breakpoint, and above the mobile breakpoint, tablet layout will appear (Default: 1025px)
  2. Mobile: Set the breakpoint for mobile devices. Below this breakpoint, mobile layout will appear (Default: 768px)

Typography Styling

Theme Style sets fallback style definitions for HTML tags like <H1>, <body>, <label>, <p>, and so on. They are not Elementor-specific but are as general as possible. This is the baseline setting for the site, which comes into play only as a fallback if no specific element definitions are set.

Global Colors and Global Fonts are additional style layers in the Design System of Site Settings where Elementor uses CSS variables. They are covered in a subsequent post. Those layers sit on top of the Theme Style layer and take precedence. They provide the building blocks for your entire site’s design system.

Assign the colors and typography of the four predefined global settings and add any additional global color and typography settings as you’d like, giving each a name. For any element you use in Elementor, you can quickly select one of your predefined settings from your global design system. 

 If any element, either within Elementor or outside of Elementor does not have a global setting assigned to it, then it will default to the settings defined within the Theme Style.