Getting Started

Theme General Settings

Once you've installed Theme, you can start building your site.

Using Theme

Once you've installed Theme, you can start building your site.

Setting Up the Header

One of the first things you might want to do is to set up the header area. This section contains the header layout, welcome message, top bar, mobile menu, vertical menu, sticky header and other options.

=> To set it up, go to WPBakery Page Builder=>Templates => Header 1 (Header 2/Header 3/ Header 4) - header you are using -> Edit.

=> Go to Theme Options - Header to select a header layout.

Uploading Your Logo, sticky logo & change link of logo image

***Logo: Now let's add a logo. In WPBakery Page Builder=>Templates=>Header 1 (Header 2/Header 3/ Header 4) - the header you are using , you click to Single Image to edit, then select image from library or upload new logo. Remember to save. Now you have a visible logo in your header area.

***Sticky Logo: In WPBakery Page Builder=>Templates=>Header 1 (Header2/ Header 3/ Header 4) - the header you are using , you click to Main Menu to edit, then select image from library or upload new logo. Remember to save. Now you have a sticky logo in your header area when scrolling page.

Setting Footer

*** Footer contains Copyright, links, newsletter, payment,..

=> To set it up, go to WPBakery Page Builder=>Templates=> Footer 1(Footer 2/ Footer 3/ Footer 4) - the header you are using to edit.

=> Go to Theme Options - Footer to select a footer layout.

Menu Creation & Configuration

To create a menu, go to Appearance - Menus from the admin panel. Click on "Create a new menu." Enter a name for your menu, and then click on "Create Menu".

Every page that you've created up until now will be listed in the section on the left called Pages. Simply check the ones that you want added to the menu, and then click on the "Add to Menu" button. Once added, you can click and drag the menu items to rearrange them, or nest them one under the other.

1. Config Horizontal Menu to show columns like demo

• Login WordPress admin

• Appearance -> Menus

  

• Select Edit Menus : At Select a menu to edit : Choose Horizontal Menu (Primary Menu, Sidebar Menu by Mega Main, Mobile Menu) -> Select

  

• At Menu Structure -> Select item you want to set, ex: Features -> At Submenu Type : Select Multicolumn Submenu , at Submenu Columns (Not For Standard Drops) : Select number of columns

  

2. Config locations of menus like demo:

Go to Appearance -> Menus -> Manage Locations:

3. Config menu on Header

After installing theme, to show links on My Account on Header, you need to config and save menu.

• Login WordPress admin

• WPBakery Page Builder -> Templates -> Header 1(Header 2/ Header 3/ Header 4)

  

  

• At WP Custom Menu -> Edit -> At Menu: Choose Top Menu(to like our demo), or choose other menus -> Save

  

  

3. Config menus at Footer

After installing theme, to show links above on Footer, you need to config and save menus:

• Login WordPress admin

• WPBakery Page Builder -> Templates -> Footer 1(Footer 2/ Footer 3/ Footer 4)

  

  

• At WP Custom Menu of titles -> Edit -> At Menu: Select menu you want to show -> Save

  To like our demo set:

  - With title Information: Select Information menu

  - With title My Account: Select My Account menu

  - With title Custom Service: Select Customer Service menu

  - With part (2): Select Watches menu

  - With part (3): Select Furniture menu

  

  

4. How to change links on Horizontal Menu

To change links of items on Horizontal Menu:

• Login WordPress admin

• Appearance -> Menus

  

• Select Edit Menus : At Select a menu to edit : Choose Horizontal Menu (Primary Menu, Sidebar Menu by Mega Main, Mobile Menu) -> Select

  

• At Menu Structure -> Select item need change url -> At URL: Enter url of that item.

  

Building Pages

To create a new page, go to Pages - Add New from the admin panel. Enter a title for your page in the text field near the top of your screen. Then choose the "Full Width" template for your page in the section on the right called Page Attributes. This will allow you to have sections on your page that go across full width of the screen.

Now let's start adding elements to your page. Make sure that you're in the backend editor. If the blue button on the top left says BACKEND EDITOR, click it to enable the Visual Composer. Once you're in backend, the button will say CLASSIC MODE. You can now click on "Add Element" and start building your page.

