Architecture & Interior Website Using Elementor | WordPress 2024

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 An Architecture & Interior Design Website using Elementor Flex Container. This Elementor Masterclass is for Complete Beginners.

In this tutorial, we’ll create an amazing and professional architect and interior design website STEP BY STEP from scratch. If you're an architect, an interior designer, or someone looking to build a stunning website for your interior design clients, this is the best tutorial you'll ever need!

In this design masterclass, you’ll learn the best methods to create a visually stunning website that will attract and impress your clients. By following this single tutorial, you’ll not only create an Interior Design website – but also become a master of website design without the need to hire any professionals, saving you a significant amount of money.

Just imagine having your website LIVE within the next 2-3 hours! Yes, you heard that right. You don’t need any coding or design skills. To create this website, we'll be using a Free Software called WordPress… A Free Theme… And, the best DRAG & DROP page builder called Elementor Pro…

⏰Timestamps for creating an ELEMENTOR 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.

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

Hero Banner Heading CSS

selector{
    min-width: 1200px;
}

@media screen and (max-width: 1300px) and (min-width: 1025px){
    selector .elementor-heading-title{
        font-size: 100px !important;
    }
}

Button Object CSS

selector .elementor-button-content-wrapper:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 31px;
    margin-left: 40px;
    width: 32px;
    transition: width .6s ease;
}


selector:hover  .elementor-button-content-wrapper:after{
    width: 70px;
}

Gallery Item CSS

selector .box-1, 
selector .box-2{
    opacity: 0 !important;
    transition: all 0.5s ease-out;
}

selector:hover .box-1, 
selector:hover .box-2{
    opacity: 1 !important;
    
}

Gallery Content CSS

selector{
    transform: rotate(-90deg);
    width: 320px;
}

selector:hover .item-2 .elementor-heading-title{
    color: #000;
}

selector:hover .item-1 .elementor-icon-list-text,
selector:hover .item-1 .elementor-icon-list-icon i{
    color: #000;
}

Gallery View CSS

selector:hover .elementor-icon{
    transform: rotate(45deg);
    
}

selector:hover .elementor-icon svg{
    fill: #000 !important;
}

Gallery Item CSS Classes

box-1
box-2
item-1
item-2
icon

Video Button CSS

selector i{
    font-size: 45px;
}

selector:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 44px;
    margin-left: 280px;
    width: 32px;
    transition: width .6s ease;
}


selector:hover:after{
    width: 100px;
}


@media screen and (max-width: 1023px){
    selector:after{
        top: 75px;
    }
}

@media screen and (max-width: 767px){
    selector:after{
        top: 60px;
        margin-left: 145px;
    }
    selector:hover:after{
    width: 60px;
}
}

Testimonial Hover Effect CSS

selector:hover .box-1 .elementor-heading-title{
        -webkit-text-stroke-color: #fff;
    stroke: #fff;
}

selector:hover .box-1 p{
    color: #fff;
    
}


selector:hover .box-2 .elementor-heading-title,
selector:hover .box-3 .elementor-heading-title{
    color: #fff;
}

selector:hover .box-2 .elementor-divider-separator{
    border-top-color: #fff;
}

Testimonial Quotation Mark

(“ “)

Blog Grid Hover Effect CSS

selector:hover .blog-item{
    background-color: #000!important;
}


selector:hover .blog-item .elementor-icon-list-text, selector:hover .blog-item .elementor-heading-title{
    color: #fff !important;
}

Blog Grid Hover Effect CSS Class

blog-item

Contact Form CSS

selector .elementor-button:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 33px;
    margin-left: 40px;
    width: 32px;
    transition: width .6s ease;
}



selector .elementor-button:hover:after{
    width: 80px !important;
}


selector .elementor-field-textual:focus {
    box-shadow: inset 0 0 0 0px rgba(0,0,0,.1);
    outline: 0;
}

Body Overflow-X Hidden

<style>
    body, html{
    overflow-x: hidden;
}
</style>

Architecture & Interior 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