Overview

Install

Installing your new theme is very simple.

Follow these steps

  1. Clean your wordpress install from all contents you don't need ( optional ).
  2. Download the ZIP package from Themeforest and Unzip it.
  3. Within the unzipped folder you will see a file named incanto_v2.0.zip
  4. Log into your Wordpress Dashboard and click ->Appearance -> Themes.
  5. Next click on Add New then click on Upload Theme.
  6. Click Browse then locate the file named incanto_v2.0.zip and click Install Now.
  7. After the theme has installed click on Activate Theme and you are all set! Incanto is now installed!
  8. Note - After activating the theme do not forget to install the following plugins: Visual Composer and Contact Form 7.
  9. After installing Visual Composer, go to Visual Composer Settings, then checking if content types -> un-portfolio is checked and then save the settings.
  10. Install the WP Importer Plugin from Tools -> Import and import there our xml file ( location folder demo_data ).
    Note The import data will make your site similar to the demo but without the images, it will use a placeholder image instead.
  11. Select the Home Page ( or other homes you like ) as static frontpage in the wordpress's Setting -> Reading options.
  12. Active the main menu in Appearange -> Menus.
  13. Import our demo Options in Incanto Options -> Import/Export -> Import from file using the code we attached in the options.txt file. ( You can find it in our package into the folder demo_data ).
  14. Create your own widgets.

Note - If you installed the theme in already existing WP site please regenerate your thumbnail using a specific plugin ( we advice ->Regenerate Thumbnails ).

Theme License

When you are READY to go online and you installed the theme in the FINAL DOMAIN you have to register your license and Activate the theme:

  1. Rregister your purchasing license and your domain on license.uncommons.pro
  2. You will obtain your personal Secret Key and you can insert it in the Theme Options > Theme License > Secret Key field.
  3. Save the options and update the page so the system will check your key and will unlock the theme.

Note Don't register the theme on a temporary or developing domain!

Theme Options

The theme options are linked like 'Incanto' in the left wp bar, this is the control panel of the theme. Inside you can edit the global setting of the theme: set logo, favicon, colors, fonts, backgrounds, add a custom css and js and much more..

General Setting

This section allows to set the logo ( dark and light ), a favicon, and all app icons ( Apple Touch Icons )

Styling

In the styling theme you can set a primary and secondary font, the body color ( the color of all contents ) and the links color.
In adding you can edit anything you want: headings fonts, font-weight, font-style, font-size, line-height, word-spacing, letter-spacing and font-color.

Header

In this tab you can set the header for all post page of the theme.
In first you can enable or disable the search icon in the main menu.
Then you can customize your header for different type of page: Standard page, Blog page, Single post, Portfolio page, Single project, Archive/Category page, Search page, 404 page ( error page ) and Attachment page.
For each custom header you can set an image background ( I advice you to use an image full hd > 1920px of width ), you can set a title and subtitle.
In adding you can set an overlay background ( between 7 types ).
Note - If you set an header background from theme options, you needn't to set any other header in the pages.
Anyway, you can turn off the global settings and use the custom header for your current page.
The custom headers they will be placed on top of page behind the main menu.

Footer

This tab allows you to enable or disable the footer widgets and write a custom text or html for your copyrights.

Home Page

To create your homepage, create a new page ( left wp bar -> pages -> add new ) then add a title and set as model page: Visual Composer page.
After set the model page use the elements of Visual Composer to built your layout.
All elements are detailed here.
To learn how to customize the homepage, clone or use an homepage already created ( only after to have installed the demo content xml ) and then start to edit your.
To clone the pages or posts, we advice you to install Duplicate Post free plugin.

Shop

This tab allows you to customize the layout of your shop loop ( archive shop / page shop ) and much more..
Note - Remember to install the woocommerce pages after installing the woocommerce plugin.
In this tab you can set the column number of your layout. ( each column it will contain one item ).
You can set the products per page ( leave it to 0 to use the WP Reading Options ).
You can set a custom header, you can upload your image as background, a title a subtitle and the overlay background ( between 7 types ).
The header custom it will be placed on top of page behind the main menu.

Advanced

