How To Customize Astra On WordPress

How to Customize Astra: Astra Theme Tutorial

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

The Astra theme is a popular WordPress theme. It 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.

Let’s begin.

This article contains affiliate links. That means I make a commission when you purchase at no extra cost. I appreciate purchases made using my links.

Table of Contents

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.

Select themes

Click Add New.

Add new

Type Astra.

Search Astra

The Astra theme appears on the left.

Astra theme

Hover your mouse over the theme and click Install.

Select install

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

Activate

Upload Astra Theme Installation Files To WordPress

Go to www.wpastra.com (*Paid link) and click Download Now.

Astra homepage

Below the comparison tables is a download link for the Free Astra WordPress Theme.

Download free Astra

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

You can unsubscribe at any time.

Download

Click Subscribe and Download.

Once the download is complete, return to your WordPress admin dashboard.

Hover your mouse over Appearance and click Themes.

Select themes

Click Add New.

Add new

Click Upload Theme.

Upload theme

Click Choose File.

Choose file

Select the installation file and click Open.

Click Install Now.

Install now

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

Installation complete

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.

Astra installed

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.

Live preview

Here are the customization options.

Customizer

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

Comparison

Astra Global

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.

Global settings

Typography

Click Typography.

Typography
Presets

You have six font families for your headings and body text.

Presets

Hover your mouse over each one to get more details about the font families.

Font family details
Base Font

Base Font allows you to edit the default values.

Base font

Click the pencil icon to make edits.

Edit body font

Body Font is the paragraph text of your website.

Click Headings Font to edit.

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

Heading Font

Click the pencil icon to edit.

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

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


Astra Header Builder

Click Header Builder from the customizer menu.

Header Builder

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

Header builder elements

You can edit using the customizer or using the preview window.

Preview screen

This 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 the 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 have just a logo on your header.

Click Site Icon to add a favicon to your website.

The Site Icon appears on browser tabs.

Site icon
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

Primary Menu

Primary Menu allows you to customize the look of the 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.

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

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 Breadcrumb, 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 Breadcrumbs.

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

Astra 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 information displayed.

Post structure

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

Featured image

Post Content allows you to show a few sentences of your post or all of the post.

Post content

Typography is the text size of the category title and blog post title.

Typography

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

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

Customize Single Blog Posts On Astra Video Tutorial

Choose Sidebar from the customizer menu.

Sidebar

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.

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 in the Blog option, 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 customizes 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

Astra 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

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.

Click to add

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

Remove list

Menu Location

The Astra theme has five areas to 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 Astra, there are 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

Customize Menus On The Astra Theme Video Tutorial

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

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 of this widget.

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

Astra 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_

When 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

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

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.

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.

Click Activate & Publish.

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


Posted

in

,

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *