How to Make a Freelancer portfolio website like fiverr (WordPress & Elementor Tutorial for Beginners)

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

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 Freelancer portfolio website or Digital Marketer's 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

Kitpapa Ready made Elementor template kits.

Get Templates

Project Files Download the resources used in this tutorial.

Download Files

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;
}
</style>

Button Style CSS

/* ============== */
/* CTA Button */
/* ============== */

.cta-button-orrange .elementor-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var( --e-global-color-accent );!i;!;!;!i;!;
    height: 100%;
    width: 50.5%;
    transform: scaleX(1);
    transform-origin: right;
    z-index: -1;
    transition: all .5s;
}

.cta-button-orrange .elementor-button {
    position: relative;
    z-index: 0;
}

.cta-button-orrange .elementor-button::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: var( --e-global-color-accent );
    height: 100%;
    width: 50.5%;
    transform: scaleX(1);
    z-index: -1;
    transition: all .5s;
    transform-origin: left;
}
.cta-button-orrange .elementor-button:hover::before, .cta-button-orrange .elementor-button:hover::after {
    transform: scaleX(0);
}
.cta-button-orrange .elementor-button:hover{
    color: var( --e-global-color-accent );
}

Button Style CSS Class

cta-button-orrange

Counter Item Style CSS

.counter-item::before {
    clip-path: polygon(0 61%, 100% 0, 100% 100%, 0% 100%);
}

.counter-item .elementor-counter-number-wrapper .elementor-counter-number-suffix {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}

.counter-item .elementor-counter-number-wrapper {
    align-items: baseline;
}

Counter Item Style CSS Class

counter-item

Icon Shadow & Animation Style CSS

.icon-shadow .elementor-social-icons-wrapper .elementor-icon {
    box-shadow: 12px 12px 20px rgba(3, 39, 55, 0.08);
    transition: all .5s;
}


.icon-shadow .elementor-social-icons-wrapper .elementor-icon:hover svg path{
    fill: #fff !important;
}



.icon-box-shadow-banner::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.2);
    width: 66px;
    height: 66px;
    z-index: -1;
    box-shadow:1.13636px 4.54545px 40px rgba(5, 88, 85, 0.4);
}

 .shadow-yellow::before{
     box-shadow: 1.13636px 4.54545px 40px rgba(240, 185, 48, 0.4); 
 }
 
  .shadow-orrange::before{
     box-shadow: 1.13636px 4.54545px 40px rgba(240, 75, 33, 0.4);
 }

.icon-box-shadow-banner {
    animation: grow 3s ease-in infinite alternate;
}
.anim-delay-2ms{
    animation-delay: .2s;
}
.anim-delay-4ms{
    animation-delay: .4s;
}
@keyframes grow{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(.7);
    }
}


@media (max-width: 767.98px){
    .icon-box-shadow-banner::before {
    width: 60px;
    height: 60px;
}
}

Icon Shadow Style CSS Classes

icon-shadow
anim-delay-2ms
anim-delay-4ms
shadow-orrange
shadow-yellow
icon-box-shadow-banner

Zoom Effect Animation CSS

.zoom-in-out {
    animation: zoom-in-out 10s ease-in infinite alternate;
}
@keyframes zoom-in-out{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(.8);
    }
}

Zoom Effect Animation CSS Class

zoom-in-out

About Section Social Icon CSS

.icon-box-shadow-banner-2::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.12);
    width: 82px;
    height: 82px;
    z-index: -1;
    box-shadow: 1.13636px 4.54545px 40px rgba(240, 75, 33, 0.4);
}

.icon-box-shadow-banner-2 {
    animation: grow 3s ease-in infinite alternate;
}

About Section Social Icon CSS Class

icon-box-shadow-banner-2

Portfolio Item Shine Effect CSS

.portfolio-item .shine-effect img{
    transition: all .5s;
}
.portfolio-item:hover .shine-effect img{
    transform: scale(1.2); 
}
.portfolio-item .shine-effect {
	position: relative;
}

