How to Build a Portfolio Website from Scratch

Whether you’re an artist, a designer, or a photographer, you’ve likely been told that learning how to build a portfolio website can be an effective way to promote and monetize your work, ultimately helping you to turn what you love into a profitable business. 

That’s certainly true. Owning your own online presence can help you reach far more potential fans and earn far more commissions than simply promoting yourself via other channels such as Facebook and Instagram. 

However, if you’ve never actually created a website for your work before, learning where to start can present a serious challenge.

That’s why we put together this comprehensive guide, offering clear, step-by-step instructions on how to build a portfolio website from scratch.

Below, you’ll learn the best tools to create a stunning portfolio, the tasks you’ll need to complete to put that portfolio together, and even how to ensure you attract visitors to your new site.

1. Choose a Web Hosting and Domain Name Package 

The website you’re about to create is essentially a collection of different files such as images, web pages, stylesheets, and other essentials which come together to present your work to the world via a web browser.

So, the first thing you’re going to need to build your portfolio site is a place to store all those files. This is where web hosting comes in.

For the uninitiated, web hosting is pretty much what it sounds like: A server (or in most cases, part of a server) that hosts the files that make up your website.

You’re also going to need a way to direct people to your website. This is the job of your domain name.

You can think of your domain name as simply being your web address.

Article Continues Below

For example, WPLift.com is our domain name, just like Google.com is the domain name of our favorite search engine and NYTimes.com is the domain name of, you guessed it, the New York Times.

To be honest, saying a domain name and a web address are the same is oversimplifying things a little, but it’s certainly the easiest way to understand it if you’re a first-time site builder.

Where to Get Web Hosting and a Domain Name

There are countless companies out there that sell web hosting and domain names. You can read about some of our favorites in this guide to our top cheap web hosting providers as well as this list of the best-managed WordPress hosts.

For this tutorial, we’re going to go with Hostinger for four key reasons:

  1. They offer some of the most affordable hosting and domain packages on the web
  2. They’re incredibly easy to use, making them a great choice for newcomers
  3. Their service is fast and reliable, meaning your site will always be online and deliver great visitor experiences.
  4. They provide a free SSL certificate and automatically add it to your website.

An SSL certificate is a vital tool for keeping your website secure, especially if you plan to accept payments for your site, so the fact that Hostinger adds one to your site with no effort or expense on your part makes them a great choice. If you’re not sure why we recommend checking out our complete beginner’s guide to SSL certificates.

How to Set up Your Hosting and Domain

To set up your hosting and domain package with Hostinger, first, go to hostinger.com/web-hosting and select one of the three available packages.

Next, create an account by entering your email address or sign-up with either your Google or Facebook credentials.

You can then enter your payment details to pay for your plan.

Assuming you’ve purchased a package with a free domain name (which we recommend you do), you’ll be able to choose a web address for your site such as myawesomeportfolio.com, add it to your package.

With that done, you’ll be taken to your Hostinger dashboard and can begin the process of creating your site.

2. Install WordPress on Your Web Host

WordPress is an immensely popular website platform that powers over 43% of all the world’s websites.

We’ll be using WordPress to create your site because it’s incredibly easy to set up and use, comes with an enormous collection of customizable themes which you can use to design a beautiful portfolio, and also has an impressive array of add-on tools known as WordPress plugins which you can use to do everything from displaying your work to selling it and making money.

Before you get to all that, you’re first going to need to install WordPress on your host. Here’s how to do that with Hostinger:

From your main Hostinger dashboard, scroll down until you see the list of options labeled ‘Website’ and click ‘Auto Installer.’

On the next screen, select WordPress.

This will bring up a pop-up window where you can enter the name of your site and create a username and password to log into it.

We also recommend clicking the ‘Advanced’ option and ensuring that the website is going to be installed under the ‘https’ version of your domain name, as this is the one where the aforementioned SSL certificate is active.

From there, all that’s left to do is click the ‘install’ button on the next pop-up window that appears, and WordPress will automatically be installed for you.

3. Log into Your WordPress Dashboard

Once WordPress is installed, Hostinger will direct you straight to the login page where you can enter the username and password you created earlier.

In future, you can access the login page by adding /wp-admin to the end of your domain name as in myawesomeportfolio.com/wp-admin.

This will take you to your main WordPress dashboard, and it’s from here that you’ll start to put together the rest of your site.

3. Choose Install Your WordPress Theme

There are thousands of both free and premium WordPress themes which you can use to customize the look, layout, and overall style of your new portfolio website.

For this tutorial, we’re going to use the highly popular Astra theme for four key reasons:

  1. It’s one of the best free WordPress themes around, making it an ideal choice if you’re building a portfolio website on a budget.
  2. It’s fast, lightweight, and responsive, meaning it can make a big difference when it comes to offering the best possible user experience for your visitors.
  3. It’s compatible with top WordPress page builders like Elementor and Beaver Builder which you can use to build your entire site with zero technical knowledge or coding ability required.
  4. It comes with an abundance of pre-made website templates, many of which are perfect for portfolio sites.

