How To Customize The Astra Theme On WordPress Tutorial

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.

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

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 view your site content.

Activate

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.

Astra homepage

Below the comparison 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 clicking 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

Click Choose File.

Choose file

Select the installation file and click Open.

Astra file

Once opened, click Install Now.

Install now

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

Installation complete

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.

Astra installed

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 Install The Astra Theme To W...
How To Install The Astra Theme To WordPress

How To Customize Astra

You can customize WordPress themes before activating.

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

Live preview

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

Customizing mode

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

Comparison

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.

Typography
Presets

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

Presets

Hover your mouse over each one to get more details.

Font family details
Base Font

Base Font allows you to edit the default values.

Base font

To make changes, click the pencil icon.

Edit body font

Body Font is the paragraph text of your website.

Click Headings Font to edit heading text on your website.

Headings Font
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.

Heading Font

Click on the pencil icon to start editing.

Customize headers
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.

Margin slider

The preview window shows you the spacing.

Spacing

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

Restore default
Underline Content Links

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

Underline Content Links

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

Enable underline links
Customize Global On Astra Video Tutorial


Header Builder

To start, select Header Builder from the customizer menu.

Header Builder

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

Header builder elements

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

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.

This image has an empty alt attribute; its file name is Headersection-1024x173.png

Here is my website.

Live preview
Site Title And Logo

The first option is Site Title And Logo.

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.

website logo

Next, set the width of your logo.

Logo width

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

Site title

Your site tile appears next to your logo.

Site title

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.

Site icon

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

Design

Click the Design tab to add spacing.

This image has an empty alt attribute; its file name is Design.png

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

Spacing
Button

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

This image has an empty alt attribute; its file name is Button.png
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.

Button general

On my website, the Button appears on the right.

Take action
Design

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

Design tab
FastestWordPressTheme-728x90
Primary Menu

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

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

Configure menu

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

Navigation
Design

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

Design
Transparent Header

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

Transparent header
General

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

You can upload an image and edit the width.

Transparent header
Design

Use design to customize your Transparent Header.

This image has an empty alt attribute; its file name is Transparentheader-2.png
Add Items To The Header Builder

Click on the Header Builder sections to add blocks.

Add blocks

Select the block you want to add.

Select block
Customize Header Builder On Astra Video Tutorial
How To Customize The Header On Astra

Breadcrumb

Select Breadcrumb from the customizing menu.

Select breadcrumb

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.

Header position

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.

Breadcrumb position

In my example, I selected Before Title.

Header position

The Breadcrumb appears at the top left of the screen.

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

Breadcrumb
Separator

To customize the customizer, select one of the icons.

The last icon allows you to choose your design.

Separator

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

Unicode
Alignment

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

Alignment

On my website, the Breadcrumb is to the left.

Aligned left
Display Settings

Choose the pages you want to show the Breadcrumb.

Display settings
Astra Pro Features

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

Buy Astra Pro today.

Best-Gutenberg-WordPress-Theme-1200x630
Design

Use Design to customize the Breadcrumb.

Content Font

Use Content Font to customize the text in the Breadcrumb.

Content Font
Colors

Click on the grey circle to change the Breadcrumb colors.

Color
Spacing

Use Spacing to set pixel space around the Breadcrumb.

Spacing
Customize Breadcrumbs On Astra Video Tutorial

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 or all of the post.

Post content

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

Typography

Single Blog Post

Choose Blog from the customizer menu.

Select blog from the menu

Next, select Single Post.

Select single post
General
Container Layout

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

Container layout

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.

Sidebar layout

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.

Custom content width
Structure

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

Structure

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.

Hide featured image

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

Title above image
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.

Related posts

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

Enable related posts

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.

Enable post excerpt
Design
Post / Page Title Font

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

Post title font
Related Posts

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

Related posts customization
Post Spacing

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

Post spacing

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

Chain link
BestWooCommerceThemeBuilttoBoostSales-728x90
Customize Single Blog Posts On Astra Video Tutorial

Choose Sidebar from the customizer menu.

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

Default sidebar layout

Select your preferred position.

Select the default 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.

Sidebar width
How To Customize The Sidebar On Astra Video Tutorial

Select the Footer Builder tab from the customizer menu.

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

Footer builder
Elements

You can customize the footer area using the elements.

Footer widgets

Select the part to edit.

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

Edit widget

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

Footer builder block

Click on the widget to edit.

Edit widget
Design

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

Design
Background Color-Image

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

Background image color
Spacing

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

Padding

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

Margin

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

Values
BestWooCommerceThemeBuilttoBoostSales-728x90

Menus

Select the Menus option from the customizer menu.

Menus

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.

Menu list
Edit Menu

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

Edit menu

I move the tabs up or down to reorder.

Reorder

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

Click to add

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

Remove list
Menu Location

Menu locations depend on your theme.

My theme has five areas I can create a menu.

Menu locations

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

Change menu location
Delete Menu

Click Delete to remove a menu.

Delete menu
Create New Menu

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

Create new menu

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

Menu name

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

Select items for new menu

Once complete, clear the list and publish your menu.

Publish menu

My new menu appears at the top of my website.

New menu
View Menu Locations

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

On my theme, I have five locations.

View menu locations

You can assign a menu to any or all locations.

Menu locations

Click on the menu and assign one from the list.

Select menu from list

You can edit or create menus.

Edit or create
FastestWordPressTheme-728x90
Customize Menus On The Astra Theme Video Tutorial

Widgets

Select the Widgets tab from the customizer menu.

Widgets
No Widget Area

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

No widget area

Navigate to a page that does have widget areas.

Widget Area

My sample post has a widget area in the sidebar.

Sidebar

Click on the tab to edit.

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

Live widgets

Click on a widget to edit.

Click to edit

I changed the title on this widget in my example.

Edited widget

The live preview shows you your edits.

Live preview
Delete A Widget

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

Remove
Add A Widget

Click the plus icon to add a widget.

Add a widget

Select a widget from the list.

Select a widget

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.

Widget group

In the new Group Widget, create a new block.

Create a block

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

I type my heading and hit enter.

Heading

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

Latest posts

Now you can see my latest posts.

Latest post list

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

Sidebar live preview

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

Use the arrows to move position.

Move widget

Once you complete your edits, publish your changes.

Publish changes

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

Website post
Customize Widgets On Astra Video Tutorial

Homepage Settings

Select the Homepage Settings tab from the customizer menu.

Homepage settings
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.

Latest post on newblogr.com_

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

Your latest posts
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.

Page

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

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.

Posts page
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
Homepage Settings On The Astra Theme

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

Paste your CSS code into the box on the left.

Additional CSS

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.

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.

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