In this tab are included some extra options.
You can active or deactive the page loader in all site.
You can set the max lenght of the excerpt text ( integer number of word ) for each posts.
You can enable or disable the developer's notices.
You can add a custom text for the Error page ( html allows ).
You can add a custom JS code in header ( ex. for google analytics ).
You can add a custom JS code in footer ( useful for scripts and codes ).
you can add a custom CSS ( useful to edit the style of the theme without open any file ).

Import/Export

Use this tab if you want import or export the options data.
If you want import options, click on import from file or import from url.
To import the demo options use import from file and paste inside the text area the txt content data.
Otherwise, if you want export data options click on copy data and then copy the data code displayed below.
You can also dowload the json data options or copy the export url.

Visual Composer

Note - If you don't know VC Plugin, look first this detailed guide here -> VC Guide

Note - If you want create a layout full with, you can first set the Template -> Visual Composer Page in your page.
You can use the VC elements in a standard page or standard post too but it will add the elements in the content box.

By follow, ther's a list of all VC Incanto's elements and some VC elements edited and improved for this theme.

Row

Use 'Row' element to put inside anything other vc elements: columns, rich text, html text, and all other addons vc.
Row Settings -> General - > Background Source - you can select the source for your background: parallax image, design options ( default VC ) or Video background.
If you have selected the parallax source, upload the image background in the area below.
If you have selected the video source, paste the YouTube id in the area below, you can set also the start second, the loop and image background by default.
If you have selected the design options ( from Row Setting -> Design Options ) you can upload an image or add a static color as background and much more..
Text Color - Set the color for the text inside row. You can select between light or dark ( white or black ).
Overlay Effect - Set the background overlay on your row. You can select between dark gradient, white gradient or film overlay.
OnePage Menu - Compile this label if you want to link row to an onepage menu button.
Note - if you have added a label to link the menu at this row, you must active first the onepage mode in bottom of your page ( chek it and turn on ).
Row Settings -> Design Options - You can set the css box ( margin, padding, border ), background color or image ( only for design option source ).
Check the Full Height if you want create a background full screen.
Check the Boxed Container if you want create a row boxed ( bootstrap based - width 1200px ).

Columns

You can set the alignment of text inside: auto, left, right, center, justify.
For all other options consult the VC official guide here.

Text Block

You can add a title above your text already formatted, a button label below the text and the button url.
For all other options consult the VC official guide here.

Progress bar

You can set the value and label for each bar and the color background of the lines.
The sintax for each bar is value ( integer ) | label ( chars ), (example: 90 | Design ). Note - You must write only one per row.
You can add stripes and animation ( visible only with striped bar ).

Hero Head

This element adds an heading in your section. Note - Include it always in a row.
You can set multiple titles one under other, you can set the text, the sizing ( between 6 size ) and add a margin bottom for each title.
Note - if you want create a full section with background within titles, remember you to adjust the padding top and bottom in the row setting -> 'design options'.

Hero Head Rotator

This element adds a slider headings in your sections.
You can set up to 3 slides text. For each slide you can set a surtitle a title and subtitle.
If you want show titles in rotator mode, you must change the text between the slides. In other hand they will rest static.

Slider

Note - Before including this element in your layout, you must create a slider through the post type Sliders on the left wp bar.
Go to Sliders -> add New and create your slider.
Add a title and upload your images. You can upload multiple images ( your slides ).
For each image you can add a type of overlay ( between 7 types ), add a title and subtitle and set an animation between all CSS3 Transitions.
After creating your slider, return in your page, and open the slider element through the Visual Composer, at this point you can select your slider.
You can decide if you want a standard slider ( no titles ) or hero slider ( with titles ).

Section head

This element adds a special heading in your section.
You can set a title and subtitle, or only one.
Use this element like heading sections, e.g. first to write an about text, or list of features.

Separator

This element adds a simple thin line. Use this one to separate sections. Include it always in a row.
To add padding on this element, include it in a row and edit the box model of the row.
To set the line full width, uncheck the full with option in the design option of the row.

Service

This element adds a paragraph of text with icon.
Use this to create a service box. Include it always in a column, so create your row and then divide it in two or more columns.
You can add a title already formatted and a text description.
You can add an icon and placed it on top or on the left of the text.

Image

