How to Make a Portfolio in WordPress [UPDATED 2021]

How to make a portfolio in WordPress

Whether you are a photographer, designer, freelance developer, a creative portfolio website is a must. 

Even if platforms like Behance and Dribbble have emerged recently and are used to show off designers’ portfolios, you still need a website. Because your work doesn’t fit in a box. You need something to match your personality, and to be customized according to your own vision. 

By the end of this article, you’ll find out which are your options in WordPress for showcasing portfolios and which are the most popular WordPress tools to bring your portfolio to a whole new level.

But before we get into the technicalities, let’s look at a friendly tips and tricks checklist for a beautiful and smart portfolio.

 

Tips and tricks when creating your portfolios in WordPress

The main purpose of a portfolio website is to show off one’s skills and work. Before getting into designing your website, you should definitely make a plan and do some research for inspiration. 

In your portfolio you can include:

  • Logos of clients you’ve worked with
  • Case studies
  • Project descriptions
  • Photographs
  • Testimonials 

Now, If you need some inspiration, I definitely recommend this website: SaaSpages.xyz. It can provide inspiration for every section of your website, from header to footer.

Let’s check 3 examples they showcase.

This case study features a video, a logo, a testimonial, and a headline that makes you really curious.

Website portfolio example 1

The testimonials section below has a memorable headline: “Wall of love”, really creative I’d say. They don’t use fluff superlatives. They keep it simple and convincing with their copy.

Website portfolio example 2

This projects portfolio looks simple. It uses tags to filter different topics and also companies’ logos.

Website portfolio example 3

The photography portfolio below is just stunning. As a photographer myself, I know that having a unified vision and style is helping a lot the portfolio (this does not apply to designers and other freelancers).

Portfolio example for photographers

Source: rotundperfect.ro

 

Now, as per the tips and tricks, here’s the tiny checklist I promised:

  1. Make sure to showcase diverse projects you’ve worked on. Don’t go for a certain type of project (unless you want to have a niche approach).
  2. Make sure your website is mobile-friendly. According to Statista, mobile accounted for approximately half of the web traffic worldwide in the second quarter of 2020. If you’re interested in ranking high in Google’s search results, you should know that in March 2020 Google announced mobile-first indexing for the whole web. This means that Google predominantly uses the mobile version of a website for ranking.
  3. Present testimonials from former clients. We live in a world where peer reviews are more important than ever. Recommendations are your best marketing channel, and it’s practically free.
  4. Use videos and images as well to catch the visitors’ attention. Video has the power to create engagement and it can make your brand stand out.
  5. Experiment with full-width visuals if you are a photographer and love minimalism. Full-width designs are a great touch when mages are more important than text.
  6. Don’t forget to add an “About me” section, where visitors can get to know you better, your vision and objectives, your experience.
  7. You can create separate pages for each project. The details you’ll want to include will match the type of portfolio you need. If you’re a web designer, you’ll want to provide the link for the websites you’ve built, together with some project description in terms of technology, scope, timeframe, challenges. If you’re a photographer, you’ll want to include information on the topic, the subjects, the location, and the date of the event. A visual artist will include information about the assets used, the vision, perhaps inspiration, and even the price of the item.

Now that we’ve set up these things straight, it’s time to go to WordPress and identify the tools you need for your portfolio website.

 

How to make a portfolio in WordPress

Now, the first thing you should do is choose a theme that has the features that match your expectations or get close enough.

When creating a portfolio in WordPress you will make use of one of the following:

  • a slider. A slider is any web element that rotates through. It can contain images, videos, images and text, etc.

sliders visual cuesSource: rotundperfect.ro

In the example below, the slider is used to show off current promotions.

slider example

Source: limetreekids.com.au/

  • a carousel. Now, not everyone agrees on this definition: carousels are a type of slider that do not show entire large images at a time, but multiple ones in a row. Some web designers say the carousels and sliders are one and the same. When using WordPress, you will see them treated differently. both sliders and carousels make use of visual cues in order to show the user that they can move left-right and uncover new images, etc.carousel example
  • a gallery. A gallery is a collection of images or videos presented in grids.

gallery example

Next, it’s time for some design.

How to make a portfolio in WordPress using the Default Editor

As you might already know by now,  the Default WordPress Editor works with blocks (the so-called Gutenberg blocks). You can have blocks for paragraphs, tables, custom HTML, and…galleries. At the moment we do not have options for sliders or carousels.

Let’s add a gallery block to a page.

We start by heading to the WordPress dashboard -> Pages. You could either add a new page or edit an existing one.WordPress pages

Next, from the “+” icon in the upper-left, open the blocks panel.

WordPress blocks

Select the gallery block.

WordPress gallery block

 

Drag the block to your desired place inside the page.

Edit the gallery