Finally, click the "Publish" button in the upper right section of the page. (If you made some changes on already published page, "Update" button will appear.

Additional Notes

Font Icon Pack

Please note that Theme comes with font icon pack: Font Awesome. You can see an overview of all the available icons in this icon packs at the following link:

1. Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

Theme Options

You can access Theme Options from the WordPress admin panel. The settings found here are applied globally and will affect all pages of the site.

Blog

Blog Posts

To create a new blog post, go to Posts - Add New from the admin panel.

1. Enter a title for your post in the text field near the top.
2. Next, at the right side of your screen, in the section called Post Format, choose a format for your blog post.

   

3. Upload an image as featured image

   

Let's go over Post Format :

• Standard - This is the default blog format. You can start adding content.
• Image - This is same as the default format, but it uses the content-image.php to display post. You can edit file to change layout of this post type.
• Gallery - This post type has a gallery, you can add shortcode to show a slider at Post featured content.

  

  You can insert shortcode carousel such as Carousel, Gallery ...

• Video - This post type has a video player, you can add shortcode to show YouTube or Vidmeo at Post featured content.

  

  You can insert shortcode video such as Youtube, Vimeo ...

• Audio - This post types has a audio player, you can add shortcode to show a player at Post featured content.

  

  You can insert shortcode carousel such as Audio ...

Now it's time to categorize this post.

1. In the section called Categories, select the categories that you wish to add this post to. Alternatively, if you'd like to create a new category, click on "+ Add New Category." A text field will unfold where you can enter a name for the category.
2. Then click on "Add New Category".
3. Once you've checked the categories where you want this post to go to, click the "Publish button".
4. Under the Categories section are the Tags sections. Here you can add tags to your post.

Now that you've set up your blog post, let's go over the custom fields.

Post Excerpt

Pages

WooCommerce

Theme comes with WooCommerce integration, which allows you to build an online shop. For more information on installing and configuring WooCommerce, please visit this page:

http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

In order to setup WooCommerce with our theme, please perform the following steps:

1. Go to Plugins - Add New from the admin panel.
2. Type "WooCommerce" in the search field.
3. Locate "WooCommerce - excelling eCommerce" in the search results and click on "Install Now".
4. Once installation is complete, click on "Activate Plugin".

• Note: if you wish to modify these sizes at a later date, you may need to regenerate thumbnails in order for it to take effect. This can be done with the following plugin: http://wordpress.org/plugins/regenerate-thumbnails/.

Menus

To start creating your menu, go to Appearance - Menus from the admin panel.

At the upper left corner you'll see 2 tabs: Edit Menus and Manage Locations.

In Manage Locations, you can assign menus to different locations: Primary Menu, Categories Menu, Mobile Menu, Sidebar Menu by Mega Main

Now let's go to Edit Menus. At the bottom of the page, in the section Menu Settings, you're also able to assign the current menu to a location.

When creating a menu, you can click on the little triangle on each menu item in order to open up a list of editable settings.

In this settings panel, you can change sub menu type to multi columns, number of columns and make the sub menu in full width.

Mega Menu:

Go to Mega Main Menu then check on both checkboxes for the primary. Don't check mobile menu.

Click on Layout Options: primary then uncheck on logo, search box, minimized on handheld devices, sticky. Select dropdown animation.

Sliders

Please read the documentation on Revolution Slider first http://www.themepunch.com/revslider-doc/slider-revolution-documentation/

You can import sample sliders, we have some sample slider in the "slider-sample" folder.

Widgets

To change widgets, go to Appearance - Widgets. Read the Getting Started - Import Widgets in this documentation to know how to import widgets.

Newsletter

In this theme, we use MailChimp plugin to make the newsletter system. Navigate to Mailchimp for WP. First, you need to enter API key and select list.

After that, go to Forms to edit form

This is the sample code:

<input type="email" name="EMAIL" placeholder="Enter your email address..." required>
<button type="submit">Subcribe!</button>

You can change other settings for message, appearance in other tabs

Testimonials

Go to Testimonials - Add New to create a new testimonial. Enter title, description and upload images.

Translation

*** How to translate or rename default theme labels?

Read this guide to know how to translate theme: http://code.tutsplus.com/tutorials/translating-your-theme--wp-25014

Read this guide to know how to translate WooCommerce https://docs.woothemes.com/document/woocommerce-localization/

FAQ where to get help, support and additional information

We hope this manual was useful for you and helped you to install, to edit the template and to resolve your issues.

1. Why blank white page and less compiler error?

define('WP_MEMORY_LIMIT', '256M');

memory_limit = 256M ; Maximum amount of memory a script may consume (256MB)

php_value memory_limit 256M

2. Why can't I save my menu?

Cause of this problem is small value of the "max_input_vars" option in the configuration of your server (host). You must increase value of the "max_input_vars". You must to set a value that is twice as large of the current value.

• Most hosts have the opportunity to change this value in the "Host Admin Area".
  Example:
  If currently you have max_input_vars = 1000
  You need to set max_input_vars = 2000 (or more)
  
  
• You can try to change this value using ".htaccess" file in root directory of the your site, adding this lines in ".htaccess".

  php_value max_input_vars 3000  
  php_value suhosin.post.max_vars 3000  
  php_value suhosin.request.max_vars 3000

  
  
• You can try to change this value using "php.ini". Add this line if you don't find max_input_vars

  max_input_vars = 3000

  
  
• If that does not help you, ask your host support "How can I increase the value of the max_input_vars for my site?".

3. Why website loads slowly?

In some cases, you uses large images on your page, server run slowly because it's a VPS. Try these methods:

- Reduce images size

- Install cache plugin like W3 Total Cache

- Turn off less compiler in Theme Options=>Less compiler after finished changing colors & fonts.

- Test website with GTMetrix and see its suggestions https://gtmetrix.com/

4. I see errors when importing demo content?

If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 300 seconds. Possible ways of achieving this are:

• By wp-config.php changes - set_time_limit(300);
• In htaccess - php_value max_execution_time 300;
• In php.ini file - max_execution_time = 300

Ask your hosting provider to take care of this for you.

6. How to insert shortcode?

I have included these sources with this theme:

jQuery: http://jquery.com/

FlexSlider: http://flexslider.woothemes.com/

Slick: http://plugins.jquery.com/slick/

jQuery Gmap: http://labs.mario.ec/jquery-gmap/

FancyBox: http://fancyapps.com/fancybox/

jQuery Parallax:http://www.ianlunn.co.uk/plugins/jquery-parallax/

jQuery Shuffle: http://vestride.github.io/Shuffle/

Font Awesome: http://fortawesome.github.io/Font-Awesome/

lessphp: http://leafo.net/lessphp