Minimal Personal Portfolio Website Using Elementor | WordPress 2024

Quick Summary

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

In this tutorial, You'll learn How to Make an amazing Personal Portfolio WordPress Website or Resume Website in 2024. This Elementor Masterclass is for Complete Beginners.

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

Nowadays, people are more into watching Instagram reels, YouTube shorts, and TikToks than long-format content. Do you know why? Because they’re short, sweet, and straight to the point.

Similarly, in 2024, if your personal portfolio website is fluffy and boring, it’s not going to attract clients anymore. That’s why in this tutorial, I’ll show you how to create a sleek, minimal, yet powerful personal portfolio website using WordPress and the FREE version of Elementor, following the super trendy neumorphism design style.

Ready to create something modern, trendy, and super effective? Let’s dive in!

⏰Timestamps for creating an eCommerce website step by step ⏰

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

10 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.

If you're searching for how to make a website, how to make a professional website from scratch, how to create a WordPress website step by step, WordPress tutorial for beginners, best website making course, Elementor tutorial for beginners – then this tutorial is for you.

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

Kitpapa Ready made Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Box Shadow CSS

<style>
.box{
    
    box-shadow: 10px 10px 19px #1c1e22,-10px -10px 19px #262a2e;
}
</style>

Box Shadow CSS Class

box

Sticky Left Main Section

.elementor-top-section {
    
    position: sticky;
    position: -webkit-sticky;
    top: 20%;

}

Sticky Left Main Section CSS Class

elementor-top-section

Popup Model Box CSS

.model-box-popup .premium-modal-box-modal-dialog{
    
    box-shadow: 10px 10px 19px #1c1e22,-10px -10px 19px #262a2e;
    border-radius: 10px;
    }

.model-box-popup button:focus {
    
    outline: 0px auto -webkit-focus-ring-color;
}


.elementor-widget-premium-addon-modal-box .premium-modal-trigger-container .premium-modal-trigger-text:before {
    
    content: "";
    position: absolute;
    margin-left: -25px !important;
    width: 5px;
    height: 5px;
    border: 4px solid;
    border-radius: 100px;
    margin-top: 11px;
  
}

.elementor-widget-premium-addon-modal-box .premium-modal-trigger-container .premium-modal-trigger-text{
    
    margin-left: 25px;
}

Popup Model Box CSS Class

model-box-popup

Testimonial Slider Shadow CSS

.testimonial-slider .elementskit-single-testimonial-slider{
    box-shadow: 0px 0px 0px 0 rgba(0,0,0,0) !important;
}

Testimonial Slider Shadow CSS Class

testimonial-slider

Form Style CSS

<style>
.form-shadow .mf-input{
   box-shadow: 1px 4px 2px -3px #000000b3 inset,-1px -3px 3px -2px hsla(0,0%,100%,.2) inset !important;
}
    
.submit-button{
    box-shadow:  10px 10px 19px #1c1e22,-10px -10px 19px #262a2e !important;
}
</style>

Form Style CSS Classes

form-shadow
submit-button

Minimal Personal Portfolio Website Using Elementor | WordPress 2024

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel