Vigo - The best Single Product theme

View demo Buy theme Need Support

Getting Started

Introduction

Thank you very much for choosing our theme. We truly appreciate and really hope that you'll enjoy our theme! If you like this theme, Please support us by rating us 5 stars.

In this user guide you will find all required information to get your site up and running: starting from theme installation, settings and setup to usage of different demos templates.

Install Theme

Install Wordpress:Download and Install the newest version of WordPress.

Install theme via Wordpress Dashboard:

  1. Go to 'Appearance > Theme' section
  2. Click 'Add New' and select the 'Upload' option
  3. Upload the zip file
  4. All Done :) (see fig 1.1, fig 1.2)

If any error appears, most probably, your hosting has file size limit. You can contact your hosting provider and ask to ease this restrictions (e.g 32MB will do).

Theme Installation via FTP:

  1. Access to the file on your server using ftp editor program
  2. Go to 'wp-content/themes' folder
  3. Extract the zip file and put the themename-vxx_xx folder there
  4. Go to 'Wordpress Dashboard > Appearance > Theme' section to activate the theme
  5. All Done :)

If above steps did not yield any results, please don’t hesitate to address this issue directly to your hosting company. Since this is most likely a server-related problem, we will not be able to help you!

Install theme via wp

Fig. 1.1 Install Theme

Install theme via wp

Fig. 1.2 Install Theme

Activate Theme:
  1. Go to 'Appearance > Theme' section.
  2. Select the Vigo theme.
  3. Hitting the correspondent "Activate" link.
  4. All Done :)
Install theme via wp

Fig. 1.3 Theme Activate

Plugins Installation:

After install the theme and activate the theme, there'll be a list of suggested and recommended plugins at the top of the wordpress dashboard.

Required plugins

Fig. 1.4 Required Plugins

Required plugins list

Fig. 1.5 Required Plugins List

Attention! Note that after install all required plugins you must go theme options and save this.

Import Demo

After required plugin ( Viog Aide ) install and activate, demo importer options appear in tools setting.

Now you will see grid list of demo site. every grid list demo item have two button. Priview button give ability to preview the demo site and import button is import thst demo site.

Import demo site

Fig. 2.1 Import Demo Site

Theme Options

General settings:
  1. Logo : This is the site logo options . just upload the logo then you will see your given logo top left of your site. Recommended logo height is 135px for best outcome.
  2. Site Title : Give the site title here. If logo options leave blank then site title show instead of logo.
  3. Logo Size : You can change your logo size here but it change the logo size base of logo aspect ratio.
  4. Favicon : Favicon are what you see in browser tabs, bookmark bars Upload one here!. This favicon also have in Appearance>Customizer>Site Identity as a Site icon. Once you give site icon/ favicon through Customizer then no need to give here.
  5. Apple touch icon : This icon use as mobile apps icon. Once you give Site Icon through Customizer then no need to give here.
  6. Social Profile Link : Its have link, icon field. Social Profile Link use as company profile link in topbar and footer area of your site.
  7. Custom Css : you can add here custom css style code for your site.
  8. Custom Js : you can add here custom js code for your site.
General settings

Fig. 3.1 General settings

Header Settings:

Header settings have several major parts ( topbar area, address area, menu area ).

  1. Topbar: On/off option. It will active or deactive topbar of your site.
  2. Social Icon: on/off option for active or deactive social icon of your site topbar left side.
  3. Login: On/off option will active or deactive login option in tobar right side. Its also have two subfields. Icon field and Text field give access to change login option icon and login text.
  4. Query Ask Question: It’s have three subfields, Form Id field only accept “contact form 7” form id. For that first install and activate contact form 7 plugin as mention in theme plugins recommendation. If this field leave blank then automatically deactivate the Query Ask Question option in your site topbar. Others two subfields (Icon, Text) give access to change icon and text in Query Ask Question option.
  5. Contact Information: Ots comes 3 subfields, on/off field work as usual like others and contact number and icon field give access to change contact number and icon.
  6. Search: It’s also give access to on/off this option and change the icon and placeholder text.
  7. Menu settings: In menu setting,
    • You can on/off the logo, using show logo field.
    • You can on/off the button using show button field, also you can give button link and button text using Button Link and Button Text button subfields.
