How to Make a Restaurant & Cafe Landing Page With WordPress 2025

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 A Responsive Restaurant & Cafe Landing Page using Elementor Flex Container. This Elementor Masterclass is for Complete Beginners.

After watching this Elementor Landing Page Design MasterClass, you will be a real ninja of Elementor page builder. You can literally design anything in Elementor whatever you will imagine. – You can replicate any design from scratch – You can make any advanced website from your clients provided designs (Eg. Photoshop, Figma, Adobe XD to WordPress) – You will learn how to think and design like a professional Web Designer

This tutorial is 100% beginner friendly. You don't need to have any coding skill nor any design experience. So if you're very new to WordPress and Elementor, this one tutorial will make you a professional web designer.

Also, I have made everything in Elementor's latest flexbox model. So you can also become an Elementor flexbox expert by watching this tutorial. In this masterclass, we will not use any Pre-made template & No paid theme is required. We will create everything from scratch step by step. This is the ultimate Mastering Animated Landing Page 2025

⏰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

Kitpapa Ready made Elementor template kits.

Get Templates

Project Files Download the resources used in this tutorial.

Download Files

Prompt Used in This Tutorial

Hide horizontal overflow for the entire page CSS

<style>
/* Hide horizontal overflow for the entire page */
html, body {
   overflow-x: hidden;
}
.cursor-pointer-none{
    pointer-events: none;
}

a{
    text-decoration: none !important;
}
</style>

Hide horizontal overflow for the entire page CSS Class

cursor-pointer-none

Banner Menu Slider CSS

/*====================*/
/* BANNER CSS
/*====================*/
.elementskit-profile-image-card {
    max-height: 132px;
}

.elementskit-profile-image-card img {
    max-height: 132px;
    object-fit: cover;
}

.elementskit-commentor-content {
    display: flex
;
    flex-direction: column;
    justify-content: center !important;
    height: 100%;
}

span.elementskit-profile-info {
    order: 1;
}

.elementskit-commentor-content p {
    order: 2;
}
.elementkit-testimonial-col:nth-child(1) {
    order: 2;
}
.ekit-wid-con .elementskit-profile-image-card::before{
    display: none;
}
.banner-menu-slider .ekit-main-swiper.swiper {
    padding-inline-end: 215px;
    padding-inline-start: 215px;
}


.banner-menu-slider .swiper-slide-next {
}

.banner-menu-slider .swiper-button-next:after, .swiper-button-prev:after {
    display: none;
    
}

.banner-menu-slider .swiper-navigation-button {
    height: 100% !important;
    top: 20px;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all .6s;
    padding: 0 8px !important;
}

