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:
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.
Use our link to get a 20% discount and grab an even better deal at Elegant Themes.
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 (use this link to get a 20% discount). 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.
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.
Here you’ll see a list of the themes that are currently installed. Click on the “+” icon to add a new theme.
Next, click on the “Upload Theme” button near the top of the screen.
Navigate your computer to find the Divi zip file you just downloaded from Elegant Themes and select it. Then, click the “Install Now” button.
After the theme is uploaded, you’ll see a screen like the one shown below. Click on the link to activate 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.
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.
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.
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“.
Scroll down until you see the “Web Freelancer” layout pack and click on it.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
Now that we’ve done that, let’s take a look at the live homepage.
Not bad!
Step 6: Changing the Logo
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.
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.
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.
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.
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.
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.