When you select the block, you will be able to see on the right a panel where you can add some additional CSS classes to this gallery block. Next, you could add styling to these classes using custom CSS. We’ve written an article on the topic here. Now, you can add images to the gallery using the “Upload” or “Media Library” options”.

Now, as you can see, there are no gallery customization options available. The block features are still a work in progress. If you need some extra enhancements, you could go for a WordPress gallery plugin that is Gutenberg-ready, such as Envira or Kadence. Kadence also has options for carousels and sliders.

Besides blocks, in the Editor, you’ll also find patterns. You can access them from the same “+” sign in the upper-left. Patterns are are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.

WordPress patterns

The WordPress folks have just released a pattern directory from where you could select some nice gallery layouts.

WordPress patterns collection

In order to add them to your design, just hover over the pattern until you see the “Copy” button.Copy the WordPress gallery pattern

Next, go to your page, and just right-click and paste the design.Paste the WordPress gallery pattern

From the panel on the right, you can make some additional edits such as padding, opacity, overlay, minimum height, etc.

If you select an image from the gallery, on top of it you’ll see a menu with some extra editing options. In here you can replace the image, crop it, add text on it, align it, etc.

Make changes to the images in the gallery

 

And that was all for the Default Editor portfolio editing options.

How to make a portfolio in WordPress using page builders

For the purpose of this exercise, we are using the multipurpose Colibri PRO WordPress theme and the Colibri page builder

Why am I using a WordPress website builder? Because it gives me drag and drop functionalities and the design experience is just piece of cake.

In the theme-builder combo I have these options for creating portfolios:

  • Using the gallery or portfolio blocks
  • Using the sliders and carousels components

Now, as per the difference between blocks and components…The blocks are pre-defined designs that can be used as whole website sections (portfolio, features, the team). The components, on the other hand, are tinier items that can help in building new blocks (buttons, headings, videos, images, etc.).

Let’s take them one by one.

 

How to design a WordPress portfolio using the portfolio or gallery blocks (not the same as Gutenberg blocks)

With builders, everything is almost a click away. You just need to click on the “+” sign and open the blocks and components panel, and scroll down till you find the gallery or portfolio block.

The portfolio block can contain:

  • A header
  • A description
  • Images with or without description

WordPress portfolio block

You can insert your block by positioning yourself in the website place where you want the new section to be. Next, click on the block itself from the left-hand side panel. You can click on the desired block and press the “delete” key on your keyboard if you want to place something else instead.

 

You can always mix a portfolio block with some other components, such as text or video. The cool thing is that you can even save your block to reuse it in other designs.

Mix portfolio block with components in WordPress

Reusable blocks

If you’re going for a gallery block, there are multiple options as well. Galleries are usually the choice when you want to list photos.

WordPress photo gallery block

No matter the choice, you can always customize your portfolio using the options from the left-hand side panel.

There are 3 options: layout, style, and advanced.

You can change spacing, borders, shadows, typography, and colors, and even add your own CSS. Everything is easy and intuitive.

portfolio and gallery customization

How to design a WordPress portfolio using the slider and carousel components

As shown earlier, components can be found near the WordPress blocks. When you hit the “+” sign you’ll open the blocks and components panel. From components, you can either type in “slider” or “carousel” or just scroll until you find them. There’s also an option for “Image collage”. All you have to do now is drag and drop the component on the website on the right.

WordPress components to be used for portfolio design

If you go for a slider, you can:

  • Make image adjustments in terms of size, positioning
  • You can insert self-hosted videos or Youtube URLs
  • Align content and visuals in the same slide
  • Change colors and typography
  • Add fading effects
  • Select which elements should show up on mobile devices
  • Style the arrows that help sliders “slide” 🙂

 

The same goes for the carousel. This is why a page builder is so versatile. 

WordPress sliders can be used in website portfolios

Here’s a more in-depth article we wrote on sliders, with design tips included.

 

How to make a portfolio in WordPress using plugins

Before getting into this topic, I want to clear something for you. If you can avoid plugins, do it. Lots of things require plugins in WordPress. The more plugins you have, the slower your website’s loading time. So, choose wisely. 

As I said, a page builder can give you options and functionalities that a lot of plugins offer, without having to worry about lots of updates and performance and security issues.

Now, first thing first. Head over to WordPress.org, the plugins section.  Next, type in “Portfolio”.

When choosing your plugin make sure to check:

  • Reviews and popularity
  • If it has the features you need
  • Go to the plugin’s website and check the demos
  • Start a free trial if possible

As far as the WordPress plugin installation goes, it’s all in our tutorial:

 

 Conclusions

A stunning WordPress portfolio site can set you apart from your competition. Don’t underestimate it. 

This article just proved how easy it is to make a portfolio in WordPress. The actual setup will take less than the process of figuring out what to include in your portfolio.

This being said, start building your portfolio today!

 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE