How to Build a Portfolio Website from Scratch

Whether or not you’re an artist, a designer, or a photographer, you’ve probably been instructed that studying the best way to construct a portfolio web site might be an efficient approach to promote and monetize your work, in the end serving to you to show what you’re keen on right into a worthwhile enterprise. 

That’s actually true. Proudly owning your personal on-line presence may also help you attain much more potential followers and earn much more commissions than merely selling your self through different channels similar to Fb and Instagram. 

Nevertheless, if you happen to’ve by no means truly created an internet site on your work earlier than, studying the place to start out can current a severe problem.

That’s why we put collectively this complete information, providing clear, step-by-step directions on the best way to construct a portfolio web site from scratch.

Under, you’ll study the very best instruments to create a shocking portfolio, the duties you’ll want to finish to place that portfolio collectively, and even how to make sure you appeal to guests to your new web site.

1. Select a Net Internet hosting and Area Identify Bundle 

The web site you’re about to create is actually a group of various recordsdata similar to photos, internet pages, stylesheets, and different necessities which come collectively to current your work to the world through an internet browser.

So, the very first thing you’re going to wish to construct your portfolio web site is a spot to retailer all these recordsdata. That is the place hosting is available in.

For the uninitiated, hosting is just about what it seems like: A server (or usually, a part of a server) that hosts the recordsdata that make up your web site.

You’re additionally going to wish a approach to direct folks to your web site. That is the job of your area identify.

You possibly can consider your area identify as merely being your internet handle.

For instance, WPLift.com is our area identify, similar to Google.com is the area identify of our favourite search engine and NYTimes.com is the area identify of, you guessed it, the New York Occasions.

To be sincere, saying a site identify and an internet handle are the identical is oversimplifying issues a little bit, nevertheless it’s actually the best approach to perceive it if you happen to’re a first-time web site builder.

The place to Get Net Internet hosting and a Area Identify

There are numerous corporations on the market that promote hosting and domains. You possibly can examine a few of our favorites in this guide to our top cheap web hosting providers in addition to this listing of the best-managed WordPress hosts.

For this tutorial, we’re going to go along with Hostinger for 4 key causes:

1. They provide a few of the most inexpensive internet hosting and area packages on the internet
2. They’re extremely straightforward to make use of, making them a fantastic selection for newcomers
3. Their service is quick and dependable, which means your web site will all the time be on-line and ship nice customer experiences.
4. They supply a free SSL certificates and robotically add it to your web site.

An SSL certificates is a crucial instrument for conserving your web site safe, particularly if you happen to plan to just accept funds on your web site, so the truth that Hostinger provides one to your web site with no effort or expense in your half makes them a fantastic selection. For those who’re undecided why we advocate trying out our complete beginner’s guide to SSL certificates.

How one can Arrange Your Internet hosting and Area

To arrange your internet hosting and area package deal with Hostinger, first, go to hostinger.com/web-hosting and choose one of many three obtainable packages.

Subsequent, create an account by coming into your e mail handle or sign-up with both your Google or Fb credentials.

You possibly can then enter your cost particulars to pay on your plan.

Assuming you’ve bought a package deal with a free area identify (which we advocate you do), you’ll be capable of select an internet handle on your web site similar to myawesomeportfolio.com, add it to your package deal.

With that achieved, you’ll be taken to your Hostinger dashboard and may start the method of making your web site.

2. Set up WordPress on Your Net Host

WordPress is an immensely standard web site platform that powers over 43% of all the world’s websites.

We’ll be utilizing WordPress to create your web site as a result of it’s extremely straightforward to arrange and use, comes with an infinite assortment of customizable themes which you need to use to design a lovely portfolio, and likewise has a formidable array of add-on instruments generally known as WordPress plugins which you need to use to do every thing from displaying your work to promoting it and making a living.

Earlier than you get to all that, you’re first going to wish to put in WordPress in your host. Right here’s how to do this with Hostinger:

Out of your important Hostinger dashboard, scroll down till you see the listing of choices labeled ‘Web site’ and click on ‘Auto Installer.’

