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