Introduction

Thank you for choosing Evne! We’re delighted that you’ve found the perfect template for your needs. Our primary goal is to ensure you’re completely satisfied with your purchase and to provide you with the tools to create an exceptional website effortlessly.

Before you proceed with installing the template, we strongly recommend reviewing this guide. It contains all the essential information, instructions, and best practices you’ll need to use Evne effectively and achieve the best results.

If you have any questions or need further assistance, our support team is here to help. Simply submit a ticket through our support portal, and we’ll get back to you promptly.

Technologies Used

This template is built with modern tools and frameworks, including:

  1. - Vue.js and Nuxt.js for dynamic, SEO-friendly web applications.

    - Bootstrap Framework for responsive design and pre-styled components, ensuring a seamless user experience across all devices.

Directory Structure

Extract the zip file you received after purchase and you would find the exact below files and folders: 

                                    evne-nuxt                           # [Root Folder] Nuxt project folder
├── assets                          # [Folder] Static resources for the project
│   ├── css-plugins                 # [Folder] Plugin-specific CSS files
│   ├── fonts                       # [Folder] Font files
│   ├── hooks                       # [Folder] JavaScript hooks and plugins
│   │   ├── filter-masonry.js       # [JS File] Filter for Masonry layout
│   │   ├── gallery-pop.min.js      # [JS File] Gallery popup plugin
│   │   ├── hooks.js                # [JS File] Custom hooks
│   │   └── animations.js           # [JS File] animations
│   ├── scss                        # [Folder] SCSS files for styling
│   │   ├── main.scss               # [SCSS File] Main SCSS file
│   │   ├── site                    # [Folder] SCSS variables and utilities
│   │   │   ├── _body.scss          # [SCSS File] Body styling
│   │   │   ├── _classes_color.scss # [SCSS File] Color classes
│   │   │   ├── _colors.scss        # [SCSS File] Color definitions
│   │   │   ├── _containers.scss    # [SCSS File] Container styles
│   │   │   ├── _font_family.scss   # [SCSS File] Font family settings
│   │   │   ├── _helper_class.scss  # [SCSS File] Helper classes
│   │   │   ├── _margin.scss        # [SCSS File] Margin utilities
│   │   │   ├── _padding.scss       # [SCSS File] Padding utilities
│   │   │   ├── _screen.scss        # [SCSS File] Media queries and screens
│   │   │   ├── _scrollbar.scss     # [SCSS File] Scrollbar styles
│   │   │   ├── _tags.scss          # [SCSS File] Tags and labels styling
│   │   │   ├── _typography.scss    # [SCSS File] Typography styles
│   │   │   └── _variables.scss     # [SCSS File] Variables used in the SCSS
├── components                      # [Folder] Vue components for reusable sections
│   ├── about                       # [Folder] About section components
│   ├── animations                  # [Folder] Animation-related components
│   ├── awards                      # [Folder] Award-related components
│   ├── blog                        # [Folder] Blog section components
│   ├── collaborate                 # [Folder] Collaboration-related components
│   ├── contact                     # [Folder] Contact page components
│   ├── creative                    # [Folder] Creative Studio section components
│   ├── excellence                  # [Folder] Excellence section components
│   ├── featured                    # [Folder] Featured section components
│   ├── footer                      # [Folder] Footer components
│   ├── header                      # [Folder] Header components
│   ├── images-box                  # [Folder] Image box components
│   ├── layout                      # [Folder] Layout-related components
│   ├── links                       # [Folder] Link components
│   ├── next                        # [Folder] Next section components
│   ├── our-team                    # [Folder] Our team section components
│   ├── services                    # [Folder] Services section components
│   ├── site                        # [Folder] Site-wide components
│   ├── some-sections               # [Folder] Other sections (e.g., facts, video)
│   ├── testimonials                # [Folder] Testimonials section components
│   └── works                       # [Folder] Works section components
├── layouts                         # [Folder] Vue layout files
│   └── default.vue                 # [Vue File] Default layout for the project
├── pages                           # [Folder] Vue page files (e.g., about, blog, works)
│   ├── about.vue                   # [Vue File] About page
│   ├── blog-list.vue               # [Vue File] Blog list page
│   └── contact.vue                 # [Vue File] Contact page
├── plugins                         # [Folder] Nuxt plugins
│   ├── global-properties.js        # [JS File] Global properties plugin
│   ├── router.js                   # [JS File] Router plugin
│   └── split.client.js             # [JS File] Client-side split plugin
├── public                          # [Folder] Public assets (e.g., images, favicon)
│   ├── favicon.png                 # [Image] Favicon for the website
│   └── images                      # [Folder] Image files for the project
├── server                          # [Folder] Server-side files (e.g., APIs)
│   ├── api                         # [Folder] API routes
│   └── tsconfig.json               # [File] TypeScript configuration for server
├── store                           # [Folder] Vuex store files
│   └── options.js                  # [JS File] Vuex options store
├── .gitignore                      # [File] Git ignore file
├── app.vue                         # [Vue File] Root app component
├── error.vue                       # [Vue File] Error page component
├── nuxt.config.ts                  # [File] Nuxt.js configuration
├── package-lock.json               # [File] NPM lock file
├── package.json                    # [File] Project metadata and dependencies
└── README.md                       # [File] Project readme

Bootstrap Framework

Overview

This template is built using the Bootstrap Framework, a popular front-end library for responsive and mobile-first web development. It provides a solid foundation with pre-styled components and a flexible grid system.

