Our free Astra training videos and articles are quick how-to demos for beginners.
Please note that below each video you will find a written transcript to assist you.
Astra Videos
How to Create a 404 Page with Astra
00:00
[MUSIC]
00:09
Hi! I’m Michelle Phillips of Codefetti and today we’re going to see how to
00:14
create a 404 page with Astra. You need to make sure that you’ve purchased the
00:19
Astra pro plugin and that you’ve installed and activated it. You’ll need
00:24
to have the custom layouts module activated too. Go to Appearance>Astra
00:32
options. Scroll down to the custom layouts module and click the activate
00:38
button. Here’s an example of the 404 page we’re
00:43
going to create with the Gutenberg block editor. We’re going to create a page that
00:48
has four blocks. We’ll be using two headings, one button, and a full width
00:54
image. To do so go to Appearance>Astra> Options>Custom Layouts>Add New and give
01:07
your custom layout a title. Now we’re in the WordPress editor and we can start
01:13
adding our blocks to build our page. [SILENCE WHILE PAGE IS BUILT]
01:15
[SILENCE WHILE PAGE IS BUILT]
01:48
Now let’s complete our custom layout by adjusting a few settings. Scroll down to
01:53
layout. We select 404 page and then decide whether or not you want to
02:00
disable the primary header and footer which I typically do and that’s it!
02:05
Publish your page. View your custom layout . Now this is just a sample of that
02:14
custom layout . When we actually go and land on a 404 page on the site it’s
02:19
going to be full width without the header so let’s test that. So to test
02:24
just put an invalid page in the browser and since it can’t find that page it’ll
02:30
show your 404 page instead .I hope that this video tutorials been helpful to you
02:36
If you have any questions, just leave them in the comments below.
02:39
Thanks for stopping by and I’ll see you the next time!
02:43
[MUSIC]
How to Add an Astra List Icons Widget
00:00
[MUSIC]
00:12
Hi I’m Michelle Phillips of Codefetti. Today I’m going to show you how to use
00:17
Astra widgets to add a list icon widget into your WordPress site. Now this
00:22
tutorial assumes that you’ve already set up a site using the free Astra theme or
00:28
Astra Pro. Here’s an example of the list icon widget. In this example you’ll see a
00:37
search box in footer widget one then footer widget 2 is an example of the
00:43
list icon widgets. You can display the list icon widget in the header, sidebar,
00:49
footer bar or footer widget. So let’s get started and see how this is done.
00:59
First thing you want to do is install Astra widgets. Go to Plugins > Add New and
01:08
then in the search plugins box type in Astra Widgets. Click install now and then
01:19
activate. Once done you’ll have three new widgets. Go to Appearance > Widgets and
01:30
note the three available Astra widgets: Astra:Address, Astra List Icons and
01:37
Astra Social Profiles. This tutorial will show you how to configure the list icons
01:44
widget and add it to the footer widget area 2. But first you’ll need to choose
01:51
a footer layout because the theme default is no footer widgets. So to do
01:56
this with a free Astra theme go to Appearance > Customize> Footer >Footer
02:09
Widgets and just select the four widget layout. Click publish and then you’ve
02:20
activated that footer widget area. If you’re using Astra Pro you’ll have up to 8
02:26
configuration options. Next in order to use Astra Widgets to display your list
02:32
icons in a footer widget: Go to Appearance > Widgets. Click Astra:List
02:39
Icons and select footer widget area two. Click add widget and you’ll note Astra:
02:50
List Icons has been added to footer widget area two.
02:55
Just as with any other widget you can add a title to your list icons. In this
03:01
example we’ll leave the title blank. Click add item and then click add item
03:09
again. For this example we’ll add three list items: Home, Blog and Contact Us.
03:18
Enter the list item description; for example, Home then add the link to your
03:24
home page. You can leave target and nofollow at
03:29
their defaults and click choose icon if you want an icon bullet. Click add item
03:38
to add your next item.
04:05
So you can see that we’ve added our three list items: Home, Our Blog and
04:10
Contact Us. When done adding your items you can adjust spacing if you want. The
04:19
default is to show a divider between each list icon. If you choose yes, you can
04:25
choose the divider’s style and its weight as well as its color. For our demo
04:36
I’ll select no. Next you want to choose the icon color. I’m just going to choose
04:43
white for this example and if you want you can choose the background color of
04:48
your icons as well as modify the size. Then click Save and now you’ve added the
04:54
Astra List icons widget into your footer widget area. Here’s an example of
04:59
what that will look like. So I hope you found this video helpful. Thanks for
05:06
stopping by and I’ll see you next time.
05:16
[MUSIC]
How to Add Related Posts to Astra
00:00
[MUSIC]
00:13
Hi I’m Michelle Phillips from Codefetti and today you’re going to learn how to add related posts to
00:18
Astra. It’s easy to do with the Ultimate Add-ons for Gutenberg plugin and the post grid block so
00:25
let’s get started and see how it’s done. Make sure you’ve installed Ultimate Addons for Gutenberg.
00:34
Once that plug-in is installed you can add a new page or post.
00:38
And from here we’ll create a related posts block. To do so I’m going to click the plus sign
00:46
and then I’m going to search for the UAG Ultimate Add-ons for Gutenberg post grid block.
00:55
And you’ll note how it defaults to six posts – three posts per row and two rows. You can
01:02
specify how many posts you want by just toggling this post per page. I typically leave it at six.
01:10
Now the next thing is I want to filter out only my Astra posts for this particular related post block.
01:17
So I’m going to click on the categories drop down. I’m going to choose Astra and you’ll see now that
01:24
it’s filtering out just those posts that have the category of Astra. I typically order by date
01:29
descending so that my newest post shows first. You can choose this option to inherit styling from the
01:37
theme or you can customize this block to look exactly how you want. So for this demo let’s go
01:44
ahead and customize this. You have an option as to whether or not you want to show a featured image,
01:51
what size you want that image to be, and where you want the position. And so I’m going to keep
01:57
mine on top. Next I really don’t want the metadata to show. I’ll keep the title but I’m going to hide
02:08
everything else except for the excerpt. In the excerpt I’m going to limit to 25 words.
02:20
The read more link you can turn it off if you don’t want it. You can change the button text
02:29
as well as its typography, what font size you want and so forth .
02:34
For colors I’m going to keep the default blog background color here of this light gray.
02:41
But I want the title color to be my brand color so I’ll click that.
02:47
And the only other thing I might want to do is change the color of the learn more button.
02:58
I’ll choose for that a blue background with white text.
03:03
And there you go! I’ve actually created a little block here that has my related posts.
03:09
I want to add this to reusable blocks and I’m going to publish it.
03:15
And now it’ll be available to me in any post that I want! The last thing I want to show you
03:21
is how you can use that reusable block. All you need to do is click on the plus button.
03:29
And I want to look through my reusable blocks so I will say browse all, click the reusable tab,
03:38
and here’s my related post block
03:43
So you can keep it as is. Or if you want to make any changes that will be unique to this specific
03:51
post, you can convert the block to a regular block and then make any changes that you want
03:59
and it’ll only appear on this particular post.
04:04
Perhaps for this one I don’t want the excerpt. So all I need to do is turn off that excerpt button
04:12
and then click publish. And that block has been converted for this specific page or post.
04:27
i hope this demo has been helpful to you. Thanks for stopping by and I’ll see you next time!
04:46
[MUSIC]
3:46:02
Now playing
Introduction to
How to Import/Export Astra Reusable Blocks
00:00
[MUSIC]
00:14
Hi I’m Michelle Phillips from Codefetti and today we’ll look at how to import and export
00:20
reusable blocks. Now this is a Gutenberg feature not necessarily unique to Astra. So
00:26
you can use this tutorial on any site where you’re using the Gutenberg editor. So let’s get started!
00:35
Click on the three vertical dots in the upper right hand corner.
00:40
And go down to the tool manage all reusable blocks.
00:46
Next find the block that you want to export. I’ll choose my related post block
00:55
then I’ll just click the export as JSON. Save the file locally so you’ll be able to find it
01:03
when you need it. Next log into the website where you want to import this block.
01:09
Once there click the three vertical dots. Go down to the manage all reusable blocks tool.
01:21
Click the import from JSON. Browse to the file that you exported,
01:28
open it and click the import button.
01:35
Refresh the screen and you should see your imported block. And that’s all there is to it!
01:43
And now that block is available to be used in any post or page on this website.
01:48
I hope this tutorial has been helpful to you. Thanks for stopping by and I’ll see you next time.
01:53
[MUSIC]
How to Add a Full Width Section to Astra
0:00
[MUSIC]
00:13
Hi I’m Michelle Phillips from Codefetti and today I’m going to show you how to create a full width
00:18
section in Astra. This video assumes you’re using the Astra WordPress theme with Gutenberg
00:23
and, if so, let’s get started. Log in to your WordPress dashboard and add a new page. Next
00:31
we want to make sure the page setting for the content layout is set to full width stretched.
00:36
To do so click the Astra icon in the editor and then choose full width stretch from your content layout.
00:47
Make sure that no sidebar is chosen if you don’t wish your sidebar to appear on this page.
00:54
Next we want to add a section block so we’re going to switch over to the block editor by
01:00
clicking the settings gear right next to the publish button. And we’re going to add
01:07
a section block. Now we just need to make a few changes to the settings here for this block
01:14
and we’ll be done. Make sure your content width is full width for that section block and make sure
01:22
the inner width is 100. So type in 100 in the box and make sure you click this little percent icon.
01:31
Now let’s test this. I’m going to add a background type of
01:36
color to my section block. We’ll fill it with blue and then we’ll preview this in a new tab.
01:46
And there you go! We’ve got a full width section on our page. I hope this video has been helpful to you.
01:53
Thanks for stopping by and I’ll see you next time! [MUSIC]
Astra Articles
If you prefer written instructions, please be sure to see our Astra article library.