Astra WordPress theme tutorial

In my post, I show you how to install and customize the free Astra WordPress theme step by step.

The Astra theme is a popular WordPress theme. It is light, so loads fast and is responsive.

Astra has been downloaded over 1 million times from the WordPress theme library. It has a review score of five out of five.

Astra downloads and review score

The Astra theme is suitable for a blog, personal portfolio, business website or WooCommerce storefront.

This post contains affiliate links. That means I make a commission should you make a purchase at no extra cost to you.

Let’s begin.

How To Install The Astra Theme on WordPress

There are two ways to install Astra on WordPress. The first is to install the theme from the WordPress theme library. The second is to download the installation files from the Astra theme homepage and then upload them to WordPress.

How To Install Astra From The WordPress Theme Library

First, hover your mouse over ‘Appearance’, select ‘Themes’ from the menu.

Select themes

Next, select the ‘Add New’ link.

Add new

In the ‘Search Themes’ box, type ‘Astra’.

Search for Astra

After a short wait, the Astra theme appears.

Astra theme

Hover your mouse over the theme and select ‘Install’.

Select install

Once installed, you can activate the theme for your website or use the ‘Live Preview’ link to customize.

Activate

How To Upload The Astra Theme To WordPress

Alternatively, you can download the Astra theme installation file from Astra’s homepage.

First, go to www.wpastra.com (*Paid link) and select the ‘Download Now’ link.

Astra homepage

Next are paid plan comparison tables. Below the tables is a download link for the free Astra WordPress theme.

Download free Astra

To get the installation files, you must give your name and email address to subscribe to newsletters. You can unsubscribe at any time.

Download

You get the installation files after you click on ‘Subscribe and Download’.

Download starts

Once the download is complete, you can upload the file to WordPress.

Return to your WordPress admin dashboard. Hover your mouse over ‘Appearance’ and select ‘Themes’ from the menu.

Select themes

Next, select ‘Add New’.

Add new

Then, ‘Upload Theme’.

Upload theme

To start, click on the ‘Choose File’ link.

Choose file

Select the installation file on your computer and click on ‘Open’.

Astra file

Once opened, click on ‘Install Now’.

Install now

After a short wait, you receive an installation complete confirmation.

Installation complete

After installation, you have three options. You can customize the theme before activation. Activate immediately. Or return to your installed themes list.

Astra installed

Now you have Astra installed on your WordPress blog. It is time to start customising.

How To Install The Astra WordPress Theme YouTube Video Tutorial

How To Customize The Free Astra WordPress Theme

You can customize WordPress themes before you activate them. To start customising, hover your mouse over the Astra theme and select ‘Live Preview’.

Live preview

All the customising options are on the left. Each time you make a change, the live preview updates.

Customizing mode

The first option on the list is a link to upgrade to Astra Pro.

For a price check and comparison of the free versus pro version, go to www.wpastra.com/pricing (*Paid link).

Comparison

Global

Global allows you to determine default settings across your website. Settings for typography, colours, layout, and buttons.

Please note, some page builders override some global options.

Typography

In typography, there are options for base typography and headings.

Base typography and headings

Base Typography

Base typography

Base typography is for you to set the default for the text in your blog post content.

You can change the default font.

Default font

The default size for the text is 16. Use the up and down arrows to change the size.

Size

Use the weight option to change the thickness of the letters.

Weight

Text transform is for you to set capitalisation.

Text transform

Line height is the space between lines in your paragraphs.

Line height

The ‘Paragraph Margin Bottom’ is the space between paragraphs.

Paragraph margin bottom

Headings

The headings option allows you to set the default for all headings on your website.

Headings

To have the same font, weight, text-transform, and line height for all headings, use the first ‘Headings (H1 – H6)’.

To set for individual headings, scroll down. Heading 1 is the blog title, and headings 2 to 6 are your sub-headings.

Colours

Once you select ‘Colours’, you come to ‘Base Colours’.

Base colours

‘Base Colours’ allows you to set the default colours for your text, links, heading text colours, background colour, and background image.

Theme colour is for Astra WordPress theme elements like buttons.

Base colours

Select the colour box to change.

Select colour

Containers

The container option is to set width and blog post layout.

Container

Move the sliding scale to change the width of your website.