.portfolio-item .shine-effect::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.portfolio-item:hover .shine-effect::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

Portfolio Item Shine Effect CSS Style Classes

portfolio-item
shine-effect

Portfolio Item Icon Style CSS

.portfolio-item .elementor-icon:hover {
    border: 1px solid var( --e-global-color-accent );
}

.portfolio-item .elementor-icon:hover svg path {
    stroke: var( --e-global-color-accent );
}

.portfolio-item .elementor-icon{
    transition: all .3s;
    border: 1px solid transparent;
}

Portfolio Item Icon Style CSS Class

portfolio-item

Reviews Image Overlay Style Css

.img-overlay-1 {
    position: relative;
}

.img-overlay-1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 39, 55, 0.5);
    border-radius: 50%;
}

.img-overlay-2 {
    position: relative;
}

.img-overlay-2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 39, 55, 0.25);
    border-radius: 50%;
}

Reviews Image Overlay Style Css Classes

img-overlay-1
img-overlay-2

Testimonial Carousel Style CSS

.testimonial-carousel .tns-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -95px;
}
.testimonial-carousel .tns-controls button span {
    height: 48px;
}
.testimonial-carousel .tns-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -95px;
    gap: 16px;
    display: flex
;
}
.testimonial-carousel .tns-controls button span {
    transition: all .5s;
}

.testimonial-carousel .tns-controls button:hover span svg path{
    stroke: #fff;
}
.comment-bio {
    display: none;
}

Testimonial Carousel Style CSS Class

testimonial-carousel

Blog Grid Style CSS

/* ============== */
/* Blog Grid */
/* ============== */


.blog-grid .jkit-postblock-content {
    display: flex
;
    flex-direction: column;
}

.blog-grid .jkit-post-excerpt {
    border-bottom: 1px dashed #E4E5E7;
    padding-bottom: 32px;
}
.blog-grid .jkit-post-meta {
    justify-content: start !important;
}
a{
    text-decoration: none !important;
}

.blog-grid .jkit-post:hover {
    border-color: #f04b214d !important;
    transform: translateY(-4px);
}

.blog-grid .jkit-post {
    transition: all .4s ease-in-out;
}

.blog-grid .jkit-post:hover .thumbnail-container {
    filter: blur(2px);
}

.blog-grid .jkit-post:hover .thumbnail-container {
    transition: all .4s ease;
}

Blog Grid Style CSS Class

blog-grid

Single Banner Icon Style CSS

.icon-box-shadow-banner::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.12);
    width: 66px;
    height: 66px;
    z-index: -1;
    box-shadow: 1.13636px 12px 64px rgba(240, 75, 33, 0.32);
}

.icon-box-shadow-banner {
    animation: grow 3s ease-in infinite alternate;
}
.anim-delay-2ms{
    animation-delay: .2s;
}
.anim-delay-4ms{
    animation-delay: .4s;
}
.anim-delay-6ms{
    animation-delay: .6s;
}
@keyframes grow{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(.7);
    }
}

Single Banner Icon Style CSS Classes

icon-box-shadow-banner
anim-delay-2ms
anim-delay-4ms
anim-delay-6ms

Timeline(Single Gig Page) Style CSS Classes

.number {
    height: 48px;
    background: #fff
}

.number .elementor-widget-container {
    justify-content: center;
    display: flex
;
    align-items: center;
}

.line-shape::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #E4E5E7;
}

@media (max-width: 767.98px){
    .line-shape::before {
   display: none;
}
}

Timeline(Single Gig Page) Style CSS Classes

number
line-shape

Timeline(Single Gig Page) Style CSS Classes

number
line-shape

Get Started Button Style CSS

.get-started-btn .elementor-button-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

Get Started Button Style CSS Classes

get-started-btn

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

How to Make a Freelancer portfolio website like fiverr (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