Hi there, and welcome to your new site
We're excited to have you here. This blog is your go-to guide for setting up and customizing the template. We've put together simple steps and clear explanations to make the whole process as smooth as possible.
Take your time, follow along, and feel free to jump to the parts you need. Let’s bring your project to life—one step at a time. To give you a better idea of what your site can look like, here are two demo live.
Homepage
Static Page
Static page both Colors and Gray version are same. You can check at Static Page Colors Version.
Detail Page Detail Tour
Meta Description
A meta description is a brief summary or snippet (max 150 characters) that describes the content of a blog post or web page. It helps search engines understand your content and encourages users to click your link when they see it in search results. There are 2 meta description. First for the site itself and second is for the page detail.
1. Meta Description for Site
For the site itself (index page), you can go to Blog Dashboard > Setting > and find this Meta tags. Then activate the Enable search description, click Search description. You will see pop-up dialog. Put the description there and Save.
see screenshot below
2. Meta Description for Page Detail
After meta description activated, when you create new post, you will see box meta description like this.
You can put the short description about the post in there.
Example meta description for "Ultimate Pearl Harbor and Circle Island Tour"
Discover Hawaii's top attractions with the Pearl Harbor and Circle Island tour. An unforgettable journey through history, scenery, and island culture.
Note
I've added the meta descriptions for the index and detail pages. You can edit them if you want to use different wording.
Menu Navigation
Currently, both the Colors and Gray versions already have menu navigation. For Colors version is a dropdown menu and for Gray version is a single menu. If you want to add, edit, or delete menus, go to the Blog dashboard > Layout > then click on the Menu widget. Below is the menu code for each version, in case you want to edit, add, or delete items.
1. Dropdown Menu
<ul class="navbar-nav" id="menu">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pearl Harbor Tours</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/LINK_HERE">Salute to Pearl Harbor Tour</a></li>
<li><a class="dropdown-item" href="/LINK_HERE">Pearl Harbor Remembered Tour</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="/2025/09/ultimate-pearl-harbor-circle-island.html">Ultimate Pearl Harbor Tour</a></li>
<li class="nav-item"><a class="nav-link" href="/2025/09/majestic-circle-island-tour.html">Majestic Circle Island Tour</a></li>
</ul>
Note
Replace the existing one with a new one.
2. Single Menu
<ul class="navbar-nav" id="menu">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/2025/09/salute-to-pearl-harbor-from-ko-olina.html">Pearl Harbor Tours</a></li>
<li class="nav-item"><a class="nav-link" href="/2025/09/majestic-circle-island-tour.html">Circle Island Tours</a></li>
<li class="nav-item"><a class="nav-link" href="/2025/09/salute-to-pearl-harbor-from-ko-olina.html">Pearl Harbor City Tours</a></li>
</ul>
Note
Replace the existing one with a new one.
Image Slider
Currently, both the Colors and Gray versions already have image sliders. They just use different images. If you want to add, edit, or delete images, go to the Blog dashboard > Layout > then click on the Slider widget. You will see code that looks like this
<div class="swiper slider-tour">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtW3ji6X9u08F6ZGkRGIFPCApoyHx-Kpdw-IGg0HbkZJaYIjHnfqXExEDUwihb51dzzDGxKCNl_hHt2R9hNaYSKtJMyphprQejXJJPDH5q0QixpI40p1lGpBI221NjMrz1gXEQ-Xu9Bh_b3OUsm8Ozr4fVaY8TVM_HTmHdrqFNUFFFGU21ctpsonQ4Uh0/w800-h600-c/ph1.webp" width="800" height="600" alt="pearl harbor memorial tour" />
</div>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZvENYzWzJmk5uWMsNuiDBKr0rQn-R3NVVkn9GH0YT9pWGjRtvZ52okOGzfo-aHkauk4u7cFXcLKJxfCx22yOhgEUgPft4PsGsWizZWV0VNnYFUaT4uuBDejoZEAjUvPflNdCeQF42Jh22lZwjaWnU6L7RiBKLYe6uK8GciMFGEMTA0v2xDrGCftdGOk/w800-h600-c/ph11.webp" width="800" height="600" alt="pearl harbor memorial tour" />
</div>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlccaSzyfCnVwgfDQyeZ6RTbPqps9yjYHVcbEoIWcxymNgqH_995EqePnA1imoq75RXwAClfNjJUuaVG1BB9VyD6zhkd6dD2tSpRPm3aXtRmXtP6DzqLnWGyVOyATz-nGWhbAfuSs2r95Kk6FDfPYE3uRzzDlfgLIzw7huWZOkv0Eys5Xv5A4CDwMDtS26/w800-h600-c/pht16.webp" width="800" height="600" alt="pearl harbor memorial tour" />
</div>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7aYvfl2meybO6XcyBkEXxq0-b55njmfBhSykE0qazG7wC4uMX18X14KdVXd27l6lsnban99SUfF5rn6MATKX1Hb5EMB4c4q-11asunOHpkcV4q3XcedfQVjaRpGPPcirGj1uvdaeqakEmgZI7xu5RLkObAKEDNPEFN5UVyjSuMQjgWMYGlOojjqc_7o/w800-h600-c/ph33.webp" width="800" height="600" alt="pearl harbor memorial tour" />
</div>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJreaZBbeOQTXRwN83_AE6H-UEJjzobkTQByE3pzqGHg4zCKRV8Z-v-b2gBBfhgwZidmCKXKlHB0fQDA038_vr1bNZcvkGOIe9GTQ06n_BNGBX0WOFstMKLAU7SfVYXkZH_BL1V8Kd6TcwpmdLordawIk42Me7tVco04bz6aXOR_8fxYcdb1OLwiQ0mmX/w800-h600-c/pht14.webp" width="800" height="600" alt="pearl harbor memorial tour" />
</div>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK2G39bw0ZQWLVHG1YkHP7OYJ6Oz30KBvzTitZCheyE8zE6iDCbH6iSh94aHSLGaSEyu-HI2fEIpbj5Vr_lRDuhRxlez_6uGcV32MCcpjexWlEPi5ir8XG_DaaobhVJLUD4BlS1Km9Xxv827LWhl7IZ893GiCyhbazApOpmUCSU9rGj4kmlFI_c2Rt4KBv/w800-h600-c/pht17.webp" width="800" height="600" alt="pearl harbor memorial tour" />
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
Note
- The code above is from the Gray version and is designed for a 6 image slider.
- If you want to change the image slider, just replace this code with the new one.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtW3ji6X9u08F6ZGkRGIFPCApoyHx-Kpdw-IGg0HbkZJaYIjHnfqXExEDUwihb51dzzDGxKCNl_hHt2R9hNaYSKtJMyphprQejXJJPDH5q0QixpI40p1lGpBI221NjMrz1gXEQ-Xu9Bh_b3OUsm8Ozr4fVaY8TVM_HTmHdrqFNUFFFGU21ctpsonQ4Uh0/w800-h600-c/ph1.webp
. To add or delete a slider, use code like this. Make sure you write it correctly.<div class="swiper-slide"> <div class="slider-img"> <img src="IMAGE_HERE" width="800" height="600" alt="ALT_HERE" /> </div> </div>
Why Us and Intro
Why Us only for Gray version and Intro only for Colors version. Currently, both Why Us and Intro are already available in each version. If you want to add, edit, or delete menus, go to the Blog dashboard > Layout
1. Why Us
Find Why Us 1, Why Us 2, Why Us 3 widget and replace the existing one with a new one.
2. Intro
Find Welcome Title widget and replace the existing one with a new one.
Tour Style 1
This style is only for the Colors version, with the image slider on the left and the text on the right. If you want to add or edit the tour, just go to the Blog dashboard > Layout > Tour List widget. Here is the default code.
<div class="tour-item">
<div class='row'>
<div class='item-image col prlx' data-speed='0.01'>
<div class="tour-body">
<div id="carouselExampleInterval" class="carousel slide carousel-fade" data-bs-interval="1000" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
</div>
</div>
</div>
</div>
<div class='item-text col prlx' data-speed='-0.02'>
<div class="tour-body">
<h2 class="title"><a href="LINK_TOUR_DETAIL_HERE">TITLE_HERE</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-time"><span>Duration: ~9h</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
<div class="summary">
<p>SUMMARY_TOUR_HERE</p>
</div>
<div class="tour-hl">
<ul>
<li>LIST_FEATURE_1</li>
<li>LIST_FEATURE_2</li>
<li>LIST_FEATURE_3</li>
<li>LIST_FEATURE_4</li>
<li>LIST_FEATURE_5</li>
</ul>
</div>
<div class="tour-booking dflex alend jcend">
<div class="tour-price">
From <span class="price">PRICE_HERE</span>
</div>
<div class="btn-more">
<a class="btn" href="LINK_TOUR_DETAIL_HERE">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
Tour Style 2
This style also only for the Colors version, with the image slider on the right and the text on the left. If you want to add or edit the tour, here is the default code.
<div class="tour-item">
<div class='row reserve'>
<div class='item-image col prlx' data-speed='0.01'>
<div class="tour-body">
<div id="carouselExampleInterval" class="carousel slide carousel-fade" data-bs-interval="1100" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="900" height="540" loading="lazy"/>
</div>
</div>
</div>
</div>
</div>
<div class='item-text col prlx' data-speed='-0.02'>
<div class="tour-body">
<h2 class="title"><a href="LINK_TOUR_DETAIL_HERE">TITLE_HERE</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-time"><span>Duration: ~9h</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
<div class="summary">
<p>SUMMARY_TOUR_HERE</p>
</div>
<div class="tour-hl">
<ul>
<li>LIST_FEATURE_1</li>
<li>LIST_FEATURE_2</li>
<li>LIST_FEATURE_3</li>
<li>LIST_FEATURE_4</li>
<li>LIST_FEATURE_5</li>
</ul>
</div>
<div class="tour-booking dflex alend jcend">
<div class="tour-price">
From <span class="price">PRICE_HERE</span>
</div>
<div class="btn-more">
<a class="btn" href="LINK_TOUR_DETAIL_HERE">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
Tour Style 3
This style is only used in the Gray version with the big image on the left and the text on the right. If you want to add or edit the tour, just go to the Blog dashboard > Layout > Tour List widget. Here is the default code.
<div class="tour-item tour-right">
<div class="row">
<div class="col item-img">
<div class="tour-img dflex alcenter jccenter">
<img alt="pearl harbor tour" width="640" height="560" src="IMG_HERE" />
<button class="play-video dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/YOUTUBE_ID?autoplay=1">
<span class="play-button"></span>
</button>
</div>
</div>
<div class="col item-text">
<div class="tour-heading">
<div class="title-no">01.</div>
<h2 class="title"><a href="LINK_TOUR_DETAIL_HERE">TOUR_TITLE</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-time"><span>Duration: ~9h</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
</div>
<div class="summary">
<p>SUMMARY</p>
</div>
<div class="tour-booking dflex alcenter">
<div class="tour-price">
From <span class="price">PRICE_HERE</span>
</div>
<a class="btn" href="LINK_TOUR_DETAIL_HERE">Book Now</a>
</div>
<div class="row">
<div class="col">
<div class="tour-img tour-img-small">
<img alt="pearl harbor tour" width="300" height="200" src="SMALL_IMG_HERE" />
</div>
</div>
<div class="col">
<div class="tour-img tour-img-small">
<img alt="pearl harbor tour" width="300" height="200" src="SMALL_IMG_HERE" />
</div>
</div>
</div>
</div>
</div>
</div>
Note
- This code is for the video modal/pop-up. If you don't want to use it, just delete it.
<button class="play-video dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/YOUTUBE_ID?autoplay=1"> <span class="play-button"></span> </button> - YOUTUBE_ID is a unique ID. Example if you watch this video https://www.youtube.com/watch?v=5xryEbaFIHc, the ID is 5xryEbaFIHc
Tour Style 4
This is another style from the Gray version with a big image on the right and text on the left. Here is the default code.
<div class="tour-item tour-left">
<div class="row reserve">
<div class="col item-img">
<div class="tour-img dflex alcenter jccenter">
<img alt="pearl harbor tour" width="640" height="560" src="IMG_HERE" />
<button class="play-video dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/YOUTUBE_ID?autoplay=1">
<span class="play-button"></span>
</button>
</div>
</div>
<div class="col item-text">
<div class="tour-heading">
<div class="title-no">01.</div>
<h2 class="title"><a href="LINK_TOUR_DETAIL_HERE">TOUR_TITLE</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-time"><span>Duration: ~9h</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
</div>
<div class="summary">
<p>SUMMARY</p>
</div>
<div class="tour-booking dflex alcenter">
<div class="tour-price">
From <span class="price">PRICE_HERE</span>
</div>
<a class="btn" href="LINK_TOUR_DETAIL_HERE">Book Now</a>
</div>
<div class="row">
<div class="col">
<div class="tour-img tour-img-small">
<img alt="pearl harbor tour" width="300" height="200" src="SMALL_IMG_HERE" />
</div>
</div>
<div class="col">
<div class="tour-img tour-img-small">
<img alt="pearl harbor tour" width="300" height="200" src="SMALL_IMG_HERE" />
</div>
</div>
</div>
</div>
</div>
</div>
Tour Style 10
This is another style from the Gray version with text above and 4 images below. Here is the default code.
<div class="tour-item tour-full">
<div class="item-text">
<div class="tour-heading">
<div class="title-no">02.</div>
<h2 class="title"><a href="LINK_TOUR_DETAIL_PAGE">TOUR_TITLE</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-time"><span>Duration: ~9h</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
</div>
<div class="summary">
<p>SUMMARY</p>
</div>
<div class="tour-booking dflex alcenter">
<div class="tour-price">
From <span class="price">PRICE_HERE</span>
</div>
<a class="btn" href="LINK_TOUR_DETAIL_PAGE">Book Now</a>
</div>
</div>
<div class="item-img">
<div class="row">
<div class="col">
<div class="tour-img tour-img-hsmall dflex alcenter jccenter">
<img alt="ALT_HERE" width="300" height="360" src="IMG_HERE" />
<button class="play-video dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/YOUTUBE_ID?autoplay=1">
<span class="play-button"></span>
</button>
</div>
</div>
<div class="col">
<div class="tour-img tour-img-hsmall dflex alcenter jccenter">
<img alt="ALT_HERE" width="300" height="360" src="IMG_HERE" />
<button class="play-video dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/YOUTUBE_ID?autoplay=1">
<span class="play-button"></span>
</button>
</div>
</div>
<div class="col">
<div class="tour-img tour-img-hsmall dflex alcenter jccenter">
<img alt="ALT_HERE" width="300" height="360" src="IMG_HERE" />
<button class="play-video dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/YOUTUBE_ID?autoplay=1">
<span class="play-button"></span>
</button>
</div>
</div>
<div class="col">
<div class="tour-img tour-img-hsmall dflex alcenter jccenter">
<img alt="ALT_HERE" width="300" height="360" src="IMG_HERE" />
<button class="play-video dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/YOUTUBE_ID?autoplay=1">
<span class="play-button"></span>
</button>
</div>
</div>
</div>
</div>
</div>
Note
This code support video modal/pop-up. If you don't want to use you can delete it. Check Note in Tour Style 3 for more detail.
Gallery Showcase
The gallery showcase is a modal/pop-up gallery used in the Gray version. Just go to Blog dashboard > Layout > Gallery widget. Here is the default code.
<div class="gallery row m-0">
<div class="gallery-item">
<img src="IMG_HERE" alt="ALT_HERE" width="220" height="220" loading="lazy"/>
</div>
<div class="gallery-item">
<img src="IMG_HERE" alt="ALT_HERE" width="220" height="220" loading="lazy"/>
</div>
<div class="gallery-item">
<img src="IMG_HERE" alt="ALT_HERE" width="220" height="220" loading="lazy"/>
</div>
<div class="gallery-item">
<img src="IMG_HERE" alt="ALT_HERE" width="220" height="220" loading="lazy"/>
</div>
<div class="gallery-item">
<img src="IMG_HERE" alt="ALT_HERE" width="220" height="220" loading="lazy"/>
</div>
<div class="gallery-item">
<img src="IMG_HERE" alt="ALT_HERE" width="220" height="220" loading="lazy"/>
</div>
</div>
<button class="gallery-btn dflex alcenter jccenter" data-bs-toggle="modal" data-bs-target="#galleryModal" id="gallery-btn" aria-label="gallery slider"><span class="dflex alcenter jccenter"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 -960 960 960" width="24px" fill="currentColor"><path d="m490-435 215.77-145L490-725v290Zm101.08 224.23h141.69q-3.54 20.23-16.88 33.35-13.35 13.11-34.2 16.34l-444.07 54.92q-29.93 4.24-53.73-14.15-23.81-18.38-27.43-48.31l-51.07-412.76q-3.62-29.93 14.65-53.81 18.27-23.89 48.19-27.12l42.54-4.46v60l-34.46 3.85q-5.39.38-8.46 4.42-3.08 4.04-2.31 9.42l50.92 412.77q.77 5.39 4.62 8.46 3.84 3.08 9.23 2.31l360.77-45.23Zm-228-80q-30.31 0-51.31-21-21-21-21-51.31v-424.61q0-30.31 21-51.31 21-21 51.31-21h424.61Q818-860 839-839q21 21 21 51.31v424.61q0 30.31-21 51.31-21 21-51.31 21H363.08Zm0-60h424.61q5.39 0 8.85-3.46t3.46-8.85v-424.61q0-5.39-3.46-8.85t-8.85-3.46H363.08q-5.39 0-8.85 3.46t-3.46 8.85v424.61q0 5.39 3.46 8.85t8.85 3.46Zm212.3-224.61ZM218-164Z"/></path></svg></span></button>
Note
The code above is for 6 images.
Footer Content
The footer content in the Colors and Gray versions is basically the same. 4 columns in the Colors version and 3 columns in the Gray version.
1. Footer Quote
If you want to add or edit the Quote, just go to the Blog dashboard > Layout > Conclusion widget.
2. Address
If you want to add or edit the Address, just go to the Blog dashboard > Layout > Address widget. Here is the default code.
<ul>
<li class="address">Honolulu, Hawaii 123456</li>
<li class="works"><span>Mon - Thu</span> 08:00am - 09:00pm HST<br />
<span>Fri - Sun</span> 08:00am - 11:00pm HST</li>
<li class="phone"><a href="tel:+PHONE_HERE">PHONE_HERE</a></li>
<li class="email"><a href="mainto:YOUR_EMAIL_HERE">YOUR_EMAIL_HERE</a></li>
</ul>
3. LINK
The links here are About, Tour List, Other Services. Basically, they all follow the same structure.
<ul>
<li><a href="LINK_HERE">ANCHOR_NAME_HERE</a></li>
<li><a href="LINK_HERE">ANCHOR_NAME_HERE</a></li>
<li><a href="LINK_HERE">ANCHOR_NAME_HERE</a></li>
<li><a href="LINK_HERE">ANCHOR_NAME_HERE</a></li>
</ul>
4. About Link for Gray Version
In the Gray version, the About links are at the bottom.
<div class="row alcenter m-0">
<a href="LINK_HERE">About Us</a>
<a href="LINK_HERE">Contact Us</a>
<a href="LINK_HERE">F A Q</a>
<a href="LINK_HERE">Privacy Policy</a>
<a href="LINK_HERE">Terms & Conditions</a>
</div>
Tour Detail Page
I've created a detailed tour page with complete features as an example that supports the Showcase gallery. Please check this link first. The Showcase gallery is optional. Whether you want to add it or not is completely up to you. Here's the full version of the code, which includes the Showcase gallery.
<div class="jduration"> <!-- tour duration -->
<span>Duration: ~DURATION_HOUR_HERE</span>
</div>
<div class="jprice"> <!-- tour price -->
<span class="tour-price">
<span class="ticket">
From <span class="price">PRICE_HERE</span>
</span>
</span>
<a class="btn" href="BOOK_NOW_LINK">Book Now</a>
</div>
<div class="jslider"> <!-- slider gallery -->
<div id="sliderImage" class="carousel slide" data-bs-interval="3000" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sliderImage" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sliderImage" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="jshowcase"> <!-- showcase thumbnail -->
<div class="showcase">
<img class="showcase-thumbnail" alt="ALT_IMG" width="480" height="300" src="IMG_HERE" loading="lazy"/>
<img class="showcase-thumbnail" alt="ALT_IMG" width="480" height="300" src="IMG_HERE" loading="lazy"/>
<img class="showcase-thumbnail" alt="ALT_IMG" width="480" height="300" src="IMG_HERE" loading="lazy"/>
</div>
</div>
<div class='jmodal'> <!-- modal/pop-up showcase gallery -->
<div id="sliderShowcase" class="carousel slide" data-bs-interval="3000" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
<div class="carousel-item">
<img alt="ALT_IMG" height="500" loading="lazy" src="IMG_HERE" width="1000">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sliderShowcase" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sliderShowcase" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<section class="tour-post with-padding" id="overview">
<h2>Island Adventure and Historic Pearl Harbor - All in One Day!</h2>
<div class="row mrow">
<div class="col">
<h3>Overview</h3>
<p>SUMMARY_TOUR</p>
</div>
<div class="col">
<h3>Tour Hightlights</h3>
<div class="tour-hl">
<ul>
<li>TOUR_HIGHLIGHT</li>
<li>TOUR_HIGHLIGHT</li>
<li>TOUR_HIGHLIGHT</li>
<li>TOUR_HIGHLIGHT</li>
</ul>
</div>
<h3>Tour Pick-Up</h3>
<ul>
<li>PICK_UP</li>
</ul>
</div>
</div>
</section>
<section class="tour-post" id="timeline">
<h2>Tour Timeline</h2>
<div class="swiper slider-timeline">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
<div class="swiper-slide">
<div class="slider-img">
<img alt="ALT_IMG" height="320" loading="lazy" src="IMG_HERE" width="250">
</div>
<h3 class="slider-title">TIMELINE_TITLE</h3>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<section class="tour-post with-padding" id="features">
<div class="tour-summary" data-read-smore-words="73">
<h2>Tour Features</h2>
<h3>1. FEATURES_1</h3>
<p>SUMMARY_FEATURES_1</p>
<h3>1. FEATURES_2</h3>
<p>SUMMARY_FEATURES_2</p>
<h3>1. FEATURES_3</h3>
<p>SUMMARY_FEATURES_3</p>
<h3>1. FEATURES_4</h3>
<p>SUMMARY_FEATURES_1</p>
</div>
</section>
<section class="tour-post" id="dates">
<h2>Check Availability</h2>
<a href="tel:+18084531000">
<div class="swiper tour-dates" data-price="$134">
<div class="swiper-wrapper">
</div>
</div>
</a>
</section>
<section class="tour-post with-padding" id="info">
<div class="row tour-info">
<div class="col tour-info-title">
<h2>What's included, what's not</h2>
</div>
<div class="col tour-info-description">
<ul>
<li>LIST_HERE</li>
<li>LIST_HERE</li>
<li>LIST_HERE</li>
<li>LIST_HERE</li>
<li class="not">LIST_X_HERE</li>
<li class="not">LIST_X_HERE</li>
</ul>
</div>
</div>
<div class="row">
<div class="col tour-info-title">
<h2>Know before you book</h2>
</div>
<div class="col tour-info-description">
<div class="tour-summary" data-read-smore-words="50">
<ul>
<li>LIST_HERE</li>
<li>LIST_HERE</li>
<li>LIST_HERE</li>
<li>LIST_HERE</li>
<li>LIST_HERE</li>
</ul>
</div>
</div>
</div>
<div class="row tour-info">
<div class="col tour-info-title">
<h2>Activity itinerary</h2>
</div>
<div class="col tour-info-description">
<div class="tour-summary" data-read-smore-words="50">
<p>TOUR_SUMMARY_HERE</p>
</div>
</div>
</div>
<div class="row">
<div class="col tour-info-title">
<h2>Tour Locations</h2>
</div>
<div class="col tour-info-description">
<div class="tour-map">
EMBED_GMAP_HERE
</div>
<p><b>Activity location:</b><br>
<span class="tour-loc">ADDRESS_ACTIVITY_HERE</span></p>
</div>
</div>
</section>
<section class="tour-post" id="faq">
<div class="row mrow">
<div class="col">
<h2>The Important Things to Know</h2>
<div class="accordion">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse">Tour Description</button>
</h3>
<div class="accordion-collapse collapse show">
<div class="accordion-body">
<div class="tour-summary" data-read-smore-words="45">
<p>TOUR_DESCRIPTION</p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">Itinerary</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<ul>
<li>ITINERARY_HERE</li>
<li>ITINERARY_HERE</li>
<li>ITINERARY_HERE</li>
<li>ITINERARY_HERE</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">Pick-Up Locations</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<ul>
<li>PICKUP_LOCATION</li>
<li>PICKUP_LOCATION</li>
<li>PICKUP_LOCATION</li>
<li>PICKUP_LOCATION</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">Security & Attire</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<ul>
<li>SECURITY_ATTIRE</li>
<li>SECURITY_ATTIRE</li>
<li>SECURITY_ATTIRE</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">Accomodations</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<p>We strive to provide inclusive and accessible tours for all our guests and will make all reasonable efforts to accommodate any request.
If anyone in your party may need additional services or accommodations (wheelchair, scooter, walker, etc.) please let us know at the time of your booking.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">Cancellation Policy</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<p>Need to cancel? No worries!<br>
Just let us know with 24 hours advance notice and we’ll take care of it for you.<br>
For quick contact, reach us at <b>808-591-2561</b></p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<h2>Frequently Asked Questions</h2>
<div class="accordion">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse">Where is Pearl Harbor Tour Located?</button>
</h3>
<div class="accordion-collapse collapse show">
<div class="accordion-body">
<p>LOCATION_HERE</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">Are there any age requirements for the tour?</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<p>There are no specific age requirements for the tour.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">What safety measures are in place for the tour?</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<p>The boat ride to the USS Arizona Memorial includes life jackets and safety instructions.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">Is there any specific equipment required for the tour?</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<p>No special equipment is required for the tour.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse">How can I cancel my booking for the tour?</button>
</h3>
<div class="accordion-collapse collapse">
<div class="accordion-body">
<p>The tour offers free cancellation.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Note
As you can see in the screenshot above, there are labels like No. 1, No. 2, a blue box, and a red box. These represent parts of the post-body code that have been moved to other sections.
To make things clear, I added labels to each moved code block, such as:
<!-- tour duration -->, <!-- tour price -->, <!-- slider gallery -->, <!-- showcase thumbnail -->, and <!-- modal/pop-up showcase gallery -->
For the Showcase thumbnail (No. 2 in the screenshot), the code is labeled <!-- showcase thumbnail -->, and the modal/pop-up part is labeled <!-- modal/pop-up showcase gallery -->. If you don't want to use this feature, you can simply delete the related code.
Tour List in Static Page
The Tour List on this static page is meant to display detailed information about similar tours that appear on the Home page. For example, it can include tours with the same destination but different titles or schedules. You can link those tours to this page as a centralized list of tour details. From here, users can then go to each tour's detail page.
<div class="tours">
<div class="row mrow">
<div class="col">
<div class="card dflex">
<div class="card-thumbnail thumbnail">
<div id="carouselExampleInterval" class="carousel slide" data-bs-interval="3200" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="card-body">
<h2 class="card-title"><a href="LINK_TOUR_DETAIL_PAGE">TITLE_TOUR</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-time"><span>Duration: ~5h</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
<div class="card-text">
SUMMARY_HERE
</div>
</div>
<div class="card-footer dflex alcenter jcbetween">
<div class="tour-price">
from <span class="price">PRICE_HERE</span>
</div>
<div class="tour-more">
<a class="btn" href="LINK_TOUR_DETAIL_PAGE">Book Now</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card dflex">
<div class="card-thumbnail thumbnail">
<div id="carouselExampleInterval" class="carousel slide" data-bs-interval="3100" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
<div class="carousel-item">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="card-body">
<h2 class="card-title"><a href="LINK_TOUR_DETAIL_PAGE">TITLE_TOUR</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-time"><span>Duration: ~5h</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
<div class="card-text">
SUMMARY_HERE
</div>
</div>
<div class="card-footer dflex alcenter jcbetween">
<div class="tour-price">
from <span class="price">PRICE_HERE</span>
</div>
<div class="tour-more">
<a class="btn" href="LINK_TOUR_DETAIL_PAGE">Book Now</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card dflex">
<div class="card-thumbnail thumbnail">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
<div class="card-body">
<h2 class="card-title"><a href="LINK_TOUR_DETAIL_PAGE">TITLE_TOUR</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-time"><span>Duration: ~5h</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
<div class="card-text">
SUMMARY_HERE
</div>
</div>
<div class="card-footer dflex alcenter jcbetween">
<div class="tour-price">
from <span class="price">PRICE_HERE</span>
</div>
<div class="tour-more">
<a class="btn" href="LINK_TOUR_DETAIL_PAGE">Book Now</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card dflex">
<div class="card-thumbnail thumbnail">
<img src="IMG_HERE" alt="ALT_HERE" width="530" height="350" loading="lazy"/>
</div>
<div class="card-body">
<h2 class="card-title"><a href="LINK_TOUR_DETAIL_PAGE">TITLE_TOUR</a></h2>
<ul class="tour-check row m-0">
<li class="tour-check-cancel"><span>Free Cancellation</span></li>
<li class="tour-check-pickup"><span>Hotel Pick-up</span></li>
<li class="tour-check-time"><span>Duration: ~5h</span></li>
<li class="tour-check-mobile"><span>Mobile Voucher</span></li>
<li class="tour-check-instant"><span>Instant Confirmation</span></li>
</ul>
<div class="card-text">
SUMMARY_HERE
</div>
</div>
<div class="card-footer dflex alcenter jcbetween">
<div class="tour-price">
from <span class="price">PRICE_HERE</span>
</div>
<div class="tour-more">
<a class="btn" href="LINK_TOUR_DETAIL_PAGE">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
Note
- This code is set up for 4 tours. The first two have slider images. The last two use static images.
- Make sure to update the tour duration.
Thank you
If you have any questions, suggestions, or encounter any issues while working with this project, feel free to reach out. I'm happy to assist whenever I can. You can contact me directly at atozet18@gmail.com or contact me via Team
Really appreciate the trust on this project. Looking forward to more projects together!