How to Create a Portfolio Website in WordPress (Free Elementor Guide)

Editorial Note: We may earn a commission when you visit links on our website.

Return to previous page

Meet Mirza Ahtsham – Your Guide to Web Design & Development (6+ Years Experience)

Assalam-o-Alaikum! My name is Mirza Ahtsham, and I’m excited to welcome you to my new learning platform, Learn with Ahtsham. With over 6 years of experience in Web Design and Development, I have worked on hundreds of successful projects using WordPress, Shopify, and Custom Coding.
This article is a written version of my first YouTube introduction video, where I share my journey, vision, and the purpose of this channel. If you prefer watching, you can scroll down and watch the full video tutorial embedded below.

Like many of you, I started my career from scratch — without resources, guidance, or clear direction. Over time, I learned, practiced, and built skills in WordPress, Shopify, HTML, CSS, and JavaScript. These skills helped me complete hundreds of projects for clients worldwide.
Now, my mission is simple: to help students like you build skills that companies actually hire for.

Many students think the ultimate goal is only freelancing. But freelancing is just one option. If you develop strong technical skills, you can:

Get hired in professional IT companies

Start freelancing and work with international clients

Build your own digital projects and grow independently

I want you to become not only a web designer or developer but also a problem solver. Because in the real world, employers and clients value solutions, not just technical knowledge.

In this free learning series, I’ll guide you step by step, starting from zero to advanced level, covering:

Web Design Fundamentals

WordPress Development

Shopify Store Development

Website Speed Optimization & SEO

Custom Coding with HTML, CSS, and JavaScript

Real-world project building

If you’re starting today, remember: I was once in your place. With hard work and consistent learning, I was able to grow — and so can you!

If I can do it, you can do it too!

How to Create a Portfolio Website in WordPress: Step-by-Step Guide

Step 1: Install WordPress on Your PC with Laragon

If you want to install WordPress on your computer without using XAMPP or WAMP, then Laragon is one of the best and fastest tools. In this tutorial, I’ll show you step by step how to install WordPress with Laragon using the Quick App feature (Blue Elephant Icon).
This is the written guide of my YouTube video. At the end, I’ll embed the full tutorial video so you can watch the complete process in action.

Locate the Laragon icon (blue elephant) on your desktop and double-click to open.

Click the Start button inside Laragon to activate Apache and MySQL.

Go to the Menu (top-left blue elephant icon).

Hover over Quick App → Click on WordPress.

Enter your project name (e.g., “Ahmed Portfolio” or “Web Designer Portfolio”).

Click Start. Laragon will automatically create all the files and database.

During setup, Laragon will ask for SSL and related permissions. Click Allow to make your WordPress site secure.

Wait 2–5 minutes until the installation is complete.

How to install WordPress With Laragon on PC | Step by Step Guide

Type your project URL in the browser:
Example:

				
					https://yourprojectname.test/wp-admin/

Choose your language and click Continue.

Fill in the required details:

Site Title

Username

Password

Email Address

Click Install WordPress.

Once installation is complete, you’ll see a success message.

Now log in with your username and password.

Congratulations 🎉! You have successfully installed WordPress using Laragon on your PC. Now you can start customizing your website, install themes, and build your first project.

Get Fee Audit

Step 2: Install Elementor Plugin & Hello Elementor Theme

If you want to start building a professional website with WordPress, the Hello Elementor Theme and Elementor Plugin are the best starting point. In this guide, I’ll show you step by step how to install Hello Elementor Theme along with some essential plugins including Elementor Free, Ultimate Addons for Elementor, and WPForms Lite.

This is the written version of my YouTube tutorial. Scroll down to see screenshots of each step and watch the full video embedded below.

Open your browser and go to your WordPress login URL. Enter your username and password to access the dashboard.

From the left sidebar in your WordPress dashboard, go to Appearance → Themes.

Click the “Add New Theme” button.

You can either:
Search for “Hello Elementor” in the search bar, OR Upload the theme manually.

Type Hello Elementor in the search bar. Click Install and then Activate.

After Installed Active the Required theme

Go to Plugins → Add New. Search for Elementor Website Builder. Click Install and then Activate.

Add Plugin Manually

Search Required Plugin & Install Plugin

How to Install Elementor Plugin & Hello Elementor Theme in WordPress (Step by Step Guide)

Ultimate Addons for Elementor (Header & Footer Builder) → Great for building professional headers/footers.

Contact Us Form 7 → Best free plugin for creating contact forms.

Litespeed Cache → Best free cache plugin.

From the plugin section, you can:

Activate / Deactivate plugins

Update plugins

Delete unnecessary plugins

How to install, Update & Delete Worfpress Theme or plugins

Step 3: Create a Custom Header with Elementor

In this tutorial, I’ll show you how to build a custom header in WordPress using Elementor Free + Header & Footer Builder. This step-by-step guide in Urdu/Hindi will help you design a professional header with a logo, navigation menu, and call-to-action button.

📌 What You’ll Learn in This Video:

How to open Header Builder in WordPress
How to create and assign a new header template
How to structure the hero/header section (outer + inner sections)
How to add and style the logo section (40% width)
How to add and style the logo section (40% width)
How to add a navigation menu (center aligned)
How to create a CTA button section
How to manage header padding, alignment, and responsiveness

