Astra Theme with Elementor Pro Setup (outdated 2021-08-06)

Note: this article is outdated. Check out the new version here.

Purpose

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

Process

1. PHP & CSS

• Add code to functions.php to change the breakpoints of Astra.
  • See here.
• Define typography for headings and body text in Custom CSS of the Child Theme. 
  • The Global Typography settings in Astra and Elementor are not full featured. Better to use CSS to define the fonts.

2. Astra Customizer

• Global Settings / Typography
  • Base Typography
    • Body Font Family
      • size = font-size of p in XD.
      • Other settings untouched.
  • Headings
    • Heading Font Family
      • font-size = change the sizes for headings to that in XD.
      • Other settings untouched.
• Global Settings / Color
  • Clear all color settings.
  • Set background to #FFFFFF.
• Global Settings / Container
  • Set container width to grid width 1200px.
  • Others settings are untouched.
• Global Settings / Buttons
  • Set Border Radius = 0.
  • Other settings are untouched.

3. Elementor Settings (admin left menu)

• General
  • Post Types
    • Select both Posts and Pages
  • Disable Default Colors – uncheck
  • Disable Default Fonts – uncheck
  • Usage Data Sharing – uncheck
• All other settings are untouched.

4. Elementor Site Settings (page editor)

• Global Colors (color values below are examples only)
  • Primary: #35393D
  • Secondary: #000000
  • Text:   #35393D
  • Accent: #707070
  • White: #FFFFFF
• Global Fonts
  • Primary: reset
  • Secondary: reset
  • Text: reset
  • Accent: reset
• Typography
  • Reset all options.
• Site Identity
  • Upload Site Logo
  • Upload Site Favicon
• Background
  • Set background type and color
• Layout Settings
  • Set Content Width: 1200px
  • Breakpoints:
    • Mobile = 767px
    • Tablet = 1023px
    • Other settings are untouched.
• Other settings are untouched