How To Make a Creative Design Agency Website Using Elementor Free

The image represents a comprehensive 2026 instructional guide for Elementor, a popular WordPress page builder.
Content Focus: The tutorial is likely a “MasterClass” designed for beginners to learn professional web development skills.
Key Features Covered: The course likely covers essential Elementor capabilities such as the drag-and-drop editor, theme builder for headers and footers, and template libraries.
Target Audience: It is aimed at beginners looking to create websites without needing advanced coding knowledge.
Creator: The content is associated with Jim Fahad Digital, a well-known channel for WordPress and Elementor tutorials.

Default Style CSS

.elementor-icon svg{
    width: auto;
    height: auto;
}

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

.elementor-icon, .elementor-icon-wrapper{
    line-height: 0;
}
.service-box *{
    transition: all 0.3s ease;
}

.service-box:hover *{
    color: white;
}


.clients-img-box  img{
    max-width: 68px!important;
}

Default Style CSS Classes

service-box 
clients-img-box

Button Style CSS

.elementor-button {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: all 0.4s ease;
    }

.elementor-button .elementor-button-text  {
        display: inline-block;
        transition: all 0.4s ease;
    }

    /* Duplicate Text (dynamic) */
.elementor-button::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        color: currentColor;
        transition: transform 0.4s ease, opacity 0.4s ease;;
    }

 .elementor-button:hover .elementor-button-text, .elementor-button:hover .elementor-button-icon{
        transform: translateY(-100%);
        opacity: 0;
    }

.elementor-button::before {
        transform: translateY(100%);
    }

 .elementor-button:hover::before{
        transform: translateY(0);
        opacity: 1;
    }
    
    
.btn-icon .elementor-button .elementor-button-icon{
    background-color: #3B2CFF;
    padding: 10px;
    border-radius: 100px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-icon .elementor-button:hover .elementor-button-icon{
    background: #FFFFFF;
}

.btn-icon .elementor-button .elementor-button-content-wrapper{
    align-items: center;
}

.btn-icon-secondary .elementor-button .elementor-button-icon{
    background-color: #FFFFFF;
    color: #4F5450;
}
.btn-icon-secondary .elementor-button:hover .elementor-button-icon{
    background-color: #3B2CFF;
    color: #FFFFFF;
}

.btn-icon-tertiary .elementor-button .elementor-button-icon{
    padding: 7px;
}

.btn-icon-white .elementor-button .elementor-button-icon{
    color: #FFFFFF;
}

Button Style Class Classes

btn-icon
btn-icon-secondary
btn-icon-tertiary
btn-icon-white

Button Style JS Code

<script>
document.addEventListener
("DOMContentLoaded", () => {
  setTimeout(() => {
    document.querySelectorAll
('.elementor-button').forEach(btn => {
      const textEl = btn.querySelector('.elementor-button-text');
      if (textEl) {
        const text = textEl.textContent.trim();
        btn.setAttribute('data-text', text);
      }
    });
  }, 300); 
});
</script>

Marquee Style CSS

.marquee-container{
    transform: translateX(0);
    animation: marquee 45s linear infinite;
    white-space: nowrap;
    will-change: transform;
}



@keyframes marquee{
     0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
  
  100% {
      transform: translateX(0);
  }
}

Marquee Style CSS Class

marquee-container

Form Style CSS Class

<style>

.form-button .mf-btn-wraper svg {
    width: 36px;
    height: 36px;
    padding: 10px;
    border-radius: 100px;
    background: var(--e-global-color-5be58cb);
    
}

.form-button .metform-submit-btn  {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>

Form Style CSS Class

form-button

Blog Style CSS

.blog-post .elementskit-btn svg{
    margin-left: 10px;
    width: 30px;
    height: 30px;
    color: #2b322c;
    background: #FFFFFF;
    padding: 7px;
    border-radius: 100%;
}

.blog-post .elementskit-post-image-card:hover .elementskit-entry-thumb>img {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.blog-post .elementskit-post-image-card .elementskit-entry-thumb>img{
    max-height: 270px;   
    object-fit: contain;
    max-width: 100%!important;
}


.blog-post .post-items .col-lg-4:nth-of-type(3n+2) .post-cat {
    background-color: #3B2CFF;
}
.blog-post .post-items .col-lg-4:nth-of-type(3n+3) .post-cat{
    background-color: #FBBC05;
    color: #2b322c;
    
}
.blog-post .post-items .col-lg-4:nth-of-type(3n+3) .post-cat svg{
    color: #2b322c;
    
}

.blog-post .col-lg-4{
    padding-right: 16px!important;
    padding-left: 16px!important;
}

.blog-post .row{
    margin-right: -16px!important;
    margin-left: -16px!important;
}

.blog-post img{
    height: 520px;
    object-fit: cover;
}
@media (max-width: 1024px){

.blog-post img{
    height: 350px;
}

}

@media (max-width: 767px){

.blog-post img{
    height: 300px;
}

}

Blog Style CSS Class

blog-post

Sinlge Blog Post Thumbnail Style CSS

<style>
    .post-thumbnail img{
    height: 480px;
    object-fit: cover;
}

@media (max-width: 767px){
    .post-thumbnail img{
    height: 360px;
    
}
}
</style>

Sinlge Blog Post Thumbnail Style CSS Class

post-thumbnail

Muhammad Abu Bakkar