Business SitesLanding PageWordPress

How to Create a Tour And Travel Agency Landing Page in wordpress | WordPress 2025

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

Hide horizontal overflow for the entire page CSS
<style>
/* Hide horizontal overflow for the entire page */
html, body {
   overflow-x: hidden;
}
</style>
Button Style Css
.catagory-btn {
    border: 1px solid transparent; / Transparent border to apply gradient /
    background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #477FFF, #39AFFD); / Inner background and border gradient /
    background-origin: border-box;
    background-clip: padding-box, border-box; / Ensures gradient is applied to the border /
    border-radius: 100px;
}

.category-box:hover .catagory-btn .elementor-widget-container{
    border-color: transparent;
    background: linear-gradient(-45deg, #477FFF, #39AFFD);
}
.category-box:hover .catagory-btn .elementskit-btn {
    
    border-color: transparent !important;
}
.arrow-icon32 svg {
  background: #FFCBB959;
  border: 4px solid transparent; /* Optional border width */
  width: 32px !important;
  height: 32px !important;
  border-radius: 100px !important;
  font-size: 20px;
  color: transparent !important;
}
.arrow-icon32 svg path {
    fill: transparent !important;
}

#g-icon1 .elementor-icon {
    background: linear-gradient(180deg, rgba(255, 179, 127, 0.35), rgba(255, 123, 13, 0.35));
}
#g-icon2 .elementor-icon {
     background: linear-gradient(180deg, rgba(57, 175, 253, 0.35), rgba(71, 127, 255, 0.35));
}

.i-blue svg {
    background: #39AFFD59;
}

.i-orange svg {
    background: #FFCBB959;
}

.i-blue:hover svg {
    background: #FFCBB959;
}

.i-orange:hover svg {
    background: #39AFFD59;
}
Button Style Css Classes
category-box
catagory-btn
arrow-icon32
i-blue
i-orange
Button Style Css ID
g-icon1
g-icon2
Tab Section Style Css
#destination-tab .e-n-tabs-heading, #packages-tab .e-n-tabs-heading {
    background: #fff;
    padding: 20px;
    border-radius: 100px;
}

#destination-tab .e-n-tab-title[aria-selected="true"], #packages-tab .e-n-tab-title[aria-selected="true"]{
    font-weight: 500 !important;
    transition: font-weight .3s ease;
    box-shadow: 5px 5px 10px rgba(255, 107, 53, 0.5);
}

@media only screen and (max-width: 767px){
#destination-tab .e-n-tabs-heading, #packages-tab .e-n-tabs-heading {
    padding: 10px;
    border-radius: 8px ;
    gap: 12px;
    justify-content: center;
}

#packages-tab .e-n-tabs-heading {
     justify-content: center;
 }
}
Tab Section Style Css ID
destination-tab
packages-tab
Review Section Css
.reviews .tns-controls {
  background: linear-gradient(0deg, #FF7B0D, #FFB37F);
  border-radius: 100px;
  width: 164px;
  margin-top:24px; 
  display: flex;
  justify-content: space-between;
}
Review Section Css Class
reviews

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

Related Tutorials

From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

26.6K views

View Tutorial

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

4.2K views

View Tutorial

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel

4.9K views

View Tutorial

Browse All Tutorials