Having a website for a business or for freelance professional endeavours is no longer something any sane person would consider as optional. The first thing many potential customers ask for is a website address, so you need to make sure that you have a working site, and that it creates a suitable impression.
Thankfully, it’s not that difficult to create a high-quality Web presence, and we’re going to take you through it step by step in this article.
Professional websites need to accomplish several things:
1. They must be clear and easy to read, providing prospective clients with a quick snapshot of what you do (or what your company does).
2. They must look good on mobile devices as well as computers, as more and more people now do plenty of Web browsing on those devices.
3. They must be easy to update, so you can amend details as your services evolve and your portfolio of past work gets more impressive.
With the above points in mind, we have built this “how to” guide around a WordPress website, using the popular “Avada theme.”
WordPress is our “go to” platform for a wide variety of different websites. Here are a few reasons why the platform works well for a professional website:
There’s no need to learn (much) HTML: Gone are the days when creating a decent website was a “experts only” pursuit. WordPress is a Content Management System (CMS) that does most of the hard work for you. The core design is handled by the theme, and the content is organised via a back-end interface that isn’t much more complicated than a word processor.
When it comes to adding advanced functionality, such as attractive sliders that look beautiful on an iPad, you still don’t need to learn any coding – you can simply copy and paste “short codes” into the site. You don’t even need to understand them – although you will probably begin to as you work on your site.
It’s easy to change things as you go along: If you add a new service or move premises, you needn’t contact your “Web people” to help you out – it’s easy to make such changes in the WordPress interface.
The support community is huge: With over six million WordPress sites out there, it’s extremely unlikely that you’ll find a problem that someone else hasn’t faced before. You will find endless WordPress support forums to help you, and thousands of developers and experts if you ever need any specialist help or customisation.
There are tens of thousands of WordPress themes out there, but Avada is one of our favourites. Here are some of the reasons why:
It’s hugely flexible: Avada is one of the most advanced WordPress themes currently available. It also comes with a vast number of preset page layouts, so you will probably find one that works for you without too much customisation.
The documentation is great: The online documentation for Avada is clear and thorough, and includes tutorial videos.
It’s responsive – which means it looks great on mobile devices as well as on PCs.
Support is available: Avada has a very active support forum if you get stuck. Over 32,000 websites use Avada, so you’re in good company when you choose it for your own.
How we will help you
Here at Make A Website our team have built hundreds of professional websites, so we know exactly what we’re doing.
Obviously there are limits to what we can show you in a tutorial article. The documentation for the Avada theme alone runs to over 15,000 words (plus several long videos), so we won’t be able to show you every element of the functionality. However, we do aim to show you enough to launch your basic site and provide you with enough confidence to go on and play with the additional features available.
What You’ll Need
Don’t worry if you don’t have these things yet – we’re going to take you through everything step-by-step. Here are the basics:
- A credit card or PayPal account to pay for domain registration, hosting and the purchase of the Avada theme.
- A Web hosting account with your own domain
- A Web browser of your choice (we prefer Google Chrome or Firefox)
- The Avada theme
- Text, graphics and photos for your professional website
- A little patience
Getting a domain and hosting
Before you can do anything, you need an address for your website (a domain), and a place to host your website (Web hosting service). We recommend HostGator as your Web host.
We have produced a very detailed step by step guide to registering your domain and setting up your hosting. You should visit the page now via this link. (The links will open in a new window or tab, so you can easily return to this guide at any time – see you shortly!)
The next thing you need to do is install WordPress on your new domain. Luckily, we have another step by step guide telling you exactly how to do that.
Once again, click the link to move forward to the guide. The guide will open in a new window, so you can return to here when you are done.
Getting the basics done
Now that WordPress has been installed onto your Web space, we can get down to business. Before proceeding to the next steps you should be sure of the following:
1. That you can get to your WordPress dashboard (www.yourdomainname.xx/wp-admin) and log on using your username and password.
2. That you can see your site when you type the domain name into your Web browser.
If your basic site isn’t yet live, you may need to wait a little longer for your domain information to propagate. Refer back to Step 7 in the step by step WordPress Guide for more info.
The WordPress dashboard is where you control all the content and functionality within your website. First of all, we are going to change the fundamental appearance of your site by installing the Avada theme.
Purchasing the Avada Theme
We recommend purchasing the Avada theme via our sister site, WPThemes. There, you can read all about the theme and find a link to purchase it.
The themes site is shown above, complete with a blue arrow to show you where the purchase button is. You can click here to visit the site and purchase the theme. The WPThemes site will open in a new window or tab so you can return easily to these instructions.
When you click the “Buy Theme” link, you will be taken to ThemeForest to complete your purchase. You will need to complete some registration information, and provide credit card or PayPal details to pay for the theme.
Once your purchase is complete, you will receive an email that contains a download link for the theme:
When you follow the download link, you will have the option of downloading either “All files and documentation” or the “installable WordPress file only,” as shown below. For the sake of this tutorial, we suggest that (for now) you choose the latter option, but you may also wish to download the archived “All files and documentation” file and keep it safely somewhere on your computer.
Having downloaded the WordPress file, you should have a new ZIP file on your computer with a long filename beginning with “themeforest…” Keep this file safe, as you will need it in a moment.
Installing the theme
1. Log on to the dashboard for your WordPress site.
2. On the left of the dashboard, hover over “appearance” and click the “Themes” option:
3. You will now see a screen showing all the themes available to you, complete with previews:
4. As we’re using a theme of our own, we want to use the “Add New Theme” option. Click the big plus button shown in the screenshot above.
5. Next, click the “upload” link, shown in the screenshot below.
6. Click the “Choose file” button, and browse to where you stored the Avada ZIP file on your computer. Then, click “Install now.” You will have to wait a few minutes while the file uploads to your Web hosting space.
7. All being well, you should receive a message saying that the theme installed successfully. Now, click “activate” to make the theme live.
8. You now have to install a couple of plugins to make the theme work. Don’t worry, it’s quite simple. On the next page that appears, you should see the message shown below:
9. Simply click “begin installing plugins.” Then, on the next screen (shown below), just click the “install” link that appears when you hover over the two recommended plugins. Each should only take a few seconds. After you have installed each, you will see a new link saying “activate” for each plugin. You need to click this for each too.
10. The theme is now installed, so now is a good time to look at what you’ve got so far. Hover your mouse over your domain name, shown in the top-left of the WordPress dashboard, and click “Visit Site.” What you should see will be similar to the screenshot shown below. Obviously there’s a little more work to do before your site it finished! It’s time to do some customisation, and add some content.
Considering a Basic Layout
As we said at the start, Avada is a hugely flexible theme, with many layout possibilities.
The next part can get a little bit more tricky, so before we proceed, we recommend that you open up a couple of Web pages so you have them at your disposal:
1. The Avada demo site, which will show you all your layout options. Click here to open it in a new tab.
2. The Avada documentation, which will supplement these instructions, and provide you with all the shortcodes you need. Click here to open the documentation in a new tab.
The Avada demo site is shown in the screenshot above. We recommend you spend some time playing with it, and exploring your options. Don’t worry – you can’t break the demo site!
As you will quickly see, your options are almost endless. We will stick to the basics here, but you’ve always got the Avada documentation to fall back on if you want to implement something we don’t cover here.
Pay particular attention to the “Home” menu, which will give you all kinds of options for your home page layout. Thankfully, you don’t have to manually arrange all of these pages. You can import all the content into your own site, so you can pick and choose from what you want.
Importing Demo Content
Before we start customising our site, we are going to install Avada’s demo content. This makes life much easier on a fresh site, as it’s instantly clear what content is what. You can delete what you don’t need, and change the parts you wish to retain.
Before we import the demo content, there are a couple of WordPress concepts you should familiarise yourself with:
Pages are individual areas of your site, usually accessed through the top or side menu bars.
Posts are individual blog posts, that usually appear in reverse date order as visitors scroll down the blog page.
Now, we will proceed and install the demo content.
1. From the dashboard, hover over the “Appearance” menu, and click “theme options.”
2. Right near the top of the first page of options, you should see a large “Import Demo Content” button. Click on it.
3. Once you see a message saying “Successfully imported demo data!” it’s time to have another look at your site. Once again, hover your mouse over your domain name, shown in the top-left of the WordPress dashboard, and click “Visit Site.” You will see that your OWN site now resembles the demo site exactly.
It’s now time to begin to customise your site. The first thing to do is implement a more simple layout for your site, as clearly you’re not going to want to use every single feature available with Avada. For the purposes of this demo, we are going to go for homepage layout 10.
1. Go to the dashboard, and click SETTINGS > READING.
2. On the page that appears (shown below), set the front page display setting to “A static page,” and change the “Front page” option to “Home version 10.” Then click “save changes” at the bottom of the screen.
3. By now, you are probably beginning to get a rough idea of what you want to do with the site next. However, for the purposes of this tutorial, we are going to significantly trim down the functionality of the site, as would typically be the case for a professional website. Ironically, this means removing much of the demo content we’ve just installed, in order to leave ourselves only with the content types we wish to keep.
4. First, we’re going to simplify the main navigation menu so that it no longer points to all the demo content. From the dashboard, go to APPEARANCE > MENUS. Then, click the “Manage locations” tab, and change the assigned menu for “Main Navigation” to “Top,” and then click “save changes.” The correct settings are shown below.
5. Next, we will trim down the number of demo blog posts. From the dashboard, go to POSTS > ALL POSTS. You will see seven demo blog posts. We are going to remove the bottom four, leaving ourselves with three.
Tick the boxes to the left of the last four posts, then change the “Bulk Actions” pulldown menu so it instead says “Move to trash,” and click “Apply.” The bottom four posts will disappear.
6. Next, we’re going to trim down the pages, so we’re only left with those you would typically need for a business site, and those that match the ones on the simplified menu we have just activated. There’s no need to follow these instructions to the letter, but for demonstration purposes, we’re going to remove all the pages except the following:
Home, Home Version 10 (very important, as it is our chosen home page), About Us, Meet the Team, Our Office, Blog Large and FAQ Page.
As before, remove the pages you don’t want by ticking the boxes to the left, and moving them to trash, as explained in point 5. This is a rather bigger job with the pages, as there are over one hundred demo pages as part of the Avada theme.
7. Now, go back to the site again (hover your mouse over your domain name, shown in the top-left of the WordPress dashboard, and click “Visit Site.”) You will see a far simplified layout.
You now have the bare bones of a professional website, made using the Avada theme. Congratulations!
There is still plenty to do, and unfortunately we won’t be able to hold you hand through all of the fine detail. However, here are some recommended steps:
1. Swap the Avada branding for your own. Go to APPEARANCE > THEME OPTIONS, and select the LOGO option. Click the UPLOAD button, and point to a logo file on your own PC. Once done, click “save all changes.” In the screenshot below, we have done this with a demo logo of our own – as you can see, it has changed the branding of the site.
2. Swap the remaining demo content for content of your own via POSTS > ALL POSTS, or PAGES > ALL PAGES. Editing each post is fairly straightforward, but if you choose to use advanced Avada features, you may need to drop “shortcodes” into the content and amend details within them.
You will find more specific details, as well as step-by-step guides to producing specific page types, within the Avada documentation.
3. Add more pages if required, using the documentation to help you with specifics. You will need to go to APPEARANCE > MENUS via the dashboard to add these to the navigation of your site.
4. From the dashboard, go to Settings > Permalinks, and change the Permalink setting to “Postname.” This makes it easier for the search engines to index your new posts.
Avada has so much functionality “off the shelf,” that you’ll probably find you don’t require many additional plug ins. For example contact form and map integration is already available – just check the documentation.
However, here are a few extra plugins you may wish to consider. You can find plugins on the WordPress site here. Most come with full instructions, but essentially all you need to do to install each one is download it to your computer, then go to PLUGINS > ADD NEW on your WordPress dashboard, and point to the plugin’s ZIP file – just like when you installed the Avada theme.
- Akismet. If your site becomes popular, it will become a target for spammers, Akismet is a decent free system to stop some of the spam in its tracks.
- Google Analytics for WordPress. You can’t just put up a website and not bother to track statistics about your site! The best way to track site usage is by using Google Analytics. In order to do that, you have to put an Analytics code into your theme. This plugin makes it easy for you.
- Better WP Security. This plugin strengthens the basic security of your WordPress site. While it may not prevent a dedicated and skilled hacker, it will still stop opportunists from using your site for malicious purposes.
- WordPress Backup to Dropbox. There are numerous WordPress backup solutions on the market. Some are free, and some are commercial. This one is a free plugin that lets you regularly back up your site to Dropbox.
A Final Word
Avada is a superb WordPress theme, but it is rather complex and initially intimidating. The documentation is great, however, and the forum-based support is really helpful if you get stuck. To join the support forum, follow the instructions in the welcome email you received when you purchased the theme.