Install the Astra WordPress Theme
So in your WordPress dashboard, you want to go to Appearance here on the left side menu and then click on Themes. Then let's click on Add New.
And now the theme we're going to install is called Astra. In fact, you can already see it here, but if you don't see it, you can simply type in Astra here in the search bar and then it should come up. Then we're going to click on Install here. Once it's installed, you want to click on Activate.
Install the Starter Templates Plugin
And now we also want to install a plugin that will give us some pre-made designs to make creating our website a lot easier. So we're going to click on Plugins here on the left side and click on Add New. And then in the search bar, you want to type in Starter Templates and then install this plugin here. Click Install Now, then Activate.
And now it has automatically opened up this plugin, but if it doesn't open up for you, you can basically go back to the dashboard, go to Plugins, click on Plugins here, then scroll down to where it says Starter Templates and then you want to click on See Library, and then it will take you back to this page.
Choose a Website Template
Once we're here, we're going to click on Build Your Website Now. Then for the page builder, we're going to use Elementor, so we're going to click here. And then here, finally, you can choose your website template. This template is going to determine what the overall design and the overall structure of your website is going to be. Obviously, you can customize everything later on, but this is going to give you a good starting point. So I recommend to choose a template that is already kind of designed to what kind of website you want to build. So if you want to build let's say an electrician website, you can basically type an electrician here at the top. Then you can see different types of websites that or templates that would be very good for that type of website. So just type in something here at the top or just browse these categories here to find the best template for you. You can also click on them here and then see how they look like when they're actually live. So you can also interact with the website, you click on buttons, you can go to different pages to see if this would be a good fit for you.
Once you have decided which template you're going to go for, you're going to click Skip and Continue here. And then here you can already make some changes to the design of your overall website. So these are the default colors. You should be able to click on these colors here and then they should change here. I don't know why it doesn't work here on my browser, but you should be able to just try out different colors and see what looks best for you. The same thing with the font right here at the bottom. Once you have found your overall design, you want to click on Continue. And then here we just want to click on Submit and Build My Website.
Great. Now our website has been built, so we can now click on View Your Website. So this is our website currently looks like, exactly the same like the template we have just chosen. We can also go to different pages on the website and see how they look as well. So now that was the third step of building your website which is choosing a theme and a custom template. The next step is going to be customizing your website.
Edit Page Content with Elementor
So now I'm going to show you exactly how to customize everything on your website to make it your own. So let's start by editing our home page. All we have to do is just navigate to the home page by clicking on Home in the top menu and then to edit this site, we're going to have to go into the Elementor page builder. So we're going to go to Edit with Elementor here at the top.
Now we can edit everything here on the website by just clicking on the elements. So let's say we want to edit this text, we just click on it and highlight the text that we want to change and then we can just change it to anything that we want. The same thing with the buttons. So here with the button, we just click on the button and then the menu right here opens up and we can just change the text right here. So we can just say 'Learn More' and then as you can see the button changes live on our website. To make the changes actually visible on the actual website, we also have to go to this button right here at the bottom left and click on Update. Once we click on Update, these changes will actually go live and the visitors that are visiting our website will also be able to see the changes.
Now if you want to change any of the images here on your website, all you have to do is just click on the image. So let's click on this one for example, and then here on the left side click on Choose Image, and then you can simply drag and drop the image file in this window. And then once it's uploaded, we can simply click on Insert Media at the bottom right. And now we have changed the image right here. Now again, let's click on Update to make the changes live and then let's see how our website currently looks like. To do that, we're simply going to click on this Preview Changes icon, the eye icon at the bottom left. This will open up a new tab which will show us how our website currently looks. As you can see the text has now changed, the button is changed, and also here the image that we have just replaced. So that's how you change the overall content of your website: simply click on the element and then make the changes.
Now let's also look at how to change the header and also the footer of your website. So to do that, we're going to go to Customize here on the top left. And then here on the header, you can see these little pen icons. So for anything that we want to change, we simply click on the pen icon, and then we can make the changes here. So if you want to change your logo for example, just click on Change Logo and then upload your logo. And it's exactly the same thing for the footer. So when we scroll all the way down, we get to the footer of the website. And the same thing here, we can just click on the pen icon and then we can change everything here. And now to save the changes, we simply click on Publish at the top left and then close this by clicking on the X. And this will take us back to the website preview.
Create a New Page with Elementor
Now next, let's also look at how to add a new page to your website. All we have to do here is go to New at the top and then we're going to click on Page. Then here we can give our page a name, so let's say this is our Team page, and then you want to click on Edit with Elementor.
And now to add content to our new page, we can either start with a template again and simply click on this folder, and then we can see different templates that we can use to build our page. Or we can also simply drag and drop different elements onto our page. So we can first add a heading, we simply drag it here from the left side into this field, and then we can just change the text here. And then we can add more elements. So we can maybe add a video right here or add pictures, add paragraphs, basically whatever you want to have on this page. So let's click on Publish on the bottom left and then click on Preview to see how the page that you have just created looks like. So as you can see here, we just added a heading and then added a video.
So now how do we add this new page to this navigation menu here at the top? So to add a new page to a menu, we want to simply go to Customize again here at the top, and then we're going to click on Menus, then go to Primary Menu, which is the one at the top. And then here we can simply click on Add Items and then here we can see all of our pages. This page here is the one that we have just created before, the 'Our Team' page. Now all you have to do is click on this plus icon and as you can see, now Our Team page is in the top menu. Now when we click on Publish, this change is now live and we can see the Our Team page is now in the top navigation menu.
