Portfolio websites are a great way to showcase what you can do for potential clients. They are ideal if you work in creative industries such as photography, design or video editing.
If you need a portfolio website, you’ll be pleased to know that it’s surprisingly easy to create one that looks truly professional. With a little time, effort and patience, you can end up with something a high-end company would be proud to call their own.
In this article, we’re going to take you step by step though the process of setting up an attractive portfolio website.
First, let’s think about what you probably want to achieve with your portfolio website:
1. Creating an online space to display your best work.
2. Presenting it in a compelling and attractive way, so it’s easy for potential clients to browse through it.
3.Using a platform that makes it easy for you to constantly add to your portfolio as you conclude new projects.
We consider building a WordPress website as the best way to achieve all of these aims. Therefore, for the purposes or this tutorial, we are going to use WordPress, alongside the popular Avada theme.
We suggest the use of WordPress for many different types of website. Here are some of the reasons why we think it’s a good fit for a portfolio site.
HTML Knowledge is largely optional: If you’ve got time, patience, and an eye for design, you really don’t need a Web developer to help you build an attractive site. 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 an interface that’s only a little more complicated than a word processor.
You rarely need to touch the code, even when adding advanced features. Usually, you need do little more than copy and paste “short codes” into the site.
It’s easy to change things as you go along: Adding new images and text to a WordPress site is really easy – so you needn’t worry about a Web designer’s invoice every time you wish to add to your site.
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.
Avada is one of our favourite WordPress themes out of the thousands available. The learning curve involved in using it is, at times, a little steep, but this is balanced out by great documentation and high quality support from the theme authors.
Here are some of the reasons why we like Avada so much:
1. It offers great variety: Avada offers loads of functionality “off the shelf.” It also comes with a vast number of preset page layouts, including a great selection of different portfolios.
2. The documentation is excellent: The online documentation for Avada is clear and thorough, and includes tutorial videos.
3. The design is responsive – making websites look good on smartphones and tablets, as well as on PCs.
4. Support is reliable: Avada has a very active support forum if you get stuck. Tens of thousands of websites use Avada, so you’re in good company.
How we will help you
Here at Make A Website, our team have built multitudes of websites, including portfolio websites. We know how to make a great end product.
We will be honest and admit that there are limitations 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 will show you enough to launch your portfolio site and put you in a position of confidence, allowing you to go on and continue adding as much functionality as you like.
What You’ll Need
You will need a small mixture of skills and items to successfully build your site – a list is below. Don’t fret about any of the items on the list – our aim is to take you through everything step-by-step.
- 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
- A collection of quality pictures of your work, with which to populate your portfolio.
- Some basic text content.
- Confidence in image editing and preparing images for the Web
- Patience: uploading all your images is going to take some time!
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 – but before that, you will need to buy it!
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 plenty more work to do before your site is finished! It’s time to do some customisation, and add some content.
Let’s Talk Layouts
As we said at the start, Avada is a hugely flexible theme, with many layout possibilities. For the purposes of this tutorial, we’re going to go straight for one of the portfolio layouts, and have the portfolio appear (on the home page) as soon as people visit your site.
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. 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. Here, we will stick to the basics for building a portfolio site, 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, where you will see a plethora of layout options, including several for portfolios. 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. When you build a portfolio site with Avada, individual portfolio items are seen as “posts” too.
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 start to build your site layout. First, we’re going to adopt a more simple layout for the site, as clearly you’re not going to want to use every single feature available with Avada. That’s not to say you can’t use as much as your wish!
For the purposes of this demo, however, we are going to go for a minimalist layout, and use the layout called “Home Portfolio Style 1″ for your home page.
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 Portfolio Style 1.” Then click “save changes” at the bottom of the screen.
3. Next, we’re going to remove quite a lot of the demo content we’ve just installed, in order to leave ourselves only with the bits of content 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.” Finally, click “save changes.” The correct settings are shown below.
5. Next, we’re going to trim down this simplified menu a little more. Go to the “edit menus” tab, and make sure the “top” menu is the one you have selected. On the right of the page, you’ll see a “menu structure” section, as shown below.
6. It’s probably already apparent to you that you can drag the menu items around to change the layout of the menu. For now, and just for the purposes of this tutorial, we’re going to remove the “Our Office” and “Blog” sections. Click the small arrow to the right of each section, and click the “remove” link for both. This is shown with a blue arrow in the below screenshot. Once you are done, be sure to click the blue “Save Menu” button.
7. As we’re not going to incorporate a blog on our demo portfolio site, we’re going to remove all the demo blog posts. From the dashboard, go to POSTS > ALL POSTS. You will see seven demo blog posts. We are going to remove all of them.
Tick the boxes to the left of the all of the posts, then change the “Bulk Actions” pulldown menu so it instead says “Move to trash,” and click “Apply.” The posts will all disappear. If you decide you want them back, you can always move them back out of the trash later!
8. Next, we’re going to remove most of the demo pages, so we’re only left with those that we need for our simple demo portfolio site. If you’re already getting a strong sense of how to use WordPress, you needn’t do exactly what we suggest. You may, for example, decide to leave and adapt a few more of the demo pages. However, to replicate the demo site we are explaining here, you will want to remove all the pages except those listed here:
Home, Home Portfolio Style 1 (very important, as it is our chosen home page), About Us, Meet the Team, and the 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 7. This is a rather bigger job with the pages, as there are over one hundred demo pages as part of the Avada theme.
9. 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 notice a simplified layout, with an attractive grid portfolio on the homepage, as shown below.
Building your Portfolio
Obviously, now you have a basic portfolio layout, you’re going to need to upload some of your own work (including images) so that you can begin to replace the demo content.
The Avada theme treats each portfolio item as a special type of post. We will now show you how to create an item, but you may find it useful to refer to Avada’s detailed documentation if you get stuck.
1. From the dashboard go to the “Portfolio” section, and select “Add New.”
2. What you will see next looks just like the standard WordPress interface for adding new content. However, the Avada theme adds several extra menu options.
3. For the sake of this demo, we have added a little text and uploaded an image (via the standard WordPress “Add Media” button). We have then done the following:
- Selected the “photo” category from the categories list. (You are obviously free to add new categories or deletes existing ones, depending on your requirements).
- Chosen our newly uploaded picture as the “featured image.” This is an important step, as it’s the image that will show on the portfolio grid.
4. Once you are done click “publish.” Obviously, you can complete these steps to add as many portfolio items as you wish. You will then want to move all of the demo portfolio posts to the trash, in the same way that we disposed of the unwanted pages and blog posts, earlier in this tutorial.
5.Go back to the live site as before (hover your mouse over your domain name, shown in the top-left of the WordPress dashboard, and click “Visit Site.”) You should see the new item to the top left of the portfolio (see red arrow below). When you hover over it, it will show the item title and basic details (see blue arrow below).
You have now completed the basics of your new portfolio 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, by now it should be clear to you that adding and editing content is fairly straightforward.
Here’s what we recommend you do next:
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. Edit the page called “Home Portfolio Style 1″ to get rid of Avada’s demo content and replace it with your own information.
4. 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.
5. 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. In addition, the built in functionality for displaying your work beautifully is probably enough for you to avoid the need for any additional lightbox or gallery plugins to enhance your portfolio.
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.
- Default Post Thumbnail. This is a tiny plugin, but if you’re uploading hundreds of photos, you will find it invaluable. Basically, it automatically sets the first image in each post as the “featured image.” It could save you a lot of time!
A Final Word
If not, the theme author’s 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.