BentoFolio - Portfolio HTML5 Template

Documentation

Template Name: BentoFolio
Author: Marvel_Theme
Version: 1.0
Initial Release: 10 February, 2024

Thank you very much for purchasing the template. We've put a lot of hard work into it, and we hope you love it as much as we do. As far as the documentation is concerned, we have tried to cover as much as possible to help you get your new template up and running and to help you customise it. If you have any questions that are beyond the scope of this help file, please feel free to drop us an email.

What's included

After downloading the files from Themeforest and unzip them to the local disk on your computer. Inside the extracted folder you will see three folders named documentation, bentofolio-dist & bentofolio-dev.

  • documentation - the documentation for the BentoFolio template
  • bentofolio-dist - the compiled files that you can cusmomize with your content and uplaod to your server
  • bentofolio-dev - all the source files of the template with compiled and production ready files for the developers and advanced users to customize even more.

Folder structure


bentofolio-dev/
├── build
├── dist
├── src/
│   ├── css/
│   │   ├── externals/
│   │   ├── _main.scss
│   │   ├── _tailwind.scss
│   │   └── style.scss
│   ├── img/
│   │   └── ...
│   ├── js/
│   │   ├── externals/
│   │   ├── custom.js
│   │   └── main.js
│   ├── partials/
│   │   ├── footer.html
│   │   ├── head.html
│   │   ├── header.html
│   │   └── plugin-scripts.html
│   ├── php/
│   │   └── contact_email.php
│   ├── about.html
│   └── ...
├── .gitignore
├── gulpfile.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── yarn.lock

Customization


Methode 1:

To customize the template with your own contents, you can use the bentofolio-dist folder. This is a auto-generated and compiled folder ready to use for instant use.


Methode 2:

If you want to customize more, you can use the bentofolio-dev folder. You need to install some dependencies on your machine. The steps are:

  1. Make sure you have installed nodejs on your computer.
  2. Install gulp-cli on your computer by run command npm install -g gulp-cli from your terminal (Mac/Linux) or Command prompt/Powershell (Windows).
  3. Install yarn on your computer by run command npm install --global yarn from your terminal (Mac/Linux) or Command prompt/Powershell (Windows).
  4. Navigate through bentofolio-dev folder & run command yarn install for installing all of your package.
  5. Run command npm run dev to start this project on development server. -- this will build the template and store them to the build folder.
  6. After completing development, run command npm run build -- this will build the template and store them to the dist folder. This files are minified css and js, images are optimized and compact by removing unused css from the css files.

Change titles, favicons, descriptions

Nagivate to bentofolio-dev/src/partials/head.html and change the title of your website. You can add more meta tags which are helpful for SEO in this file. To change the favicon, nagivate to bentofolio-dev/src/img and replace the favicon.svg with your own favicon.


Logo

To change the logo, Nagivate to bentofolio-dev/src/partials/header.html and replace the svg and span with your image or text like below.




Footer text

Nagivate to bentofolio-dev/src/partials/footer.html and change the copyright text from the footer.



Contact email

To get the email in your inbox you need to replace the email address from bentofolio-dev/src/php/contact_email.php

Changelog

v1.0 - 10 February, 2024

Initial Release

Rate This Template

If you like this template, please remember to rate it on ThemeForest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on ThemeForest , then next to this template give it the five star rating :)

We would love to hear your feedback. If you need any support or find any bugs or have suggestions for improvements please get in touch.