WP Astra WordPress Theme – The Best Theme for Elementor Website | Configuration Guide 2020

This tutorial shows the configuration of the WP Astra WordPress theme – the fastest, lightweight and best theme for Elementor website.

If you want to know:

• Why is WP Astra WordPress theme the best especially for Elementor website?
• What configuration best for Elementor?

Then, this guide is definitely created for you.

Let’s get started.

1. What is a Theme?

The idea of the theme may sound confusing, at their core theme is just a way to “skin” your website. However, a theme can be so much more than a simple website skin if used intentionally. It can provide far more control over the look and presentation of the material on your site.

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
• Engaging colors and vivid visuals that make your website appealing
• Mindful widget locations that help to pack tons of functionality into a single web page
• 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

If you haven’t set up your WordPress website yet, you can read here for the complete WordPress website creation.

2. Best Theme for Elementor? Definitely is WP Astra.

There are thousands upon thousands of these available for free download at WordPress or from Themeforest. And you’ll want to pick a theme that can fit your design style and also can provide a great experience for the visitors.

By default, the WordPress editor can be a bit lacking in terms of flexibility and options. This is precisely why page builders are created for producing the content. The popular drag and drop page builders are Elementor, Thrive Architect, Beaver Builder, WPBakery, and Divi Builder.

Don’t know about Elementor? You can read how I use Elementor to build website content.

If you love Elementor just like me, then your decision of theme will often come down to choosing between OceanWP, WP Astra, GeneratePress or Hello themes. I typically recommend WP Astra WordPress theme because it is free and works seamlessly with Elementor.

It is the top preference theme from a Facebook group.

According to Adam’s WordPress themes speed review, WP Astra is also the fastest among these 4 top themes.

Best of all, Astra is exceptionally lightweight, which means that it is fast, fully customizable, and suitable for almost any web page, whether it be a blog, personal portfolio, business website, or e-commerce storefront.

Overall, it is hard to go wrong with the dynamic duo of WP Astra and Elementor, as these two web development tools combine to create the best of both worlds for novice and veteran WordPress developers alike.

These are the reasons why you should choose WP Astra WordPress theme for your website.

Below is my GTMetrix report showing WP Astra can bring me the fast loading website. Of course the web hosting I’m using and the cache plugin I’m using did help a lot. Check out my complete guide for website speed optimization.

3. Is Astra Pro Needed?

There is also an Astra Pro version available that makes the theme becomes even better. It comes with a lot of great features that give you more control over styling the theme. For more information about the Pro features, Astra website provides a clear explanation.

If you are a starter and don’t want to risk so much money, personally, I think the free version of Astra should be enough to build a perfect personal/blog/business information website. This is because most of the stylings/features can be achieved by Elementor Pro (paid version).

However, If you need an e-commerce site, mega menu, premium customer support, more customization and also have multiple websites, I would recommend getting at least an Astra Pro license, this is because one good thing from buying an Astra Pro is one license can support for the unlimited number of websites.

Besides, it can do a lot of more customization on the appearance, for instance, on the checkout page to improve customer conversion. I’m using Astra Pro’s features on one of my Woocommerce site, mostly for customizing and improving the customer checkout experience.

4. Install WP Astra WordPress Theme

Appearance -> Themes -> Add New -> Search “astra” -> Hover to “Astra” theme -> Install -> Activate. With these steps, WP Astra WordPress theme is successfully installed and integrated into your WordPress.

5. Configure The Style of WP Astra Theme

Appearance -> customize. You will be redirected to a page as shown below. This is the control panel page which sets the styles of the theme.

As I mentioned previously, some of the features such as header & footer builder can be done by using Elementor Pro page builder plugin. Hence, you need to disable some of these features (from either Astra or Astra Pro) so that to serve the fastest and lightweight page for Elementor Pro.

5.1. Site Identity

Header -> Site Identity.

• Change your logo. Leave the logo width as the default value. You can also set a different logo for retina (Apple device) and mobile devices.
• Upload a site icon for your website. .ico image. It is the icon over the tab. I recommend you use a .ico format instead of .png format. 64px x 64px will do. If you haven’t had a logo, you may seek for a logo designer from Fiverr with the price as low as USD5.
• Site title and tagline. This is helpful for SEO.
• Display site title and site tagline. Untick them. You can include the site title and tagline in your logo.

5.2. Header, Sidebar & Footer

If you are using Elementor Pro, you can use its theme builder solution to design your own header, sidebar, and header. In fact, I usually choose to disable these three functions from Astra and use the theme builder from Elementor Pro (Recommended).

This is because I like the high flexibility from Elementor Pro and I can control my own design style. I have written a tutorial on how to use the theme builder from Elementor Pro.

If you are using Elementor Free version (don’t have theme builder), you need to enable the header, sidebar, and footer.

Header ->

• Primary Header, Above Header and Below Header. Set the layout and style of the headers.
• Sticky Header. Fix the header in the top portion of your webpage when a user scrolls the page. Example of a sticky header, Facebook web.
• Transparent Header. Set your primary header background to transparent and pull the page content to the top. Example of a transparent header, Astra web.

Sidebar ->

• Default Layout, Pages, Blog Posts and Blog Post Archives. Decide whether to have a sidebar at these few places.

Footer ->

• Footer Widgets and Footer Bar. Set the layout and style of the footers.

5.3. Content Container

Global -> Container.

• Site layout. Full Width.
• Container Width. Set your desired width, if you have no idea what number to put, just leave it as 1140. Default Container. Assign Full Width / Contained.
• Other Settings. Use default values.

5.4. Blog

Once again if you are using Elementor Pro. You can use its theme builder to build the blog page and also the post template with more flexibility in terms of design.

Blog ->

• Blog / Archive. The design of the blog page. A blog page is a page that lists down all the articles/posts you had written.
• Single Post. The design of the single post template.

5.5. Typography & Colors

Global -> Colors -> Base Colors.

• Theme Color, Link Color, Text Color, Link Hover Color. Set your website branding colors. Can get inspiration from ColorHunt.
• Background. Set the color of the background. Usually white color.

Global -> Colors -> Content

• Heading Colors. Set the colors of the headings.

Global -> Typography->Base Typography.

• Body & Content. Choose fonts and their style for your texts. See available fonts from Google Fonts.

Global -> Typography-> Headings

• Headings. Choose a font style for each of the headings.

5.6. Other Settings

Breadcrumb. Disable it. It shows the directory of your post.

Menus. Set it after created content. It can be set from the WordPress dashboard. Appearance -> Menus

Widgets. Set it after created content. It can be set from the WordPress dashboard. Appearance -> Widgets. You can add widgets such as “Recent posts” to your sidebar. It can be achieved with Elementor Pro also.

Homepage Settings. Set it after created content. It can be set from WordPress dashboard. Settings -> Reading.

Woocommerce. Will show up if you have installed Woocommerce plugin for e-commerce. There are layout, colors and typography settings that you can set.

Additional CSS. Additional CSS styles can be added here

Global -> Buttons. Set the colors for the primary button/theme button.

Global -> Scroll To Top. Set and style the scroll to top button, it is typically positioned at the bottom right of a website.

Wrapping It Up

There are many other settings that you can play around. And these are the important settings that you need to set for a website to work perfectly.

It is your time to do your theme configuration.

After configuring your theme, you probably need to explore the importance of plugins that give your website additional functionalities.