This video shows you how you can quickly get a simple but stylish one page website up and running in less than an hour, using a combination of the Astra theme and the Stackable Gutenberg blocks plugin. The video below takes you through the whole process, step by step, from a blank WordPress installation to a finished website, and there are also written instructions below the video.
Install WordPress on your domain
This tutorial assumes that you already have a domain and hosting and have installed WordPress on your domain.
- We’ve got information about how to buy a domain and arrange hosting in this blog post here
- Our more detailed course, Build a Website in One Day Using WordPress, has two free sample lessons covering how to install WordPress and how to find your way around the WordPress admin area, which might be helpful if you’re completely new to WordPress
Installing the Astra theme and the necessary plugins
Once you have WordPress installed then the next step is to install Astra, which is the theme we’re using in this demo. You can either download the theme directly from the developers’ website here or install it directly via your WordPress backend.
To do that:-
- Go to the Appearance menu on the left hand side of your admin area and select Themes
- Click the Add new button in the top right hand corner next to the Themes heading
- Search for Astra in the search themes box
- Click Install and then Activate
- You have now switched from WordPress’s default theme to the Astra theme
We use three plugins for this project that you should install at the start. To do that:-
- Go to the Plugins menu on the left hand side of the admin area and select Add new
- The process of searching for and installing plugins is the same as the process you just used to install your theme.
- Search for, install and activate the following plugins
- Stackable – Page Builder Gutenberg Blocks
- MyStickyMenu – Sticky Menu on Scroll, Sticky Header, Floating Notification Bar for Any Theme
- Anchor Block
You should then have five plugins installed as per the image below.
Creating your page
You should now go to the Pages menu on the left hand side of your admin area and click All pages. You’ll see that WordPress has already set up some default pages for you which you can delete as you won’t be using them for this project.
Tick the box next to the name of each page and then drop down the Bulk Actions menu and select Move to bin.
Next you need to create a new page. Click the Add new button at the top next to the Pages heading. A blank page will open up with the cursor flashing in the Add title box. Give your page the title ‘Home’ and click the Publish button in the top right hand corner.
Use the theme customisation options to manage the appearance of your page
Make sure that you have published your page. Now go to the Appearance menu on the left hand side of the admin area and select Customize.
Remove the sidebar
Click on the Sidebar option and then use the dropdown menu to change your default layout to No sidebar. Publish this change and then use the < arrow to return to the general Customize options.
Make the page full width
Go to the Global menu and then select Container then use the dropdown menu to change the layout to Full Width / Stretched. Publish this change and then use the < arrow to return to the general Customize options.
Add your logo into the header
From the Customize menu select Header and then Site Identity. Click on Select Logo. This will open up your Media Library. If your logo is already in here then just click on it and then click Select. Crop the image if you need to or just click Skip Cropping if it is OK as it is. Use the Logo Width slider to adjust the size of the logo.
If you need to load your logo then once you’re in the Media Library switch to the Upload Files tab then click Select Files. Find the logo on your computer and load it up. This is also a good opportunity to load up any other images that you want to use for this project.
If you don’t already own suitable images then we recommend Unsplash as a good source of high quality, royalty-free images. There’s also a plugin called Instant Images that you can use to load images from Unsplash directly into your website. We’ve got video instructions on how to use that here.
If you have a Favicon you can load that up using the same process via the Site Icon section. You can use the Site Title section to change the title of your site and to stop it from showing in your header if you want to.
Setting your home page
The final change you need to make in the Customize area is to let WordPress know that the page you’ve just set up called Home is in fact your home page. To do this go to the Homepage Settings options towards the bottom of the Customize menu.
By default your home page is set to display your latest posts. You should change this so that your homepage displays a static page. Then click the dropdown menu under Homepage and select Home.
Click Publish and then click the cross in the top left hand corner to exit the Customize options.
Add a header
The next stage is to start adding content to your page, beginning with the header, as shown in the image below.
Hover over the + button in the top left hand corner and click to add a new block.
You’ll be presented with a list of possible blocks that you could add. Scroll down this list until you get to the Stackable section and select Design Library from the options and then click Open Design Library.
Here you’ll see all the different kinds of pre-designed blocks that are available for you to add to your page. It’s well worth having a play around with the options in here to see what you like the look of. You certainly don’t have to stick with the blocks that we’re using for this demo.
The menu on the left hand side shows you the different categories of blocks that are available. Click on Header to see the header options. You can see that some are marked as premium – you’ll need a paid Stackable account to be able to use these – but the others are all free to use.
For this demo we’re going to use the first one in the list – Header One – just click on it and it will automatically install into your page.
You can then use the Block options on the right hand side of the page to customise aspects of the appearance of this block.
- In the General settings toggle on the option to make the header block full height.
- Toggle off Button two so that you only have one call to action button displaying on your header.
- Click on the arrow to the right of Block Background and then click on the cross in the top right hand corner of the default background image to remove it. You can then click to access your Media Library and select your preferred image for the background.
- Use the Background Media Tint Strength slider to reduce the strength of the tint that’s in place over the background image.
- To get the parallax effect whereby the image stays still as the user scrolls down the page, switch the toggle Fixed Background on.
- Depending on what image you’re using, you may need to change the colour of your text. You can do this using the options that are specific to each section, so the options under Title enable you to make changes to aspects of the way the title appears, including to change its colour.
To edit the words in the heading and description just click your cursor into the area that you want to edit and make whatever changes you want to make to the wording.
Click on the button text and change the wording to Contact us or something similar. When people click on the button you can set it to enable them to send an email, so rather than entering a URL as the link put in a mailto link as per the image below.
You can change the alignment of the text on the header by using the block options that appear at the top of the block and select the Align right option, as shown below.
The final change you need to make is to tell WordPress not to display the word Home at the top of the page. To do this you need to click onto the Document tab on the right hand side to view the settings that apply to the whole of the document, rather than just to the block you’re currently in then scroll down and in Disable sections click Disable title.
Make sure you have saved all your changes by clicking the Update button in the top right hand corner. Note, if you’re saving your changes for the first time this button will be called Publish. It switches to Update once your page is already published. To view your page once you’ve saved it click Preview. This will open your page in a new tab, enabling you to easily switch between the backend where you’re making changes and the frontend where you can see the effect of those changes.
Adding the ‘What we do’ section
Either hover your mouse under your first block until you see the + add block icon appear, or click the + add block icon in the top left corner. Either option will add a new block under your new Heading block. Once again you should select the Stackable Design Library. This time you’re going to add a Feature Grid. Select Feature Grid One.
This block works along the same principles as the Header block you’ve just installed. There are Block options down the right hand side of the page that enable you to customise aspects of the block’s appearance.
- Click onto the heading text at the top of the block and change it to More about what we do or whatever wording you like.
- Change the description text underneath the heading using the same method.
- You can use the General block settings on the right hand side to adjust the number of columns if you wish.
- Click on each image and change it to an image of your choice.
- You can use the toggle options on the right hand side to turn on and off different elements in the block. In my sample site you’ll see that I’ve turned off the buttons. That’s because we’re just building a one page site so there’s nowhere for these buttons to link to.
- Once you’re happy with your changes make sure that you click Publish.
Add your Meet the Team block
Repeat the same process as before: add a new block, open up the Stackable Design Library and this time you’re looking for a Team Member block. We’ll be using Team Members 2, as shown on the right hand side of the image below.
The process of amending this block is exactly the same as the process for the two blocks we’ve already added. Once you’ve added the block, make the following changes:
- Change the number of columns to reflect the number of team members you have.
- Click on the images to change them to images of your team members and then edit the text accordingly.
- You can toggle on or off the social media links, so decide which links you want to appear and then add them in for each person.
- Scroll down to the Block Background options and choose an image to use as the background.
- Once you’ve added an image you can then toggle on the Fixed Background option if you want the parallax effect.
- Make any other changes you wish and then Publish.
Adding a Testimonials section
This time open up the Stackable design library, scroll down to view the Testimonial blocks and select Testimonial 1. Using the same process as before make the following changes.
- Amend the number of columns to reflect the number of testimonials you have available
- Decide which elements of the block you want to have on / off and toggle the switches accordingly. On this block you’ll see that images are turned off by default but you can toggle them back on if you have pictures of the people who have given you testimonials.
Add the Contact Us block
Open the Stackable Design Library and view the Feature blocks. We are using Feature 1 to be our Contact Us block so install that onto your page. Using the same process as with previous blocks make the following changes:
- Click on the image on the left hand side and change it to whichever image you prefer to use.
- Click on the text elements and edit the wording to whatever you want it to be
- Click on the button and add in another mailto link so that people who click it can immediately send you an email, as shown in the image below.
- Publish your changes.
Editing the footer text
Currently your footer has some default text – a copyright notice and information about the theme the site uses. You will probably want to keep the copyright notice but may want to remove the theme information.
To do this, go to the Appearance menu on the left hand side of your page and select Customize. Once you’re in the Customize menu scroll down to click on Footer and then select Footer Bar. This is where you can edit the text that appears in your footer. You can just delete the theme information from Section 1 and leave the copyright notice unchanged, then click Publish to make sure this change is saved and then exit out of the Customize area.
Building the menu
When people click on the menu items, rather than being taken to a new page, they’re dropped down the page to the relevant section. There are two things we need to do here. Firstly we need to put anchors into the page and then we need to build a menu that links to those menus.
Putting anchors into your page
To do this, you’re going to add an Anchor block above each point that you want people to be able to drop to. You’re going to create four anchor blocks, one above each of the sections that you want people to be able to jump down to.
Start by hovering your mouse between the bottom of your Header and the top of your About us section. This can be a little bit fiddly but eventually you should see a + add block button appear at the bottom of the Header block. Click on this and search for a block called Anchor. Add the block in and give it the name about in the settings on the right hand side.
Repeat this process to add three more anchors above each of the three remaining sections. Give them the following names:
Make sure you Publish your changes as you go along.
Building your menu
The final stage is to then build the menu and link to the anchors you have just created.
- Go to the Appearance menu and select Menus.
- Click Create a new menu and call the menu Primary menu
- You’ll see that there are some errors in the menu – this is because WordPress is trying to make a menu using the sample pages that you deleted earlier. You just need to remove these from the menu by dropping down the arrow on the right of each item and clicking Remove.
- Remove everything except Home from the menu.
Next you’re going to add in the links to the anchors you created on your page.
- Drop down Custom Links on the left hand side
- In the URL box enter the name of your first anchor with a hash before it e.g. #about – this is where you’re setting the thing to be linked to
- In the Link text box enter the words that you want to appear on the menu, so something like About us
- Click Add to menu
- Repeat this process for the three remaining anchor links and add each to the menu
- Ensure you have ticked the box under Menu Settings that sets the display location to be Primary menu
- Once you have finished this, make sure you click Save menu
We hope very much that you’ve found this tutorial useful. We have other resources on our website that you may also find helpful.
- Our online self-paced training course, Build a Website in One Day with WordPress takes you through the process of building a much more detailed site than this one with a significantly enhanced range of functionality, as well as helping you better understand how both WordPress and the Astra theme work. There’s more detail about what’s covered on that course here.
- We have a series of free videos that explore in more detail different aspects of WordPress functionality as well as introducing different things you can do within the Astra theme and with different Gutenberg blocks.
- We’ve got an archive of articles, all aimed at helping small businesses to get the most out of their web presence.
- Sign up for our email newsletter and download a free copy of our 37 page eBook, Basics of SEO for Small Businesses to help take your web marketing to the next level
- We offer virtual training and WordPress support via telephone and video conference that can be completely tailored to your needs, whether it’s an hour on the phone to answer a question about how to do something on your existing website, or a full day working together to help you build a new site. Drop us an email or give us a call on 0845 0942843 if that sounds like it might be of interest.
Share this article
Talk to us about how we can help you
We help small businesses take control of their web presence through web and digital marketing training and consulting. Talk to us today about how we can help you.