Use this element to put an image in your content page or portfolio page.
Upload the image from media upload and then compile your title and subtitle to create a caption for this image ( optional ).
You can set the caption color ( dark or light ).
To set the size click on tab - > design options and set the size. Check the image crop too if you want to crop the image on based your size.

Testimonials

Use this element to create your testimonials slider section.
You can add multiple blockquote and set a text and author for each ones.
You can active the autoplay too.
If you want create a blockquote slider with background, include the testimonials element inside a row, then apply a background image color or parallax in the design section of the row.

Clients

Use this element to create a carousel of logos.
You can add multiple logo and add an url for each ones.
Use the media upload to put your logo inside.
If you want to create a clients carousel with background, include the client element inside a row, then apply a background image color or parallax in the design section of the row.

Counters

This elements creates a section counter.
If you want to show some goals or awards, create first your row, apply your custom background or none, then divide it in as many columns as there are clients.
For each counter you can set a number ( integer ), a suffix ( for ex. K or % or other ) and a label.
The varius counters they will be auto animated when you'll scroll the page to this section.

Team Member

Use this elements to create a team section in your page.
This element adds an item team for column. So you must create your row before and then divide it in as many columns as there are people.
For each team element you can upload an image, set a name and his role. You can insert up to 3 social networks too.

Service Carousel

This element creates a carousel with service blocks.
The service box adds an icon above the text.
You needn't to divide the row in columns.
The slider works on all row, however you can include it in a column to make it smaller.
In other hand you can set the full width or boxed mode from row which contains the carousel (row -> design options).

Accordion

This is a classic accordion element edited and well formatted just for this theme.
Add one or multiple tab to create for example a FAQ section.
For each tab you can set a title and write a description.

Tabs

This is a classic tab element formatted just for this theme. You can add one or multiple tabs. For each tab you can add title and description.

Google Maps

Use this element to create your custom map.
You can use this element to add feature in your contact page or bottom home.
To create a map, you must set the latitude and longitude coordinates.
You can add a description for the marker point, set the area zoom and set the height of map.
Include map element in a row and set it in full width mode ( row settings -> design options ) to make the map full width.

Pricing Title

Use this element to create your pricing area.
Before using this element create a row and then divide it in as many columns as they are the tabs.
For each table you can set a title, mark it as featured, set a price and currency.
Then you can compile your table adding multiple features. For each feature you can add a label and set it as enabled or disabled.
In adding you can set a button link below the feature list.

Project Metas

Use this element in your project page. This one adding a list of meta informations.
You can compile it setting the category of the project, a release date, a project url, and the client url.
Each of ones options can be let empty.

Portfolio Grid

Use this element to create your custom loop of items ( projects ) in your page or row.
Note - Before set this element make sure that you have already adds your items in your portfolio.
To create items ( projects ) go to creation project here.
After adding all items, you can set the portoflio grid.
You can enable or disable the filter category, set the items limit ( integer ), selecting your prefer order ( between: title, date, date modified, slug or random ) and set the direction ( ascending or descending ).
In adding you can add a load more button too to active the ajax loader.

Posts Grid

Use this element to create your custom loop of posts ( blog ) in your page or row.
Note - Before set this element make sure that you have already adds your posts in your blog.
After adding some posts, you can set the posts grid.
Like the Portfolio Grid, you can set the limit posts to show, the order and the direction.

Pages

The theme includes 4 types of model page: Default / Blog / Portfolio / VC Page.
If you want to use one of this model change the Template model in the window on the right.

Page - Default

The default page is a standard WP page.
You can use it to add a standard content in the area text.
Page Settings -> Page Heading - You can set the section on top page with background and titles.
If you select the Global Options you can use the default settings from Theme Options.
Instead if you select Custom you can set the header page directly on the current page.
For each page custom header, you can handle background image, set a title and subtitle and put an overlay background on the header ( you can choose between 7 types of overlays ).
Page Settings -> Sidebar - you can enable or disable the sidebar in the current page.
Use the widgets on the left wp bar to populate the sidebar page ( go to Appearance -> Widgets -> Sidebar Page ).

Visual Composer Page