.banner-menu-slider .swiper-navigation-button:hover {
    background: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.swiper-navigation-button.swiper-button-prev {
    left: 100px !important;
    z-index: 999 !important;
}
.swiper-navigation-button.swiper-button-next {
    right: 100px !important;
    z-index: 999 !important;
}


@media (max-width: 767.98px){
    
.banner-menu-slider .ekit-main-swiper.swiper {
    padding-inline-end: 0;
    padding-inline-start: 0;
}

.banner-menu-slider .ekit-main-swiper.swiper {
    padding-inline-end: 0;
    padding-inline-start: 0;
}

.banner-menu-slider .ekit-wid-con .elementskit-testimonial-slider .swiper-button-next, .ekit-wid-con .elementskit-testimonial-slider .swiper-button-prev{
    display: none !important;
}
}



@media (min-width: 768px) and (max-width: 1024.98px){

.banner-menu-slider .ekit-main-swiper.swiper {
    padding-inline-end: 0;
    padding-inline-start: 0;
}
}

@media (min-width: 1025px) and (max-width: 1339.98px){
    

.banner-menu-slider .ekit-main-swiper.swiper {
    padding-inline-end: 0;
    padding-inline-start: 0;
}

}

Banner Menu Slider CSS Class

banner-menu-slider

Lemon Squeeze Animation CSS

.anim-squeeze{
    animation: squeeze 2s infinite;
    animation-direction: alternate-reverse;
}

@keyframes squeeze{
    from{
        transform: scaleY(1);
    }
    to{
        transform: scaleY(.8);
    }
}

Lemon Squeeze Animation CSS Class

anim-squeeze

leaf Move CSS

.leaf-move {
    animation: leafMove 1.2s infinite;
}
@keyframes leafMove{
    0%, 100% {
    transform: scale(1, 1);
}
25% {
    transform: scale(0.9, 1.1);
}
50% {
    transform: scale(1.1, 0.9);
}
75% {
    transform: scale(0.95, 1.05);
}
}

leaf Move CSS Class

leaf-move

Hand Moving Animation CSS

.hand-anim {
    animation: back 2s infinite;
    animation-direction:alternate-reverse;
    transform-origin:left;
}

@keyframes back{
    from{
        transform: translate(-15%) rotate(-10deg);
    }
    to{
        transform: translate(0%)
    }
}

Hand Moving Animation CSS Class

hand-anim

Menu Tab CSS

/*====================*/
/* MENU TABS CSS
/*====================*/
.menu-tabs .e-n-tab-title {
    gap: 12px 0px !important;
    flex-direction: column !important;
}
.menu-tabs .e-n-tab-title:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -150%;
    top: 29px;
    width: 158%;
    height: 1px;
    border-bottom: 1px dashed #000;
    transform: translateY(-50%);
}
.menu-tabs .e-n-tab-title span.e-n-tab-icon {
    height: 56px;
    width: 56px;
    border: 1px dashed #0E0D0C;
    border-radius: 50%;
    display: flex
;
    justify-content: center;
    align-items: center;
    background: #fff;
    z-index: 9;
}

.menu-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-icon {
    background: var( --e-global-color-secondary );
    border-color: var( --e-global-color-secondary );
}

.e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg path {
    fill: #fff;
}

Menu Tab CSS Class

menu-tabs

Round Shape Background CSS

/*====================*/
/* Round Shape background CSS
/*====================*/

.round-shape-bg::before {
    content: '';
    position: absolute;
    left: 0;
    top: -198px;
    width: 100%;
    height: 396px;
    background: #F4F0E0;
    border-radius: 50%;
    transition: all .5s;
}

.round-shape-bg {
    overflow: hidden;
    transition: all .5s;
}
.round-shape-bg:hover {
    transform: translateY(-10px);
    border-color: #F4F0E0 !important;
}

Round Shape Background CSS Class

round-shape-bg

Subscribe Form Style Class

<style>
.subscribe-button-size{
    width: 150px;
    height: 50px;
}
.input-size input{
    height: 58px !important;
}
</style>

Subscribe Form Style Class Classes

subscribe-button-size
input-size

App Link Hover Style Class

.app-link {
    transition: all 0.4s;
    border-radius: 20px;
}

.app-link:hover {
    box-shadow: 4px 10px 10px #0000001a;
    border-radius: 20px;
    transform: translateY(-5px);
}

App Link Hover Style CSS Class

app-link

Footer Border Style CSS

.footer-bdr::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(14, 13, 12, 0.2);
    transform: translateX(-50%);
}

.back-to-top svg {
    width: 32px;
    margin-bottom: -12px;
}

@media (max-width: 767.98px){
    .footer-bdr::before {
    display: none;
}
}

@media (min-width: 768px) and (max-width: 1024.98px){
    .footer-bdr::before {
    display: none;
}
}

Footer Border Style CSS Class

footer-bdr
back-to-top

App Downloaded link Style CSS

.app-link {
    transition: all 0.4s;
    border-radius: 20px;
}

.app-link:hover {
    box-shadow: 4px 10px 10px #0000001a;
    border-radius: 20px;
    transform: translateY(-5px);
}

App Downloaded link Style CSS Class

.app-link

How to Make a Restaurant & Cafe Landing Page With WordPress 2025

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