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
- We have a video demo of the process of installing WordPress on your domain here
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 two 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 Stackable – Page Builder Gutenberg Blocks plugin and the myStickyMenu plugin
You should then have two 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 Customise.
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 by clicking the Publish button and then use the < arrow to return to the general Customise 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 Customise options.
Add your logo into the header
From the Customize menu select Header Builder and then Site Title and Logo.
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 at the bottom of the Logo section. You can use the Display Site Title toggle to turn your site title on or off and to stop it from showing in your header if you want to, and you can also change the wording of the site title if you wish.
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 Hero. 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 Elevate Hero One (scroll down to see it) – 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 Block settings click on the drop down arrow next to the Background menu item and scroll down to where you can see the Background image or video. Click on the image. This will open up your media library from where you can either select an image you already have or upload a new one that you want to use. You can also use a video for your background if you wish to.
- Use the Background Media Tint Strength slider to reduce the strength of the tint that’s in place over the background image if you need to.
- To get the parallax effect whereby the image stays still as the user scrolls down the page, switch the toggle Fixed Background on.
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. Once you’ve clicked your cursor on the next you want to edit, you will also see some styling options for that heading both above the block and also on the right hand side of your page.
Using the options above the heading you can change the text alignment (left, centre or right) as well as add some basic styling such as bold or italics. You can change the wording just by writing over it or in the Content section on the right hand side. Scroll down the options on the right hand side and you’ll find Text colour where you can change the colour of your heading to better fit with your image. In this example we have centred the text and put it into white.
Underneath the main heading you’ll see that you have a paragraph of text. You can change what’s in here and style it however you like using the same method as for the heading above, or you can remove it altogether if you don’t need it. To do that, click anywhere on the text. The styling options will appear above the text. Click on the three vertical dots on the right hand side and then select Remove text from the options that appear.
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. If you want the button to direct people to another page then put the URL of the page in the Link box.
You can also use the settings on the righthand side here to change the button colour and the colour of the text should you wish to.
If you would like the centre the button on your page then click to the right of the button so that you are in the Button group block rather than the Button block itself. You can then either use the options above the button group or on the right hand side to change the button alignment, as per the image 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 Astra Settings icon on the top right hand corner (see the image below) to view the settings that apply to the whole of the page, rather than just to the block you’re currently in then scroll down and in Page elements toggle Disable title so that it is turned on.
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. Click on Feature and scroll down until you see Feature Grid Block / Heights feature 2. Click on this to drop it onto your page.
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 and you can also click directly on some of the elements of the block to edit them. If you’re still seeing the Astra page settings on the right hand side of the page then you should click on the star in the top right hand corner to switch from the Astra settings to the block settings.
- 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 also remove elements if you aren’t going to use them.
- I have removed all the buttons in my example below because this is a one page website so there are no other pages for us to link to. To do this I clicked next to each button and selected Remove button group from the options. It is important to click next to the button rather than actually on the button itself if you want to do this.
- To add the shadow behind each of the sections click at the top of each column. This shows you the settings for the columns. In the Style settings go to Container borders and shadow and slide the Shadow / outline slider to 5.
- Once you’re happy with your changes make sure that you click Update.
Add your Meet the Team block
Before adding the next block we are going to add in a Spacer block to put in some space between our blocks. To do this click on the + button at the bottom of the page and enter Spacer into the search box. Select the first option. By default it will insert 100 pixels of space but you can change this to more or less depending on your preferences. Here I have added 50px of space.
WordPress allows you to embed one block into another (which is essentially what the Stackable block above is). For the meet the team block that’s what we’re going to do. We will first drop a container into our page, then put a heading into that container and then add some columns with a team member in each column.
To begin, click the + to add a new block and search for the Columns / Containers block and select a single column of 100 width.
This adds an empty container into your page. You will add your next blocks within this container rather than underneath it. Have a look at the screen shot below. You can see the 50px spacer that we added. Below that the blue box shows the outline of the container that we have just added. The plus sign inside that blue box will add another block within the container. The plus sign outside the bottom of the block on the right hand side will add another block outside the container.
Before we move on to adding content into the container we will give it a background and set that background to cover the full width of the screen. Look at the block options on the right hand side of the screen and switch the Background toggle to ‘on’. You can then set a colour for your background or indeed choose an image or video if you wish. We are going to use the default grey but you can change this to whatever you like.
To make this background full with use the block options above the block and select full width from the alignment options.
The next step is to add a Heading for your Meet the Team section. To do this click on the + within your container to add a new block and search for a Heading block. Choose the first option. Write your heading and then use the options above the heading block to align it centrally.
Next we are going to add some columns into our container. Each one of these columns will have a team member within it so you should add the same number of columns as you have team members.
To do this we are going to add another block directly under our heading. Click on the ‘Meet the team’ heading. From the options that appear above, click on the three dots to the right and select Insert after. This will then give you the option to add another block in your container. Click on the + to add a block within your container and select another Columns / containers block. Set this one to have three columns (or however many columns you need).
This then gives you three columns with a + to enable you to add another block into each column. Click on the + in the first column and search for and add a Team member block and click on default.
Repeat this process for each of your columns, so that every column contains a team member block.
Each team member block consists of a series of other blocks – an image block, some headings, some paragraphs and some buttons. Each of these can be styled and edited in the same way as the blocks we have already used. If you don’t want to use a particular block (the position, for example) you can simply delete it. Each of these blocks has styling options above it and on the right hand side of the page. Click on the blocks and explore the options as you add your team members’ details.
Adding a Testimonials section
Add another 50px spacer below your Meet the Team block (be careful to add this underneath the block rather than inside it). Click the + to add a block below the spacer. Open up the Stackable design library, scroll down to view the Testimonial blocks and select Elevate Testimonial 1.
Using the same process as before copy over the dummy text with your testimonials and add in the names and positions. If you don’t want to use either the name or position field you can delete it.
Add the Contact Us block
Add another spacer block underneath the testimonials block putting in 50px of space.
Open the Stackable Design Library and view the Feature blocks. We are using Elevate 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
- Add another 50px spacer block below the Feature block
- 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 Builder and then select Copyright. 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 to each point that you want people to be able to drop to. You’re going to create four anchor blocks, one for each of the sections that you want people to be able to jump down to.
Start by scrolling back up to More about what we do and click on the heading. In the options on the right hand side and select the Advanced tab and then scroll down to the Advanced dropdown. In the HTML anchor box type about and update to save your change.
Repeat this process to add three more anchors to each of the three remaining sections. Give them the following names:
- team
- testimonials
- contact
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.
Call your menu Primary menu and then tick the box next to Display location to tell WordPress that this is going to be your main menu. Click Create menu to save your 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
Make the menu sticky
The final thing we need to do is use the settings in the myStickyMenu plugin to make the menu stick to the top of the page as someone scrolls. When you installed this plugin it added a new item to your admin menu on the left hand side of your screen. Click on myStickymenu and then on Sticky menu settings.
In the settings, toggle the sticky menu to on and then scoll down and save this change. That’s all you need to do. You may need to refresh the page before the menu sticks.
Next steps
We hope very much that you’ve found this tutorial useful. We have other resources on our website that you may also find helpful.
- 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.