Wonted | Book & Author Landing page.
Thank you for purchasing Wonted- Book & Author Landing page.
- Version: 1.6.1
- Author: ThemeAtelier
- Created: 04 July, 2022
- Update: 25 October, 2023
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.
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 referencedassets/css
- Stylesheet filesassets/images
- Images filesassets/js
- Javacript filesassets/sass
- Sass files-
assets/subscribe
- subscribe via email
HTML/index.html
- Home pageHTML/all-blogs.html
- Blog pageHTML/single.html
- Single pageHTML/all-events.html
- All events pageHTML/single-event.html
- Single event page
You are free to delete
blog
&event
relatedhtml
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 ofassets/css
- And you only need to comment out
custom.css
stylesheet onhtml
file insidehead
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.
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:
- Pexels - www.pexels.com/
Fonts:
- Icofont - https://icofont.com/
- Google Font - https://fonts.google.com/
Scripts:
- jQuery - http://www.jquery.com/
- Bootstrap v5.2.x - http://bootstrap-v5.2.com/
- GLightbox js biati-digital.github.io/glightbox
- Swiper js - https://swiperjs.com/
- One-Page-Nav js github.com/jQuery-One-Page-Nav
- Appear js creativelive.github.io/appear
- Odometer js https://github.hubspot.com/odometer/docs/welcome
- Ajaxchimp js https://plugins.jquery.com/ajaxchimp/
- AOS js https://michalsnik.github.io/aos/
Support
If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page
Donβt forget to Rate this template
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.
HTML
,
React
, NextJS
, WordPress projects
. Write us at themeatelierbd@gmail.com and will reply to you within 24 hours.
Changelog
See what's new added, changed, fixed, improved or updated in the latest versions.
Version 1.6.1 (25 October, 2023)
- Fixed Header menu close
- Fixed Improved CSS
Version 1.6 (29 September, 2023)
- Updated Added glightbox quick view in the chapter preview section
- Updated Added glightbox quick view in the released books section
- Updated Added glightbox quick view in the Weekly selling books section
- Fixed Header animation
- Fixed Improved CSS
Version 1.5 (21 August, 2023)
- AddedBlog Grid
- AddedBlog List
- AddedBlog sidebar left
- AddedBlog sidebar right
- AddedSample Page
- AddedPage sidebar left
- AddedPage sidebar right
- Added404 pagae
- AddedFooter New Version
- Updated Op Nav to jQuery One page Nav for better usibility
- Fixed Improved CSS for visibility issues and some other issues
Version 1.4 (11 Mar 2023)
- Updated Change blog layouts
Version 1.0 (18 September, 2022)
Initial Release