This is part 2 of how to build a website with WordPress for beginners. If you’ve just arrived, part one explains the basics of web hosting and getting set up with SiteGround.
Now, it’s time for some web design with WordPress.
To make this as straightforward as possible I’ve provided a professional one-page website template (download below) and a series of videos taking you through every step. These include how to install a WordPress theme and how to install WordPress plugins, all of which are free.
I’m also going to show you where to get stunning imagery (also free) for your backgrounds and explain how to adapt the template’s layout so it works better for your content and needs.
This is what I did with the template (click icon in bottom right hand corner for full screen viewing & the cog for full HD if not already):
Most of the time the videos focus on what to do rather than in-depth explanations. This allows you to make progress as quickly as possible, but pause to ‘Google’ things should you want to deepen your knowledge.
That said, for those designing a small business website I explain the basics of a brand, introducing colour, font-pairings and how to make a logo for free. I want to ensure you get as much of my professional experience running through your work as possible.
So, this is less about how to build a website from scratch and more of a hand-holding guide on making a WordPress website with my template. This way the time-cost is as low as possible whilst maximising the cost-benefit of doing it yourself.
It’s about as close as you’re going to get to learn how to build a website for free. All you need is some WordPress hosting, a good cup of coffee, and (preferably) Chrome web browser.
Oh, and my gift to you! Get the template here then dive in:
Table Of Contents
- Get the best WordPress hosting for beginners
- How to set up a WordPress website
- 2.1 Add A Page & Install A Theme
- 2.2 How To Install A Plugin In WordPress
- 2.3 Settings & Holding Page
- Design your WordPress website
- 3.1 Imagery
- 3.2 Import Template & Add Images To Your Web Page
- 3.3 Introduction to Fonts & Colour
- 3.4 Adding Fonts And Colours Using Elementor
- 3.5 Create A Basic Logo For Free
- 3.6 Add Copy & Tweak Layout
- 3.7 Mobile Optimisation
- 4.1 Export Template, Image Reduction & Privacy Page
- 4.2 Configure Plugins then Index With Google
- WordPress Updates & Maintenance
- Future Proof Fantastic
Disclosure: This site is a free resource that is supported entirely by its visitors. If you purchase a product or service here a referral fee may be received. This comes at no extra cost to you and helps create lots more useful content. Thank you.
[NOTE – if you already have hosting in place, skip to the next step]
1. Get the best WordPress hosting for beginners
First, pick the plan for your needs.
The ‘StartUp’ plan is perfect if you’re doing this for the first time and expect lower traffic volumes (i.e. you’re not intending on active digital marketing, at least to begin with).
If you are going to actively grow the number of visitors per month, I would definitely go for ‘GrowBig’.
Once you’ve decided, go to the sign-up page at SiteGround in a new tab. Then, hit the appropriate ‘Get Plan‘ button…
Second, choose a new domain or enter an existing one.
Note – I advise beginners to get their domain with SiteGround as well because your website will automatically work with it.
But, if you already bought a domain elsewhere, just contact SiteGround support to give you the IP address of your website server after signing up. Then, ask your customer services at your domain provider to alter the A record for your domain on their side):
Third, complete the form and choose how long your initial purchase is for near the bottom of the page. Ideally, you want this to be for as long as possible to take advantage of the introductory prices.
A 1-year subscription on the StartUp plan will cost £86.26, and £129.46 on the GrowBig plan – this is as good as it gets for award-winning customer support and genuine managed hosting.
After you sign up with SiteGround, you will receive all the necessary information you need to log in.
When you log in for the first time, you will see a notice asking you if you want to set up a new website. Click on ‘Set Up Site‘:
Then, a new section will appear – click ‘Select‘ under ‘Start New Website’.
Choose WordPress and enter the preferred login details for your new WordPress website. Once you are ready, click on ‘Continue‘, then ‘Finish‘.
Open a new tab in your web browser and type in’ yourdomain.com/wp-admin’, as shown below:
Lastly, enter your username and password which were set when you signed up to SiteGround to access the backend of your WordPress website (also known as the ‘dashboard’).
2. How to set up a WordPress website (properly)
The first thing I do at the start of any new website project is what I’ve come to call the ‘BaseBuild’. It doesn’t matter how large or small the website is, or how complex, this is how to build a WordPress website.
Follow this initial process without fail.
Well, first of all WordPress comes with a bit of clutter that needs clearing out. But more importantly, as a professional web designer my work has to be consistently high quality which means I have to be very organised. The BaseBuild is a process that enables this and ensures any website I build is of the same high quality.
Once you work this way, you’ll never stop!
2.1 Get Started – Add A Page & Install A Theme
- Where is my WordPress website login?
Add /wp-admin to the end of your domain in a web browser. For example, https://yourdomain.com/wp-admin.
- What is the WordPress dashboard?
The WordPress admin dashboard, often called WP Admin or WP admin panel, is essentially the control panel for your entire WordPress website. It’s where you can manage posts, pages, themes, functionality (with plugins), a page builder, and other settings relating to how your website behaves..
- What is a WordPress theme?
All WordPress websites are made on a theme on which they’re designed on (think of it as a canvas). My choice of theme directly supports the way I design websites in WordPress.
- Is it possible to build a website using native WordPress functionality only?
Yes, but I would not advise doing so. Whilst designing with WordPress itself is a lot better than it used to be, it is still unnecessarily clunky and arduous. You make changes in the backend and have to reload the front end (after clearing cache(s)) to see what it looks for example. Why would anyone do this when a page builder like Elementor is available, which allows you to do everything ‘live’ in the front end.
2.2 How To Install A WordPress Plugin
- What is a WordPress plugin?
Plugins are used to add extra functionality. There is a near limitless number available. The most common plugins are for backups, security, caching (relates to performance), page builders, and SEO. The chances are there will be one out there for whatever you need – just make sure it is created by a proper outfit that is not going to disappear anytime soon.
- What is Elementor Page Builder?
To quote Elementor: “Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode”.
I use Elementor and will never change. It is the most intuitive yet powerful building software I’ve ever come across. Whatsmore, they keep on making it better and it doesn’t have to cost anything: the free version of Elementor is how we’re making a stunning one-page website in this tutorial!
- Is Elementor the only way to build a WordPress website?
Yes. Yeeesss! Ok, ahem… sorry, of course not.
There are numerous other page builders and (literally) thousands of themes available, all of which can be used to design a WordPress website. If you take nothing else from this post, take this… do your research.
2.3 Settings & Holding Page
- Why does the homepage have to be set to ‘static’?
WordPress was originally created as blogging software so it defaults to being a blog. To make it behave like a ‘normal’ website we have to tell it to make the homepage as such, rather than the archive of blog posts. Simple really.
- What is ‘maintenance mode’ in Elementor for?
It allows you to put up a holding page on the front end of your website. Anyone that visits any part of your website whilst maintenance mode is enabled will see this holding page.
- What is a permalink?
The word permalink stands for ‘permanent link’. So, permalinks are the permanent URLs of each blog post and page on your WordPress site. For example, the ‘about’ page permalink for your website would be https://yourdomain.com/about.
3. Build your WordPress website
Now it’s time to design the ‘front end’ of your website using Elementor. By the end of section 3 you’ll have a polished, mobile optimised website, with a logo and stunning imagery.
Get another coffee and settle in!
This video introduces ‘imagery’ and how important it is to make a website feel alive. Apologies, the first couple of minutes are a little still! But, please do listen to the insights and my four pieces of advice about how to pick images because it is vital to your web design success.
- What is the ‘front end’ of a WordPress website?
In essence, it is the published parts (i.e. pages and posts) of your WordPress website build, and what is seen by visitors.
- What is the media library in WordPress for?
By default, this is where WordPress will store all the images and other media that you upload to your website. It consists of two screens. The first is Library which lists and provides access to your uploaded media (to edit or delete for example). The second screen is Add New, which is where you upload new files.
3.2 Import Template & Add Images To Your Web Page
In this video, I show you how to import the free Elementor template (that you should have downloaded at the start of this post) and add your imagery.
My advice is to watch the next video (3.2) in one go, then go back through again pausing at the appropriate points to carry out the relative action. They’re not difficult tasks as such, but as I said at the beginning of this guide, some of the videos do go at a reasonable pace.
- Does Elementor offer support with the free version?
No, you’ll need to sign up for Elementor Pro to take advantage of their brilliant customer support – but, it’s only £39 ($49) per year for 1 website!
3.3 Introduction to Fonts & Colour
Here I give a short explanation of the role of fonts and colours in web design. We’re not doing professional brand creation obviously but as I’ve already explained in the imagery video, it is very important that a website looks polished and has a pleasant yet impactful user experience.
- What is Canva?
In Canva’s words: “Canva is a graphic design platform that allows users to create social media graphics, presentations, posters and other visual content.”
It is brilliant and much can be done with the free version, like making a free logo which only takes 10-20 minutes if you follow my video. You can take longer to be more creative obviously, especially as the free version of Canva comes with plenty of features.
- Does my colour palette have to match my imagery?
No, not at all, but it might look more polished if it does. Some colour palettes focus on multi-colour though, and others are essentially white with small, bold accented colours (think Google for example). There is no right and wrong.
Just trust your instincts. If you like the look and feel of your work, the chances are others will too.
3.4 Adding Fonts And Colours Using Elementor
Now things are going to come together. Adding your font and colour choice(s) should polish up your web page further.
It’s important to note again that I’m showing you what to do in bite-size chunks. In other words, I describe and explain specific tasks to do specific things to get results in a timely manner.
It doesn’t make sense to teach you everything all at once; it would take a long time and most of what I showed you would not be relevant to creating a clean and simple web page as per the template.
3.5 Create A Basic Logo For Free
If you already have a logo, then skip this step and go straight to 3.6.
Want a free logo? Then this is well worth doing just to get your website going (and business cards if needed).
Some think a logo needs to be a graphical masterpiece that costs thousands. Not true. Some of the biggest global brands have the simplest logos (Facebook, for example). By making a simple, text-based logo using this video you’re saving money and also time (which in business is the same thing).
- What is Canva pro?
Canva Pro is the premium plan of Canva that comes with additional features including unlimited storage for photos and assets. You can upload your own images and access millions of photos, illustrations, and templates. It is very reasonably priced as well, costing £8.99 ($11.50) per month – if your website or project will require lots of graphic creations, it is probably worth signing up.
- Can I use a graphics logo?
Of course! If you have the time and creative talent you could use Canva Pro to create a much more iconic logo.
But, if it is for a young business I feel strongly that there are other things to invest your time and money into right now. The Webbit logo was the third iteration and I paid an artist to create it once the associated cost could be justified. The first two I created myself with Adobe and it took me hours and hours (and hours) for each one. In hindsight, I just needed a respectable logo that cost nothing to create.
- How much should I pay for a logo?
Honestly, how long is a piece of string? The Webbit logo cost under £500 (around $650) but I’ve since learned that this was an unbelievably good deal. So, if you are intent on having either a very artistic or otherwise graphically elegant design, I would not expect to get change out of £1000 (approximately $1250).
3.6 Add Copy & Tweak Layout
In this video, I show you how to add your website text in the first instance and then how to adapt the layout at a basic level to better suit your requirements.
I explain that once you understand how Elementor works you can search out how to use specific widgets quite easily. It is so intuitive for both beginners and professionals, hence why they broke 5,000,000 active installs recently!
This part of your WordPress website build will probably take the longest so try to follow my advice closely. Add your copy first and if I were you write it off-screen beforehand but edit on-screen.
As for altering the layout, the sky’s the limit. However, I strongly recommend you go for a clean and simple design. Do not spend days trying to craft a digital work of art; it’s not necessary. As a professional web designer, I only do less-is-more design because it ensures the content is as accessible as possible, thus providing the best user experience.
- Where can I get dedicated support for Elementor?
You’ll need an Elementor Pro subscription to get their support – one website costs £39 ($49) per year! That’s equal to a cup of coffee per month in exchange for peace of mind.
3.7 Mobile Optimisation
You’re nearly there now!
One last major design task to do, but it is a very important one.
Nowadays, many of us browse the internet with our smartphone so it is vital that you ensure your WordPress website looks good on any screen size, i.e. that it’s ‘responsive’.
If you’re using the template I’ve provided and haven’t adapted it too heavily, if at all, then this should not take much doing because I already optimised it on creation.
For those that aren’t using my template, my advice is to do mobile optimisation in stages. Start with the tablet mode and make a good first pass, then take a break. Return and do mobile, then take another break. Then come back a third time to review your work and finalise. It’s not rocket science, but can take a bit of back and forth to get right.
- What is meant by websites being ‘responsive’?
Literally, this means that a website will ‘respond’ to the screen size on which it is viewed. As this video explains, it is possible to create a mobile version of a website, or part of a website.
Basically a mobile optimised website should look good on every screen size.
You’ve almost made a website with WordPress!
This section starts with a bit more best practice (driven by my obsession with doing a job properly and teaching you the professional way). It then walks you through configuring the plugins we installed at the beginning.
Please pay special attention to each and every explanation; I would hate for you to get this far, then trip up by not protecting your site properly or failing to take a backup correctly!
4.1 Export Template, Image Reduction & Privacy Page
- Can I use the Elementor template I just exported for another page?
Yes you can, just like you did earlier.
- What is performance optimization?
A big topic to be honest and beyond the scope of this post. But, basically performance optimization is all about ensuring your web pages load as quickly as possible. This also relates to Search Engine Optimization (SEO) which is another, even bigger, topic because Google (and the others) take the speed a page loads into account when ranking it in search results.
4.2 Configure Plugins then Index With Google
- Can I use other plugins with my WordPress website?
Yes, very much so. If you followed this guide you have built a fully-fledged WordPress website that uses Elementor to design pages. That doesn’t stop you from doing anything that WordPress is capable of doing.
But, my golden rule… do your research.
- What does ‘indexing’ with Google mean?
Simply put, it means we’re letting Google know that your website exists and is ready to be included in their index so it can be found in search results.
Please note, this is nothing to do with where your web pages will actually appear in search results. That is SEO.
5. WordPress Updates & Maintenance
It is really important that you learnt how to configure the plugins in the backend including taking a backup and whole-of-site migration download as I showed in the last video. I’ve never had any issues when building websites this way on SiteGround hosting, but you can’t be too careful.
This neatly brings me on to the last topic for this guide on building a WordPress website. Maintenance.
It is imperative that you update all the software related to your WordPress website as often as possible and definitely set up a recurring diary task so you don’t forget. Do this every month as a minimum, but preferably every week or two. If this is not realistic, there is another option hot off the press. The latest version of WordPress now includes automatic updates which you can set in both the plugin and theme screens.
Manually do the software updates by logging in to your website and take the two backups I’ve shown you (UpdraftPlus and an All-In-One Migration file export to your computer). Then look under ‘Dashboard’ in the top left of the black toolbar. You’ll see ‘Updates’. Click on it, and follow the on-screen update options.
Once you’ve finished updating, make sure you clear the cache by clicking on the ‘Purge SG Cache’ at the top of the screen then view your site in an incognito (sometimes called ‘private’) web browser window to make sure everything looks as it should.
On rare occasions, updating plugins or themes can make your website look as though it has got seriously conflicted somehow. It hasn’t, don’t worry, it’s just a caching issue that once cleared (i.e. by purging cache and deleting browser history) typically puts everything back to normal.
If for whatever reason you can’t fix it, I would advise joining the Elementor Community Facebook Group.
If you can’t find a fix from someone there, your last resort is upgrading to Elementor Pro, which includes premium support and is fantastic.
6. Future Proof Fantastic
Everything about your website is best-of-breed.
The Content Management System (i.e. WordPress), theme, plugins and page design are all as good as it gets right now. Not only does your website look fantastic, it’ll play nice if you need to develop it in the future and is ripe for further optimisations (like SEO or performance tuning).
Hopefully, it’s a simple, clean and polished website that you’re proud of.
Whenever I accomplish something new by doing-it-myself, I always feel liberated and really empowered. For me it’s the best definition of ‘satisfaction’ I’ve ever found.
How about you?