The page is a built for use better the elements of VC.
Use the backend Editor or Frontend Editor to customize your page layout.
You can write also in the area text without using the visual composer but you'll have some graphic issues beacuse the content text will starts under the menu in the top of page.
Note - We advice you to use always VC elements to compose this model page.
VC Page Settings -> Onepage Mode - In adding you can set the page as an OnePage, turn on to enable this option.
Remember you to add one label onepage for each row that you want to link at your menu. For more info read the features of the row elements here

Blog Page

Selecting this model page, you'll active the blog loop in this page. You cannot use the area text here
Page Settings -> Page Heading - You can set the section on top page with background and titles.
If you select the Global Options you can use the default settings from Theme Options.
Instead if you select Custom you can set the header page directly on the current page.
For each page custom header, you can handle background image, set a title and subtitle and put an overlay background on the header ( you can choose between 7 types of overlays ).
Blog Settings -> Sidebar - you can enable or disable the sidebar in the current page.
Use the widgets on the left wp bar to populate the sidebar page ( go to Appearance -> Widgets -> Sidebar Blog ).
Blog Settings -> Masonry Style - turn on this option if you want to make the grid posts in masonry mode.

Portfolio Page

Selecting this model page, you'll active the items ( projects ) loop in this page. You cannot use the area text here.
Page Settings -> Page Heading - You can set the section on top page with background and titles.
If you select the Global Options you can use the default settings from Theme Options.
Instead if you select Custom you can set the header page directly on the current page.
For each page custom header, you can handle background image, set a title and subtitle and put an overlay background on the header ( you can choose between 7 types of overlays ).
Blog Settings -> Sidebar - you can enable or disable the sidebar in the current page.
Use the widgets on the left wp bar to populate the sidebar page ( go to Appearance -> Widgets -> Sidebar Blog ).
Portfolio Settings -> Portfolio Type - choose between 2 types of layout: Masonry or Pakery.
Masonry layout - creates a layout with thumbs differents for height.
Pakery layout - creates a layout with thumbs differents for height and width.
Portfolio Settings -> Portfolio Overlay - choose between 3 types of overlays: Dark, White and Gradient.
You can set the limit of items ( or set 0 to view all ), and enable or disable the category filters.

Projects

Create one or more items to populate the portfolio page.

To create your first item go to portfolio -> add new ( in the left wp bar )
Start to set the title of item ( project ) and then built your layout project using the visual composer.
In our demo data are already presents 7 different types of portfolio single, use one of these presets to learn to customize your one.
Note - I advice you to always use the visual composer elements rather than standard area text, because if you use the stardard area text your content it will be placed in full width mode.
Remember to use the Meta Project VC element to add more info at your item ( optional ).
After creating your content, set the a category for it, this will be useful to filter the category project in your loop page ( portfolio page ).
Set the Featured Image in your item, it will be useful to show the thumb of this one in the layout grid.
Set also the Thumbnails Shape between 4 shapes: big square, small square, landscape and portrait.
This option it will be useful to show the packery or masonry mode in action in your portfolio page.
Shapes - Big Square ( 2w x 2h ) - Small Square ( 1w x 1h ) - Portrait ( 1w x 2h ) - Landscape ( 2w x 1h ).
Masonry mode use only small square and portrait shapes.
Packery mode use all shapes.
Set the layout gird in page portfolio options. For more info read the previous chapter.

Widgets

Click ->Appearance -> Widgets.
Note to show the widgets, you have to create a section widget before and then you have to add it on a page or post.
The Theme includes some special widgets.

Un Mega Projects

Creates a widgets which shows a list of projects.
Set the items to show, choose the category and set a custom order.
The widget will add also a thumb as preview on the left of the title.

Un Mega Posts

Creates a widgets which shows a list of posts.
Set the posts to show, filter the category and set a custom order.
The widget will add also a thumb as preview on the left of the title.
After creating each widgets, please click ->save to make active the widget.

Credits JS

Below are listed all libraries used in the theme.

  • jQuery
  • Bootstrapp
  • imagesLoaded
  • jQueryAppear
  • jQueryEasing
  • jQueryFitVids
  • jQueryMagnificPopup
  • jQueryParallax
  • jQuerySimpleTextRotator
  • jQuerySuperSlides
  • owlCarousel
  • packery
  • wow