Requirements

  1. 1. Download and Install Node.js and NPM

    Download and install Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.

  2. 2. Version Information

    Current as of the date of this document: Node v23.5.0.

  3. 3. A Modern Web Browser

    A modern web browser such as Chrome, Firefox, or Safari.

  4. 4. A Code Editor

    A code editor like VS Code, Sublime Text, or any other text editor for customization.

  5. 5. Basic Knowledge

    A basic understanding of HTML, CSS, JavaScript, Vue, and Nuxt.js is required for customizations and editing.

Installation

To run this template, you will need:

  1. 1. Download the Template

    Download the Evne Nuxt.js template from the official source or ThemeForest.

  2. 2. Extract the Files

    Unzip the downloaded template files to your local machine.

  3. 3. Install Dependencies

    Open a terminal and navigate to the project folder, then run the following command to install the required dependencies:

    npm install
  4. 4. Run the Project

    After installation, start the development server by running:

    npm run dev
  5. 5. Generate the Static Files

    If you want to generate the project as static files for deployment, run the following command:

    npm run generate

    This will create a `dist` folder containing the generated static files, which can be deployed to any static hosting service.

  6. 6. Customize

    Edit the Vue, Nuxt.js, CSS, and JavaScript files to customize the template according to your needs.

Open your web browser and navigate to http://localhost:3000 to preview the template.

Colors

In the template, there is a set of predefined colors that are used throughout the design. These colors are defined using CSS custom properties (CSS variables) for easy maintenance and customization.

SCSS File

The colors are defined in the SCSS file located at: assets\scss\site\_colors.scss

Here are the color variables:

/* ================= Colors ================= */ :root {
    --color-black: #1e2024;
    --color-black-2: #181818;
    --color-primary: #f25749;
    --color-light: #fff;
    --color-1: #d7dbdf;
    --color-2: rgba(241, 241, 241, 20%);
    --color-1: #4f5659;
    --color-2: #efd8c9;
    --color-3: #e9ecf2;
}

The color variables defined in \_colors.scss are then used in the stylesheet to style various elements of the page. You can customize these values in the SCSS file to change the theme colors across the site.

Explanation of Color Variables:

  • --color-black

    A dark black color

    #1e2024

  • --color-black-2

    A slightly lighter black

    #181818

  • --color-primary

    The primary color used for accents

    #f25749

  • --color-light

    White color

    #ffffff

  • --color-1

    A light gray color

    #d7dbdf

  • --color-2

    A semi-transparent light gray

    rgba(241, 241, 241, 20%)

  • --color-3

    A muted gray-green color

    #4f5659

  • --color-4

    A soft beige color

    #efd8c9

  • --color-5

    A very light blue-gray color

    #e9ecf2

Options

Where to Find the "options"

Find the following "options.js" file in the path store\options.js

// ### [ Options ] ################## export const options = reactive({

    const enableSmoothScroll = false;
    const enableCursorFollower = true;
    const enableParallaxImages = false;

});
// ##################################

Smooth Scroll

In the template, there is an option to enable or disable the smooth scrolling feature using the scrollbar-smooth library. This feature enables smooth transitions when scrolling through the page.

To modify this setting, you will need to edit the store\options.js file in template.

How to Adjust the Setting:

  1. 1. Open the options.js file located in template folder.

  2. 2. Search for the following line of code:

    // ### [ Options ] const enableSmoothScroll = false;

  3. 3. The enableSmoothScroll variable controls whether 'smooth scrolling' is enabled or not:

    - Set to true : Smooth scrolling is enabled.

    - Set to false : Smooth scrolling is disabled, and scrolling will be the default (non-smooth).

Parallax Images

In the template, there is an option to enable or disable the parallax images feature. This feature controls the visual effect where images move at a different speed than the rest of the page content as users scroll.

To modify this setting, you will need to edit the store\options.js file in template.

How to Adjust the Setting:

  1. 1. Open the options.js file located in your project folder.

  2. 2. Search for the following line of code:

    // ### [ Options ] const enableParallaxImages = false;

  3. 3. The enableParallaxImages variable controls whether parallax images is enabled or not:

    - Set to true: Enables the parallax images effect.

    - Set to false: Disables the parallax images effect, and the images will scroll normally with the rest of the content.

Cursor Follower

In the template, there is an option to enable or disable the Cursor Follower feature. This feature controls the visual effect where images move at a different speed than the rest of the page content as users scroll.

To modify this setting, you will need to edit the store\options.js file in template.

How to Adjust the Setting:

  1. 1. Open the options.js file located in your project folder.

  2. 2. Search for the following line of code:

    // ### [ Options ] const enableCursorFollower = false;

  3. 3. The enableCursorFollower variable controls whether 'cursor follower' is enabled or not:

    3. This line controls whether the 'cursor follower' feature is enabled:

    - Set to true: Enables the 'cursor follower' effect.

    - Set to false: Disables the 'cursor follower' effect, and the images will scroll normally with the rest of the content.

Credits / Plugins

Support

Once again thank you for your purchase. We'll be happy to answer the questions you have related to the template. In case if you have any suggestion or feature, request please feel free to contact us, We'll try to implement it and will release it as part of future updates.

Thanks for purchasing template and for supporting our work. If we fail here in this documentation, please e-mail us . If you have a spare time, please go and rate my template. We will appreciate that.

If you have any questions or need further assistance, our support team is here to help. Simply submit a ticket through our support portal, and we’ll get back to you promptly.

Stay Awesome!

SkewDiv