If you don’t like the look of Astra, you can find more great options in this guide to the 15+ best WordPress starter themes or this list of 40 amazing mobile-responsive themes.

Alternatively, you can explore WPLift’s complete WordPress theme directory here.

How to Install Astra on Your WordPress website

To install your theme, log in to your WordPress dashboard and navigate to Appearance – Themes – Add New.

In the search box to the right, type in ‘Astra.’

Then, hover your cursor over the Astra theme and click Install, followed by Activate.

4. Set Up the Astra Theme and Choose a Template

Once you’ve activated your theme, you’ll find a notification at the top of your dashboard with a button labeled Get Started.

Click that button to launch the Astra setup wizard.

After skipping past the introductory video, you’ll first be asked to select a page builder to create your site.

We recommend using Elementor because it offers a wealth of tools and website elements that are a breeze to set up and customize to your liking.

You can also choose to use the standard in-built WordPress block editor or Beaver Builder.

To help you choose which tool is right for you, we put together this guide to the 9 best WordPress page builder plugins.

Next, you’ll be able to pick the template you want to use for your portfolio site.

Astra has well over 200 templates to choose from, but for this tutorial, we’re going to use the template called ‘Freelance Artist’ because it’s the one that best suits this particular project.

After selecting your preferred template, you’ll be able to add a logo and choose a color scheme for your portfolio.

You’ll also have the option to change the fonts you want to use.

Once you’ve chosen your fonts and colors, you’ll be invited to sign-up for the Astra newsletter and also given the option to choose which template components you want to install.

To ensure your new portfolio looks exactly like the template demo, we recommend keeping all of these highlighted, though you may want to opt-out of sharing non-sensitive data if you’re concerned about privacy.

Having done all that, click Build My Website, and Astra will get to work on doing just that.

When it’s finished, your new site should look something like the image above and is ready to be customized.

5. Create Your Portfolio

By default, Astra installs the popular eCommerce platform WooCommerce which will allow you to not only showcase your work but also sell it directly from your website.

If you’re looking to make money from your art or design work, we’ll show you how to use WooCommerce to set up your portfolio.

If you’re only interested in showcasing your work without monetizing it right now, we’ll also look at some other popular WordPress portfolio plugins you can use to do just that.

How to Create a Monetized Portfolio with WooCommerce

First, select Products – Add New from your WordPress dashboard.

Give your product a name and enter a description that tells potential buyers about your work and encourages them to buy it.

Next, scroll down to the Product Data box and enter your pricing information.

You can also use this box to set shipping details and other advanced details. If you’re selling more than one of these products (for example, if you’re an artist who sells prints of their work), you can use the inventory tab to determine stock levels.

From here, you can navigate to the Product Image box to upload an image of your work. This will be the main image that appears in your portfolio/online store.

From there, you can assign categories and tags to your product to help visitors find what they’re looking for when they navigate your site.

Finally, scroll to the Product Short Description box where you can add a few lines with key details about your piece such as the size, medium, or anything else you think people may need to know to help them decide whether to purchase it or not.

When you’re done, hit publish and you should have something which looks like the image above.

Finally, return to your WordPress dashboard and select WooCommerce. Here, you can configure your online store so that you can accept payments for your work.

To help you navigate that process, check out the tutorial in our complete guide to WooCommerce.

How to Create a Portfolio with Visual Portfolio

If you’ve decided that monetizing your work isn’t a priority right now, you may find that a WordPress portfolio is a better option for you.

As with all things WordPress-related, there are countless options to choose from, but for this tutorial, we’re going to use one of our favorites, Visual Portfolio.

To access this plugin, navigate to Plugins – Add New from your WordPress dashboard and search for ‘Visual Portfolio.’

Click Install followed by Activate.

This will take you to the main Visual Portfolio dashboard with the menu items to the right.

To begin adding items to your portfolio, click Portfolio Items followed by Add New.

Just as with WooCommerce, your first task is to give your portfolio item a title and add any descriptive text that you want to include.

Elsewhere on this page, you’ll find the Featured Image box. This allows you to set the image that displays on your main portfolio page. By default, the featured image will also display on the page for this particular portfolio item.

If you’d prefer to use a different image on the item page, you can click on the checkbox at the bottom of the Featured Image box. To add a different image to your post, click in the main post body where you just added your descriptive text and type /.

This will bring up a menu of different options, including the ability to add a single image or a gallery of images.

When you’re done, hit publish and repeat this process for as many portfolio items as you want to add.

How to Display Your Portfolio Items

When you start adding portfolio items, Visual Portfolio automatically creates a dedicated Portfolio page showing the featured image from each item.

Clicking on any of the featured image thumbnails takes users to the individual page for that item.

