Elementor Setup

Word Count: 624
  • Post category:Codings
  • Post last modified:2021-08-12

This article describes the setting up of Elementor page builder for wordpress website development. It is advisable to complete these settings before the development of any new pages or posts. Note that if everything is built on Elementor, it doesn’t matter which theme is going to be used.

Basic setup
  • Install and activate the Elementor (and Elementor Pro, if purchased) plugin.
  • Dashboard -> Elementor -> Settings
    • General
      • Put a tick to “Disable Default Colors”. This disables Elementor’s Default Colors, making Elementor inherits the colors from the activated theme.
      • Put a tick to “Disable Default Fonts”. This disables Elementor default fonts, making Elementor inherits the fonts from the activated theme.
      • Note that even with the above items are disabled. Elementor can override the theme’s color and fonts style. This allows the theme’s settings are controlled under Elementor. See THEME STYLE section below for details.
    • Style
      • See “Site Settings” below.
    • Advanced
      • Normally no need to change anything on this tab.
  • Dashboard -> Elementor -> Role Manager
    • Normally no need to change anything on this tab.
  • Dashboard -> Elementor -> Tool
    • There are 4 tabs: General, Replace URL, Version Control and Maintenance Mode. Normally no need to change anything.
  • Dashboard -> Elementor -> Custom Fonts (Pro)
    • Add custom fonts if required.
Site Sittings
  • Open the Elementor editor. Open the top-left burger menu and select Site Settings. There are three sections: DESIGN SYSTEM, THEME STYLE, and SETTINGS.
  • DESIGN SYSTEM -> Global Colores
    • (No need to set this section if “Disable Default Colors” is activated. — to be verified.)
    • Primary -> h1 and h2 color.
    • Secondary -> h3 to h6 color.
    • Text -> body text color.
    • Accent -> for lists, accordion title, etc.
  • DESIGN SYSTEM -> Global Fonts
    • (No need to set this section if “Disable Default Fonts” is activated. – to be verified)
    • Sites normally use different font families for headers and body text.
    • Set settings for Primary Headline, Secondary Headline, Body Text and Accent Text.
    • Add new Global Fonts if required.
  • THEME STYLE
    • Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields.  
    • These settings override the theme styling settings and takes its place, allowing you to use Elementor to set styles for elements not built by Elementor. 
    • By default, this will apply styles only to non-Elementor elements, for example, WooCommerce checkout fields, Contact Form 7 labels, 3rd-party headings and much more. If you prefer, you can force these Theme Style settings to also apply to Elementor-built elements as well by putting a check to “Disable Default Color” and Disable Default Fonts” in Elementor settings. See above section.
    • Go through each of the items in Typography, Buttons, Images, Form Field, and apply the colors and font styles defined in the DESIGN SYSTEM if appropriate.
  • SETTINGS -> Site Identify
    • set up site names, site description, site logo and site favicon.
  • SETTINGS -> Background
  • SETTINGS -> Layout
    • Content Width, Widget Space, Page Title Selector, Stretched Section Fit To, Default Page Layout.
    • Breakpoints for mobile and tablet. It is recommended to align the breakpoints of both Elementor and the Theme. The Astra theme uses a breakpoint of 768 pixels for tablet and 544 pixels for mobile. Therefore set the Elementor breakpoints at 769px for tablet and 545px for mobile. (Ref: https://e360.co/match-elementor-and-astra-styles-and-breakpoints/)
    • However, the above breakpoints are not effective most of the time. A more suitable breakpoints are Tablet: 768px ~ 1023px and mobile: 320 ~ 767px. Set Elementor breakpoint in the front end and add the following code to functions.php to change breakpoints of Astra.
  • SETTINGS ->Lightbox
  • SETTINGS -> Custom CSS
// ^^^ Change breakpoint tablets
add_filter( 'astra_tablet_breakpoint', function() {
return 1023;
});

// ^^^ Change breakpoint mobile
add_filter( 'astra_mobile_breakpoint', function() {
return 767;
});

Tags: ,