Wonted - Book & Author React Template.

Thank you for purchasing Wonted- Book & Author React Template.

  • Created: 07 August, 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 [email protected] 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 folder to find all the template files .
  • Install NPM packages:
    • Run npm install in terminal to install all the uses packages.
  • Development server:
    • Then run npm start to run the project locally. It will navigate you to http://localhost:3000/.
    • The app will automatically reload if you change any of the source files.
  • Build
    • Run npm run build to build the project. The build artifacts will be stored in the build/ directory.
  • 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.

Get Start

After installing packages and running npm start you're set to see the website on browser.

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

Deployment

After changing content as your preference you need to deploy the site.

For deployment you can follow this official deployment documentation of react. Deployment Documentation

Folder Structure

 
    |——wonted
    |  |
    |  |——public/
    |  |  |——assets/                    
    |  |  |    |——icons/               --(Every used icons are here);
    |  |  |    |——images/              --(All images are here);
    |  |  |——favicon.ico
    |  |  |——index.html                 
    |  |  |
    |  |——src/
    |  |  |——assets/                    
    |  |  |    |css/                    --aos.css, margins-padding.css;            
    |  |  |    |sass/                   --abstracts, base, components, pages, main.scss;
    |  |  |
    |  |  |——components/                --Component Files & Folder;                    
    |  |  |    |global/                 --header.js, footer.js;                   
    |  |  |    |pages/                  --(All 6 index file, single pages);                  
    |  |  |    |other js files/         --about.js, achieve.js, author.js, blog.js, books.js, chapter.js,
    |  |  |    |                        --chapter-preview.js, contact.js, cta.js, event.js, fun-fact.js,
    |  |  |    |                        --hero.js, testimonial.js, pricing.js;
    |  |  |——data/                      --All Json Data;
    |  |  |    |json files/             --about.json, achieve.json, achievement.json, author.json, blog.json,
    |  |  |    |                        --books.json, chapter.json, chapter-preview.json, contact.json,
    |  |  |    |                        --cta.json, events.json, footer.json, fun-facts.json, header.json,
    |  |  |    |                        --hero.json, pricing.json, testimonial.json;
    |  |  |——App.js
    |  |  |——global.js                  --Logo path, social link, mailchimp link, contact form link;
    |  |  |——index.js
    |  |  |
    |  |——package.json                  -- npm config: dependencies list;
    |  |——package-lock.json

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 json files from src/data
  • Every separate data are separately created there as different file.
  • Select the file you want to change content
  • And there you can add your content, your image and video if needed as your preference.
  • Here is an example of changing data in json file. Here you can change title, subtitle, image, video, name, description, etc.
  • Like the screenshots up given, you can change data from any json file.
  • Nothing more is needed to add your content.

And to change styles you need to go to sass folder inside src/assets

Process of customize style with SCSS 👇

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.

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 sass/abstracts/_variable.scss to change colors as you want.

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

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

Global File

There is a file named global.js inside of src folder where logo, every social link and additional links has been added dynamically.

Note: For privacy purpose and to secure your additional links we suggest you to add link from .env file. We have created a sample .env file for you so that you can create one for you.

Add your links to .env file and it will work fine.

By following this easy step you can change entire site's all links and logo.

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> 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

Source & Credits

Images:

Fonts:

Packages

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 [email protected] and will reply to you within 24 hours.