On the following display, choose WordPress.

It will carry up a pop-up window the place you possibly can enter the identify of your web site and create a username and password to log into it.

We additionally advocate clicking the ‘Superior’ choice and guaranteeing that the web site goes to be put in underneath the ‘https’ model of your area identify, as that is the one the place the aforementioned SSL certificates is lively.

From there, all that’s left to do is click on the ‘set up’ button on the following pop-up window that seems, and WordPress will robotically be put in for you.

3. Log into Your WordPress Dashboard

As soon as WordPress is put in, Hostinger will direct you straight to the login web page the place you possibly can enter the username and password you created earlier.

In future, you possibly can entry the login web page by including /wp-admin to the top of your area identify as in myawesomeportfolio.com/wp-admin.

It will take you to your important WordPress dashboard, and it’s from right here that you just’ll begin to put collectively the remainder of your web site.

3. Select Set up Your WordPress Theme

There are literally thousands of each free and premium WordPress themes which you need to use to customise the look, structure, and total type of your new portfolio web site.

For this tutorial, we’re going to make use of the extremely standard Astra theme for 4 key causes:

1. It’s the most effective free WordPress themes round, making it a really perfect selection if you happen to’re constructing a portfolio web site on a price range.
2. It’s quick, light-weight, and responsive, which means it could actually make an enormous distinction on the subject of providing the absolute best consumer expertise on your guests.
3. It’s suitable with high WordPress web page builders like Elementor and Beaver Builder which you need to use to construct your whole web site with zero technical information or coding potential required.
4. It comes with an abundance of pre-made web site templates, lots of that are excellent for portfolio websites.

For those who don’t just like the look of Astra, you’ll find extra nice choices on this information to the 15+ best WordPress starter themes or this list of 40 amazing mobile-responsive themes.

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

How one can Set up Astra on Your WordPress web site

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

Within the search field to the fitting, sort in ‘Astra.’

Then, hover your cursor over the Astra theme and click on Set up, adopted by Activate.

4. Set Up the Astra Theme and Select a Template

When you’ve activated your theme, you’ll discover a notification on the high of your dashboard with a button labeled Get Began.

Click on that button to launch the Astra setup wizard.

After skipping previous the introductory video, you’ll first be requested to pick out a web page builder to create your web site.

We advocate utilizing Elementor as a result of it presents a wealth of instruments and web site components which might be a breeze to arrange and customise to your liking.

It’s also possible to select to make use of the usual in-built WordPress block editor or Beaver Builder.

That will help you select which instrument is best for you, we put collectively this information to the 9 finest WordPress web page builder plugins.

Subsequent, you’ll be capable of decide the template you need to use on your portfolio web site.

Astra has properly over 200 templates to select from, however for this tutorial, we’re going to make use of the template referred to as ‘Freelance Artist’ as a result of it’s the one which most closely fits this explicit mission.

After deciding on your most popular template, you’ll be capable of add a emblem and select a coloration scheme on your portfolio.

You’ll even have the choice to vary the fonts you need to use.

When you’ve chosen your fonts and colours, you’ll be invited to sign-up for the Astra e-newsletter and likewise given the choice to decide on which template parts you need to set up.

To make sure your new portfolio appears precisely just like the template demo, we advocate conserving all of those highlighted, although it’s possible you’ll need to opt-out of sharing non-sensitive knowledge if you happen to’re involved about privateness.

Having achieved all that, click on Construct My Web site, and Astra will get to work on doing simply that.

When it’s completed, your new web site ought to look one thing just like the picture above and is able to be custom-made.

5. Create Your Portfolio

By default, Astra installs the favored eCommerce platform WooCommerce which can can help you not solely showcase your work but additionally promote it immediately out of your web site.

For those who’re trying to make cash out of your artwork or design work, we’ll present you the best way to use WooCommerce to arrange your portfolio.

For those who’re solely keen on showcasing your work with out monetizing it proper now, we’ll additionally have a look at some other popular WordPress portfolio plugins you need to use to just do that.

How one can Create a Monetized Portfolio with WooCommerce