Header settings

Fig. 3.2 Header settings

Layout Settings:

In Layout Settings, all options will affect globally on your site.

Posts List/Blog :Posts List Posts List also none as Blog or Blog Listing page. Inner all options fields will affect on Posts List/Blog/Blog List.

  1. Container Layout: You can select what container you want to use
  2. Grid Layout: Select how many column you want to use.
  3. Show Banner: Give access to on/off the banner.
  4. Banner Text : Give access to change Posts List banner text. If leave blank the it’s show default text “BLOG”.
  5. Sidebar Layout : Give access to change sidebar left or right or off on Posts List page.
  6. Excerpt Length : Give the number of word, that number of word show each post content text in Posts list page.
  7. Continue Reading Text : Default continue reading text is “ [...]”, if you wanna change it then give your desire text in this field.
Posts list

Fig. 3.3.1 Posts List/ Blog

Post/Single Post:

  1. Container Layout: You can select what container you want to use.
  2. Show Banner: Give access to on/off the banner.
  3. Banner Text :This field have 2 options, one active the custom text for post banner text. If Custom Banner subfield leave blank then it’s show default text “Single Post Details”. Two set as post title option will set the post title as banner text.
  4. Sidebar Layout : Give access to change sidebar left or right or off on Post page.
  5. Inner Title: on/off option for active and deactive inner post title in post content area. If Banner Text field set as post title then Inner Title should be off for good outcome.
  6. Inner Title Align: Change inner title alignment.
  7. Post Meta : Give access to choose which which post meta you want to show in single post page.
  8. Social Share: if you want to share your post at any social site, then choose here between given social site.
  9. Author Bio : on/off the author bio in single post page.
Posts list

Fig. 3.3.2 Post/Single Post

Page/Page Details :

  1. Container Layout: You can select what container you want to use.
  2. Show Banner: Give access to on/off the banner.
  3. Banner Text :This field have 2 options, one active the custom text for post banner text. If Custom Banner subfield leave blank then it’s show default text “Page Details”. Two set as page title option will set the page title as banner text.
  4. Inner Title: on/off option for active and deactive inner page title in page content area. If Banner Text field set as post title then Inner Title should be off for good outcome.
  5. Inner Title Align: Change inner title alignment.
  6. Sidebar Layout : Give access to change sidebar left or right or off on page.

Attention! If you wanna change particular page setting then go that page from admin page menu and change page layout setting.

page

Fig. 3.3.3 Page/Page Details

Search and Archive Page Layout :

  1. Container Layout: You can select what container you want to use.
  2. Show Banner: Give access to on/off the banner.
  3. Banner Text : Give access to change banner text. If leave blank the it’s show default text. Archive page banner default text “ARCHIVE :” and Search page banner default text “SEARCH :”.
  4. Sidebar Layout : Give access to change sidebar left or right or off on those pages.
Search

Fig. 3.3.4 Search Page

Archive

Fig. 3.3.5 Archive Page

404 Page Layout :

  1. Container Layout: You can select what container you want to use.
  2. Show Banner: Give access to on/off the banner on 404 page.
  3. Banner Text : Give access to change banner text on 404 page. If leave blank the it’s show default text “Page Not Found”.
  4. Sidebar Layout : Give access to change sidebar left or right or off on 404 page.
  5. Header Text: Give access to change header text in 404 page content. Default text is “Oops! That page can’t be found.”.
  6. Content Text : Give access to change 404 content text.
404 Page

Fig. 3.3.6 404 Page

Color Scheme:

Theme color scheme :

  1. Primary Color : Primary color is the main theme color. This color will affect all of your site based on theme design.
  2. Body text Color: This color mostly use in body text color.
  3. Header Text Color : This color mostly use in header text color in your site.

Topbar color scheme:

  1. Background : you can change top bar background related everything's using this field.
  2. Font Color : This color use for text color in top bar area.
  3. Link Color : This color use for hover or link color in top bar area.

Menubar color scheme:

  1. Background : You can change menu bar background related everything's using this field.
  2. Font Color : This color use for text color in menu bar area.
  3. Link Color : This color use for hover or link color in menu bar area.

