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 trick when creating your portfolios in WordPress
The main purpose of a portfolio website is showing 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
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 till 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.
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.
This projects portfolio looks simple. It uses tags to filter different topics and also companies’ logos.
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).
Now, as per the tips and tricks, here’s the tiny checklist I promised:
- 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).
- 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.
- 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.
- 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.
- 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.
- Don’t forget to add an “About me” section, where visitors can get to know you better, your vision and objectives, your experience.
- 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.
Next, it’s time for some design.
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
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
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.
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.
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.
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.
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.
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:
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!