NovelLite Theme

Installing Theme :-

  • First download theme zip file from WordPress.org
  • Go to your wp-admin dashboard.
  • Then open “Appearance > Themes”.
  • Click on “Add New” button and click on “Upload Theme” button.
  • Then select zip file of theme.
  • After that activate theme.


Setup Home Page

  • Create a new page and select “Front Page Template” from page attribute.

front page novellite

  • After that go to the Settings > Reading and set that newly created page as a Front page.

reading setting novellite

General Setting

  • In this setting you can add the site information like a logo, site title, tagline for your site. Just open your dashboard, Go to “Appearance > Customize > General setting”.
  • Select your logo and site icon by clicking on “Select Image” button.

general setting novellite

Adding Scrolling menu

    • To get scrolling menu please follow these steps:-

    • Go to “Appearance > Menus” and create a new custom menu.
    • Add new link from “links” tab.
    • Here you need to add section id in “URL” field.
    • Please check id for all section, you can use them

Home              = #page-top
Services           = #section1
Testimonial     = #section2
News                = #section3
Team                = #section4
Contact             = #section5
Woocommerce = #section8
Pricing              =  #price-package

scrolling menu novellite

Now select “Front Menu” as a Theme Location for your Section Menus.
2016 01 23 1724

If you want show your menu only on inner pages not on your front page header. Create a custom menu and then select “Main Menu” as a Theme locations from Menu Settings.
2016 01 23 1738

Theme Option

  • Go to “Appearance > Customize > Theme option”. Here you will get multiple option to change the whole styling of your site.

theme option

  • Global Setting– Set the site layout in all the templates of your site. If you want to disable the header and animation in your site, just check the box. Hide the back to top button.

global setting

  • Site Color- Pick the theme color.

site colors theme option

  • Header Setting– Set the header layout and if you want transparent header just check the box (this will be applied for front page template only). You can show your last added menu as a custom menu button. You can pick the background color and also pick color for element.

header setting theme opt

  • Background header image- Upload background image in header which will be shown on your template pages.

header bg img theme option

  • Body background color and image- Add the background pick the color or upload an image in the body background.

body bg img theme opt

Section On/Off

  • Here hide/show any section at home page.

section on off novellite

Complete Video Guide

The video below is a complete guide on how to use Sections in NovelLite.
Table of Content

  • Slider Section = 0:12
  • Service Section = 4:12
  • Testimonial Section = 7:10
  • WooCommerce Section = 9:20
  • Blog Section = 10:21
  • Pricing Section = 12:10
  • Team Section = 13:22
  • Contact Section = 15:30


Slider Section

  • Display slides on home page, go to “Appearance > Customize > Slider Section”. Put up to 3 slides and change the styling of each slide by adding heading, description, slide image, button text and link.

slider novellite
slide setting novellite

Setting-

  • On/off the parallax scrolling of your image and set the slider speed. Disable image overlay mask from slider.
  • Choose different button styles.
  • Here you can upload the image, add the name to the slider and link for heading & button.setting slider novellite

Service Section

  • Show services on home page, go to “Appearance > Customize > Service Section”. Put up to 3 service column and add your service icons by adding the icon class from font awesome icon. Add heading, heading link and description to your icon.

service sec novellite

  • Pick your desired Font awesome icon. Paste the icon name(like : fa-camera-retro for camera icon) in the text area.

service section 1

Setting–

  • In service setting, you can put heading, sub-heading. Pick color for each element.
  • Background option will allow you to pick bg color or upload bg image. You can on/off the parallax of your image. Along with this you can set the image overlay color.setting service novellite

Testimonial Section

  • Show testimonial on home page, go to “Appearance > Customize > testimonial Section”. Add up to three testimonial. Add text, author image and author image.

testimonial section novellite
test sec novellite

Setting–

  • In testimonial setting, you can add heading. You can easily manage the testimonial slider speed. Pick color for each element.
  • Background option will allow you to put bg color and bg image. You can on/off the parallax of your image. Along with this you can set the image overlay color.

setting test novellite

Blog Section

Go to “Appearance > Customize > blog section”. Show unlimited post on your site.
blog section novellite
post setting novelliteSetting–

  • Put heading, sub-heading and pick color for each element.
  • Background option will allow you to put bg color and bg image. You can on/off the parallax of your image. Along with this you can set the image overlay color.setting blog section

Team Section

  • Go to “Appearance > Customize > team section”. You can add up to three team members with their image, name, description and link.

team section novellite
team novellite

Setting–

  • In team setting, you can put heading, sub-heading and pick color for element.
  • Background option will allow you to pick bg color or upload bg image. You can on/off the parallax effect of your image. Along with this you can set the image overlay color.

setting team section

WooCommerce Section

  • First download the Woocommerce plugin. Install and activate the plugin.
  • In WooCommerce section add your product by putting the shortcode of WooCommerce. You can add heading, sub-heading and pick color for each element.
  • Background option will allow you to pick bg color or upload bg image. You can on/off the parallax of your image. Along with this you can set the image overlay color.

woocommerce setting novellite

Pricing Section

  • This section is for showing your pricing table on your site. For this download any free pricing plugin from WordPress. Select your desired plugin, install and activate it on your dashboard.
  • After that navigate to “Appearance > Customize > Pricing Section” and put the shortcode in the text area. Here you can also put heading and sub-heading.
  • Background option will allow you to pick bg color or upload bg image. You can on/off the parallax effect of your image. Along with this you can set the image overlay color.pricing section novellite

Contact Section

  • Add contact section go to “Appearance > Customize > Contact Us Section”. You can add heading, sub-heading and pick color for each element.
  • You can put a contact form by Lead form builder plugin. Just download the plugin & activate it on your dashboard. Create a contact form. You can add Contact us form on your site by putting the shortcode of that form.
  • Background option will allow you to pick bg color or upload bg image. You can on/off the parallax effect of your image. Along with this you can set the image overlay color.contact section novellite

Additional CSS

  • To add additional CSS go to “Appearance > Customize > Additional CSS and simply put your CSS here.

css section

Section overlay color

If you want to set overlay color on image just select the color and decrease the transparency or if you want to put color in background just increase the transparency.
image overlay novellite

Recommended Image Size

  • Homepage Hero slider image size = 1200 x 900px
  • Testimonial section member image size = 148 x 148px
  • Post section featured image size = Use image of any dimension with the ratio of 4:3
  • Team section author image size = 268 x 268px
  • WooCommerce product image size = 300 x 300px
  • Inner pages image size = 1200 x 900px

Follow these image sizes and show your site with a better look.

For more information you can contact our support team at support forum.