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.
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.
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 customize.
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 you click 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 customize the theme before activation. Activate immediately. Or return to your installed themes list.
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’.
All the customising options are on the left. Each time you make a change, the live preview updates.
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. 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
Base typography is for you to set the default for the text in your blog post content.
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 capitalisation.
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.
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’ 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
Header
Next on the customisation 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 the image that appears in browser tabs.
Once uploaded and published, your icon and tagline appear in browser tabs.
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.
‘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, you can decide how you want your logo displayed on mobile devices.
Primary Menu
‘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 have 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
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.
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.
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.
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 allows you to set the information displayed on your blog posts.
Content width default is 1200 pixels. To change, 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
‘Sidebar’ allows you 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.
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.
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, you can add text, widgets, or menus.
Next, change the content width, border size and colour.
Finally, change the colours and background for the footer bar.
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.
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 you can add widgets. On my website, I can add them to my sidebar.
Once I click through to the sidebar, I can 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 you can use to add more.
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.
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.
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 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.
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. 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.
