Creating a New Page

To create a new page :

  1. Open your code editor.
  2. Create a new file.
  3. Copy code from the Get Starter Kit Codes section at the bottom of the documentation.
  4. Arrange sections as desired between <div class="main-content page-name page-theme-name another-class-page"> and </div>.
  5. Save the file as page-name.html in the HTML/[theme-name]/ directory.
  6. You can see the result by opening page-name.html in your browser app.

In page-name.html, you can change the page title, add new sections, or change section content as when you are modifying a page.

Get Starter Kit Codes

The following is a Starter Kit Codes that you can use to start a new page. You can copy the codes into your code editor application.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Page Name | Vendora - E-commerce Website Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="SaaS Website Template" name="description" />
    <meta content="Designspace.io" name="author" />
    <base href="">
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <!-- Bootstrap Css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Vendor Css -->
    <link href="assets/libs/slick-carousel/slick.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/slick-carousel/slick-theme.css" rel="stylesheet" type="text/css" />
    <link href="assets/libs/leaflet/leaflet.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <!-- App Css-->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="assets/css/custom.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="main-content page-travel page-homepage">
        

        <!-- include your sections code here -->
        

    </div>
    <script type="text/javascript" src="assets/libs/jquery/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>
    <script type="text/javascript" src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="assets/libs/slick-carousel/slick.min.js"></script>
    <script type="text/javascript" src="assets/libs/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
    <script type="text/javascript" src="assets/libs/leaflet/leaflet.js"></script>
    <script type="text/javascript" src="assets/libs/filter-range-slider.min.js"></script>
    <!-- Daterangepicker JS -->
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <!-- App JS-->
    <script type="text/javascript" src="assets/js/app.min.js"></script>
    <script type="text/javascript" src="assets/js/app-product-map.min.js"></script>
    <script type="text/javascript" src="assets/js/app-product-date-range.min.js"></script>
    <script type="text/javascript" src="assets/js/app-product-list-map.min.js"></script>
    <!-- custom JS-->
    <script type="text/javascript" src="assets/js/custom.min.js"></script>
</body>

</html>