Modifying a Page
Vendora includes at least 21 HTML files grouped into three themes (Travel, Fashion, and Cosmetics) under the [HTML]/[theme-name]/*.html directory.
Each page template are structured using various sections.
These sections have several class variations and the content can be customized by editing the HTML code.
Folder Structure
-
HTML
//HTML source files
-
travel
//Source files for Travel theme
- homepage.html
- //you can add a new page-name.html here
-
fashion
//Source files for Fashion theme
- homepage.html
- //you can add a new page-name.html here
-
cosmetics
//Source files for Cosmetics theme
- homepage.html
- //you can add a new page-name.html here
-
travel
//Source files for Travel theme
Changing Page Title:
The page title, displayed in the browser's title bar or tab, is important for SEO.
Modify the page title by setting the <title></title> tag inside the HTML file.
<title>Homepage | Vendora - E-commerce Website Template</title>
Adding a New Section:
New sections are inserted between <div class="main-content page-name another-class-page"> and </div> in the HTML file.
More details about sections and variations are under "SECTIONS & VARIATIONS".
Change Section Variation & Content:
HTML pages include sections with changeable variation & content. To modify section variation & content, locate it in the HTML file, and adjust it.
For example, in the page travel/homepage.html includes a header section HTML code with header-homepage-1 variation class. You can change variation class & content of that section.
<header class="header header-homepage-1 " style="background-image: url('assets/images/travel-homepage-header-bg.png')">
<nav class="navbar navbar-transparent navbar-variation-1 navbar-center navbar-expand-lg">
<div class="navbar-bg"></div>
<div class="container">
<div class="navbar-container-bg"></div>
<a href="index.html" class="navbar-brand">
<img src="assets/images/logo-vendora.svg" alt="vendora" height="32" class="dark">
<img src="assets/images/logo-vendora-light.svg" alt="vendora" height="32" class="light">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-controls="top-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="navbar-nav navbar-menu">
<li class="nav-item">
<a href="#Top Deals" class="nav-link">Top Deals</a>
</li>
<li class="nav-item">
<a href="#Package" class="nav-link">Package</a>
</li>
<li class="nav-item">
<a href="#Review" class="nav-link">Review</a>
</li>
<li class="nav-item">
<a href="#Blog" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="#Contact" class="nav-link">Contact</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item menu-item">
<a href="#sign-in" class="btn nav-link">Sign In</a>
</li>
<li class="nav-item menu-item">
<a href="#sign-up" class="btn btn-sm nav-btn">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="header-container-bg" style="background-image: url('assets/images/travel-homepage-header-bg.png')"></div>
<div class="header-content">
<div class="header-text-button">
<h6 class="header-subtitle">Welcome to Vendora Adventures!</h6>
<h2 class="header-title">Your gateway to unforgettable journeys</h2>
<div class="header-sub-titles">
<div class="header-cta">
<form class="form-booking-header" action="#">
<div class="form-inner">
<div class="input-group input-group-destination">
<input type="text" class="form-control" placeholder="Destination">
</div>
<div class="input-group input-group-date flex-nowrap">
<button class="btn btn-icon" type="button"><i class="ic ic-calendar-blank"></i></button>
<input type="text" class="form-control" placeholder="Check-in">
</div>
<div class="input-group input-group-date flex-nowrap">
<button class="btn btn-icon" type="button"><i class="ic ic-calendar-check"></i></button>
<input type="text" class="form-control" placeholder="Checkout">
</div>
<div class="input-group input-group-guest">
<select class="form-select">
<option selected="">1 Guest</option>
<option>2 Guests</option>
</select>
</div>
</div>
<button class="btn btn-icon btn-submit btn-lg btn-brand-primary" type="button">
<i class="ic ic-search white"></i>
<span class="d-xl-none">Search</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="header-additional-section">
<section class="client client-variation-1">
<div class="container">
<div class="section-content">
<div class="section-images">
<div class="item">
<img src="assets/images/client-image-96-1-white.svg" />
</div>
<div class="item">
<img src="assets/images/client-image-96-2-white.svg" />
</div>
<div class="item">
<img src="assets/images/client-image-96-3-white.svg" />
</div>
<div class="item">
<img src="assets/images/client-image-96-4-white.svg" />
</div>
<div class="item">
<img src="assets/images/client-image-96-5-white.svg" />
</div>
<div class="item">
<img src="assets/images/client-image-96-6-white.svg" />
</div>
</div>
</div>
</div>
</section>
</div>
</header>