·

How to Create a Portfolio Website to Promote Your Business

This page may contain links from our sponsors. Here’s how we make money.

A portfolio website is an essential tool for creative professionals like web designers, graphic designers, developers, and marketing specialists. Whether you’re a freelancer or running an agency, having an effective portfolio website is the best possible advertisement for your business.

Most potential clients will judge creative professionals based on the quality of their portfolio site itself, not just the work samples that are showcased on the site. Obviously, you’ll want to be sure to give your own portfolio plenty of attention and care so it’s effective at turning visitors into paying clients.

Creating Your Portfolio

In this article, we’ll take a look at the step-by-step process you can follow to create a portfolio website that will help build your business. Setting up the site is quick and easy (just a few minutes), and then you’ll need a couple of hours to customize the content of your site with your own text and images. In the end, you’ll have a professional portfolio that’s sure to make a strong impression on clients.

Here’s a preview of what we’ll be creating:

Preview of Portfolio Website Built with Divi

To build this beautiful portfolio in no time at all, we’ll be using the Divi WordPress theme from Elegant Themes. Divi is one of the most popular WordPress themes in the world and it comes with more than 100 pre-designed website packs. This one is called “Web Freelancer” and there are 9 different page templates that make it easy to create an amazing portfolio site very quickly and easily.

Setting up the site is a breeze, then you’ll just need a little bit of time to replace the filler text and images with your own content. We’ll go through everything below.

What You’ll Need

To set up this portfolio site, you’ll need:

You can use your own domain name if you already have one. If you don’t have a domain name yet, you can register the domain when you set up the hosting account. We recommend hosting from Bluehost because their prices are as good as you’ll find anywhere, they offer helpful customer service 24/7, and they are reliable.

Installing WordPress

Bluehost also makes it extremely easy to get your WordPress-based website set up. If you’re not familiar with WordPress, it’s the world’s most popular content management system (CMS). You can use WordPress to set up and maintain your website, and it’s free to use.

Hosting plans with Bluehost start at just a few dollars per month, so it’s extremely affordable. Please see our article How to Install WordPress, which walks you through the process of signing up for hosting with Bluehost and getting WordPress set up. It will take just a few minutes of your time to take care of that part of the process, and then you can return to this page and we’ll go through the steps of setting up the portfolio website.

The Divi Theme

There are a lot of different WordPress themes available (you can see our collection of the best WordPress portfolio themes if you’d like to check out some more), but Divi is our top recommendation. It’s an extremely flexible theme that allows you to create your own custom designs and layouts with a simple drag-and-drop editor, no coding required. It also comes with a layout library that includes a huge, and constantly growing, selection of pre-designed templates. We’ll be using one of those templates for this tutorial, but there are several others that would be appropriate for portfolio websites. You can view the selection of pre-designed templates here.

To get access to Divi, you’ll need to purchase a membership to Elegant Themes, which costs $89 per year or $249 for lifetime access. As a member, you’ll get access to both themes from Elegant Themes (Divi and Extra), as well as all three plugins that they offer.

Elegant Themes provides one of the best values in the WordPress community. Their standard license allows you to use the themes and plugins on an unlimited number of websites, which means you don’t have to upgrade to a more expensive plan if you have multiple websites. You can also use the themes and plugins on client websites at no extra cost, which is an incredible deal if you design or set up websites for clients.

We love Elegant Themes because the quality of design is outstanding, the selection of templates is better than you’ll find with any WordPress theme, and Divi is an incredibly powerful and flexible theme. Elegant Themes also offers a 30-day money-back guarantee, so you can try it risk-free.

Step 1: Installing the Divi Theme

Now that we’ve looked at the details of what we’ll be doing, it’s time to get started! You’ll need to have your web hosting already set up and WordPress installed on your domain. If you haven’t done that yet, please refer to our article How to Install WordPress, and then come back to this step when you’re done.

Head over to Elegant Themes and purchase a membership. It doesn’t matter whether you purchase a one-year membership or a lifetime membership. The lifetime membership is an amazing deal (I’ve had the lifetime membership for several years), but you may want to try the one-year membership first to make sure you like it.

After you’ve purchased the membership, login to your account and you’ll be able to download Divi. From the member’s area, click on the button to download the Divi theme.

Downloading Divi

Next, login to your WordPress dashboard with the username and password you created when you installed WordPress. The WordPress dashboard URL will be yourdomain.com/wp-admin/.

Once you’re logged in to WordPress, click on Appearance > Themes in the left sidebar.

Appearance > Themes

Here you’ll see a list of the themes that are currently installed. Click on the “+” icon to add a new theme.

Add a New Theme

Next, click on the “Upload Theme” button near the top of the screen.

Upload a Theme

Navigate your computer to find the Divi zip file you just downloaded from Elegant Themes and select it. Then, click the “Install Now” button.

Install Now

After the theme is uploaded, you’ll see a screen like the one shown below. Click on the link to activate the theme.

Activating the theme

Step 2: Creating Your Home Page

When you install WordPress, it will probably already have an About page and a Privacy Policy page. Click on “Pages” in the left sidebar and you’ll be able to see the list of pages on your site. Click on the “Add New” button to add a new page.

Adding a new page

Now, you’ll see the screen for creating your new page. We’ll start with the Home page, so type “Home” for the title and click on the “Use Divi Builder” button.

Create Home Page

Next, you’ll see a screen like the one below. We’re going to be using a pre-designed template, so click on the button to browse the pre-made layouts.

Browse Pre-Made Layouts

