How to Create a photography website Using Elementor Free

Quick Summary

In this step-by-step tutorial, you will learn how to build an Elementor website using Claude AI and WordPress.

Claude AI is no longer only for writing content or getting design ideas. With the right WordPress setup, you can use Claude to generate real, editable Elementor sections using actual Elementor elements.

That means you can create sections with text, images, buttons, colors, layouts, spacing, and more — then open everything directly inside Elementor and customize it however you want.

In this video, Zannatul will show you how to connect Claude AI with your WordPress website using the Novamira plugin, create an entire website with a simple prompt, and customize the result inside Elementor.

Generating website content and blog posts

Building websites faster with AI

This is a practical Claude AI + Elementor tutorial for beginners, WordPress users, web designers, freelancers, and anyone who wants to create websites faster without starting every section from scratch.

If this tutorial helps you, make sure to like the video, subscribe to Jim Fahad Digital, and share it with someone who wants to build WordPress websites faster using AI.

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

Kitninja eCommerce Elementor template kits.

Get Templates

Kitpapa Ready made Elementor template kits.

Get Templates

Project Files Download the resources used in this tutorial.

Download Files

Freelancing Mastery The freelancing course from Jim Fahad Digital.

Join Course

Prompt Used in This Tutorial

Button Style CSS

<style>
.btn .elementor-button-icon{
    background: white;
    padding: 8px;
    border-radius: 100%;
}
.btn .elementor-button-content-wrapper{
    align-items: center;
}

.btn .elementor-button-icon{
    transition: all 0.9s ease;
}

.btn:hover .elementor-button-icon{
   transform: rotate(360deg);
}

.bg-filter-blur{
    backdrop-filter: blur(16px);
}

.elementor-icon{
    line-height: 0;
}

</style>

Slider Style CSS

.slider-hero .wpr-cv-inner{
     padding: 13px 16px;
  }
  
.slider-hero .slick-list  {
     height: 460px!important;
  }
  
.slider-hero .wpr-advanced-slider{
      height: 460px!important;
  }
  
 .slider-hero .wpr-slider-content{
     border-radius: 8px;
     backdrop-filter: blur(16px);
 }
 
 .slider-hero .wpr-slider-arrow-container{
     position: absolute;
     right: 16px;
     bottom: 21px;
    display: flex;
    gap: 6px;
 }
 
.slider-hero .wpr-slider-arrow{
    position: relative;
    transform: translateY(0%);
}

.slider-hero .wpr-slider-next-arrow{
    transform: rotate(180deg);
}

How to Create a photography website Using Elementor Free

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