—Table of Contents

Navigate this documentation to set up, customize, and deploy your Trendexa theme.

• 01Introduction & Welcome→
• 02Theme Features→
• 03Package Contents & File Structure→
• 04Getting Started & Installation→
• 05HTML Pages Included→
• 06HTML Structure & Markup→
• 07CSS Files & Customization→
• 08JavaScript & Plugins→
• 09Header & Navigation→
• 10Page Sections Customization→
• 11Footer & Newsletter→
• 12Browser Support→
• 13Sources & Credits→
• 14Support & Contact→

01Introduction

Welcome to Trendexa — a clean, modern, and feature-rich HTML template.

Trendexa is a static HTML5 / CSS3 / JavaScript template.You can host it on any standard web server, including shared hosting, GitHub Pages, Netlify, Vercel, or a CDN.

Who Is This Template For?

• Mobile review websites publishing news, reviews, and comparisons.
• Tech bloggers writing about phones, gadgets, drones, cameras, and accessories.
• Affiliate marketers running price-comparison or "best-under-budget" pages.
• Consumer electronics retailers needing a content-driven landing presence.
• Developers who need a polished starting point to integrate with WordPress, Laravel, Next.js, or any back-end of choice.

What You Will Need

• A modern code editor — VS Code, Sublime Text, or similar.
• Basic working knowledge of HTML and CSS.
• A web browser for previewing your changes (Chrome, Firefox, Edge, or Safari).
• An image editor if you wish to replace banner images or logos.

02Theme Features

Everything you need to launch a content-rich tech review website.

03Package Contents & File Structure

Understand the contents of the Trendexa theme package before you begin.

After unzipping the downloaded archive from ThemeForest, you will find the following folder layout inside the trendexa-html/ directory:

trendexa-html/
├── index.html                  // Homepage
├── latest-mobile.html          // Latest mobile listing
├── upcoming-mobile.html        // Upcoming devices
├── 5g-mobile.html              // 5G mobile listing
├── keypad-mobile.html          // Keypad / feature phones
├── important-mobile-aps.html   // Essential apps page
├── compare.html                // Comparison overview
├── product-details.html        // Single product page
├── bestphone.html              // Best phone under [price]
├── reviews.html                // Reviews listing
├── specific-review.html        // Single review page
├── news.html                   // News listing
├── news-details.html           // News article page
├── howto.html                  // How-to articles
├── moregadgets.html            // Other gadgets
├── webstories.html             // Web stories
├── properties-list.html        // Search results page
├── contact-us.html             // Contact form page
├── disclaimer.html             // Disclaimer page
├── privacy-policy.html         // Privacy policy page
├── cookie-policy.html          // Cookie policy page
├── Sitemap.html                // HTML sitemap
└── assets/
    ├── css/                    // Stylesheets
    ├── js/                     // JavaScript files
    ├── img/                    // Theme images
    │   ├── advertisement-image/
    │   ├── feature-slider-image/
    │   ├── icon/
    │   ├── latest-news/
    │   ├── menu/
    │   ├── mobile-list/
    │   ├── trending-news/
    │   └── upcoming-mobiles/
    ├── fonts/                  // Web fonts
    └── trendexa-logo.png       // Brand logo

04Getting Started & Installation

Get Trendexa running locally or on your live server in minutes.

Step 1 — Download & Extract

Download the full package from your ThemeForest Downloads page. Choose "All files & documentation". Extract the ZIP archive to your preferred working folder.

Step 2 — Open in Your Code Editor

Open the extracted trendexa-html/ folder in any modern code editor such as Visual Studio Code, Sublime Text, or WebStorm.

Step 3 — Preview Locally

Because Trendexa is a static template, you can simply double-click index.html to open it in your browser. For best results — especially to avoid browser security restrictions on local file access — run a small local server:

# Using Python 3
python -m http.server 8000

# Using Node.js (http-server package)
npx http-server . -p 8000

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000 in your browser.

Step 4 — Upload to Your Web Server

Once you are ready to go live, upload the entire folder contents to your web server's public directory using FTP (FileZilla, Cyberduck) or your hosting provider's file manager.

05HTML Pages Included

Trendexa ships with 20+ ready-to-use HTML pages.

06HTML Structure & Markup

Understand how every page is structured.

Every Trendexa page follows a predictable, semantic skeleton. Once you understand this structure, you can quickly modify any page in the package.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trendexa</title>

  <!-- Stylesheets -->
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

  <!-- Top bar / Header -->
  <header class="site-header"> ... </header>

  <!-- Main navigation menu -->
  <nav class="main-nav"> ... </nav>

  <!-- Page-specific content -->
  <main>
    <section class="trending-news"> ... </section>
    <section class="mobile-list"> ... </section>
    <section class="brand-showcase"> ... </section>
    ...
  </main>

  <!-- Footer + Newsletter -->
  <footer class="site-footer"> ... </footer>

  <!-- Scripts -->
  <script src="assets/js/main.js"></script>
</body>
</html>

Key Structural Sections

07CSS Files & Customization

Modify colors, typography, and spacing with confidence.

All theme styling lives inside the assets/css/ directory. The main stylesheet contains your site's complete visual definition.

Main Stylesheet

The core stylesheet is loaded last so you can override anything by adding custom rules at the end of the file or by creating a separate assets/css/custom.css file linked after the main stylesheet.

Changing the Primary Brand Color

Open assets/css/style.css and search for the brand color value. Replace it everywhere with your new color. We strongly recommend using Find & Replace in your editor to update all instances at once.

/* Example: changing primary color */
:root {
  --brand-primary: #2563eb;     /* Old */
  --brand-primary: #16a34a;     /* New */
}

Typography

Trendexa uses a clean sans-serif as the default. To change the font family globally, modify the body rule:

