Astra Theme with Elementor Pro Setup (v03)

Purpose

This article outlines the set up of Astra Theme (Free) and Elementor Pro for WordPress Sites development. This set up is the result of the study in here and here.

This article also supersedes the previous version on the same subject.

Process

1. PHP

2. CSS

3. Astra Customizer

• Global Settings / Typograph / Base Typography
  • Disable “Underline Content Links”.
• Global Settings / Color
  • Clear all color settings.
  • Set background according to design.
• Global Settings / Container (doc)
  • Set Container Width to the designed grid width:
    • if the 100% width of an element in XD design file is 1200px, then set Container Width to 1200px.
  • Set Layout to “Full Width / Stretched” (doc)
    • This layout allows Elementor fullwidth section to take full width.
    • If there are non-Elementor pages, (e.g., pages generated by third-party plugins), these pages may need to have the Layout set to “Full Width / Contained” individually.
  • Others settings are untouched.
• Global Settings / Buttons
  • Set Border Radius = 0.
  • Clear the default paddings.
  • Other settings are untouched.
• Header Builder / Site Identity & Logo
  • Disable ‘Display Site Title’ for Desktop, Tablet and Mobile.
  • Upload logo and favicon
• Sidebar
  • Default Layout: No Sidebar

4. Elementor Settings (admin left menu)

• General
  • Post Types
    • Select both Posts and Pages
    • Select Landing Pages, if the site has landing pages
  • 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 styles using the “Theme Styles” section. This allows the theme’s settings are controlled under Elementor. See THEME STYLE section below for details.
  • Usage Data Sharing – uncheck
• All other settings are untouched.

5. Elementor Site Settings (page editor)

• Global Colors
  • Add new colors if necessary
  • Black and White should be included
• Global Fonts
  • Upload Custom Fonts if any
  • Rename “Primary” to Primary-h1″ and define h1 style
  • Rename “Secondary” to “Secondary-h2” and define h2 style
  • Add and define h3 to h6
  • For font size larger than 30px:
    • MUST use ratio (em) to define line height. This ensures reasonable line height is maintained when the font size is reduced for smaller devices.
  • For font size larger than 40px, reduce the font size to:
    • 85% for Tablet
    • 65% for Mobile
  • Define “Text” style
  • Define others as necessary
• Theme Style / Typography
  • Use the above Global Fonts to define typography and colors for:
    • body text (also set paragraph spacing or margin-bottom according to design)
    • link
    • H1 – H6
  • Buttons – style default button according to design.
• Site Identity
  • Upload Site Logo
  • Upload Site Favicon
• Background
  • Set background type and color
• Layout Settings
  • Content Width = design width + 20px (the default column padding on each side is 10px).
    • if the 100% width of an element in XD design file is 1200px, then set Content Width to 1220px.
  • Default Page Layout: Elementor Full Width
  • Breakpoints:
    • Mobile = 767px (enter value directly as the figure shown on screen is just a placeholder!)
    • Tablet = 1023px
    • Other settings are untouched.
• Other settings are untouched
• Site Default Page Section template
  • Create a site default page Section template with 10px padding on left and right sides.
  • This is to allow a total of 20px padding on each left and right sides when screen width is smaller than grid size.

6. WP Settings

• General Settings
  • Timezone: the client’s city
  • Date Format: YYYY-MM-dd
  • Time Format: H:i
• Reading Settings
  • Select “Discourage search engines from indexing this site”.
• Permalink Settings
  • Select “Post name”.

7. Elementor Pro License Exception

Subdomains that are not considered to consume a license:

• dev.* (e.g., dev.example.com)
• local.* (e.g., local.example.com)
• test.* (e.g., test.example.com)
• staging.* (e.g., staging.example.com)