NovelPro Theme

Install / Update Theme Setting

  • First download Novelpro unlimited feature theme zip file from Member’s area.
  • Login to WordPress dashboard.
  • Then navigate to “Appearance > Themes”.
  • Click on “Add New” > “Upload Theme” button.

2-7-2015 11-52-18 AM

Home Page Display

  • Follow the instruction to show your Homepage sections.Check Here.

Import Demo Data


Note – “This video showing onelinepro template import process, But same will work for all ThemeHunk themes.”

  • For more information follow this link.

Scrolling Menu Section

To get scrolling menu please follow the steps given below.

  • Go to “Appearance > Menus” and create a new custom menu
  • Add a 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

Portfolio            =   #section2

Testimonial       =   #section3

News                  =   #section4

Team                  =   #section5

Brands               =   #section6

Contact Us         =   #section7

Woocommerce  =   #section8

Pricing               =   #section9

scrolling menu novellite 1

Now select “Front Menu” as a Theme Location for your Section Menus

If you want to create menu that only shows on internal pages not on home page then create a custom menu and select it as a “Main Menu” from the theme location which is in the Menu setting.

2016-01-23_1738

Theme option

To add theme options go to “Appearance > Customize > Theme options”. Here you will get multiple options to change the whole styling of your site.

theme options novelpro

  • Global setting– This setting allows you to disable animation effect and side loader. You can hide back to top button and also activate RTL which will show your site from right to left.
    global setting novelpro
  • Global Color Settings– In this setting you can pick color to every element present on your site.global color setting novelpro
  • Header Setting– In header setting you can add header as fixed or normal. If you set your header as a fixed header while scrolling the site your header will scroll along with it and if you set normal, your header will stick on the top of your site or do not scroll.
  • You can also 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 set the background color and also pick color to each element.header setting novelpro
  • Page Layout Setting– This setting allows you to set the page layout in all the templates of your site.page layout setting novelpro
  • Custom Jquery Code Setting– This setting allows you to add Custom Jquery Code in your header and footer.custom jquery theme option novelpro
  • Footer text & social icon– You can put any Footer text or other details in it. You can add upto seven different social icons in your theme. Also put the links for respective icons to show it to the footer of page.footer text novelpro

Body background color and image– Here you can add the background color or image. Pick any desired color or upload any image in the body background of your site.body bg img novelpro

Section on/off and Section ordering

  • You can turn off any particular section or multiple section. Just navigate to the desired section box and check it. Your section will automatically disable.

nvl-1

  • Drag and drop them into the desired order.

nvl2

Section Background Setting

  • Theme contain Two background options for each section. “Background Color” and “Background Image”
  • If you want to choose a background Image or background Color option first select the radio button, for uploading a background image click on the select image button and upload an image. And if you want to select the background color click on the “Background Color” option.
  • 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.
  • To add parallax effect go to “Parallax On/OFF option” and enable it.

section-back

Advanced Typography

  • Font Subset – For Font Subsets. Go to Appearance > Customizer > Typography Panel > Font Subsets.
  • Google font families support every subset. In our theme, you’ll get subsets like Latin, Latin-ext, Cyrillic, Cyrillic-ext, Greek, Greek-ext, Vietnamese and Arabic. If you are using any particular language first enable the font subset. Without these special characters won’t be displayed at your site. Just check the desired subset and enable it on your site.

font style novelpro

  • Body – Go to Appearance > Customizer > Typography Panel > Body. Choose Font family for body text. Adjust the font size, line height and letter spacing. This will applicable for overall sites body.

body typograpghy

  • You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
  • Title – Go to Appearance > Customizer > Typography Panel > Title. Choose font of your title. This will set typography for overall site titles. You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default or none.

title typography

  • Content – Go to Appearance > Customizer > Typography Panel > Content. This will set the overall typography of single page form heading H1 to H6.
  • Heading (H1) – Best Suited for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
  • Heading (H2) – Best Suited for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading (H3) – Best Suited for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 4 (H4) – Best Suited for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 5 (H5) – Best Suited for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 6 (H6) – Best Suited for h6 headings. Choose font family and adjust the font size, line height & letter spacing.content typography
  • Use typography in each section, just go to desired section and select the typography option. Select the font family, set the font size, line height, Text Transform and so on.

typography setting novelpro

