Course Example – Website in 25 minutes!
Welcome to our WordPress beginner tutorial! In the above tutorial video we take you from a blank WordPress install to a complete website in 25 minutes.
The main problem for beginners is that the WordPress page builder is not very user friendly. The solution for this is to use the Elementor page builder.
The Elementor page builder allows us to visually edit a web page. This means you can design without much technical skill. Elementor has a feature rich free version, so you can get up to speed without needing to spend any money. You’ll get all the features you need in the free version. So, there is no need to upgrade as a beginner.
Astra Starter Sites
The quickest way to start is to start with something already built! So, we start with an Astra starter site. Astra is a beautiful, fast, lightweight theme. Also, it’s free! The free version is very feature rich and will give a beginner all they need to make a great site.
When you install an Astra starter site, you will usually get about 4-6 pre made pages. Installing an Astra starter site includes all the plugins you need. Astra comes with the Elementor page builder too. In short, the whole site install is process is a single step – Install Astra and choose your starter site!
At the time of writing this – Astra had 39 free starter sites that designed to work with Elementor. For our demonstration, we use the ‘Outdoor Adventure’ starter theme. This includes a few pages and a nice blog page with an attractive grid layout.
Customizing Your Starter Site
The first step in customizing the site is to start changing the images and text.
Changing the text is actually very easy. After we click “Edit with Elementor” at the top of your WordPress header, the page builder will load up. The Elementor interface allows you to edit text with a simple ‘point and click’ approach. You can click any of the pre-written text and change it inline. You get to see what the site will look like as you are working on it.
Changing images is still very easy but there are several steps. It depends on what type of image you are trying to change.
Firstly, you have the basic ‘image’ widget. In this case, you can click on the image and the image thumbnail will appear on the left sidebar (the widget editor).
From here you can delete the image and replace it. You can either upload a new image from your computer or choose an image from your media library.
This is a good opportunity to upload all your images. We recommend having about 10 nice images ready for your site to speed up your workflow.
If you don’t have enough good images yet, this is not a problem. There are plenty of free stock photos you can find online. Make sure you are using images that are free for commercial use.
In our example, we go to pexels.com and search for ‘surfing’. You”ll find 10 nice photos for your site within minutes.
The other two ways that images are usually used are for section backgrounds. If you click the ‘edit section’ tab on the top of a section, you can find the ‘style’ option tab on the left sidebar. This will let you access the background image.
Replace the background image by clicking the thumbnail and deleting. Then replace it with your own.
Do you want text on top of your background image? Use the ‘background overlay’ feature to change the opacity of the image.
For example, for white text you want a dark image. So, set the background to black, then set your image as a ‘background overlay’. You can make your background overlay have more opacity. So, it appears darker and your white text becomes more readable.
Of course, you can do the opposite with dark text on a white background color too!
WordPress Headers & Footers
After customizing the images and text, you can change your header and footer. Go to the Astra theme customization menu. Here is where you can edit the text that appears on the header menu and the footer area. You can also set the name of the site and the tagline too.
The trickiest part of our process is changing the blog. The free version of Elementor doesn’t have a blog editor but the default WordPress one isn’t too bad. Go to the blog page of your site and click edit page. This will load up the blog page in Gutenberg editor. The blog page already has a nice design. So, click the header image and change it to something to match your content. In this case, a surfing picture. We can re-title the blog here too.
Finally, we can customize our blog posts. The starter site comes with a few blog posts that you can delete or edit as you see fit. From your WordPress dashboard, click ‘posts’ and edit as you need. The most important parts to change are ‘excerpt’ and ‘featured image’. These affect how the post will appear on your blog site. We can also go to the theme customize menu to change the post format. So, we can remove the category and author breadcrumbs from the top of the post to make it look cleaner.
You can now make new posts whenever you want to add content to your site.
That wraps it up! Finally, you now have a new website!
If you’re in Brisbane, make sure you check out one of our IdeaSpot courses where you can work through this process with our guidance for every step!
You can also commission us and let us handle the design for you – but it’s still worth learning to manage it yourself.
