Designing portfolio website with elementor wordpress in 6 steps

Design Portfolio Website on WordPress in 6 Steps using Elementor

Without a professional portfolio website, you can miss customers particularly in case you’re a freelancer. Many won’t give this aspect due consideration because they don’t have a clear idea of where to begin.

By reading this article you’ll be able to design portfolio website on WordPress. A portfolio website is an ideal platform to showcase your professional value to the world.  

What is a Portfolio Website?

A portfolio website is essential in the online age. A portfolio website could be projects you have done so far or a digital display of your professional achievements. Like as a web developer you will display the websites you have build, as a graphic designer you will showcase your masterpieces, and the same is the scenario for other professions.

A portfolio site will advertise your articles, services, and also your skills in the target market to grab potential clients. It will be immensely helpful in generating leads. In case you’re a professional (web designer, technician, painter, author, photographer, filmmaker), a diligently built website is particularly critical to pull in customers and develop your business.

In this article, we’ll teach you the means of designing a portfolio website with WordPress using the Astra theme and Elementor plugin. In the beginning, you should realize that Astra is just an empty theme with few settings while Elementor is a complete web page builder.

All the portfolio designing work will be done using Elementor. We’ll go step by step, so it’s simpler to make your portfolio and include your portfolio things.

Step 1: Brainstorm a Domain Name

Choosing the right domain name (URL of your website) is a little hectic task. There two things to consider while opting for a domain name for the portfolio website. 

  1. The domain should have your name (business name) or part of your name (business).
  1. It should tell about your profession.

A domain name should not be lengthy, concise it to 9 – 12 alphabets. You can include your business name or whatever name you want your business to be identified with. Secondly, let’s say you are a graphic designer the domain name could be michaelgraphics.com or michaeldesigns.com. 

Go to Godaddy or NameCheap input any domain name and search to see if it’s available. You might need to modify it a little, in case it’s already purchased. Choose it carefully because you can’t change it after purchasing it. Anyhow, in any case, you have now selected your domain name, head to step 2.

Step 2: Buying Domain and Hosting

With regards to hosting, there’s a big number of hosting choices to suit each pocket. NameCheap is an excellent choice in case you’re just starting, it offers a lot of features at a low cost. They start at $1.44/mo, then $2.44/mo, and the third plan is $4.44/mo! Each plan comes with more resources, the first plan supports 1 website while the second does three. In case you are not a web designer the first plan is best for you.

Remember, always choose “shared hosting”, don’t fall for WordPress hosting. Hence, buy the domain and hosting it will take a minimum of 24 hours to activate both, then head to the third step.

Also read: How to create a Travel Blog with WordPress?

Step 3: Install WordPress on your Domain

Buying a domain and hosting will provide you a cPanel. Via cPanel you can manage all your backend and install WordPress.

How to install WordPress on NameCheap cPanel?

Log in to your hosting account, go to Dashboard, there you will see your domain, click on the MANAGE button in front of it and it will show a link “Go to cPanel”. Click it to open cPanel.

design Portfolio Website on WordPress namecheap dashboard

cPanel will have loads of services, but you need to scroll down to the Softaculous App Installer section. Here choose WordPress. 

design Portfolio Website on WordPress cpanel

On the next page, you can easily install WordPress. Now, your domain is all set to design a stunning portfolio website.

Step 4: Install Astra and Elementor (Free Version)

You need a clean flexible theme that can let you build the desired website with your page builder. Thus, install the Astra theme from the WordPress dashboard, and Elementor page builder plugin. 

For additional features, from plugins, install Elementor addons like “Power Pack for Elementor” or “Essential Addons”. Install and activate all these plugins and the theme and proceed to step 5.

Step 5: Creating a Portfolio Website on WordPress with Elementor

From WordPress dashboard, hover over Pages and click All Pages. Select a page you want to make a portfolio page, let’s say it’s Homepage. Hover on it and click Edit with Elementor

pages in wordpress

Step 6: Elementor Portfolio Templates

They say it’s smarter, to begin with, a built-in template sometimes, Elementor supports them in access. In this section of our blog post, we traverse 5 free Elementor portfolio templates. You can include any of them to build a stunning portfolio website.