Banner color scheme:

  1. Background : You can change banner background related everything's using this field.
  2. Text Color : This color use for text color in banner area.

Footer color scheme:

  1. Widgets Area Background : You can change widgets area background related everything's using this field.
  2. Copyright Area Background : You can change copyright area background related everything's using this field.
  3. Font Color : This color use for text color in footer area.
  4. Link Color : This color use for hover or link color in footer area.
Color scheme

Fig. 3.4 Color Scheme

Typography:

Body Font Settings:

  1. Font Family : You can change body font family using this field.
  2. Font Size: You can change body font size using this field.

Heading Font Settings:

  1. Font Family : You can change header font family using this field.
  2. Font Size: You can change individually header font size for different different header.
Typography

Fig. 3.5 Typography

API Settings:
  1. Mailchimp API Key : Give mailchimp API key here for connecting with your MailChimp account.Get your API key here.
  2. Mailchimp List Id: Give mailchimp List Id here for connecting with your MailChimp account at particular list. Get your List id here.
Api settings

Fig. 3.7 Api Settings

Backup:

You can import or export your theme options setting here.

Backup settings

Fig. 3.8 Backup Settings

Page Layout Settings

Page layout setting will give you to create different different layout page. This options affect on current page.

  1. Go page in dashboard side menu.
  2. Go any particular page or add new page
  3. Then you will see Page Layout Options,
    • Container Layout: You can select what container you want to use
    • Show Banner: Give access to on/off the banner.
    • Banner Text :This field have 2 options, one active the custom text for custom post banner text. If Custom Text subfield leave blank then it’s show default text “Page Details”. Two set as page title option will set the page title as banner text.
    • Inner Title: on/off option for active and deactive inner page title in page content area.

Vigo have one custom page template "Landing Page". It is generally use for custom page making with builders. If you use this template to making page then Page Layout Option do not work.

Page layout settings

Fig. 4.3 Page Template

Page layout settings

Fig. 4.1 Page Layout Settings

Page layout settings

Fig. 4.2 Page Layout Settings

Visual Composer

We are trying to give best user experience, that why this theme have lots of visual composer custom elements. This custom elements we divide into two groups.

Vigo Section

Vigo section group element have special feature. You didn't need any ( row or section )before useing Vigo Section group elements.

  • Vigo Slider
  • Vigo Supplement
  • Vigo Call to Action
  • Vigo Services
  • Vigo About Section
  • Vigo Product Features
  • Vigo Recommend
  • Vigo Prices
  • Vigo Process
  • Vigo Ingredients
  • Vigo Testimonials
  • Vigo Brands
  • Vigo Product Portfolio
  • Vigo Product
  • Vigo Letter Box
Vigo section

Fig. 5.1 Vigo Section

Vigo Elements
Vigo Elements

Fig. 5.2.1 Vigo Elements

1. Vigo Header

Vigo Header

Fig. 5.2.2 Vigo Header

2. Vigo Button

Vigo Button

Fig. 5.2.3 Vigo Button

3. Vigo Featured Box

Vigo Featured Box

Fig. 5.2.4 Vigo Featured Box

4. Vigo Quote Box

Vigo Recommend Box

Fig. 5.2.5 Vigo Quote Box

5. Vigo Recommend Box

Vigo Recommend Box

Fig. 5.2.6 Vigo Recommend Box

6. Vigo Pricing Table

Vigo Pricing Table

Fig. 5.2.7 Vigo Pricing Table

7. Vigo Accordion

Vigo Accordion

Fig. 5.2.8 Vigo Accordion

8. Vigo News Letter

Vigo News Letter

Fig. 5.2.9 Vigo News Letter

9. Vigo Testimonial

Vigo Testimonial

Fig. 5.2.10 Vigo Testimonial

10. Vigo Social Icon

Vigo Social Icon

Fig. 5.2.11 Vigo Social Icon

11. Vigo Star Rating Box

Vigo Star Rating Box

Fig. 5.2.12 Vigo Star Rating Box

12. Vigo Brand

Vigo Brand

Fig. 5.2.13 Vigo Brand