This post contains affiliate links. That means I earn a commission on purchases you make at no extra cost.
Let’s begin.
Astra Theme Customization Tutorial
Install Astra On WordPress
You can install Astra from the WordPress theme library or upload the installation file.
Install Astra From The WordPress Theme Library
Hover your mouse over Appearance and click Themes.
Click Add New.
Type Astra.
The Astra theme appears on the left.
Hover your mouse over the theme and click Install.
Once installed, you can activate the theme for your website or use the Live Preview link to view your site content on Astra.
Upload Astra Theme Installation Files To WordPress
Go to www.wpastra.com (*Paid link) and click Download Now.
Below the comparison tables is a download link for the Free Astra WordPress Theme.
To get the installation files, give your name and email address to subscribe.
You can unsubscribe at any time.
Click Subscribe and Download.
Once the download is complete, return to your WordPress admin dashboard.
Hover your mouse over Appearance and click Themes.
Click Add New.
Click Upload Theme.
Click Choose File.
Select the installation file and click Open.
Click Install Now.
After a short wait, you receive an installation complete confirmation message.
After installation is complete, you have three options.
You can view your site’s content without activating Astra on your website.
You can activate Astra on your website.
Return to the installed themes page.
How To Install The Astra Theme On WordPress Video Tutorial
Astra Theme Customization Tutorial
You can customize Astra before activating it on your website.
Hover your mouse over the Astra theme and click Live Preview.
Here are the customization options.
The first option is to upgrade to Astra Pro.
For a comparison of Astra free versus Astra Pro version, go to www.wpastra.com/pricing (*Paid link).
Global
Global allows you to select default settings across your website.
You customize typography, colors, layout, and buttons.
If you use a page builder, some of these settings are disabled.
Typography
Click Typography.
Presets
You have six font families for your headings and body text.
Hover your mouse over each one to get more details about the font families.
Base Font
Base Font allows you to edit the default values.
Click the pencil icon to make edits.
Body Font is the paragraph text of your website.
Click Headings Font to edit.
Heading Font
Heading Font allows you to customize headers.
H1 Font is the title of your blog posts. H2 to H6 Fonts are sub-headings within your blog post content.
Click the pencil icon to edit.
Paragraph Margin Bottom
The 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
Click Header Builder from the customizer menu.
On the next page, customize the Elements and the Design.
You can edit using the customizer or using the preview window.
This 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 the 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 have just a logo on your header.
Click Site Icon to add a favicon to your website.
The Site Icon appears on browser tabs.
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 the 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.
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 the 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 Breadcrumb, 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 Breadcrumbs.
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 information displayed.
You can move the blocks to change the order. Clicking on the eye icon removes that item.
Post Content allows you to show a few sentences of your post or all of the post.
Typography is the text size of the 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 prefer. 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 Layout option controls the sidebar position for 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 in the Blog option, 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 customizes 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.
Move the tabs up or down to reorder.
To add items to the menu, click + Add Items. Then select the tabs from the list.
When complete, select Add Items again to remove the list.
Menu Location
The Astra theme has five areas to 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 Astra, there are 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 available.
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 of this widget.
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 the 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.
When 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
If you haven’t created a Homepage or Blog page, 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.
Customize Homepage Settings On Astra Video Tutorial
Additional CSS
Additional CSS allows you to add code to change the theme style.
For example, you can add code to change the default color of links in your blog posts.
Paste your CSS code into the box.
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.
Click Activate & Publish.
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 of the visitor’s device.
The Astra theme has been downloaded over a million times and has a review score of 5 out of 5.
To learn more about the Astra WordPress theme, check out my The Astra WordPress Theme article.
How does Astra compare to other WordPress themes? Check out my Astra WordPress Theme vs. Other Themes: Which One is Better? article to learn more.
I hope you found my article informative. If you have any questions, please leave them below.
Leave a Reply