How To Create A Portfolio Website With WordPress and Elementor (2025)
Get your Hostinger plan here 👉 https://wproads.com/hostinger (affiliate link)
Get Elementor Pro here 👉 https://wproads.com/elepro (affiliate link)
Access the Free Resources 👉 here https://wproads.com/eleportfolio
😎 🎥
In this portfolio website tutorial I am going to show you how to make a professional portfolio website with WordPress and Elementor, at the end of the tutorial you will have your own professional portfolio website without needing to code. You will be able to showcase your portfolio projects in an easy yet professional way and you will be able to collect leads and clients requests through an advanced contact form built with Elementor Pro.
Let's get started!
If you have any question drop me a line in the comments, even just to say hi! 💬
When you finish following the tutorial I suggest you to continue with these videos:
– SEO tutorial, to position your website in search engines
• Rank Math SEO Plugin Tutorial 2025 | WordP...
– Analytics tutorial to monitor your website visits
• Best Google Analytics Alternative for Word...
– Elementor Pro playlist
• Elementor WordPress Tutorial 2025 • For Be...
Chapters/Timestamps
00:00 Portfolio Website Tutorial 2025
00:24 The portfolio website we will create
01:50 The tools we are going to use
02:23 Comment and use the timestamps
02:35 Support WP Roads channel!
03:08 Pascal Claro, your WordPress teacher :)
03:23 Choose and buy your hosting plan
05:57 The buying process: use the coupon WPROADS
07:39 The first access to the Hostinger panel
09:07 Installing the portfolio WordPress website
11:33 Fist WordPress settings
15:30 Login/Logout and domain info
17:24 Installing Hello theme and Elementor Free
19:27 Enable WordPress automatic updates in Hostinger
22:20 Let's buy Elementor Pro!
25:12 Important Elementor and Hello settings
26:38 Other important Elementor settings
28:41 Download the free resources from my website
https://wproads.com/eleportfolio
30:29 Upload the Elementor Ultimate Kit and the Style Guide page
36:23 Fist access to the Elementor builder
38:26 Changing global fonts
42:33 Changing global colors
45:22 Changing the buttons style
47:57 Changing forms inputs style
48:38 Changing the subtitle style
51:19 Change images global border radius
52:38 Create the website pages
54:22 Assign the home page
Creating the home page
55:10 General overview of Elementor interface
55:59 Creating the hero section
01:05:42 Adding your first images and optimizing them
Check my Image Optimizer video
(Coming Soon!)
01:06:28 Adding images to hero section
01:10:16 Adding dark background to the hero section
01:12:31 Change the color of the Portfolio word
01:14:31 Adding a signature and negative margin to image
01:17:19 Latest projects section
01:22:33 Create a call to action box
01:31:40 My method 3 boxes section
01:40:48 Add custom icon font to Elementor
You'll find it here: https://wproads.com/eleportfolio
01:43:28 The about me section
01:47:56 Optimize the home page for tablet and mobile
Header and Footer
02:00:39 Creating the header
02:11:50 Header responsive optimization
02:18:40 Creating the footer
02:28:41 Footer responsive optimization
02:30:01 Create a global cta before the footer
02:36:02 Changing subtitles font
The portfolio structure
02:36:42 Portfolio website structure intro
02:37:15 Installing ACF free plugin
02:38:35 Create the project post type
02:40:23 Create the first project with WordPress site editor
02:45:30 Create a single project template with Elementor
02:56:30 Create the custom fields for your projects
03:36:58 Adding a free image gallery plugin
03:11:21 Let's add a new project to the portfolio!
03:13:50 Adding a global CTA and related projects section
03:15:36 Create a global CTA
03:20:50 Creating the loop item cards
03:25:32 Add loop grid with related projects
03:30:32 Adding more projects to the portfolio
03:31:51 Layout adjustments to related projects
03:33:58 A new loop item card for your projects
03:42:54 The latest project section on home
03:45:23 The portfolio archive page
The contact page
03:58:37 Create the contact page design
04:13:50 Styling the contact form
04:21:16 Configuring the contact form
04:35:39 Let's appreciate our work!
04:37:46 Adding social media share buttons to single portfolio projects
Final resources and optimizations
04:46:12 Additional optimization steps for your portfolio website
04:46:46 Share your feedback in the comments
04:47:18 Want to say thank you? Leave me a tip :)
04:47:36 Useful videos to optimize your website
#wordpresstutorial #portfoliowebsite #wproads