First, choose Merchandise – Add New out of your WordPress dashboard.

Give your product a reputation and enter an outline that tells potential consumers about your work and encourages them to purchase it.

Subsequent, scroll right down to the Product Information field and enter your pricing info.

It’s also possible to use this field to set delivery particulars and different superior particulars. For those who’re promoting multiple of those merchandise (for instance, if you happen to’re an artist who sells prints of their work), you need to use the stock tab to find out inventory ranges.

From right here, you possibly can navigate to the Product Picture field to add a picture of your work. This would be the important picture that seems in your portfolio/on-line retailer.

From there, you possibly can assign classes and tags to your product to assist guests discover what they’re on the lookout for after they navigate your web site.

Lastly, scroll to the Product Brief Description field the place you possibly can add a number of traces with key particulars about your piece similar to the dimensions, medium, or the rest you assume folks could have to know to assist them determine whether or not to buy it or not.

While you’re achieved, hit publish and you need to have one thing which appears just like the picture above.

Lastly, return to your WordPress dashboard and choose WooCommerce. Right here, you possibly can configure your on-line retailer so to settle for funds on your work.

That will help you navigate that course of, try the tutorial in our complete guide to WooCommerce.

How one can Create a Portfolio with Visible Portfolio

For those who’ve determined that monetizing your work isn’t a precedence proper now, it’s possible you’ll discover {that a} WordPress portfolio is a greater choice for you.

As with all issues WordPress-related, there are numerous choices to select from, however for this tutorial, we’re going to make use of certainly one of our favorites, Visible Portfolio.

To entry this plugin, navigate to Plugins – Add New out of your WordPress dashboard and seek for ‘Visible Portfolio.’

Click on Set up adopted by Activate.

It will take you to the principle Visible Portfolio dashboard with the menu gadgets to the fitting.

To start including gadgets to your portfolio, click on Portfolio Objects adopted by Add New.

Simply as with WooCommerce, your first process is to provide your portfolio merchandise a title and add any descriptive textual content that you just need to embody.

Elsewhere on this web page, you’ll discover the Featured Picture field. This lets you set the picture that shows in your important portfolio web page. By default, the featured picture may also show on the web page for this explicit portfolio merchandise.

For those who’d choose to make use of a special picture on the merchandise web page, you possibly can click on on the checkbox on the backside of the Featured Picture field. So as to add a special picture to your put up, click on in the principle put up physique the place you simply added your descriptive textual content and kind /.

It will carry up a menu of various choices, together with the power so as to add a single picture or a gallery of photos.

While you’re achieved, hit publish and repeat this course of for as many portfolio gadgets as you need to add.

How one can Show Your Portfolio Objects

While you begin including portfolio gadgets, Visible Portfolio robotically creates a devoted Portfolio web page displaying the featured picture from every merchandise.

Clicking on any of the featured picture thumbnails takes customers to the person web page for that merchandise.

If you wish to show your portfolio as a part of an current web page similar to your homepage, that’s additionally an choice.

To do that, you’ll first want to make sure that portfolio gadgets are enabled in Elementor by going to Elementor – Settings and clicking on the checkbox subsequent to ‘portfolio gadgets.’

Subsequent, navigate to Visible Portfolio – Saved Layouts – Add New.

Give your structure a reputation and choose photos.

You possibly can then add all the portfolio photos that you just need to embody in your structure.

With that achieved, click on continues to decide on a method on your portfolio after which hit publish.

Subsequent, go to Pages – All Pages and choose the web page that you just need to add to your portfolio. Click on ‘Edit With Elementor.’ to open up the Elementor web page builder.

Within the Elementor menu on the left of the display seek for the Visible Portfolio widget.

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

Within the left-hand menu, choose the saved structure you simply created and click on ‘replace.’

Your portfolio gadgets will now be proven in your web page. Once more, clicking on any of the person gadgets will carry up the web page for that merchandise.

6. Create and Customise the Remainder of Your Website

Your portfolio could also be the principle attraction of your new web site, nevertheless it’s not the one half. You’ll additionally need to add different pages similar to:

