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

The Astra theme is a popular WordPress theme. It is light, loads fast, and is mobile-friendly.

Astra has been downloaded over 1 million times and has a review score of five out of five.

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

This post contains affiliate links. That means I earn a commission on purchases you make at no extra cost.

Let’s begin.

Customize Astra Theme Tutorial

How To Install Astra

You can install Astra from the WordPress theme library. Or, you can upload the installation file to WordPress.

How To Install Astra From The WordPress Theme Library

Hover your mouse over Appearance and select Themes from the menu.

Next, select the Add New link.

In the Search Themes box, type Astra.

After a short wait, the Astra theme appears.

Hover your mouse over the theme and select Install.

Once installed, you can activate the theme for your website or use the Live Preview link to view your site content.

Upload Astra Theme Installation Files 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.

Below the comparison tables is a download link for the free Astra WordPress theme.

To get the installation files, you must give your name and email address to subscribe to newsletters.

You can unsubscribe at any time.

You get the installation files after clicking on Subscribe and Download.

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.

Next, select Add New.

Then, Upload Theme.

Click Choose File.

Select the installation file and click Open.

Once opened, click Install Now.

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

After installation, you have three options.

You can view your site’s content without going live. Activate Astra immediately. Or return to your installed themes list.

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

How To Install The Astra Theme On WordPress Video Tutorial

How To Customize Astra

You can customize WordPress themes before activating.

To start, hover your mouse over the Astra theme and select Live Preview.

All the customizing options are on the left. On the right, a preview window shows the changes.

The first option on the list is 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).

Global

Global allows you to determine default settings across your website.

All pages and posts update after making changes to these settings.

You can edit typography, colors, layout, and buttons.

If you use a page builder, some of these settings are disabled.

Typography

Next, choose Typography.

Presets

Astra gives you six font families to choose from for your blog. Select the one you prefer.

Hover your mouse over each one to get more details.

Base Font

Base Font allows you to edit the default values.

To make changes, click the pencil icon.

Body Font is the paragraph text of your website.

Click Headings Font to edit heading text on your website.

Heading Font

Heading Font allows you to customize headers across your website.

H1 Font is the title of your blog posts. H2 to H6 Fonts are sub-headings within your blog post content.

Click on the pencil icon to start editing.

Paragraph Margin Bottom

Paragraph Margin Bottom is the space between paragraph blocks and the following block.

To change the default setting, move the slider left or right.

The preview window shows you the spacing.

To return to the default setting, click the restore icon.

Underline Content Links

Underline Content Links allow you to underline internal and external links on your site.

I recommend enabling this option. It helps highlight links on your website.

Customize Global On Astra Video Tutorial

Header Builder

To start, select Header Builder from the customizer menu.

On the next page, you can customize the Elements and the Design.

You can edit using the customizer’s tabs or within the preview screen.

The three sections are at the top of your website. Currently, I use one area.

That section has my logo on the left. My menu and call to action button are on the right.

Here is my website.

Site Title And Logo

The first option is Site Title And Logo.

The Site Title & Logo option allows you to upload your logo and set a title to appear on the header section of your website.

General

Upload your logo. You have an option to upload a logo for retina devices.

Next, set the width of your logo.

Next, add a site title and tagline to your header.

Your site tile appears next to your logo.

Disable the title and tagline options to only have a logo on your header.

Finally, click Site Icon to add a favicon to your website.

Visit my How To Change The Favicon On Astra for a complete tutorial.

Design

Click the Design tab to add spacing.

Enter a number to determine how far you want your logo from the edge of your website.

Button

Use the Button option to add a call to action to your header.

General

On my website, the Button appears on the right. Add button text, the destination URL, and the link relationship.

The most common relationship tags are Follow and Nofollow.

On my website, the Button appears on the right.

Design

Use the Design tab to customize the look of the Button.

Primary Menu

Primary Menu allows you to customize the look of your navigation menu.

General

Click Configure Menu From Here to customize your current menu.

You can use this link to create a new menu or select another as your main menu.

Edit Width to change the default setting.

On my website, the menu appears on the right next to the button.

Design

