How to Build a WordPress Website with Astra and Gutenberg
Hi I’m Michelle Phillips of Codefetti and today I’m going to show you how to
use the Astra WordPress theme and the Gutenberg block editor to build a
website. The starter templates plug-in offers you a library of starters sites
to help you get your site up and running quickly. All you need to do is replace
the demo content and images with your own. It’s really easy. Let’s get started!
Go to the WordPress dashboard. Click on Appearance >Themes> Add New and then in
the search themes type in Astra. Click on Astra, click install. Once installed
activate the theme. Next we want to install the Astra StarterTemplates
plug-in. From the dashboard go to Plugins>Add New and in the search plugins box
type Starter Templates. Click Install Now and activate. Now we have the library of
starter sites and we can go look through that library and discover which website
we’d like to use as our starter site. First you’ll want to decide on the page
builder you’ll be using. As I said earlier, I highly recommend and we’ll be
working with a WordPress block editor Gutenberg in this demo but you can also
choose from Beaver Builder, Elementor or Brizy if you’re more comfortable
working with them. From the dashboard go to Plugins>Installed Plugins. Select
Starter Templates>See Library. And then choose the builder you’re using. We’re
using Gutenberg and it’ll bring up a library of starter sites from which to
choose. Once you’ve decided click on the starter site you want.
At this point you have three options: You can preview the photographer site.
That’ll take you to the Astra demo site. You can check it out and make sure it’s
what you want. Or you can import the complete site or just import the home
template. So since we want to build a complete site I’ll click the import
complete site button. And you’ll be presented with a list of options. I
recommend that you keep the default options checked so that your site looks
exactly like the starter site that you’ve chosen. Click the import button
and then wait. It might take a few minutes so just be patient. Don’t close
your browser window… it’s almost done.
Okay! The import was successful. Now I’ll click
the view site button and there you go! You’ve got a complete web site ready to
be customized. I hope this tutorial has been helpful to you. If you have any
questions put them in the comments below and I’ll answer as soon as possible.
Thanks for stopping by and I’ll see you the next time!
How to Create an Astra Child Theme
Hi I’m Michelle Phillips of Codefetti And today I’ll am going to show you how to create an Astra Child Theme.
To do so you can go to the Astra website and generate a customized child theme at the link on the screen.
Once done you’re gonna want to download your child theme zip file
Now we’re ready to install and activate the child theme
Log into your WordPress dashboard and go to Appearance >Themes.
You’ll see here that we have Astra activated
Click the Add New button
Click Upload Theme
Browse to your child theme
And then upload that zip file and click install now
Once the theme has been installed successfully click the activate button
And you can see now that the child theme is the active theme
I hope this demo has been helpful to you!
Thanks for stopping by and I’ll see you next time!
How to Add an Astra Address Widget
Hi! I’m Michelle Phillips of Codefetti. Today I’m going to show you how to use
Astra widgets to add an address widget into your WordPress site.
Now this tutorial assumes that you’ve already set up a site using the free Astra theme or
the Astra Pro plugin. Here’s an example of the widget. You can choose whether or
not you want to display the icons which I’ve chosen to display here.
You can display the address widget in the header, sidebar, footer bar or footer widget.
So let’s get started and see how this is done!
The 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 the widget. Once done you’ll have three new widgets.
If you go to appearance widgets you’ll see Astra Address, Astra List Icons and Astra
Social Profiles. So let’s add the address widget into our main sidebar.
Click the drop down for Astra Address. Make sure main sidebar is selected and then click Add Widget.
You’ll note that widget is now added as the third widget in the main sidebar.
Now configure this widget with your information. You can either stack
the information or put it inline. We’ll leave it with stack for this demo.
I want to display the icons and I’ll just fill in my address information. Now you can
specify the icon color if you’ve checked the box to display icons. In which case I
want to use my brand colors and then I’ll click the Save. Now when I go to my
contact page you can see we now have the address widget as the third widget
in our main sidebar. So it’s pretty easy to do!
I hope you found this demo helpful! Thanks for stopping by and I’ll see you next time!
How to Add Google Analytics to Astra Theme
Hi I’m Michelle Phillips of Codefetti.
Today I am going to show you how to add Google Analytics
tracking code to the Astra WordPress theme.
There are two ways that you can add the code depending on whether or not you are
using the free Astra theme.
If you are using the free Astra theme, you will need to download the Astra Hooks Plugin.
If you are using the paid plugin
it is recommended to use the custom layouts module.
You’ll need get your tracking code from your Google Analytics account.
Log into Google Analytics
Go to Admin>Property
Under Property Column, click Tracking code
And then Ctrl + C to copy the code or Cmd + C to copy the code on a Mac
And now you’re ready to go back and paste this code into your WordPress site.
From the dashboard Go to Plugins>Add New Type Astra Hooks
in the Search plugins box
Click Install Click activate
Now we are ready to add the tracking code into the customizer.
To do so go to Appearance > Customize Scroll down to Hooks
Click Header and in wp_head paste your tracking code
And now the tracking code has been added to your site.
Next I’ll show you how to use a custom layout to add your tracking code.
Remember, for this method, you need to have the Astra Pro Plugin
installed and activated.
You’ll also need to have custom layouts module activated. I’ll show you how.
From the dashboard Go to Appearance>Astra Options
And then you’ll see the available modules for Astra Pro.
Scroll down and just make sure custom layouts are activated.
From there go to Appearance>Astra Options
Click Custom Layouts and Add New
Click Enable Code Editor
And from here you can paste in your tracking code
Scroll down to Custom Layout Options
and from Layout choose Hooks
In the action drop down choose wp_head
Scroll down to Display On and choose Entire Website
The tracking code has now been added to your site.
I hope that this demo has been helpful to you.
Thanks for stopping by and I’ll see you next time!
Have a great day!