Wonted | Book & Author Landing page.

Thank you for purchasing Wonted- Book & Author Landing page.


  • Created: 04 July, 2022
  • Update: 13 Nov, 2022

If you have any questions that are beyond the scope of this help file, Please feel free to email via Profile contact form or item's support page.

We are available for freelance work for any HTML, React, NextJS, WordPress projects.
Write us at themeatelierbd@gmail.com and will reply to you within 24 hours.

Installation

Follow the steps below to setup your site template:

  • Unzip the downloaded package and open the /wonted-html folder to find all the template files. You will need to upload these files to your hosting web server using FTP or c-panel or any other method provide by your server provider in order to use it on your website.
  • Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • HTML/assets - Contains all of the assets referenced
      • assets/css - Stylesheet files
      • assets/images - Images files
      • assets/js - Javacript files
      • assets/sass - Sass files
      • assets/subscribe - subscribe via email
    • HTML/index.html - Home page
    • HTML/all-blogs.html - Blog page
    • HTML/single.html - Single page
    • HTML/all-events.html - All events page
    • HTML/single-event.html - Single event page
    You are free to delete blog & event related html files if you don't need them.

Get Start

To get start you just need to open index.html file on browser. And you will see the landing page.

Now to customize the page and add your content to it you need to do some easy steps.


Customization

Wonted is easy to customize product. You don't have to worry about your coding knowledge to edit the file. Everything is already added.

Here's how you can easily edit and add content πŸ‘‡

  • To change content you just have to open html files.
  • And there you can add your content, your images as your preference.
  • You are free to remove any section if find it useless for you.
  • Nothing more is needed to edit html files.

And if you want to change any style, that also are some easy steps πŸ‘‡

  • you can simply change style by writing code in custom.css file inside of assets/css
  • And you only need to comment out custom.css stylesheet on html file inside head tag.
  • Now just add your style in custom.css file.

*And you are done and ready with your website*

However, we actually used Sass for stylesheet. Which are compiling to css using compiler package. And if you feel to change style in sass file you have to follow few steps to do so.
Process of customize style with SCSS πŸ‘‡
  • Run npm install/yarn add in terminal to install all the uses packages.
  • Then run npm run start/npm start to build and run the project locally.
  • In case you don't have Node.js & NPM package manager on your machine, here how to add it:
    • Download Node.js from browser. This will automatically add npm with it.
    • Open Command Prompt and check node and npm versions to make sure they have been added.
  • You should upload all or specific HTML files as per your need.
  • You are good to go for adding your content now!

Code Structure

WONTED followed a standard and easy to customize coding structure. It maintained W3C validated and all codes are well commented

HTML Structure

Here is the sample of html code for your reference:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- ========== title, description and stylesheets ========== -->
</head>

<body>

  <!-- ========== Header Start ========== -->
  <header>
    <nav class="navbar navbar-expand-lg">
      ......
    </nav>
  </header>
  <!-- ========== Header end ========== -->
  
  <!-- ========== Hero section start ========== -->
  <section id="hero" class="hero hero__padding bg-one">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Hero section end ========== -->

  <!-- ==========  Achieve section start ========== -->
  <section id="benefits" class="achieve section-padding">
    <div class="container"> ...... </div>
  </section>
  <!-- ==========  Achieve section end ========== -->

  <!-- ========== Chapters section start ========== -->
  <section id="chapters" class="section-padding">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Chapters section end ========== -->

  <!-- ========== Chapter Preview section start ========== -->
  <section id="preview" class="section-padding bg-one">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Chapter Preview section end ========== -->
 
  <!-- ========== Pricing section start ========== -->
  <section id="pricing" class="section-padding">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Pricing section end ========== -->
 
  <!-- ========== Author section start ========== -->
  <section id="author" class="section-padding bg-one">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Author section end ========== -->
 
  <!-- ========== CTA section start ========== -->
  <section id="cta" class="section-padding">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== CTA section end ========== -->

  <!-- ========== Testimonial section start ========== -->
  <section id="reviews" class="section-padding bg-one">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Testimonial section end ========== -->

  <!-- ========== Contact section start ========== -->
  <section id="contact" class="section-padding bg-white">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Contact section end ========== -->

  <!-- ========== Footer section start ========== -->
  <section id="footer" class="section-padding">
    <div class="container"> ...... </div>
  </section>
  <!-- ========== Footer section end ========== -->
  

  <!-- ========== Javascript scripts ========== -->
</body>
</html>

Javascript Structure

You will find all Javascript in a single file inassets/js/custom.js. Here you can find all function and can edit them.

We wrote Javascript code following a simple structure. At the top we wrote all comments to give you a overview on total Javascript. We maintained a serial while writing code and comments so that you find it easily.

Here is the sample for your reference:


/*
* Table of contents
* -----------------------------------
* 1.HEADER STICKY
* 2.HEADER ACTIVE ADD CLASS
* 3.HEADER COLLAPSE
* 4.FIXED HEADER
* 5.GLIGHTBOX VIDEO HERO
* 6.AJAX MAILCHIMP SUBSCRIBE
* 7.LOCAL SUBSCRIPTION
* 8.TESTIMONIAL SLIDER
* 9.CHAPTER SLIDER
* 10.CONTACT FORM
* 11.ODOMETER JS
* 12.CHAPTER PREVIEW
* 13.CHAPTER PREVIEW - 02
* 14.AOS JS
* 15.SMOOTH SCROLL ON BUTTON CLICK
*/

