How to Make a Portfolio Website 2021 (using WordPress)

We are creating a portfolio website today, step by step, with the help of Folie Theme. The creation of a portfolio site with WordPress is easy if you have the right tools. Let’s get started 🙂

First we should choose a demo from the Folie Theme. The perfect choice for the topic would be exactly the Portfolio Agency Demo. Let’s Start the Theme Setup :

Watch this other tutorials on how to install and import Folie Theme :

How to Install WordPress/Folie

How to Install Folie (video tutorial)

So we are creating another website with a creative touch but based on a real agency. When it comes to creating your own website, everyone should have their rules and priorities. But let’s keep these things in mind :

What kind of business do you have
Include the marketing content on your homepage
Always include a portfolio to showcase your works
Include a blog

We are creating this portfolio agency for an architectural studio.

The Static Front Page

The first thing to do after Installing your Theme and Demo Data, is to assign the Front Page of the site and the Posts Page if you decide to integrate blog into it.

Watch this other tutorial for more detailed information

The Menus

Menus are the most important structure on your website. All your content will be accessible through the menu. That’s why you should work on your menus since the beginning of your site.

To learn how to assign menus with Folie, please watch this other detailed tutorial :

More Info / Download Hosting Offer

First create a new menu :

These are the most important pages you should focus now. If you add other pages you can assign them later.

The Header and General Options

After creating your menu you are ready to customize the header. The Codeless Builder contains 2 sections dedicated to the header :

Header – that includes the general options for customizing the Logo, Custom Styles, Dropdown and Mobile Styles, Sticky, Top Header Row.
Header Builder – in this section will be displayed the options of the elements that you include in the header (Social Menu, Menu, Logo, Tools, Button, Text).
I am going for a simple header design and content, so i have chosen the fullwidth layout, without extra rows or borders.
For the Logo i have chosen the Font Logo type.
I did some other color and typography customizations on Styling options :

Site Identity

Is important to customize the site identity. Go to Theme Options > Site Identity and choose the site title, tagline and a favicon :

Website General and Layout Options

Before adding content to the pages i recommend to check out the site general options :

Site Options – check the responsive layout, a nice scroll, select a favicon if you want, activate comments and even add a Back to Top button.
Page Transitions – add or remove page transitions.
Custom Codes – add Custom CSS, JS or HTML codes.

and layout options :

All Pages Layout – i have chosen fullwidth layout.
Site Container Width – Define site container width in pixel.
Layout Modern – Switch if you want to make web layout with sidebar background color. You can change color on Styling.
Inner Content Distance from Top and the Bottom .
Distance between blog entries and portfolio entries.

Adding Content – Homepage

Let’s start to add content to the homepage first. Starting off by a custom heading like a presentation is a good idea. You don’t need to catch attention with big slider, just keep it simple for the customers to focus on the portfolio works. Include them on a Portfolio element and choose to display the most viewed ones.

One thing you should keep in mind while adding content is that all the section should have the same design and match each other. You can also fix the general Styling options later anytime.

For the Footer i am only going to include the Social Icons in a simple widget and some other information about the site. If you want add the copyright at Footer > Show Copyright and edit it on Widgets section. To style the footer and copyright go to General Options > Styling > Footer section.

Adding Content – About

Including some services, media and team elements will make an About page more interactive to the eye of the customer :

Adding Content – Blog

Add your personalized content on Blog page :

Adding Content – Contact

On Contact Page i added a google map to show the location of our studio, a contact form and some contact details. As you are a professional architectural studio, your contact page should have a well organized and detailed information. This is how the customers will reach you.