How to Make Portfolio Website (WordPress & Elementor Tutorial for Beginners)

Quick Summary

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

In this tutorial, You'll learn How to Make a Personal Portfolio Website or Business Portfolio Website using WordPress & Elementor Free Version. This Elementor Masterclass is for Complete Beginners.

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

The term “Freelancer” covers a wide range of professions, so let me give you an idea of what types of websites you can create by following this tutorial. You can build a Web Designer Portfolio Website, Graphic Designer Portfolio Website, SEO Expert Portfolio Website, Content Writer Portfolio Website, Video Editor Portfolio Website, Photographer Portfolio Website, UI/UX Designer Portfolio Website, or any other type of Freelancer Portfolio Website!

In this tutorial, I'll provide you with all the necessary templates, so there are no limits! After watching this tutorial, you’ll be able to design a stunning portfolio website for yourself or your clients using WordPress & Elementor.

⏰Timestamps for creating a PORTFOLIO website step by step ⏰

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

Hide horizontal overflow for the entire page CSS

<style>
/* Hide horizontal overflow for the entire page */
html, body {
   overflow-x: hidden;
}
.purple{
    color: #5840BA;
}
.green{
    color: #79E71A;
}
.arrow-btn32 svg {
    font-size: 32px;
 }
</style>

Marquee Conten Style CSS

.marquee-content {
  animation: marquee-right 20s linear infinite;
}

@keyframes marquee-right {
  from {
    transform: translateX(-70%); /* Start off-screen on the left */
  }
  to {
    transform: translateX(-10%); /* Move off-screen to the right */
  }
}

Marquee Conten Style CSS Classes

marquee-content

Service Image Hover Style CSS

.service-img{
    opacity: 0;
    transition: opacity .3s ease;
}
.service-box:hover .service-img {
    opacity: 1;
}

Service Image Hover Style CSS Classes

service-img
service-box

Testimonial Widget Style CSS

.reviews .row {
    flex-direction: row-reverse;
}
 .reviews .elementskit-profile-image-card {
    width: 256px !important;
    max-height: 328px;
}
  .reviews .elementskit-commentor-content {
    margin-left: -50px;
    margin-top: 20px;
}
 .reviews p {
     display: none;
 }
  .reviews h3 {
      margin: 20 0 12 0 !important;
  }
  .reviews .elementskit-profile-info{
      padding-top: 12px;
      margin-top: 32px;
      border-top: 1px solid #E7E7E7;
  }
  .reviews .ekit-wid-con .elementskit-commentor-content .elementskit-profile-info {
    display: flex;
    align-items: center;
    gap: 6px;
}


@media (max-width: 1070px){
    .reviews .elementskit-commentor-content {
    margin-left: 0px;
}
}

@media (max-width: 1024px){
    
    .reviews .elementskit-commentor-content {
        margin-left: 0px;
    }
    
     .reviews .elementskit-profile-image-card {
        width: 200px !important;
        max-height: 328px;
    }
    
    .reviews .elementskit-profile-image-card {
        width: 200px !important;
        max-height: 250px;
    }

}

@media (max-width: 767px){
    .reviews .elementskit-profile-image-card {
        width: 150px !important;
        max-height: 180px;
    }
}

Testimonial Widget Style CSS Class

reviews

Project Box Style CSS

.projects-box {
     max-height: 660px;
 }
 .projects-box::-webkit-scrollbar {
  display: none;
}

.project:hover h5, .project:hover .project-date p{
    color: #242424 !important;
}
.project:hover p{
    color: #747474 !important;
}
.project:hover a{
    color: #5840BA !important;
    border-color: #5840BA !important;
}

.project:hover svg {
    color: #5840BA !important;
    fill: #5840BA !important;
    fill-opacity: 1;
}

Project Box Style CSS Classes

projects-box
project
project-date

Project Box Style CSS Classes

projects-box
project
project-date

Blog Section Style CSS

.blog article{
    display: flex;
    gap: 24px;
    flex-direction: column-reverse;
}
.blog .jkit-post-meta-bottom {
    position: absolute;
    right: 16px;
    top: 336px;
}


@media (max-width: 1024px){
    .blog .jkit-post-meta-bottom {
        position: absolute;
        right: 10PX;
        top: 285PX;
    }

}

Blog Section Style CSS Class

blog

FAQ Section Style CSS

.faq .faq-list {
    margin-right: 40px;
    color: #747474;
}

.faq .e-n-accordion-item[open]>.e-n-accordion-item-title .faq-list{
 color:#5840BA !Important;
}
.faq .e-n-accordion-item .e-n-accordion-item-title:hover .faq-list{
 color:#5840BA !Important;
}


@media (max-width: 767px){
    .faq .faq-list {
        margin-right: 12px;
    }
}

FAQ Section Style CSS Classes

faq
faq-list

Header Menu Style CSS

.jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li.current-menu-item > a, .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li:hover > a {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(88, 64, 186, 1) 50%, rgba(255, 255, 255, 0.12) 100%);
    border-image-slice: 1;
}

How to Make Portfolio Website (WordPress & Elementor Tutorial for Beginners)

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