By the end of this video, you’ll have a fully functional custom header ready for your WordPress website.

0:00 - Teacher Introduction

0:45 - How to open Header Builder in WordPress

1:03 - How to create and assign a new header template

3:15 - How to structure the header section (Latest Flex Layout)

5:32 - How to Duplicate and Delete Containers (Manually / Short key)

6:54 - How to add and style the logo section (40% width)

7:45 - How to Install Safe SVG Plugin for Upload SVG file Safely.

9:27 - How to upload media in wordpress (PNG, WEBP, JPEG, PDF Files)

11:40 - How to Create Navigation menu (Simple Menu)

15:30 - How to Assign Menu in Header Nav Bar and Customization

17:20 - How to create a CTA button section

20:40 - How to manage header padding, alignment, and responsiveness

How to Create a Custom Header in WordPress with Elementor (Step by Step Guide)

Step 4: Design the Hero Section of Your Portfolio Website

Build a Hero Section in WordPress Portfolio Website | Elementor Tutorial
Want to design a stunning Hero Section for your WordPress portfolio website? 🚀
In this step-by-step tutorial, I’ll guide you on how to build and design a professional hero section using Elementor Free + Hello Elementor theme.

In this tutorial, you will learn:

Hero section structure setup in Elementor
How to add left and right columns (content + image)
Adding a professional introduction with highlight text
Adding counter boxes (Experience, Projects, Clients)
Custom HTML + CSS highlight effect for text
How to add a Call-to-Action button

        
            Highlight Text Color Snippet
                
										HTML CODE
									
					I'm a Freelance <span class="half-highlight">UI/UX Designer</span> and <span class="half-highlight">Developer</span>
				
										CSS CODE
									
					/* Text Highlight */
.half-highlight {
  position: relative;
  display: inline-block;
}
.half-highlight {
  background-image: linear-gradient(transparent 50%, #B83A3A4F);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

0:00 - Teacher Introduction

0:20 - Recap Previous Tutorial

1:45 - How to install lite speed cache plugin

2:40 - How to start Building Hero Section of website (structure Theory)

4:58 - How Create Hero Section Theory (content + image)

6:27 - How to Configure Colors, Fonts Setting in Elementor (Globally)

10:55 - How Create Hero Section sutructure (Practical)

16:40 - How to Add Highlight Effect on Specific Words

18:30 - How to Add CSS Code in Additional CSS Tab

21:00 - How to add Button in Hero Section and Style it

23:48 - How to Create Statistic Counter Section

37:26 - How to Add BG Gradient Affect - Setting BG Image

42:43 - Request for paryers - Share Video with more Students

How to Create a Custom Header in WordPress with Elementor (Step by Step Guide)

Step 5: Build the About Me Section with Elementor

In this tutorial, I’ll show you step by step how to build a professional About Section in Elementor for your portfolio website. 🚀
We’ll design a stylish About Me layout including image, text, social icons, and CTA buttons — perfect for freelancers, designers, and developers who want to showcase their skills and personality.

👉 What You’ll Learn in This Video:

How to create the About section layout in Elementor
Adding your image with social media links
Writing engaging About Me text for your portfolio
Adding stylish buttons (Download CV, Hire Me, etc.)
Custom HTML + CSS highlight effect for text
Optimizing padding, margins, and section spacing

0:00 - Teacher Introduction

0:20 - Recap Previous Tutorial

0:40 – How to open page for editing with elementor in WordPress Dashboard

1:40 – How to Start Designing About Section for Portfolio Website

2:12 – Explaining the structure of the About us section in Elementor Page Builder

5:00 – Start Creating About us Section structure (Step by Step Guide)

12:20 – Start designing Social Media Widget in About us section

24:20 – Start designing downlod button in About uls section

How to Build About Section in Elementor | Portfolio Website Tutorial

Step 6: Design Portfolio & Call-to-Action (CTA) Section

Welcome to another video of our WordPress Portfolio Website Course in Urdu/Hindi.
In this step-by-step tutorial, you’ll learn how to design the Portfolio Section and CTA (Call to Action) Section using Elementor.

📌 In this video, we cover:

By the end of this video, you’ll have a fully functional portfolio and CTA section ready to use in your personal or client websites.

0:00 - Teacher Introduction

0:06 - Recap Previous Tutorial

0:50 - How to build structure of portfolio showcase section using elementor

9:00 - How to Build portfolio showcase card Advance Layout (Grid Box)

19:20 - How to design portfolio showcase card (Styling Apply)

22:30 - How to apply shadow effect on portfolio showcase card (Hover Shadow Effect)

24:48 - How to duplicate portfolio showcase card using elementor (Manual + Shortkey)

28:12 - How to upload, add and replace Images in website portfolio showcase cards

30:28 - How to build Call to Action Section in Portfolio Website (WordPress)

31:41 - How to Add background color & Padding in a Call to Action Section (Elementor)

How to Design Portfolio & Call to Action Section in Elementor | WordPress Portfolio Website

Step 7: Create a Blog Section in Elementor

A blog section helps you share knowledge, improve SEO and attract clients. In this video I’ll teach how to design a Blog Listing (archive) and a Single Post layout in Elementor — with featured images, excerpts, meta (author/date), Read More buttons, pagination, and an attractive sidebar CTA.