How To Create Photography & Photographer Portfolio Website Using Elementor Flexbox

Quick Summary

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

[STEP BY STEP from Scratch] In this tutorial, You'll learn How to Make a Photography Website using WordPress & Elementor Free Version. This WordPress & Elementor Full Course is for Complete Beginners.

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

In this tutorial, I’ll show you how to create an amazing multi-page photography website—all by yourself and with zero design or coding experience! Usually, creating a modern, trendy website like this means hiring a UI designer to craft it in Figma, then a web developer to bring it to life. And that can easily cost you thousands of dollars.

WordPress, a free and powerful software

And Elementor, a free page builder that lets you create stunning websites just by dragging and dropping elements! And yes, the site we’re making will be 100% mobile-responsive—perfect on any device.

⏰Timestamps for creating a WORDPRESS 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

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>

Text Rotated Animation Style CSS

.circle-wrapper {
    width: 144px;
    height: 144px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle-img{
        animation: rotateCircle 10s linear infinite;
        transition: all .4s;
}
.circle-wrapper:hover .smr-arrow-1 {
    transform: scale(0.9) !important;
}

.smr-arrow-1 {
    transition: all .3s linear;
}


@keyframes rotateCircle{
    0% {
    transform: rotate(360deg);
}
100% {
    transform: rotate(0deg);
}
}

Text Rotated Animation Style CSS Classes

circle-wrapper
circle-img
smr-arrow-1

Button Style CSS

/*button*/
.bdr-corner .elementor-button {
    display: inline-block;
    position: relative;
    border: none;
    border: 2px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bdr-corner .elementor-button:before, .bdr-corner .elementor-button:after,
.bdr-corner .elementor-button span:before,
.bdr-corner .elementor-button span:after {
  display: block;
  content: "";
  width: 11.5px;
  height: 12px;
  position: absolute;
}
.bdr-corner .elementor-button:before {
  top: -2px;
  left: -2px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  transition: 0.5s all;
}
.bdr-corner .elementor-button:after {
  top: -2px;
  right: -2px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: 0.5s all;
}

.bdr-corner .elementor-button span:before {
  bottom: -2px;
  left: -2px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transition: 0.5s all;
}
.bdr-corner .elementor-button span:after {
  bottom: -2px;
  right: -2px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: 0.5s all;
}

.bdr-corner .elementor-button:hover:before, .bdr-corner .elementor-button:hover:after {
  width: 100%;
  height: 100%;
  border-color: #fff;
}
.bdr-corner .elementor-button:hover span:before, .bdr-corner .elementor-button:hover span:after {
  width: 100%;
  height: 100%;
  border-color: #fff;
}


/*Button Size*/
.btn-size-195 .elementor-button {
    width: 195px;
    height: 56px;
}


/*Arrow Rotated CSS*/

.btn-arrow a.elementor-button:hover span.elementor-button-icon svg {transform: rotate(180deg);}

span.elementor-button-icon svg {
    transition: all .4s;
}
.jkit-post-title .post-title {
    margin: 0;
}

Button Style CSS Classes

bdr-corner
btn-size-195
btn-arrow

How To Create Photography & Photographer Portfolio Website Using Elementor Flexbox

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