• An ‘About Me’ web page to inform guests extra about your life and work
• A contact web page in order that guests can get in contact with you
• A providers or commissions web page if you wish to use your web site to draw shoppers.

To do that, go to Pages – Add new after which click on ‘Template Kits.’

It will carry up a catalog that includes scores of pre-made templates for each completely different sort of internet web page.

For those who needed to create your About web page, for instance, looking out the template kits catalog will carry up a variety of engaging templates.

While you’ve discovered the one you want probably the most, merely click on on it after which choose ‘import template.’

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

It will carry up the easy-to-use drag-and-drop web page builder which you need to use to customise each part of your template.

To edit a component, merely click on on it to carry up a number of customization choices, or drag new components into place from the left-hand menu.

To study extra about Elementor and the best way to use it, check out our comprehensive Elementor guide here.

Repeat this for as many pages as you might want to add to your web site, remembering to click on ‘save’ and ‘publish’ as you go alongside.

7. Add Menus

Having created your entire pages, you’ll want to verify your guests can entry them. This implies including them to your navigation menu.

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

The primary navigation menu that runs alongside the header of your web site ought to be displayed by default.

You possibly can add pages, weblog posts, classes, and customized hyperlinks to your menu by deciding on them from the left-hand menu and clicking ‘Add to Menu.’

To take away or edit a menu merchandise, merely click on on it. Doing so offers you the choice to vary the identify that’s displayed for that merchandise within the menu, rearrange the place of that merchandise within the menu, or delete it altogether.

While you’re joyful along with your menu, click on ‘save menu’ and also you’ll see that the menu you simply created is now proven in your web site header.

Different Instruments You Might Need to Embrace On Your Portfolio Website

Having adopted the seven key steps above, you’ll have efficiently created your new portfolio web site.

That stated, there are a number of different necessities it’s possible you’ll need to add to provide your self the very best likelihood of attracting new guests and reaching no matter objectives you take into consideration on your web site.

These instruments embody:

Picture optimizer

The very nature of most portfolio websites signifies that they’re going to include a number of photos. The issue with that is that importing a lot of giant picture recordsdata can negatively have an effect on your web site velocity, slowing down the period of time it takes pages to load on customers’ browsers.

One approach to counter that is to put in a picture optimization plugin that reduces the dimensions of your photos in order that they load quicker with out compromising the standard of these photos.

A few of our favourite picture optimization instruments embody:

You possibly can uncover extra choices in our listing of the best image optimization plugins for WordPress.

E mail Advertising

Creating an e mail e-newsletter is an efficient approach to construct an viewers on your work and drive site visitors to your web site.

Instruments like SendinBlue might be linked to your WordPress web site and provide you with every thing you might want to appeal to e mail subscribers out of your web site and ship them engaging, optimized newsletters.

Different e mail advertising and marketing instruments we advocate embody:

For extra choices, see our information to the 11 best WordPress mailing list plugins.

Safety

As we talked about earlier, including an SSL certificates to your web site is an efficient approach to ramp up the safety of your portfolio, however there’s nonetheless extra that you could be have to do to make sure your web site is as protected as potential on your guests.

Security plugins like Malcare make it easier to tighten up your portfolio web site to maintain cybercriminals and site-destroying viruses out, guaranteeing most safety for you, your guests, and any knowledge (contact info, cost particulars, and many others) that they might switch to you through your web site.

Different standard safety plugin choices embody:

How one can Construct a Portfolio Web site: Subsequent Steps

By now, you’ve realized every thing you might want to know to construct an expert portfolio web site that can assist you showcase your work and advance your profession as a creator, but when there’s one closing piece of recommendation we may depart you with, it’s this:

Launching your web site is simply step one.

From right here, the next move is to start out letting folks know that your web site exists, driving site visitors (guests) to that web site, and increase an viewers.

If that seems like a frightening step, don’t fear, we’re not about to allow you to depart with out arming with you the instruments, strategies, and methods you might want to appeal to some severe consideration to your portfolio.

Try our top 20 SEO tips for WordPress users to find how you need to use Search Engine Optimization to drive extra site visitors to your web site.