How to Use Astra Widgets

rple and blue gears: How to Use Astra Widgets

This post will show you how to use Astra Widgets to quickly add widgets into your WordPress site.

If you’ve already set up a site using the free Astra theme or Astra Pro plugin, this post is for you!

Astra Widgets is a handy little free plugin that lets you display address, list icons or social profiles within the Astra Theme.

You decide where you want to place the widget on your site.

You can add the widget into your header, sidebar, footer bar or footer widget.

And then add your information to the specific fields within that widget.

For example, you can see how the Astra: Address Widget looks over in the right sidebar of this post where it says “Address.”

You can choose whether or not you want to display the icons, which I’ve chosen to display here:

Astra: Address Widget

So let’s see how this is done!

How to Set Up and Use Astra Widgets

In order to use Astra Widgets, you need to download, install, and activate the free Astra Widgets plugin.

Once done, go to Appearance > Widgets.

You’ll see three new widgets from which to choose:

Available Astra Widgets

Next decide where you want the widget to appear, configure the settings and save it.

We’ll look at each of the available widgets:

  • Astra: Address
  • Astra: List Icons
  • Astra: Social Profiles

First we’ll see how to use the Astra: Address Widget to display your address in the sidebar.

Then we’ll look at Astra: List Icons and Astra: Social Profiles widgets.

Display Address

To display your address in a sidebar, follow the steps below.

  1. Go to Appearance > Widgets.
  2. Click Astra: Address
  3. Select Main Sidebar
  4. Click Add Widget
  5. Configure your address widget with your information
  6. Click the Display Icons checkbox if you want icons to show like the “Contact Us” example above

Here’s a step-by-step demo below:

Astra: Address Widget

And now your sidebar will have the address widget!

Display Social Icons

Or maybe you want to display your social icons in your header menu like this:

Astra Widgets: Social Profiles

In just a few steps you can set up and use Astra Widgets to display your social icons in your header:

  1. First add the Astra: Social Profiles Widget to your Header
  2. Add your social profile links
  3. Add the Widget as the last item in your Primary Menu

Let’s first look at how to add Astra: Social Profiles to the Header.

Add Astra: Social Profiles to Header

  1. Go to Appearance > Widgets
  2. Click Astra: Social Profiles
  3. Select Header
  4. Click Add Widget
  5. Configure your Social Icons Widget

Once the widget is added to the header, click Add Item then Add Profile.

Add Astra: Social Profiles

Then add your information into the settings:

Add Social Platform Settings

Then repeat for remaining platforms by clicking the Add Profile link.

When done, click Save.

The final step is to add that widget as the last item in your primary menu. Here’s how:

Add Astra: Social Profiles Widget to the Primary Menu

Follow these steps to put that widget in the menu header.

Go to Appearance > Customize > Header > Primary Menu.

Under the “Last Item in Menu” selection, click the dropdown and choose Widget.

Astra Widget: Last Item in Menu

And that’s it! Your Social Icons widget will now display in your header menu.

Display List Icons

The last widget we’ll look at is Astra: List Icons.

Configuring this widget is similar to the social icons.

For this demo, we’ll add the List Icons to our Footer Widget.

But first you’ll need to choose a Footer Layout because the theme default is no footer widgets.

To do this with the free Astra theme, go to Appearance > Customize and choose the 4-widget layout:

Choose 4-Widget Layout

If you’re using Astra Pro, you have up to 8 configuration options.

So go to Appearance > Customize and select from one of the following formats:

Choose Footer Widget Layout

Next, in order to use Astra Widgets to display a list in a footer widget such as Footer Widget Area 1, follow these instructions:

  1. Go to Appearance > Widgets
  2. Click Astra: List Icons
  3. Select Footer Widget Area 1
  4. Click Add Widget
  5. Configure your List Icons Widget

You can follow the step-by-step demo below for configuring the List Icons.

How to Use Astra: List Icons

And now you’ve know how to add Astra: List Icons Widget to a Footer Widget Area.

Here’s an example of Astra: List Icons in Footer Widget 2:

Astra: List Icons in Footer Widget 2

So you see how you can add some nice features to your website when you use Astra Widgets.

Astra Widget Video Demos

Below you’ll find two short video tutorials that explain how to use Astra Widgets to add an address widget or a list icons widget to your site.

How to Add an Astra Address Widget
How to Add an Astra List Icons Widget

I hope this post has been helpful and you understand how to use Astra Widgets with your Astra theme!

Related Posts

About The Author

Oldest Most Voted
Inline Feedbacks
View all comments
Pris Frank
1 year ago

Thanks for your helpful articles, Michelle.
I’d like to ask you about the Astra Widgets: Is there a way to choose the icon envelope (it’s on the list) to add e-mail on the header, next to the other icons (facebook, instagram…)? I think it is, but I don’t know how to write up the link address in a way that’s going to open the clicker’s email client with my email address. I’ve seen this in other blogs, but I’m not sure how to do it. I’d appreciate your insight.

1 year ago

Hi Michelle,

Thanks for your Astra Pro theme setup videos and articles.

Your guide helped me to set up the Astra theme, widgets, icon with ease. Those Gif images helped me better understand to play around the Astra settings.

And special thanks for the personalizes assistance when I got stuck.

Looking forward to more.

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.