Use the Design tab to customize the look of the Menu.

Transparent Header

On my website, I’m using a transparent image.

General

You can choose to enable the transparent header on selected devices.

You can upload an image and edit the width.

Design

Use design to customize your Transparent Header.

Add Items To The Header Builder

Click on the Header Builder sections to add blocks.

Select the block you want to add.

Customize Header Builder On Astra Video Tutorial

Breadcrumb

Select Breadcrumb from the customizing menu.

Breadcrumbs allow your visitors to track their path to the current page.

General

Header Position

The default position for breadcrumbs is None. Click the Position menu to change this setting.

After activating Breadcrumbs, visitors can view how they got to the current blog post.

Breadcrumb appears at the top of the page. Use the menu to select your preferred position.

In my example, I selected Before Title.

The Breadcrumb appears at the top left of the screen.

I am on the About page. I visited the Home page first.

Separator

To customize the customizer, select one of the icons.

The last icon allows you to choose your design.

To choose your design, click the last icon and enter the Unicode.

Alignment

Use Alignment to position the Breadcrumb to the left, center, or right.

On my website, the Breadcrumb is to the left.

Display Settings

Choose the pages you want to show the Breadcrumb.

Astra Pro Features

Upgrading to Astra Pro allows you to customize everything on your website.

Buy Astra Pro today.

Design

Use Design to customize the Breadcrumb.

Content Font

Use Content Font to customize the text in the Breadcrumb.

Colors

Click on the grey circle to change the Breadcrumb colors.

Spacing

Use Spacing to set pixel space around the Breadcrumb.

Customize Breadcrumbs On Astra Video Tutorial

Blog / Archive

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

The default is 1200. Use ‘Custom’ to change.

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

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

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

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

Single Blog Post

Choose Blog from the customizer menu.

Next, select Single Post.

General

Container Layout

The Container Layout option allows you to set the display style of your blog posts.

Click on the style you want. The options are Default, Boxed, Full Width/Contained, Content Boxed, and Full Width/Stretched.

Sidebar Layout

You can set the style with the Sidebar Layout option if you have the sidebar enabled for your blog posts.

You can select Default, No Sidebar, Right Sidebar, or Left Sidebar.

Content Width

The content width default is 1200 pixels.

You can change this with the Custom option. Enter your required width.

Structure

The Structure option allows you to set the information displayed on your posts.

You can move the Structure and Meta blocks up or down to change the order.

To hide an element, click on the eye icon. In my example, I selected to hide the featured image.

I have changed the blog title to show before the featured image in this example.

Related Posts

The Related Posts option allows you to show other posts at the bottom of each blog post.

I recommend enabling this option to encourage visitors to stay on your website.

Once enabled, you can customize how Related Posts display on your website.

You can customize the title, title alignment, number of related posts, grid column layout, posts query, post structure, and meta information.

The last option to customize in Related Posts is Enable Post Excerpt.

You can set how many words display for each related post when this option is enabled.

Design

Post / Page Title Font

The Post / Page Title Font option allows you to set the text size for your title.

Related Posts

You can customize the Related Posts section here if you enable Related Posts.

Post Spacing

The Post Spacing option allows you to set the space between your blog content and other sections.

When the link icon is selected, the values are equal. When unchecked, you can set values for each box.

Customize Single Blog Posts On Astra Video Tutorial

Sidebar

Choose Sidebar from the customizer menu.

Default Layout

The Default Option controls the sidebar position for every page on your website.

You can have the sidebar on the right, left, or no sidebar.

Select your preferred position.

The Sidebar option is also in the Blog option on the customizer. If you have set a default position on Blog, this Sidebar option won’t change.

Sidebar Width

Set the width of your sidebar with this option.

How To Customize The Sidebar On Astra Video Tutorial

Footer Builder

Select the Footer Builder tab from the customizer menu.

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

Elements

You can customize the footer area using the elements.

Select the part to edit.

This widget is to customize the copyright text for your website.

You can also edit the footer area from the footer blocks.

Click on the widget to edit.

Design

Change the color and add spacing to the footer area with the Design option.

Background Color-Image

