How to setup Astra when using Elementor?

First of all, I’d like to let you know, the Astra theme is like any other WordPress theme that lets you manage the global settings of the website. This includes colors, typography, layouts, headers, etc. The page content and design can be handled using the page builder or third-party plugins. 

The idea of the theme may sound confusing, at their core theme is just a way to “skin” your website. 

Technically, a WordPress theme is a collection of files that work in tandem to produce a visually stunning graphical interface, with the underlying functionality providing the unifying design for a web blog.

A WordPress theme offers all of the front-end stylings for your site, including:

  • The overall design and/or style of your site
  • Font styling that helps to make your content stand out to users
  • Page layouts, also known as templates, that can help guide you towards mindful content management
  • Styling options for blog posts and associated blog archives, and much, much more

Let’s talk about Elementor Page builder:
Elementor’s Default Settings – Colors, Fonts, and Content Width
First, let’s look at what the Elementor default options are. In the General tab, I see the post types listed, along with the option to disable default Elementor colors and fonts.
Please refer to this screenshot –

It is a good idea to disable these defaults. Why? Let’s take a look at a post using the Astra defaults and one using the Elementor defaults:

Please refer to this screenshot – is using the Segoe UI font for the title and text. Elementor is using Roboto for the title and Segoe UI for the text. Also, glaringly, Elementor defaults to that light blue title color. We don’t want our site styles to jump back and forth. I’m going to check the “Disable default colors” and “Disable default fonts” in the Elementor General settings tab and we’ll compare again.
Please refer to this screenshot –
That fixed the heading font and color issue. There is still a spacing difference between text sections. Looking at the Style settings tab there are two other settings to change to get a match:
I hope that the above information helps. Let me know if you have any further queries.

Leave a Comment

Scroll to Top