Use the ‘Layout’ option to set the default for your blog. You can change the layouts for pages and blog posts, too.

Use the menu to change.

Page layout options

Buttons

The buttons option allows you to set colour, borders, typography, and spacing for buttons in your blog posts. Click the ‘Edit’ icon to change.

Buttons

How To Use Global To Customize Your Website YouTube Video Tutorial

Next on the customisation option list is ‘Header’.

Header

With ‘Header’, you can upload your logo, add a header image, and customize your menu.

Header options

Site Identity

Site identity allows you to add your logo and a site icon to your website.

Site identity

Select the ‘Select Logo’ link to choose your file. Once uploaded, your logo appears on the top of your blog.

Logo

Use the ‘Logo Width’ sliding scale to change logo size.

Logo width

A site icon is the image that appears in browser tabs.

Site icon

Once uploaded and published, your icon and tagline appear in browser tabs.

Browser tab

Primary Header

‘Primary Header’ allows you to position your logo. You have three options. You can have your logo on the left of your menu. Above the menu. Or to the right of your logo.

Layout

‘Width’ allows you to have the header section in line with your content or full width.

Header width

Next, you can have a border between your header and body content.

Border

Lastly, you can decide how you want your logo displayed on mobile devices.

Mobile header

Primary Menu

‘Primary menu’ allows you to customize the menu in your header.

Primary menu

The first option allows you to add an extra item to your menu.

Last item in menu

The next option is for sub-menus.

Sub menu

Sub-menus appear when a visitor hovers their mouse over your main menu.

Sub menu

The next option is ‘Mobile Menu’.

Mobile

Use this option to change the menu style for mobiles users.

Mobile menu

Transparent Header

The ‘Transparent Header’ option allows you to have a background image not blocked by the header section.

Transparent header

If you plan to use an image as your background, this is an excellent option to use.

Transparent header

You can enable this feature on all devices or select it from the menu.

Enable on complete website

This feature helps you create an excellent homepage for your website.

Transparent header example

How To Use Header To Customize Your Website YouTube Video Tutorial

Breadcrumb

Breadcrumbs allow your visitors to track the path they took to get to the current page.

Your visitors see top-level pages and categories.

The default position for breadcrumbs is ‘None’. Use the menu to change this.

Position

In my example, I chose ‘After Header’. Visitors can see they came here from the homepage. They are viewing a post in the ‘Attractions in Loei’ category. The last item is the blog post name.

After header

After you enable ‘Breadcrumb’, you have extra options. You can set a separator icon and disable it on certain pages.

Separator

Next is ‘Alignment’. Use the menu to set the breadcrumb to align to the left, centre, or right.

Alignment

Use ‘Spacing’ to set how much space you want around the breadcrumb. Use the link option to keep all four boxes the same value.

Spacing

‘Colours’ allows you to set the colour for the background, text, link, and separator.

Colours

Finally, use ‘Typography’ to set breadcrumb text defaults.

Typography

How To Use Breadcrumb To Customize Your Website YouTube Video Tutorial

Blog

The ‘Blog’ option is for you to set defaults for your blog posts.

Blog

In ‘Blog’, you have options for archived blog posts. Archives are published blog posts appearing on lists such as on your homepage, blog, or category pages.

Blog and Archive

Blog / Archive

Customising Blog Archive

The first option is to set the content width on blog post list pages.

The default is 1200 use ‘Custom’ to change.

Content width

Next, ‘Post Structure’ and ‘Meta’ allow you to set the default for what is displayed.

Post structure

You can move the blocks to change the order. Clicking on the eye icon removes that item.

Featured image

‘Post content shows a few sentences of your post content or all of the post.

Post content

Finally, ‘Typography’ is for the text size of your category title and blog post title.

Typography

Single Post

The ‘Single Post’ option allows you to set the information displayed on your blog posts.

Single post options

Content width default is 1200 pixels. To change, use the up and down arrows or enter a new setting.

Content width

The ‘Structure blocks’ can be moved up or down. To hide, click on the eye icon.

Structure

Finally, typography allows you to set the size of your post title text.

Typography

How To Use Blog To Customize Your Website YouTube Video Tutorial

Sidebar

‘Sidebar’ allows you to set defaults for the sidebar on your website.

Sidebar option

