Documentation

Avalle - NFT Portfolio NextJs Template

Avalle is an HTML template for presenting personal portfolio of a NFT Artist. This template is made with the think of current age demand of NFT Digital Arts. By using this template any one can present their NFT collections and selling their products on digital markets. This template has added the currently best features which make this template more attractive and valuable. Features you will get from this template are-

  • Three wonderfully designed home pages with 10+ inner pages
  • Get different styles of collection feature with details page
  • Find Roadmap feature for presenting the collections
  • HTML 5 with CSS and using by Bootstrap 5 framework including SaaS files
  • Completely clean and very well-organized code structure
  • This template is easily customizable and fully responsive with completely W3 validated markup

    • Item Name:Alhesort - Corporate Nextjs react Template
    • Author: EgensLab
    • Created: 20 Jul, 2022
    • Version: 1.0

    If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page


    Installation

    Follow the steps below to setup your site template:

    1. Install recommended version of Node.js.
    2. Use command line (powershell or terminal) to navigate to project root directory.
    3. Run following commands, one after another:
      • npm install
      • npm update
      • npm run dev
    4. In your browser navigate to http://localhost:3000
    5. Thats all! Now you should see your site

    Logo Settings

    The logo container can be found in the Header - header

    <!-- Header logo -->
      <div className="header-logo">
        <Link href="/ ">
          <a><img alt="image" src="assets/images/icons/header1-logo.svg" />
       </Link>
      </div>
    
    <!-- end header-logo -->

    Note Two images are used for logo, one for header logo (Logo that will display even in sticky header), second for footer logo (Logo that will display in footer area). .header-logo  is used to set which image you want as default.footer-logo   is used to set which image you want to display in footer.

    Note If you want to increase the size of your logo container then you can increase max-height as per your need in /css/style.css file under this css class: header .header-logo img

    Image and Favicon Setting

    Golf Lab download package does not contain actual images which are there in our online demo due to licensing limitation and this is already mentioned in item description also as per Envato policy. We are using placeholder images instead of real images. You can replace placeholder image url with your image url like assets/images/image.jpg and make sure to put the image in /images/ folder.

    <img src="https://placehold.it/750x500" alt="image alt text">
        Change to
    <img src={import image source name} alt="image alt text">

    JSX Structure

      import React from 'react'
      import { Link } from 'react-router-dom'
      import breadcrumbImg from '../../assets/img/icons/breadcrumb-arrow.svg'
    
      function Breadcrumb(props) {
      return (
      <>
        <section className="breadcrumbs">
              <div className="container">
                <div className="row">
                  <div className="col-12">
                      <div className="breadcrumb-wrapper">
                        <h1>{props.pageName}
                        <span>Home{props.pageName}
                      </div>
                  </div>
                </div>
              </div>
        </section>
      </>
      )
    }
    
    export default Breadcrumb;
    

    Home Page Demos

    Avalle is a clean and modern design, BootStrap 5 responsive, business and portfolio multipurpose React template with 5+ ready homepage demos.

    Header

    You can use one headers while creating your Pages

    NextJs Third Party Plugin

    Following list of package will be included:


    Version 1.0 - Current Version


    Version 1.1

    Comming Soon


    Three Equal columns

    <div class="container">
          <div class="row">
              <divsss class="col">
                Column
              </div>
              <div class="col">
                  Column
              </div>
              <div class="col">
                Column
              </div>
        </div>
      </div>
    

    Source & Credits

    Images:

    Icons:

    Scripts:


    Support

    If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

    We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

    Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

    Don’t forget to Rate this template

    Please Add your Review (Opinion) for Our template. It would be a great support for us.
    Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
    Thank You.

    More Templates

    Checkout Our Below Premium Templates

    Our Portfolio

    Copyright © 2022 EgensLab. All Rights Reserved.