To change the Background Color-Image of the footer area, click on the grey circle and select your preferred color.

Spacing

Use the Padding option to set the space between the footer area and the surrounding elements.

Use the Margin option to set the space on the left and right of the Footer.

To enter different values in each box, click the link icon.

How To Customize The Footer On Astra Video Tutorial

Menus

Select the Menus option from the customizer menu.

I have three menus on my website. They are About Us, Connect, and Primary Menu.

This area is blank if you don’t have any menus on your site.

Edit Menu

Click on the menu to edit. I selected the About Us menu.

I move the tabs up or down to reorder.

To add items to the menu, click + Add Items. Then select the tabs from the list to add.

When complete, select Add Items again to remove the list.

Menu Location

Menu locations depend on your theme.

My theme has five areas I can create a menu.

My About Us menu is in the Footer area of my website. To change this, I can tick one of the boxes.

Delete Menu

Click Delete to remove a menu.

Create New Menu

Click Create New Menu to make a new menu for your website.

Give the menu a name, select a location, and then click Next.

Select items from the list to add to your new menu.

Once complete, clear the list and publish your menu.

My new menu appears at the top of my website.

View Menu Locations

Click View All Locations to see where to place menus on your theme.

On my theme, I have five locations.

You can assign a menu to any or all locations.

Click on the menu and assign one from the list.

You can edit or create menus.

Customize Menus On The Astra Theme Video Tutorial

Widgets

Select the Widgets tab from the customizer menu.

No Widget Area

You get this message when you edit a page with no widget areas.

Navigate to a page that does have widget areas.

Widget Area

My sample post has a widget area in the sidebar.

Click on the tab to edit.

Once open, I can see the widgets in the sidebar.

Click on a widget to edit.

I changed the title on this widget in my example.

The live preview shows you your edits.

Delete A Widget

To delete a widget, click the three dots and select Remove.

Add A Widget

Click the plus icon to add a widget.

Select a widget from the list.

The new widget appears at the bottom.

I recommend creating a Group Widget. A Group Widget keeps your items together.

I want to add a recent post widget to my sidebar.

First, create a group.

In the new Group Widget, create a new block.

I want to create a title, so I need a Heading block.

I type my heading and hit enter.

To show my latest posts, I need a Latest Posts block.

Now you can see my latest posts.

The live preview shows my new widget. The title and posts are kept together in the group.

Make your edits and position the widget. I want this widget to be at the top.

Use the arrows to move position.

Once you complete your edits, publish your changes.

I can see the new widget when I go to my website.

Customize Widgets On Astra Video Tutorial

Homepage Settings

Select the Homepage Settings tab from the customizer menu.

Homepage Display Options

You have two options for your homepage. You can display your latest blog posts or choose a page you created.

Your Latest Posts

Every time you publish a new blog post, it displays on your homepage.

I have this option set on my website. My last post was my article about Customizing Widgets On Astra.

This post is now on my homepage.

Should you select the Your Latest Posts option, your posts appear on the homepage automatically after publishing.

A Static Page

The Static Page option allows you to assign a page as your homepage.

You also need to select a page for your blog posts.

When you choose the Static Page option, WordPress needs to know where to display blog posts after publishing.

Use the menu to assign a homepage and blog page.

You can choose from published pages. If you don’t see your page in the list, check you published your homepage as a page, not a post.

For your blog posts, publish a page called Blog. WordPress will start publishing your content to the Blog page.

You don’t need to add content to this page. WordPress will start publishing your content to the Blog page.

Select Blog from the menu.

Add New Page

Haven’t a Homepage or Blog page yet? Select the Add New Page link.

Create your pages and return to this setting to assign your pages.

After choosing your Homepage and Blog pages, go to the Menus option to set your navigation.

Visit my How To Customize Menus On Astra post to learn more.

Customize Homepage Settings On Astra Video Tutorial

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 color of links in your blog posts.

Paste your CSS code into the box on the left.

Activate And Publish Your Customizations

Once you have the theme as 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.

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).

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.

Should you have any questions or feedback about my blog post. Please comment below. I appreciate all feedback.