Here you can browse the different layouts that are available. Elegant Themes is always adding new layout packs, which is another perk of having a membership. You can use any layout you want, but I’m going to be using one that was created specifically for portfolio websites. To find it, tick the box for “Art & Design“.

Layout Library

Scroll down until you see the “Web Freelancer” layout pack and click on it.

Web Freelancer

The layout packs from Elegant Themes include templates for several different pages so you can easily create a complete website. The Web Freelancer layout pack includes templates for nine different pages. Since we’re working with the Home page right now, click to select the Home page and then click the “Use This Layout” button.

Use This Layout

You’ll need to wait a minute while the page and template are set up. Once it’s completed, you’ll be able to see the page and edit it.

Editing the Home Page

The power of the pre-made page layouts is that you can get your site set up extremely fast (plus, they look great). When the page is created, it uses filler text and images. You’ll need to go back and replace that with your own content.

Changing text is extremely easy. Simply click on the text you want to change to activate the cursor. Then delete the text and type in your own text. Scroll down and replace all of the text on the page as needed.

Replacing images in the design is also easy. Some of the images and icons can be kept, but you’ll want to replace some of the images. For example, if you wanted to replace the image that shows up above the fold, click on the image and then click on the gear icon, as shown below.

Changing an Image

That opens a popup and you’ll simply click on the image to replace it. Browse your computer and select the image you want to upload (in the case of this particular image, it should be a transparent PNG file to maintain a similar look to the template).

Replacing an Image

Continue with that process until you’ve updated all of the text and images on the Home page that need to be changed. When you’re done, click on the “Publish” button at the bottom, or click to “Save Draft” if you’re not ready to publish the page yet.

Publish

If you don’t see the publish button, click on the button at the bottom center of the screen (with three dots) and it will open up more options, including the Publish button.

Publish Home Page

Step 3: Creating Your Other Pages

Next, you’ll follow the same process to create and edit other pages on the site. Go to “Pages” in the left sidebar and click the button to “Add New Page“. Give the page a title and click the button to use the Divi Builder. I’ll add a Services page since that is standard with most portfolio sites.

Again, click to browse the pre-made layouts, tick the box for “Art & Design” and scroll down to the “Web Freelancer” layout pack (or you can search for “Web Freelancer”). Since I’m creating a Services page, I select the Services template and click the “Use This Layout” button.

Services Page

Now, I’ll go through the same process of replacing the text and images throughout the page, as needed. After that, I’ll do the same thing for the other pages I want to set up on the site: Portfolio, About, and Blog.

Step 4: Navigation

Now that the pages are set up and published, I can go ahead and adjust the navigation. From the WordPress dashboard, go to Appearance > Menus in the left sidebar.

Menus

Here, we’ll be setting up the header navigation menu. Tick the boxes of the pages you want to add to the menu and then click the “Add to Menu” button.

Creating Menu

Next, make sure the box is “Primary Menu” box is checked and rearrange the links to get them in the order you want to be displayed on the site (drag them and drop them).

Menu Setup

When you’re done, click the blue “Save Menu” button and it will be live on your site.

And now that all of your main pages are set up, go back and update the links for the buttons throughout the pages. For example, on the Home page, there are two buttons above the fold and you’ll want to make sure those are linking to the right pages.

Hover the mouse over the top part of the Home page and click on the gear icon.

Gear Icon

That will open up some settings for this module. Scroll down until you see “Link” and you’ll see two fields to enter URLs for the destination of the buttons.

Button Link

Paste in the URLs that you want those buttons to link to. Follow the same process for any other buttons or links that need to be updated.

Step 5: Setting the Front Page

Earlier, we create a page and called it “Home”, but we need to change the settings so that page actually shows up as the home page or front page.

In the WordPress dashboard, go to Settings > Reading.

Reading Settings

Tick the radio button to use a static page as your homepage. Then, use the dropdown to select the Home page as the homepage and the Blog page (if you set up a Blog page) as the posts page.

Setting the Front Page

Now that we’ve done that, let’s take a look at the live homepage.

Live Site

Not bad!

You may have noticed, the default Divi logo is still in the header, so let’s change that. In the WordPress dashboard, click on Divi in the left sidebar and it will open up some theme options. The first field is for your logo. Click on the “Upload” button and find your logo on your computer.

Upload Logo

When you’ve done that, scroll down to the bottom of the page and click the button to save the changes. Now, if you go to the live site you should see your logo instead of the default Divi logo.

Site with Logo

Step 7: Customize the Site/Design

WordPress and Divi also give you plenty of options for customizing the design. From the WordPress dashboard, go to Appearance > Customize.

Customize

This will open the Customizer. There are far too many options to cover in this article, but if you scroll through the settings you’ll see many things you can customize, like colors, fonts, and layouts.

Customizer

It’s important to note that changes made with the customizer will not go live on your site until you click the “Publish” button. You’ll be able to see the changes in the preview right away but you need to click “publish” for the changes to be applied to your site. That gives you the freedom to experiment without fear of messing up your site.

Customizer Publish

Wrapping Up

Congratulations, your site is live! This tutorial really only touches on the basics of what you can do with Divi. Elegant Themes provides extensive documentation and I’d encourage you to watch some of their videos and read the articles to learn about the features and functionality of the theme. You’ll be able to create an amazing portfolio site that will help to attract clients.

If you’ve just been reading and not following along with your own site, be sure to get started by creating your hosting account with Bluehost and following along with our article How to Install WordPress.

Get the Free Resources Bundle