WordPress Portfolio Tweaks

Plenty of professionals flock to WordPress due to its low learning curve and ample set of features. It’s the perfect solution for displaying your professional achievements – that is, if you know how to use it. If you’re not quite sure where to begin, let’s talk about some killer WordPress portfolio tweaks!

A great portfolio should meet three simple criteria – it should put the focus on your work, introduce yourself to prospective clients, and remain simple to navigate. Fortunately, all three are easy to achieve when using WordPress.

In this post, we’ve selected three live examples of stunning portfolios, and here we’ll teach you how to replicate some of their design tricks. Let’s dive in and look through these WordPress portfolio tweaks together:

3 Killer WordPress Portfolio Tweaks

A.H.A. Design

A.H.A. Design is a London-based design company focusing on architecture, product design, and web design. Although we can’t personally vouch for the quality of their work, their portfolio caught our eye thanks to its unique style.

A.H.A. Design portfolio

What makes this portfolio stand out?

  • A clean, uncluttered design.
  • The subtle highlighting of the Shop menu item.
  • The use of circles throughout the entire site to highlight A.H.A. Design’s past work.

Let’s elaborate a bit further on that last point. The first thing you’ll see on the main page is a giant circle that showcases previous works – the rest of the portfolio appears below as big circle blurbs, including simple hover animations.

Another aspect that makes this design choice stand out is the monochromatic color scheme throughout the site – the portfolio pieces are the only elements that have colors. This technique adheres to our rule about keeping the focus on your work. In fact, we like it so much we’ll try to pull off a similar effect using our Zerif Pro theme as an example.

WordPress Portfolio Tweaks #1: Use blurbs to showcase your work

The Zerif Pro theme enables you to replicate the effect we’ve just discussed using its Our Focus widgets, as seen below in an example taken from the live demo:

An example of the Our Focus section from the Zerif Pro live demo.

After installing and activating the theme, we went into the live Customizer (check out this tutorial if you’re rusty on how to use it) and modified the Our Focus widgets to display some example websites. To achieve this, we added some descriptive headers, removed the four original widgets, and replaced them with some of our own:

An animation of a portfolio section comprised of three round blurbs.

Notice the colored borders on each example? This is a simple hover animation coded into the Our Focus widgets by default!

SocioDesign

SocioDesign is another London-based design agency whose portfolio site piqued our attention due to its unique style. Let’s review our favorite parts.

SocioDesign portfolio

What makes this portfolio stand out?

  • A minimalistic design featuring eye-catching images of previous SocioDesign works.
  • Their simple layout, which keeps navigation easy.
  • The use of an asymmetrical grid to display part of a portfolio on the homepage.

WordPress Portfolio Tweaks #2: Use an asymmetrical grid system to make your work stand out

Image grids are a rather conventional design element these days – they’re efficient, but they can also get a bit monotonous. To change it up, designers sometimes break the mold a little by assigning different sizes to some of the images, such as the example from the SocioDesign homepage (visible above).

This serves two purposes – it breaks the monotony of a regular grid, and also establishes a visual hierarchy. This means we automatically assign more importance to the largest section of the grid. If you want to create a portfolio on WordPress, this technique can help to guide attention towards the projects you’re most proud of. We can replicate this effect using the Robo Gallery plugin:

After activating the plugin, this instructional video on the developer’s official YouTube channel will guide you through the process of creating custom (asymmetrical) layouts. Once complete, you can insert your new gallery onto any page by utilizing its corresponding shortcode.

You can also insert galleries by using the Add Robo Gallery button located above the WordPress editor. This enables you to select from all of the available options for creating your gallery, and will also add the shortcode for you:

An example of a Robo Gallery shortcode added using the corresponding button above the WordPress editor.

If you followed the custom layout tutorial we linked to above, the final result should look something like this (albeit with different images, of course):

An example of a gallery with a custom layout built using Robo Gallery.

Method

Finally, we come to Method. They’re a creative agency with an eclectic portfolio that’s impossible to ignore. Let’s check out its highlights below.

method porfolio

What makes this portfolio stand out?

  • The main header and the section below it on the homepage make great use of the CSS transform property to achieve some excellent effects.
  • The header also melds with the navigation bar thanks to its simple color scheme to make a strong first impression.
  • There are links to multiple case studies included on the first page.
  • There’s a strong call to action at the bottom of the homepage to close the deal.

WordPress Portfolio Tweaks #3: Use a simple color scheme and a full-width header to make a strong first impression

Our favorite aspect of the Method portfolio is the animated full-width header. Learning how to use the transform property to achieve similar effects is a complex subject, so we’ll stick to creating a simple color scheme and implementing a full-width header using the Zerif Pro theme again.

The Zerif Pro default template includes a full-width header section that we can use. Create a new page, select the default template from the Page Attributes meta box, save the changes, then go into the live Customizer. Once here, choose the Big title section and customize its colors until they match your main menu:

An example of a full-width header section sharing the same color palette as the menu.

Now we have a clean – albeit playful – full-width header that shares a color palette with our menu, keeping things looking uncluttered. Consider using a variation of this simple style the next time you’re performing some WordPress portfolio tweaks!

Conclusion

Along with a suitable theme, there are three basic criteria for creating a portfolio on WordPress – it should focus on your work, introduce yourself, and offer simple navigation. Get all three right, and you’ll be well ahead of your competition.

Consider implementing one or more of these three simple techniques when you begin to create a portfolio on WordPress, and you’ll be hearing back from new clients in no time at all:

  1. Use blurbs to showcase your work.
  2. Implement a grid system to display your past projects.
  3. Combine a full-width header with a simple color scheme to make a lasting first impression.

What do you think about having your portfolio built on WordPress? Do you have a portfolio of your own to share? Let us know in the comments section below.