How To Customize The Free Astra WordPress Theme Tutorial

In my post, I show you how to install and customize the Astra WordPress theme 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.

How To Install Astra

You can install Astra from the WordPress theme library. Type Astra into the search bar. Then install and activate the theme. Or, you can use the file upload option to install Astra.

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 without going live.

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.

Next are paid plan comparison tables. Below the 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’.

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

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

Once opened, click on ‘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 WordPress Theme YouTube Video Tutorial

How To Customize Astra

You can customize WordPress themes before you activate them. 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 you your changes.

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

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, colours, layout, and buttons.

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

Typography

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

Base Typography

Base typography is to set the default text for your blog posts and pages.

You can change the default font.

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

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

Text transform is for you to set capitalization.

Line-height is the space between lines in your paragraphs.

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

Headings

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

You can have the same font, weight, text transform, and line height for all headings. Or set them individually.

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

Select the colour box to change.

Containers

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

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.

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.

How To Use Global To Customize Your Website YouTube Video Tutorial

Next on the customization option list is ‘Header’.

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

Site Identity

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

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

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

A site icon is an image in browser tabs.

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

Primary Header

‘Primary Header’ is to position your logo. You have three options, left of your menu, above, or to the right of your menu.

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

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

Lastly, decide how you want your logo to show on mobile devices.

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

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

The next option is for sub-menus.

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

The next option is ‘Mobile Menu’.

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

Transparent Header

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

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

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

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

How To Use Header To Customize Your Website YouTube Video Tutorial

Breadcrumbs allow your visitors to track their path 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.

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 you enable ‘Breadcrumb’, you have extra options. You can set a separator icon and disable it on certain pages.

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

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

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

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

Blog

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

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

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

Single Post

The ‘Single Post’ option is to set the information on your blog posts.

Content width default is 1200 pixels. Use the up and down arrows or enter a new setting.

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

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

How To Use Blog To Customize Your Website YouTube Video Tutorial

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

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

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

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

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

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

The first option is ‘Footer Widgets’.

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

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

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

The second option is ‘Footer Bar’.

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

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

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

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

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.

To customize your active menus, click on the 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.

To view all menu locations, click on the tab.

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

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 allow you to add extra functionality to your website.

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

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

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

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

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.

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

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

How To Use Widgets To Customize Your Website YouTube Video Tutorial

Homepage Settings

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

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

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 publish to the posts page.

How To Use The HomePage Settings Option To Customize Your Website YouTube 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 colour of links in your blog posts.

Paste your CSS code into the box on the left.

Activate And Publish Your Customizations

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.

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.

Another theme I recommend is the Ashe WordPress theme. Check out my ‘How to install and customize the Ashe WordPress theme‘ guide. I also have a YouTube playlist on how to install and customize Ashe.

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