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