If you want to display your portfolio as part of an existing page such as your homepage, that’s also an option.

To do this, you’ll first need to ensure that portfolio items are enabled in Elementor by going to Elementor – Settings and clicking on the checkbox next to ‘portfolio items.’

Next, navigate to Visual Portfolio – Saved Layouts – Add New.

Give your layout a name and select images.

You can then add all of the portfolio images that you want to include in your layout.

With that done, click continues to choose a style for your portfolio and then hit publish.

Next, go to Pages – All Pages and select the page that you want to add to your portfolio. Click ‘Edit With Elementor.’ to open up the Elementor page builder.

In the Elementor menu on the left of the screen search for the Visual Portfolio widget.

Click on that widget and drag it into place on your page.

In the left-hand menu, select the saved layout you just created and click ‘update.’

Your portfolio items will now be shown on your page. Again, clicking on any of the individual items will bring up the page for that item.

6. Create and Customize the Rest of Your Site

Your portfolio may be the main attraction of your new website, but it’s not the only part. You’ll also want to add other pages such as:

  • An ‘About Me’ page to tell visitors more about your life and work
  • A contact page so that visitors can get in touch with you
  • A services or commissions page if you want to use your site to attract clients.

To do this, go to Pages – Add new and then click ‘Template Kits.’

This will bring up a catalog featuring scores of pre-made templates for every different type of web page.

If you wanted to create your About page, for example, searching the template kits catalog will bring up a range of attractive templates.

When you’ve found the one you like the most, simply click on it and then select ‘import template.’

Once your template has been edited, open it in Elementor by clicking the ‘Edit With Elementor’ button.

This will bring up the easy-to-use drag-and-drop page builder which you can use to customize every section of your template.

To edit an element, simply click on it to bring up multiple customization options, or drag new elements into place from the left-hand menu.

To learn more about Elementor and how to use it, check out our comprehensive Elementor guide here.

Repeat this for as many pages as you need to add to your site, remembering to click ‘save’ and ‘publish’ as you go along.

7. Add Menus

Having created all of your pages, you’ll need to make sure your visitors can access them. This means adding them to your navigation menu.

To create your navigation menu, head to Appearance – Menus.

The main navigation menu that runs along the header of your website should be displayed by default.

You can add pages, blog posts, categories, and custom links to your menu by selecting them from the left-hand menu and clicking ‘Add to Menu.’

To remove or edit a menu item, simply click on it. Doing so gives you the option to change the name that is displayed for that item in the menu, rearrange the position of that item in the menu, or delete it altogether.

When you’re happy with your menu, click ‘save menu’ and you’ll see that the menu you just created is now shown in your website header.

Other Tools You May Want to Include On Your Portfolio Site

Having followed the seven key steps above, you’ll have successfully created your new portfolio website.

That said, there are a few other essentials you may want to add to give yourself the best chance of attracting new visitors and achieving whatever goals you have in mind for your website.

These tools include:

Image optimizer

The very nature of most portfolio sites means that they’re going to contain a lot of images. The problem with this is that uploading lots of large image files can negatively affect your site speed, slowing down the amount of time it takes pages to load on users’ browsers.

One way to counter this is to install an image optimization plugin that reduces the size of your images so that they load faster without compromising the quality of those images.

Some of our favorite image optimization tools include:

You can discover more options in our list of the best image optimization plugins for WordPress.

Email Marketing

Creating an email newsletter is an effective way to build an audience for your work and drive traffic to your website.

Tools like SendinBlue can be connected to your WordPress site and give you everything you need to attract email subscribers from your site and send them attractive, optimized newsletters.

Other email marketing tools we recommend include:

For more options, see our guide to the 11 best WordPress mailing list plugins.

Security

As we mentioned earlier, adding an SSL certificate to your website is an effective way to ramp up the security of your portfolio, but there’s still more that you may need to do to ensure your site is as safe as possible for your visitors.

Security plugins like Malcare help you tighten up your portfolio website to keep cybercriminals and site-destroying viruses out, ensuring maximum protection for you, your visitors, and any data (contact information, payment details, etc) that they may transfer to you via your site.

Other popular security plugin options include:

How to Build a Portfolio Website: Next Steps

By now, you’ve learned everything you need to know to build a professional portfolio site to help you showcase your work and advance your career as a creator, but if there’s one final piece of advice we could leave you with, it’s this:

Launching your website is only the first step.

From here, your next step is to start letting people know that your website exists, driving traffic (visitors) to that site, and building up an audience.

If that sounds like a daunting step, don’t worry, we’re not about to let you leave without arming with you the tools, techniques, and strategies you need to attract some serious attention to your portfolio.

Check out our top 20 SEO tips for WordPress users to discover how you can use Search Engine Optimization to drive more traffic to your site.


26 thoughts on “How to Build a Portfolio Website from Scratch

Leave a Reply

Your email address will not be published. Required fields are marked *