How To Make Figma to Elementor Website Using Elementor Free

13.1KSHARES

Default Style CSS

Button Style CSS

.all-buttons .elementor-button { 
    display: block;
    position: relative; 
    overflow: hidden;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.all-buttons .elementor-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #FF4400;

    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;

    transition: transform 0.4s ease;
    z-index: -1;
}


.all-buttons .elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(255, 68, 0, 0.55);
}

.all-buttons .elementor-button:hover::before {
    transform: translateX(-50%) scaleY(1);
}

.all-buttons-white .elementor-button { 
    display: block;
    position: relative; 
    overflow: hidden;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.all-buttons-white .elementor-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #580202;

    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;

    transition: transform 0.4s ease;
    z-index: -1;
}

.all-buttons-white .elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(88, 2, 2, 0.55);
}

.all-buttons-white .elementor-button:hover::before {
    transform: translateX(-50%) scaleY(1);
}

Button Style Class Classes

all-buttons
all-buttons-white

Hero Banner List Item Style CSS

.list-h .elementor-icon-list-items.elementor-inline-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width:767px) {
  .list-h .elementor-icon-list-items.elementor-inline-items {
       gap: 10px;
}

}

Hero Banner List Item Style CSS Class

list-h

}

Marquee Style Css

.marquee-wrapper {
    overflow: hidden;
    width: 100%;
}

.marquee {
    animation: marqueeX 75s linear infinite;

}

.marquee:hover {
    animation-play-state: paused;
}

.marquee .elementor-icon-list-item {
    display: flex;
    gap: 48px;
}


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



@media (max-width:1023px) {
    .marquee {
        animation: marqueeX 60s linear infinite;
    }

    .marquee .elementor-icon-list-item {
        gap: 40px;
    }
}


@media (max-width:767px) {
    .marquee {
        animation: marqueeX 50s linear infinite;
    }

    .marquee .elementor-icon-list-item {
        gap: 30px;
    }
}

Marquee Style CSS Classes

marquee
marquee-wrapper

Testimonial Section Style CSS

.testimonials .swiper-pagination-bullet:nth-child(n+5){
    display: none;
}


.testimonials .swiper-pagination-bullets.swiper-pagination-horizontal {
    left: calc(0% - 585px);
    
}

.testimonials .swiper-button-next {
     left: calc(0% - 414px);
     top: calc(100% - 31px);
        
    }
    
.testimonials .swiper-button-prev  {
    left: calc(0% - 580px) !important;
    top: calc(100% - 31px);
        
    }   



.testimonials .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
    justify-content: center;
    background: #FFF;
    min-width: 224px;
    width: fit-content;
    max-width: 100%;
    padding: 22px;
    border: 1px solid rgba(89, 0, 0, 0.2);
    border-radius: 32px;
    z-index: 0;
}

@media (max-width: 1023px){
.testimonials .swiper-pagination-bullets.swiper-pagination-horizontal {
    left:50%;
    transform: translateX(-50%);
    }
    
.testimonials .swiper-button-next {
     left: calc(50% + 59px);
    transform: translateX(-50%);
    top: calc(100% + 69px);
        
    }
.testimonials .swiper-button-prev  {
    left: calc(50% - 105.8px) !important;
    transform: translateX(-50%);
    top: calc(100% + 69px);
        
    } 
    
.elementkit-commentor-details.client_left {
    margin: 0 !important;
}

}

@media (max-width:767px){
  .ekit-wid-con .elementskit-testimonial-slider .swiper-button-next,
  .ekit-wid-con .elementskit-testimonial-slider .swiper-button-prev {
      display: flex !important;
      opacity: 1 !important;
      pointer-events: auto !important; 
  }
}


@media (min-width: 1025px) {
    .testimonials {
    counter-reset: testimonial-counter;
}

.testimonials .swiper-slide {
    position: relative;
    counter-increment: testimonial-counter;
}

.testimonials .swiper-slide::after {
    content: "/00" counter(testimonial-counter);
    position: absolute;
    bottom: 14px;
    right: 0px;

    font-family: 'Inter Tight';
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: rgba(89, 0, 0, 0.68);
}


.testimonials .swiper-slide:nth-child(n+10)::after {
    content: "/0" counter(testimonial-counter);
}

.testimonials .swiper-slide:nth-child(n+100)::after {
    content: "/" counter(testimonial-counter);
}
}

Testimonial Section Style CSS Class

testimonials