Towercon: Great Free Elementor Template

Towercon is a free template most appropriate for photographers and creative startups. It has an astounding style. Hues, typography, and visual components — all work together to make a truly smooth perusing website. What I especially like about this template is the manner in which it utilizes asymmetry – the design catches the visitor’s pondering and makes the visitors explore more.

free Elementor template Towercon

The Tek Portfolio Template

Tek is a basic, yet effective one-page portfolio template. It begins with a snappy presentation that shows visitors a big photograph of a designer coordinated with primary biodata about him/her. 

The next section is: ‘About me’, which gives more data about the individual, and Skills, which depicts the designer’s abilities in detail. This portion is to explain your services.

Tek Portfolio Template

The template likewise includes the readymade contact form that helps to generate lead.

Also read: Best Squarespace Templates for Portfolio and Photography

Creative Agency Template by Envato Elements

Envato Elements are an authority in WordPress themes and plugins. The Creative Agency free Elementor template is ideal for web designers, photographers, and creative agencies. This template is specially developed to utilize imaginary in the best manner. It is a top resource in showcasing your achieved projects with a primary explanation. 

creative agency template for portfolio

Neve: A Free Elementor Template by Themeisle

It is perfect for new companies, organizations, and graphic designers. Emotions assume a key job in our lives. With regards to choosing a format for your portfolio, it’s insufficient to have only top-notch features; they additionally ought to be displayed to clients such that makes them feel the layout. The Neve template pursues this methodology of the passionate design structure. The enchantment happens when you scroll – Parallax and slow-motion impacts make an extraordinary sentiment of a well-made website. It makes the client feel that they’re reading a high-class print magazine.

Neve

Amateur: Photographer Template by Analogwp

Amature is another ideal template for photographers’ portfolio website. Quality written content makes all the difference, and visual design should be according to the content. This template matches spotless, moderate structure with a simple to-filter Zig-cross format. By expelling interruption and playing with the size and area of items, you put the whole spotlight on your work. 

Analogwp

Hence, these pre-made templates are more focused on photographers, what if you are a writer how will you showcase your portfolio on the website. In the below steps, I briefly teach how to create a Writer portfolio website on WordPress.

Create Content Writer Portfolio WordPress Website with Elementor

Go to WordPress Dashboard

> Pages

> Add New

> Edit with Elementor

A screen will appear where you can witness Astra’s header and footer but an empty page body. This is the place you play the Elementor game. In the left-hand sidebar you can see different widgets these widgets are used to paint a masterpiece. 

On this empty page, you will see 4 icons. Click on

> Plus + button

> Click the First – 1 Column Layout

> Choose Image from Widgets (this will be your Hero section, you should upload your photo here which also has your tagline written)

Now Click on the + button and add a section below the hero section. On this section click 

> Plus + button

> Choose columns as per your services (4 columns if you are going to show 4 services or 4 write-up categories)

> On columns click on + button

> Choose Image Box from widgets

> Add respective images and Write their ‘About’

Add New section 

> Choose Image Carousel from Widgets

> Add the Logos of your clients

Add testimonials

> Add New Section

> Choose Testimonials from Widgets

> Edit them with your clients’ feedback (you can add their photos too)

Showcase your Write-Ups

> Add New Section

> Choose the Basic Gallery from widgets

> Upload the screenshots of your articles

> Publish the page

This is the way you can create a custom designs for any kind of portfolio. This is just a highlight, you can explore all Elementor widgets to make a stunning WordPress Portfolio website.

List of useful Elementor Portfolio widgets

  • Image
  • Heading
  • Video
  • Button
  • Spacer
  • Image Box
  • Gallery
  • Text Editor
  • Icon
  • Icon Box
  • Star Rating
  • Counter (to show the number of projects)
  • Testimonials
  • Accordion
  • Social Icons
Default image
Hasnain Mahar
Hassnain Mahar is a blogger, freelancer, WordPress guru, web designer, and SEO geek. He runs multiple websites and offers his services on freelance platforms.
Articles: 0

Leave a Reply

Address
Model Town, Office # 12, Multan, Pakistan

Work Hours
Monday to Friday: 7AM - 7PM
Weekend: 10AM - 5PM