When I first started designing websites, back when the Internet was in its infancy and Amazon was a small quirky online bookstore (oh for your foresight Jeff Bezos) the only way to get anything remotely resembling a website online was to code it using HTML (HyperText Markup Language) and later style it using CSS (Cascading Style Sheets).
Code was usually typed directly into a word-processor such as notepad and was about as far away from WYSIWIG as you could possibly get. Fast forward to the present day and oh my goodness, how things have changed. I am typing this article directly into my website which is sitting in a browser window, looking exactly as it will when I hit the publish button and launch it to an unsuspecting world.
This has all been made possible by the evolution of WordPress, an online publishing platform with an open architecture that now powers approximately a quarter of the entire Internet and an upsurge in quality page builder plugins, that offer true what you see is what you get usability.
For absolute beginners who have never heard of WordPress, I should point out that this innovative platform comes in two distinct flavours, WordPress.org and WordPress.com. The dot com version is very much in a similar vein to blogger.com, with rather limited design choices available and a reliance on a third-party hosting solution. As a result, we will totally be ignoring wordpress.com in this article, as it simply does not give us the flexibility we need to create websites that are limited only by our imagination.
What we will be using to build websites the easy way and totally under our control, is a self-hosted WordPress installation that will grow as our website grows and allow us to have a voice on the World Wide Web.
Don’t panic, it may all sound a little daunting but is actually a breeze once you get started, so let’s start, you are gonna need some hosting.
Hosting your Website
the best solution for beginners
The first consideration for any would-be web site owner, before we get to the sexy design and content creation stage, is finding a reliable web host. For those who have never heard of web hosting, it is basically a place for your web site to live on the Internet, think of it as Internet real estate, a place where all of your files are stored and made available to web surfers who visit your web site.
If you are just starting out in web design, spending a fortune on hosting is simply not necessary, a shared hosting account with the option to upgrade as your web site grows will be more than adequate.
I am not in a position to test and compare all of the web site hosting companies out there but I can speak about my choice of web hosts and my past mistakes. My first mistake when I first chose a hosting company was to just go for the cheapest, which basically resulted in poor web site performance, consistent downtime and inadequate support.
Lesson learned, all of my web sites are now hosted with a dedicated WordPress managed company by the name of Siteground, who allow me to host multiple web sites on their GrowBig Package, which is still highly affordable and allows for 25,000 visitors per month, more than ample for starter sites.
Top Reasons for Choosing SiteGround:
- host multiple domains
- free SSL certificates
- managed WordPress hosting
- one-click WordPress installation
- daily backups
- excellent support
Install WordPress
the easy web design platform
Installing WordPress on your hosting package has never been that difficult thanks to the infamous WordPress 5 minute install. However, for non-techies there were some pitfalls, for a start, you had to set up a MySQL database, eeek, download and unzip the WordPress repository, re-name configuration files and lots of other scary stuff.
Nowadays, especially if you took my advice and hired SiteGround as your web host, you will now have access to a one-click installation of WordPress. Yes simply log in to your control panel, go to auto-installers, select WordPress and off you go, jobs a good ‘un.
The following video will walk you through the process step by step, thanks, Monique.
Installing Themes and Plugins
let's get this party started
Now we have WordPress up and running it is time to install all the bits and pieces we need to make our web designing true drag and drop and as simple as possible, web design as it should be, without complicated HTML and CSS.
In order to make this possible, we are going to be using a WordPress page builder plugin called Elementor. However, before we install Elementor we need to consider which theme to use for our WordPress website.
What is a Theme? I Hear you Ask.
If you think of designing a website as like painting on a canvas, then your website’s theme is the frame that displays and holds your work of art.
The idea behind themes was to allow a website owner to quickly alter the look of a website simply by installing a new theme. Unfortunately, this method of redesigning a website could be very limiting, especially for non-coding web designers, as it was extremely difficult to get a website to look exactly as you wanted without having a really good understanding of PHP and CSS code.
That is of course until the dawning of WordPress page builders and in particular the awesome Elementor.
Elementor works with your theme but allows you to alter anything and everything your little heart desires, in an easy, intuitive point and click way. No more messing with complicated code, now anyone can design and build impressive-looking websites.
There is a massive range of free and paid themes available in the WordPress marketplace. However, choosing a theme that plays nicely with Elementor can be a bit hit and miss, especially as page building plugins of this quality are relatively new and innovative.
Fortunately, we have sourced some new and equally innovative themes that have been designed to compliment Elementor perfectly and work away in the background while you get on with designing.
All of the following themes are free to use but if you require more advanced features then a small charge is applicable. I have listed the themes in no particular order as it will be personal preference that dictates which theme you decide to go with.
Astra Theme
Stylish, Lightning Fast & Easily Customisable
The Astra theme is an incredibly lightweight theme, taking up less than 50 KB in resources, which makes it one of the fastest loading themes out there.
Astra has been designed from the ground up to work with page builder plugins and its integration with Elementor is superb.
The beauty of Elementor is that you can design full pages including headers, footers and sidebars, Astra does not stand in your way and allows you to disable all of these theme features either globally or on a page by page basis.
Astra also comes with an ever-growing library of Elementor enabled page templates, which allows you to import complete, professionally designed websites at the click of a button.
GeneratePress
The perfect lightweight theme for your next project
Another amazingly fast and popular WordPress theme, especially amongst those who build Elementor sites professionally is GeneratePress.
Featuring a library of pre-built templates, which is rapidly becoming the norm amongst themes that support Elementor, because of the enormous flexibility Elementor offers.
The free version of this theme also allows you to remove the themes headers, footers and sidebars and gives you some but limited control over site colours and typography.
The paid upgrade of GeneratePress allows for much more control over almost every site feature you could possibly imagine and with a one-off fee for unlimited websites is an absolute steal.
OceanWP
Free Multi-purpose WordPress Theme
OceanWp is another popular theme amongst web designers who build sites for a living.
And once again its feature set is similar to the themes we have already discussed.
What sets OceanWP apart from its rivals, is a rather useful set of extensions, which can be bought separately as a bundle, such as Stick Anything, allowing for sticky elements on your web page, a white label feature and an impressive array of new Elementor widgets, as well as many more unique OceanWP Extensions.
Page Builder Framework
Elementor's Best Friend
The WordPress theme marketplace has started to change. Page building plugins such as Elementor have made web design so much easier for non-coding designers that it will surely become the norm within the next year or two.
Quick to notice this change in the theme market is the Page Builder Framework, a performance-oriented theme specially designed to provide a base for your Elementor designed website to shine, without getting in the way of your creativity.
Check out the Page Builder Framework today.
Elementor Beginners Guide
Start building your dream website today
The good news is now that we have installed WordPress and set up our theme all we have to do next is install the Elementor plugin and we can start creating awesome looking websites.
There are two versions of Elementor, a free version and a pro, paid-for version, as a beginner the free version is ideal for getting to know the software, finding out how everything works and is more than capable of designing great looking sites.
To install the free version simply go to Plugins on the left-hand side of your admin area, click add new and search for Elementor. When you see the Elementor Page Builder by elementor.com (it should be the first result) click on install now and then activate.
To install the pro version of Elementor, you will still need to have the free version installed as the two work in tandem but you will need to visit elementor.com and create an account, you will then be able to download Elementor Pro and install it by clicking add new at the top of your plugins page.
Elementor Video Tutorials for Beginners
Build Your First Web Page with Elementor
Let Cassie from Elementor guide you through creating your first ever page in Elementor.
Become familiar with the editor, learn how to create sections and complete pages using widgets, blocks and templates.
Learn drag and drop web page editing, which is so simple you will think you are designing a mock-up in Photoshop.
Introducing the Elementor Theme Builder
Once you have mastered the basics of Elementor you will want to dive in and master designing your complete site, including headers, footers and archive pages such as 404 and post templates.
As with most things Elementor, this is ridiculously simple and uses the same tools you were using to design pages.
Easy web design for designers who hate code.