body {
  font-family: 'Poppins', 'Helvetica', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1e293b;
}

If you want to use Google Fonts, paste the import line at the top of style.css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

08JavaScript & Plugins

All interactive elements are powered by lightweight scripts.

Trendexa uses a small set of well-known JavaScript libraries to power carousels, dropdown menus, and form interactions. All scripts are loaded from the assets/js/ folder.

Included Scripts

Initializing a New Carousel

To turn any block of cards into a slider, give it a unique class and call the slider initialization in main.js:

$(document).ready(function () {
  $('.your-custom-slider').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    responsive: [
      { breakpoint: 992, settings: { slidesToShow: 3 } },
      { breakpoint: 768, settings: { slidesToShow: 2 } },
      { breakpoint: 480, settings: { slidesToShow: 1 } }
    ]
  });
});

Disabling a Script

If you don't need a particular feature, simply remove or comment out its <script> tag in your HTML files.

09Header & Navigation

Customize the logo, social icons, and main menu.

Replacing the Logo

The default logo is located at assets/trendexa-logo.png. To replace it, save your new logo with the same name and dimensions, or update the image path in your HTML:

<a href="index.html">
  <img src="assets/your-logo.png" alt="Your Brand">
</a>

Recommended logo dimensions: 180 × 50 pixels (PNG with transparent background). For high-DPI screens, supply a 2× version if possible.

Editing the Main Menu

The navigation is a simple unordered list. Each top-level item can have a child <ul> for dropdown links.

<ul class="main-menu">
  <li><a href="index.html">Home</a></li>
  <li>
    <a href="#">Mobile</a>
    <ul>
      <li><a href="latest-mobile.html">Latest Mobiles</a></li>
      <li><a href="upcoming-mobile.html">Upcoming Mobiles</a></li>
      <li><a href="5g-mobile.html">5G Mobiles</a></li>
    </ul>
  </li>
  <li><a href="compare.html">Compare</a></li>
  <li><a href="reviews.html">Reviews</a></li>
  <li><a href="news.html">News</a></li>
</ul>

Social Icons

Update the href attributes of each social link in the header to point to your real Facebook, LinkedIn, YouTube, and X (Twitter) pages.

10Page Sections Customization

Edit each homepage block to match your real content.

Trending News Block

Edit the three card items inside the .trending-news section. Each card uses the same markup — change the image, date, title, and link.

Mobile Listing Grid

Each mobile card includes:

• Phone image — replace inside assets/img/mobile-list/
• Phone name — for example, "Samsung Galaxy A54"
• Two action buttons — "Review" and "Details" linking to your pages

Brand Showcase

Add or remove brand entries inside the .brand-showcase section. Each brand is a simple heading or card that you can link to a filtered listing page.

Best Mobile by Price Slider

This carousel highlights "Best Mobile Under [Price]" cards. Edit each card to feature a real device and price. The currency symbol is fully configurable — replace the default Bangladeshi Taka symbol with $, €, £, or any local currency code to match your audience.

Popular Comparisons

The comparisons section lists "Phone A vs Phone B" links. Update the text labels and link targets to load your compare.html with the proper query parameters or pre-filled product data.

Upcoming Mobiles Carousel

Showcase phones that have not yet launched. Each card includes an image, device name, and tentative price.

How-To and Latest News Blocks

These two grids share the same card layout. Update the thumbnail, date, and headline for each entry. Long titles wrap automatically.

11Footer & Newsletter

The footer keeps brand information, legal links, and signup form together.

Footer Columns

The footer is divided into four logical columns:

1. Brand block — logo, short tagline, and social icons.
2. About Us — secondary navigation links such as Mobile, Web Stories, Sitemap.
3. Terms & Conditions — Privacy Policy, Cookie Policy, Contact links.
4. Newsletter signup — email field and submit button.

Connecting Newsletter Signup

The newsletter form ships with no back-end action by default. To make it functional, point the form to your provider:

<form action="https://your-provider.com/subscribe"
      method="POST" class="newsletter-form">
  <input type="email" name="EMAIL"
         placeholder="Enter your email" required>
  <button type="submit">Subscribe</button>
</form>

Popular providers and their endpoint patterns:

Copyright Line

Update the copyright year and brand name inside the footer:

<p>© 2026 YourBrand — All rights reserved.</p>

12Browser Support

Trendexa is tested on all major modern browsers.

13Sources & Credits

Acknowledgements for the open resources used in this theme.

Trendexa includes or makes reference to the following open libraries and resources. All third-party assets remain property of their respective owners and are used in accordance with their licenses.

• jQuery — JavaScript utility library (MIT License)
• Carousel / Slider plugin — for sliders and rotators
• Google Fonts — typography (Open Font License)
• Demo images — for preview only; not licensed for redistribution. Replace before launch.

14Support & Contact

We are here to help you get the most out of Trendexa.

Thank you again for choosing Trendexa. If you encounter any issue, have questions about installation, or need help with customization, please reach out through the official ThemeForest support channel attached to this item.

Before Contacting Support

1. Re-read the relevant section of this documentation.
2. Confirm you are using a supported browser version.
3. Test on a clean copy of the original package to rule out a custom edit.
4. Check the JavaScript console for any obvious error messages.

What to Include in a Support Request

• Your purchase code from ThemeForest.
• A clear description of the problem and the steps to reproduce it.
• The page URL where the issue occurs.
• Browser name, version, and operating system.
• Screenshots or a short screen recording when possible.

What Support Covers

• Bug fixes and reported template defects.
• Help with included features and standard customization questions.
• Compatibility with supported browser versions listed above.

What Support Does Not Cover

• Custom feature development or third-party plugin integrations.
• Server, hosting, or domain configuration issues.
• Modifications to a heavily edited copy of the theme.