Open the ‘Default Layout’ option to choose ‘No’, ‘Right’, or ‘Left’.

Default layout

You can also set default sidebar layouts for pages, blog posts, and archived pages.

Page post archives

Side width allows you to set the percentage of screen width for your sidebar.

Sidebar width

Use the up and down arrows to change or set a new value.

How To Use Sidebar To Customize Your Website YouTube Video Tutorial

Footer

The ‘Footer’ option allows you to customize the bottom section of your website.

The first option is ‘Footer Widgets’.

Under ‘Layout’, you can enable four widgets areas.

Footer widgets

You can also have a border between your content and the footer area. Select the border size and colour.

Top border

Next is ‘Colours & Background’. You can customize the footer area background and content. Click on the ‘Edit’ icon to change.

Colours and background

The second option is ‘Footer Bar’.

Footer bar

Select the layout icon to add two sections to your footer area. You can copyright your website here, as per my example.

Layout

In the footer bar, you can add text, widgets, or menus.

Section menu

Next, change the content width, border size and colour.

Width and border

Finally, change the colours and background for the footer bar.

Colours and background

How To Use Footer To Customize Your Website YouTube Video Tutorial

Menus

You can customize all your websites menus with this option.

On my tutorial website, I have one ‘Main’ menu. You can create another menu by clicking on the ‘Create New Menu’ link.

Main menu

To customize your active menus, click on the arrow icon.

Arrow icon

You can modify the menu name, change the order, add more items to the menu, and select where you want this menu to appear on your website.

Menu name

To view all menu locations, click on the tab.

Menu locations

On Astra, you can place menus in the header or footer. To add a menu to a sidebar, create a menu widget.

View all locations

Use the dropdown to select a menu, or use the link to create a new menu.

How To Use Menus To Customize Your Website YouTube Video Tutorial

Widgets

Widgets

Widgets allow you to add extra functionality to your website.

Once you select ‘Widgets’, you can see where you can add widgets. On my website, I can add them to my sidebar.

Customise widgets

Once I click through to the sidebar, I can see my current widgets.

Main sidebar

To add a new widget, click on the plus icon.

Add widget

In the latest WordPress update, you can add any WordPress block in addition to widgets.

Add a block

Use the search function or scroll down the list. To add a block or widget, click on the icon.

The new one appears at the bottom.

New widget

Use the widget toolbar to customize, move, or delete the widget.

There is an additional plus icon at the bottom you can use to add more.

Additional widgets

How To Use Widgets To Customize Your Website YouTube Video Tutorial

Homepage Settings

Homepage settings

This option is for you to choose what you want to display on your website homepage. You can show your latest blog posts or set a page you have published.

Once selected, your latest blog posts publish to the posts page.

Homepage

To select a published page, select the ‘A static page’ option and select the homepage and blog page from the menu.

Once selected, your latest blog posts are published to the posts page.

How To Use The HomePage Settings Option To Customize Your Website YouTube Video Tutorial

Additional CSS

Additional CSS

Additional CSS allows you to add code to change the style of your theme. For example, you can add code to change the default colour of links in your blog posts.

Paste your CSS code into the box on the left.

Additional CSS

Activate And Publish Your Customisations

Once you have got the theme the way you want it, it is time to activate it and make it live on your website. To do that, click on the ‘Activate & Publish’ link.

Activate

Astra Free And Astra Pro Feature Comparison Chart

Astra Pro has a lot more features than the free version. To view a comparison, visit wpastra.com/astra-free-vs-pro/ (*Paid link).

Full comparison

Conclusion

The Astra WordPress theme is one of the most popular WordPress themes. It is simple to customize and has a lot of excellent features.

If you are new to blogging, then Astra is an excellent choice. It is simple to customize and loads fast. Astra is a responsive theme that smoothly adjusts its layout based on the screen size and resolution.

The Astra theme has been downloaded over a million times and has a review score of 5 out of 5.

Another theme I recommend is the Ashe WordPress theme. To check out how to install and customize the free Ashe theme, go to newblogr.com/customize-wordpress-theme/. I also have a YouTube playlist on how to install and customize Ashe at https://Ashethemeplaylist.

If you have any questions or feedback about my blog post, please leave a comment below. I appreciate all feedback.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.