How To Make Figma to Elementor Website Using Elementor Free

Quick Summary

🚀 Don’t learn Figma to Elementor the confusing way. In this 4+ hour follow-along full course, you’ll learn how to take a real Figma landing page design and convert it into a fully editable, mobile responsive Elementor website using free tools, no coding, and a workflow we use for real client projects. By the end, you’ll know how to set up everything from scratch — from domain and hosting to WordPress install to building the full page in Elementor step by step.

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

👉 What you’ll build in this tutorial (step-by-step) ↪ A complete Figma to Elementor landing page from scratch ↪ A clean hero section with structure, spacing, buttons, and content blocks ↪ Multiple landing page sections rebuilt inside Elementor Free ↪ A fully mobile responsive layout ↪ A 100% editable page that you can customize later for your own project or client work ↪ A proper header section and final navigation/menu setup ↪ A real client-style workflow you can reuse for future projects ↪ A strong beginner foundation in WordPress + Elementor

3. Install the FREE page builder and basic tools 4. Convert the Figma design into Elementor step by step

↪ Workflow Free tools only + no coding

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

Default Style CSS

<style>
.elementor-icon-wrapper, .elementor-icon {
    line-height: 0;
}

.icon-fill-remove .elementor-icon svg{
    fill: none !important;
}

.elementor-icon-box-title {
    margin-top: 0px !important;
}

.elementor-image-box-title {
    margin: 0;
}

.elementor-image-box-img {
    flex-shrink: 0;
}

.elementor-icon-list-icon svg {
    margin: 0 !important;
}

.elementor-icon-list-text {
    align-self: center;
    padding-inline-start: 0px !important;
}

span.mf-error-message {
    position: absolute;
    bottom: -0px;
    left: 16px;
}
</style>

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

How To Make Figma to Elementor 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