<!-- ========== Here are functions maintaining serial of upper comments ========== -->

(function ($) {
  "use strict";
  var PATH = {};

  /******************** 1. HEADER STICKY ********************/
  PATH.HeaderSticky = function () {
      ......
  };

  /******************** 2. GLIGHTBOX VIDEO ********************/
  PATH.videoModal = function () {
      ......
  };

  /******************** 3. AJAX MAILCHIMP SUBSCRIBE ********************/
  PATH.ajaxChimp = function () {
      ......
  };

  /******************** 4. TESTIMONIAL SLIDER ********************/
  PATH.TestimonialSlide = function () {
      ......
  };

  <!-- ========== Functions are called here maintaining serial to make it easy for you as well ========== -->

  /******************** DOCUMENT READY FUNCTION ********************/
  $(function () {
    PATH.videoModal();
    PATH.ajaxChimp();
    PATH.TestimonialSlide();
  });

  /******************** WINDOW ON SCROLL FUNCTION ********************/
  $(window).on("scroll", function () {
    PATH.HeaderSticky();
  });

You can simply add new function or edit function where function are written following this structure. And have to call it bellow if any new function added.


Template Features Customization

Sass

We have added SASS .scss files in template. Which has been compiling to css. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - HTML/assets/sass

Open the assets/sass/base/_base.scss, assets/sass/base/_typography.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your main.scss File.

All colors of template operating from _variable.scss file. Open assets/sass/abstracts/_variable.scss to change colors as you want.

All button designs are in Button component. You can open assets/sass/component/_button.scss and can customize it as you want.

To customize responsive layout you have to open assets/sass/abstracts/mixins.scss. There you can change media queries value as you want.


Style Customization

We have included a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the assets/css/custom.css File and link it in the Document <head> after the css/stylesheet.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

<head>

  <!-- ========== Stylesheets ========== -->
  <!--====== Bootstrap css ======-->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <!--====== Icofont Icon ======-->
  <link rel="stylesheet" href="assets/css/icofont.min.css" />
  <!--====== Glightbox css ======-->
  <link rel="stylesheet" href="assets/css/glightbox.css" />
  <!--======- Swiper css ======-->
  <link rel="stylesheet" href="assets/css/swiper.min.css" />
  <!--====== Margin Padding css ======-->
  <link rel="stylesheet" href="assets/css/margin-paddings.css" />
  <!--====== AOS css ======-->
  <link rel="stylesheet" href="assets/css/aos.css" />
  <!--====== Style css ======-->
  <link rel="stylesheet" href="assets/css/style.css" />

  <!-- ========== Here goes your custom css ========== -->
  <link rel="stylesheet" href="assets/css/custom.css" />

</head>

Typography

Font Family

We used two different font-family. One for Heading and title and another one for rest. You can simply use another font-family from Google Font by importing it inside assets/sass/base/_typography.scss.



  <!-- ========== Fonts ========== -->
  <!--====== Heading font ======-->
  @import url("https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap")
  <!--====== Body font ======-->
  @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0700&display=swap")
  <!-- ========== Add your fonts here or you can replace these two ========== -->

  <!--====== Font Family ======-->
  $font-heading: "Philosopher", sans-serif;
  $font-display: "Poppins", sans-serif;


After importing fonts inside _typography.scss> of index file you just need to add your font family variable in same file. Set your chosen family to $font-heading or $font-display as their value just like the example given up


Color Settings

we have used two different way of changing color. Both way are so easy to understand for you.

One is in _variable.scss file in assets/sass/abstracts/_variable.scss You can change color code here as you want. That will work fine. color-img

Another one is preset colors in color folder inside of assets/css/colors.
There we added some preset colors for you. And all the colors file has been called index.html file. you just have to uncomment the color you want. you also can set new colors as you like. Only need to set color variables.

Logo Settings

The Logo Container can be found in the Header Container - <header>

<!-- Logo --> 
<a class="navbar-brand" href="index.html">
   <img class="img-fluid" src="assets/images/wonted-logo.png" alt="wonted-logo"/>
</a>
<!-- Logo End -->

You can also use text as logo. Just have to use h1 tag instead of img class="img-fluid".


Local Subscription

We have used two different methods to collect e-mail from the site. One is Local system and another one is MailChimp.
By Local system, it defaults enabled in our template. In this system, if anyone fills subscription e-mail field by using their e-mail the e-mail will store in subscribe/email-list.txt file.

Here is a screenshot of HTML codes for local e-mail collection:


MailChimp Subscription

For enabling MailChimp subscription you have to remove comment for the code MailChimp subscription form and enable comment for local subscription. So it will work fine.

Here how you could do that:

Now you need to go through the assets/js/custom.js file and need to add your MailChimp post URL.

Here is screenshot how you could do that:


Contact Form

The contact form perfectly works and sends email to gmail. You just need to change current email from code. Put your email there.

Here is screenshot how you could do that: You can also change subject as you like from here.


Source & Credits

Images:

Fonts:

Scripts:


Support

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

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.

We are available for freelance work for any HTML, React, NextJS, WordPress projects.
Write us at themeatelierbd@gmail.com and will reply to you within 24 hours.