Slider Section

  • For adding slider on home page you need to go to “Appearance > Customize > Slider Setting”
  • To upload an image click on “Upload Button” and select your image.
  • While giving link to slider image please make sure you have followed the complete format (https://www.your-domain.com).
  • You can also manage the speed of slider (By default it is ‘3000’ which means it will roll after 3 seconds).
  • You can add up to six different slider images.
  • You can also Use any External Slider Plugin. For that just you have to add Plugin Shortcode in the text area.
  • You can also upload a video in your slider and for mobile view you can upload a poster image in place of video.
  • You can Choose Section Id want to Scroll in the Hero section scroll.
  • You can Also Show Contact Form Popup. This option is given, Just add the Contact Form Shortcode and Show your Popup Form on your site.

slider setting NovelPro

Services Section

  • To add main heading and sub heading go to Appearance > service setting. Here you can put heading and sub-heading to your services.
  • To add services column go to “Appearance > Customize > Service Section > Novelpro Service Widget”
  • Pick your Font awesome icon. Paste the icon name (like : fa-camera-retro for camera icon) in the text area.

novelpro_service_widget

  • You can change the background through Background setting.
  • You can pick color for heading and sub heading.

Portfolio Section

  • On Portfolio section you can add heading and its description.
  • For that you need to go to “Appearance > Customize > Portfolio Heading & SubHeading > Portfolio Feature Heading / Portfolio Feature Sub Heading” respectively.

portfolio

  • To show portfolio images at the home page, Go to the Dashboard > Portfolio > Add New and add image as a Featured Image.

portfolio-gallery
portfolio-gallery-featured

  • You can change the background through Background setting.
  • You can pick color for Heading and sub-heading.

Testimonial Section

  • To add testimonial section background image go to the “Appearance > Customize > Testimonial Settings > Testimonial Heading & Background > Parallax Background Image”
  • To add testimonials go to the Testimonial Settings > Novelpro:Testimonial Widget and select Novelpro: Testimonial Widget from there.

novelpro_testimonial_widget

Latest Post Section

  • To add home page blog heading and description go to “Appearance > Customize > Home Blog Heading & Sub Heading.
  • Your latest post will display in this section. Your post should contain featured image.

blog

  • You can change the background through Background setting.
  • You can pick color for Heading and sub-heading.

Pricing Section

  • To add pricing heading and description go to “Appearance > Customize > Pricing Settings > Pricing Heading & Sub Heading.
  • To add pricing table go to the Appearance > Customize > Novelpro Pricing Widget > Select Novelpro: Price widget

novelpro_price_widget

  • You can change the background through Background setting.
  • You can pick color for Heading and sub-heading.

Team Section

  • To add team section Heading and Description
  • Go to “Appearance > Customize > Our Team Feature Settings > Our Team Heading & Sub-Heading”
  • To add team member go to the Customize > Our Team Settings > Our Novelpro Team Widget and select Novelpro:Team Widget from there.

novelpro_team_widget

  • You can change the background through Background setting.
  • You can pick color for Heading and sub-heading.

Brand Section

  • To add brand settings go to “Appearance > Customize > Brand Image Settings”
  • To add brand images and link go to the Customize > Brand image settings > Novelpro Brand Widget and select Novelpro:Brand Widget.

novelpro_brand_widget

  • You can change the background through Background setting.
  • You can select the number of slides which you want to show on the home page. Background option > Number of Slides to Show.
  • You can pick color for Heading and sub-heading.

WooCommerce Section

  • First download the WooCommerce plugin. For this Go to plugin > Add new > search WooCommerce plugin. Install and activate the plugin.
  • In Woo-Commerce section you can add section heading and sub-heading.
    And to display products you have to add WooCommerce shortcode.
  • Shop Images – Go to Customize > WooCommerce > Shop Images. You can show header image in WooCommerce pages like Shop page, Single product page, Cart page, Checkout page and My account page. To know how you can create these page, go with this doc.

woo-commerce

  • You can change the background through Background setting.
  • You can pick color for Heading and sub-heading.

Ribbon Section

  • To Customize Ribbon section go to “Appearance > Customize > Ribbon section”. Add main heading, button text and button link from “Settings”. And to change ribbon text color and button color go to “color” option.
  • And also to add background video, background Image and background color just go to “Background Settings” option and to select radio button option.

ribbon-nov

Contact Form Section

  • To add background image of contact form, Heading and Sub-Heading please go to “Appearance > Customize > Contact Form Settings”
  • To add contact form, install our plugin Lead Form builder. Contact form will be visible when you activate this plugin. After that you can edit existing form or create new one from the Plugin Setting.
  • To add Google Map just go to Google map and generate embed iframe code, Simply copy and paste text area field.

novel-cnt

Custom Section

  • Add custom section on your site. Go to “Appearance > Customize > Custom Section > Novelpro Custom-section Widget”. And add Novelpro Custom Widget.
  • Three Custom section are given, you can change their position by drag and drop theme from section ordering.

custom section novelpro

  • After this you can add Section Id, Heading, Sub Heading, Background option and color option Respectively
  • You can add any thing in custom text area field or any shortcode you can add in it.

novelpro_custom_widget

Recommended Image Size

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


Thanks for reading our documentation, if you still need any help related to theme you can contact our support forum.