“VibeCom WP Multipurpose Theme”

WordPress Theme Installation

• After purchasing the theme you'll get a zip file to download. Once you unzip the Template zip, you will find VibeCom Template Folder which have :
  a. VibeCom Theme Folder,
  b. VibeCom Theme Zipped and other folders like Demo-Content and Documentation.
• Install Method 1:
  a. Open you WordPress dashboard -> Appearance -> Theme Tab.
  b. Click on Install New Theme->Upload.
  c. Select the VibeCom.zip theme zip file and click upload.
  d. After upload click activate and theme is installed.
• Install Method 2: You can install Theme by uploading direct by FTP.
  a. Go to your site Root/WordPress root open [ wp-content/themes ].
  b. Upload the Theme zip and extract it inside the theme folder.
  c. Next go to Themes in wordpress Dashboard->Appearance->Themes and you will find the theme, active it and done.
  In case you're facing issues you may like to see help videos here.
• If you face issues during installation of the theme using WP's built-in uploader, you may refer to this link.

Fresh Installation

When you're installing the theme afresh. We provide an option to install sample data.
This sample data comprises of sample posts, pages and attachments which would add this data and make your wordpress installation just like our demo. So if you're setting up a fresh website it is recommended that you use this sample data and then make custom changes in the theme. Watch video to see how to setup wordpress like our demo in a fresh install.

Navigation Setup

Setting up Navigation is Easy. Since this template supports MegaMenus upto three levels and uses WP menus for management, you can setup your menu within minutes. Follow below steps to setup menu:

1. Go to WordPress Dashboard -> Appearance -> Menus
2. Important: When you create a Menu, create a 3 level menu. The first level is shown in top Nav, second is the Title tag and third element is the element which is shown in the drop.
3. Check "Mega Menu Title Tags" setting in VibeCom Options Panel -> General Settings
4. To add a Home icon simple create a first level item with name "home" and enter url as your website/wp installation.
5. Add title attributes to the third level if you require, the subtitles to appear below nav items.
6. Watch below screenshots.:

Clients Setup

Clients setup is really simple. Follow these simple steps to create your clients "Custom Post Type"

1. Go to WordPress Dashboard -> VibeOptions Panel
2. Go to Vibe Options Panel -> Custom Posts, Click Add New
3. Fill in the details, Port Type = Client, Singular name= Client, etc..
4. Important:Open Advance Label options, give name to Menu name as "Clients"
5. Choose what all supporting functionalities is required, select Title,Editor,Featured in Supports.
6. Save Options Panel and you'll see Clients.
7. Now to Setup Clients:
   1. Create New Client
   2. Give title/details if required
   3. Attach the Client logo a featured image.
   4. This featured image is taken in carousels etc.
   5. Alternatively: you can also attach meta boxes as "featured component" and attach sliders etc in clients as well.

Getting Started

Setting up VibeCom is Easy. First of all, it is requested that you enter your Themeforest user name and purchase code in the "Getting Started panel" . This is required so that auto-updates to the theme can be applied hassle free.

1. Fastest Support: VibeCom Support Forums
2. Support Via Mail : VibeThemes@gmail.com
3. Support via Themeforest Comments.

General Settings

Following settings and descriptions in this tab:

1. Select a VibeCom Theme : There are 11 prebuilt themes, just click and the theme is selected.
2. Enable Responsiveness : Enable them responsiveness, if no selected theme looses its responsiveness capability and loads same on mobile devices as well.
3. Enable Theme Customizer : Once you activate this, you'll get all the theme customizations available in WordPress inbuilt theme options panel.
4. Theme Layout : Select Wide or Boxed Layout for your WordPress theme [see demo for more].
5. Header Layout : Theme Header supports two layouts one with phone no/ email & search the other with social icons.
6. Footer Layout : Footer layout wide or boxed.
7. Enable Responsiveness : If you select no, theme looses its responsiveness capability and loads same on mobile devices as well.
8. Mega Menu title tags : refer to Navigation Setup.
9. Upload Logo : Upload your Logo.
10. Upload Favicon : Upload your Favicon.
11. Enable Search : Show Search in Header, for Header Layout Social icons , search appears in menu bar.

Elements Colors

Theme is made of various colors and combinations which can be edited from this tab. All colors have descriptions written by their side for explaination:

1. Primary Color : Menu Hover / Links / Icon background / Primary buttons / Slider buttons / Carousel Headings & buttons
2. Primary Light Color : Lighter color than primary, used in Menu drop hover/ borders on primary backgrounds, default button background
3. Primary Text Color : Text color on primary background, eg: Menus.
4. Body Text Color : Default Text color of Body
5. Upload a Body background : Upload a full body background; works only for boxed layout.
6. Theme Background effect : Select effect out of 25 background effects, these are repeated across the background; works only for boxed layout.
7. Theme Dark color : Theme dark color used in backgrounds and hover effect, for Thumbnail style backgrounds, Excerpt Hover background,Pagination/Filterable inactive buttons color.
8. Theme Darker Background Color : Theme darker color, used as hover background color in darkest backgrounds. Form elements backgrounds, Vibe text widget in dark background.
9. Theme Darker Background Color : Theme darkest color, used as background color in navigation and footer.
10. Theme Dark border color : Border color in darkest background, top nav border color & footer border color.
11. Theme text color in dark background : Text color in darkest bg eg: Footer text color
12. Theme Title Text color in Dark background : Title Color of Heading in darkest backgrounds eg: widget titles in footer.
13. Tagline background color : Used for Tagline & Blockquote Background .
14. Testimonial Background Color : User for Testimonial backgrounds.
15. Main section Container background color : Lightest background color, used as container background color, background color of comments, Background color active step in step slider.
16. Theme Light border color : Main section border (in boxed layout) & Tagline border color.
17. Theme Lighter border color : BBorder color inside main container, Breadcrumb bottom border, sidebar border, heading border color in main container.
18. Theme Special text color : Default color of Pricing Table Price

Typography

Typography settings allow you to take control of site typography. All headings H1 to H6 to paragraph to labels.

1. Font Face : Select out of 600 Google fonts which you'll like to select for the typography type.
2. Font Size : Drag the slider to select font size
3. Font Color : Click in input and you'll see a colorbox, select color to insert it into input box.
4. Preview : After changes click save and your new font will appear in preview with new font face and size.

Custom Connect

Custom connect allows user to connect :

1. Connect Meta Boxes [Featured Component, Modals(Popups), Page Builder, Template Layouts] with various post types.
2. Connect the category blog/archive/search page type with various custom post types.
3. Show meta information and comments on various custom post types which have capability type as "post", i.e capable of having taxonomies eg: Portfolio.

Slider Settings

These are default slider settings for the sliders used in theme. All six sliders [excluding layer slider] are used in the theme based on Flexslider. For any specific issue related to the slider you may want to refer to this link here.[Credits: WooThemes].
All these general settings & their description can be found in the above link. Since these settings are based on best combination it is recommended that you only change them only if you're aware of these settings.

1. Slider Direction: When using Slide animation, new slides appear from right or bottom
2. Loop animation: After last slide go to first slide.
3. Slideshow: Enable Slider to start automatically on load
4. Enable Mousewheel Navigation: Enable this if you want users to use their mousewheel for navigation.
5. Slider Thumbnail Size: Size of Thumbnail for Thumbnail sliders
6. Slider Step Size: Size of Step for Step Sliders.

Sidebar Manager

Create unlimited Sidebars using sidebar manager. Just click add new and your new sidebar is ready. Now you can create any number of sidebars and use them in your page/posts/custom post templates, footer as well as in page builder. To create a New side follow these steps:

1. Got to your WP Dashboard -> VibeOptions Panel -> Sidebar Manager
2. Click on Add More
3. Enter a name [Please ensure there are no duplicate names.] eg: vibe_leftsidebar, use a prefix.

Custom Post Types

Create unlimited Custom Post Types using Custom Post Type manager. Just click add more and a new form appears. Where in you fill the fields and add the custom post type. To know more about what Custom post types are you may refer to WordPress Codex and searching on Google. If you have any specific issue please use VibeThemes Forums.
Custom Post types are great benefit to keep your data organized. Say if you're an owner of machines. You can categorize your products by creating custom post types as:

• Heavy Machines
• Light Machines
• Digital Machines

Custom Taxonomies

Create unlimited Taxonomies [categories] using Custom Taxonomies manager. Just click add your new taxonomy is to any post type. You can create any number of taxonomies and connect to any custom post type...

SEO Settings

VibeCom has some pretty cool SEO features, but we do acknowledge the best in the business. So we recommend two plugins available for free in WordPress plugin repository: WordPress SEO and W3 Total Cache plugin. Rest important but missing pieces we've provided in the SEO settings.

1. Image Alt tag format: Format is similar to wordpress permalinks where %title means title, %category means category...
2. Image Title format
3. Enable Yoast SEO Bread Crumbs if Yoast WordPress SEO is installed.

By default the image alt and title will only apply to those which do not have an alt or title attribute. But you can force this alt and title structure on all images by setting on the force set parameter.
Last but not the least, we provide you with automatic database optimization, you can set schedule when database optimization query runs. Since this is a database level query it is recommened that you set it at once or twice per day level.

Miscellaneous

Many important settings are there in miscellaneous which give you a lot of flexibility in the theme. Though mos tof the features are self explanatory. Following are important ones:

1. Categories in Thumbnail: In Carousels with Thumbnai Style, Post title with its respective categories show up, hthis is the maximum number of categories you want to show. In post belongs to 3 categories but this number is set to 2 then only 2 of those categories are shown.
2. Default Hover effect: The Shade which appears on hover.
3. Disable Default Taglines in Category Pages: When you view a category/tag or any other taxonomy page then taglines appear. This option can disable these taglines.
4. Show hover only for modals: For posts which have featured modal connected via modal metabox, hover effect appears only for those posts.

Import Export

Import and export all your Vibe Options Panel settings. It is recommended that once everything is set you must export the settings to your desktop/laptop and save it on cloud or email. To export your settings:

1. Go to your WordPress Dashboard->VibeOptions Panel->Import/Export.
2. Go to Export Options Click on Download or Copy or simply copy the live link.

Live Theme Editor

Theme Editor

After enabling Live Theme Customizer, you can simply go to WP Customizer by click on the link next to the switch or go to your WordPress Dashboard->Appearence->Themes, in themes you'll find a link customize below the active VibeCom child theme.
In WP Theme customizer you'll see three sections added by VibeCom, VibeCom Colors,VibeCom Typography and background image.
Please note that though most the changes are real time it may happen that in some cases particularly Font Face changes you may have to save and refresh the page.

Simple Slider

To create a new Simple slider you can either select a featured component or create a new slider using the slider post.
All the default settings of the slider is taken up from the VibeOptions Panel -> Slider Settings tab. Few important settings can be managed while creating the slider, such as showing the navigation controls or the control buttons and setting up slide delay. Any setting left blank will revert to settings stored in the options panel. Here's how you can export the settings and import them later on:

VibeCom Slider

To create a new VibeCom slider you can either select a featured component or create a new slider using the slider post. All the default settings of the slider is taken up from the VibeOptions Panel -> Slider Settings tab. Few important settings can be managed while creating the slider. Any setting left blank will revert to settings stored in the options panel.

VibeCom is a captions slider which makes your captions look elegant. You can control the displacement of caption element, duration of animation, direction of animation and the easing effect of animation of the caption element [HEading,description and action] Heres how you can export the settings and import them later on:

Thumbnail Simple Slider

Creating a Thumbnail Simple Slider is easy. To create a new Thumbnail Simple Slider you can either select a featured component or create a new slider using the slider post. All the default settings of the slider is taken up from the VibeOptions Panel -> Slider Settings tab. Few important settings can be managed while creating the slider. Any setting left blank will revert to settings stored in the options panel.
Thumbnail width is set in VibeOptions Panel -> Slider Settings -> Thumbnail Width , option. Default is 240px. Heres how you can export the settings and import them later on:

VibeCom Thumbnail Slider

Creating a VibeCom Thumbnail Slider is easy. To create a new VibeCom Thumbnail Slider you can either select a featured component or create a new slider using the slider post. All the default settings of the slider is taken up from the VibeOptions Panel -> Slider Settings tab. Few important settings can be managed while creating the slider. Any setting left blank will revert to settings stored in the options panel.
Thumbnail width is set in VibeOptions Panel -> Slider Settings -> Thumbnail Width , option. Default is 240px. Heres how you can export the settings and import them later on:

Simple Step Slider

Creating a Step simple slider is easy. To create a new Step Simple slider you can either select a featured component or create a new slider using the slider post. All the default settings of the slider is taken up from the VibeOptions Panel -> Slider Settings tab. Few important settings can be managed while creating the slider. Any setting left blank will revert to settings stored in the options panel. Heres how you can export the settings and import them later on:

VibeCom Step Slider

Creating a VibeCom Step slider is easy. To create a new VibeCom Step slider you can either select a featured component or create a new slider using the slider post. All the default settings of the slider is taken up from the VibeOptions Panel -> Slider Settings tab. Few important settings can be managed while creating the slider. Any setting left blank will revert to settings stored in the options panel. Heres how you can export the settings and import them later on:

Layer Slider

LayerSlider is one of the most advanced sliders. It can be used for your HomePage featured slider. The slider also supports videos. Heres how you can export the settings and import them later on:

Featured Component: Slider

Featured Component meta box appears on all those custom post types which are enabled in the, VibeOptions Panel->Custom Connect. The Featured Component Slider is just like the slider metabox which we used to create several sliders in previous section. Featured Component Slider has no difference what so ever with the general Slider. Except that once a featured slider is created in a post it appears in the Carousel and Filterable styles. Featured Slider can be embded in a post using the [featured] shortcode. Use this shortcode in conjunction with columns shortcode for better effects. Here's a sample how to create a Featured Slider

Featured Audio

To make a featured component as Audio, simple select "audio" from the dropdown in the featured component metabox. Once selected you'll see an input box where you need to insert the URL of the audio file. Note the audio file can be self hosted or available anywhere on internet. Just place the audio file url there. Since .mp3 file is not supported by all browsers it is recommended that you upload or place three links to audio files, one .mp3, .way and .ogg for maximum browser compatibility. See video for more.. To show the audio on the same post simply place the shortcode [featured] and your audio will appear in the post. Use this shortcode in conjunction with columns shortcode for better effects.

Featured Video

As of now, Featured Video only supports the videos hosted on following:

1. Vimeo
2. Youtube
3. Blip.tv
4. Viddler
5. Kickstarter

To insert a video as a featured component simply get the video embed code (iframe code) and paste it inside the featured video textbox. To show the video on the same post simply place the shortcode [featured] and your video will appear. Use this shortcode in conjunction with columns shortcode for better effects.

Layout Elements

Layout Elements are essentially building blocks of a page. Any component put inside a layout element is encapsulated within the element. This helps in building a responsive layout instead of a fluid layout. There are 6 layout elements, One half, One Third, One Fourth, Two Third,Three Fourth and Full Width Resizeable.
Each of these elements can be used to build a layout, all elements can be dragged and sorted accordingly. Watch Video below for layout elements:

Carousel Block

Carousel Block shows a carousel at the place where it is inserted in.

1. To show a carousel you need to select the post type. Post type such as posts,pages,portfolio and other custom posts.
2. Then you need to select the carousel style, which comes in five styles,Thumbnails, Excerpt, Image, Images with no link & title only. You can experiment and see how each of these carousel type looks like, just take note that Thumbnails,Excerpt , Image only carousel type require your posts to have a featured image or featured component attached. For featured component refer to previous sections.
3. You can further drill down your carousel by selecting the category and Taxonomy term [make sure that term belongs to the appropriate category].
4. Next select the number of carousel items you want to show in carousel
5. If you want to show specific posts in the carousel, enter the post ids, Note: That Post type should be same for all post ids entered all rest settings are overwritten while using specific post ids.
6. Lastly, you may require to add/reduce spacing while creating carousel which can be later adjusted using the additional spacing fields.

Filterable Block

Filterable Block shows a Filterable at the place where it is inserted in.

1. To show a filterable block firstly you need to select the post type. Post type such as posts,pages,portfolio and other custom posts.
2. Then you need to select the Filterable style, which comes in three styles,Thumbnails, Excerpt and Image.
3. Next you need to select the Taxonomy type which will filter the posts in below section. Like you can select category as taxonomy if you're showing posts below.
4. Next select the number of Filterable items you want to show in carousel.
5. If you want to show specific posts in the carousel, enter the post ids, Note: That Post type should be same for all post ids entered all rest settings are overwritten while using specific post ids.
6. Lastly, you may require to add/reduce spacing while creating carousel which can be later adjusted using the additional spacing fields.

Content Block

Content block works like a regular editor block. Here you can insert all the shortcodes available and get all shortcode features inside the content block itself. View below video for more:

Sidebar Block

With this block you can insert sidebar inside a page or a post.Additional sidebars can be creating using the VibeOptions panel and later inserted into the page using this. All widgets then inserted in the Appearance->Widgets tab will show up on the page.

Sample Layouts

This is the best section of page builder, you can choose out of 25+ layouts in the Pagebuilder. Simply drag and drop the layout in your layout screen and you have your page ready. Not that the layout will have shortcodes and sample text inside it, which you might need to replace with your own content. Such as [featured] component might require to be replaced with [slider id=""] shortcode.

ShortCode: Accordion, Toggle and Tabs

Accordion List Style: Choose out of three given styles
a. Default
b. Plain
c. Dark: Style for footer
Accordian Title: Give any title to your Accordian.
Accordian Content: Write any content here, which you want to show, you can show images, icons and other html, shortcodes as well inside the accordian content.
To add Accordian, Click on “Add Accordian Toggle”.

Toggle: Toggle is another form of Accordian. The main difference is that in Accordian if you open one and thereafter second one, the first one closes automatically. But in Toggle both of your toggles will remain open.
Toggle Content Title: Title on the toggle, you can also place icon in the title if you wish to by using the shortcode.
Toggle Content: Content of the toggle which can be text, image, icon , video and many other.
Toggle State: Closed or Open. By default when your user open you page if you want your toggle to be in open state, select open else closed. You can also place 3-4 toggles and make the first one as open and other closed.

Tabs: For tabbed content you can choose this Shortcode.
Tab Title: The title of your tab.
Title Icons: You can also place icon besides the title of the tab.
Tab Content: Content in the tab can be text, image or whatever you want to. Click on “Add tab” if you want more than one.

ShortCode: Pop-Ups(Modals)

Modal Theme: No header, No footer, Only Body
Additional Modal Style: Button for modal action. Choose button, which you want to place.
Modal ID: Modal created in Modals->All Modals. Creation of modals has been discussed in earlier videos.
Modal Content: Text in the button
Modal Footer: If you want to place any content in modal footer then use this space.

ShortCode: Pricing Table

One pricing table shortcode inserts one table block at a time.
Column Heading: Heading of your pricing table block.
Label: No label, Popular, Best Value. These labels are placed diagonally on the top right of the block.
Pricing Column Style: Select out of 15+ colors to give to your pricing block.
Price: Enter Price in the space.
Price Sub Text: Sub heading for the price like per month or annually.
Price Column Content: Column content is the place if you wish to highlight the features of the plan. List shortcode is already placed in the column.

ShortCode: Google Maps, Alerts & Notes

Google Maps Google Maps can be placed anywhere on the page. Copy the embed code of your location or any location from http://maps.google.com and paste it in the space provided in the shortcode. The embed code must be from <iframe> to <iframe>. Delete all the other html after <iframe>, since those are the text and other links ads placed in google.

Alerts Alert Style: Choose out of four given colors namely Orange, Blue, Red, Green.
Show Close Button: Choose “Yes” if you wish to show close button and “No” if not.
Alert Text: Write text here, which you want to show user in the Alert Box. You can also add icons in the alert box

Notes Background Color: Select the color of the note.
Content: Enter content you wish to place in the note. It can be html or any other shortcode like video, audio or any other.

ShortCode : Contact Form

The contact form shortcode is Multi-Purpose.
You can use the same shortcode to make subscription form and also registration form. You can add a field of your choice without coding in the shortcode itself.
Enter Contact Form Title: Contact forms title such as “leave a message”, in case of registration form enter “Register Now” or in case of subscription form enter “Subscribe Now”.
First Label: This can be used to input name or anything else. Leave it blank if you don’t want this field.
Email Label: Used to input email from user. This should be email only.
Special Field Label: Any field you want from user such as Mobile or Address or site URL. Leave blank if you don’t want anything or any text box.
Message Label: Can be used to take any input from the user. Leave blank if it is not required. No text box will appear on site.
Button label: It is the text on button like “Send Message”, “Subscribe Now”, “Register Now” or anything you wish to enter.

ShortCode: Timer , Testimonials & ProgressBars

Timer Enter the end time you wish to end you timer in the format YYYY,MM,DD. The timer takes the primary theme color automatically.

Testimonials: Create a new testimonial in the custom post type and copy/note the ID in the Testimonials-> All testimonials. The ID is placed here in the shortcode.

Progress Bar: The Progress Bars can be used to show skills or any other data.
Percentage Cover: How much percentage of the bar you want to show covered.
Some Content: Content in the bar you want to show.
Color: Select the color of the bar i.e. blue, orange, red, green.
Toggle State: Simple, Stripped, Running Stripped.

Icons, Elastic Icons & Social Icons

ShortCode: Headings, Dropcaps, Blockquote & Columns

Headings : VibeCom has three different styles of headings namely : Simple, Default, Elegant.

DropCaps
Color Hex Code: Enter the color in hexadecimal code (http://colorpicker.com) and the letter you wish to make it a dropcap.

Buttons

Buttons
Button URL: Enter the URL of the page you want your button to take your user.
Button Style: Select out of ten colors you want the button to be.
Button Size: Three size buttons are available namely small, normal/medium & large.
Button type: Button can be square as well as round.
Button Target: Self or blank i.e you want the new window to be opened in the same page or some other page.
Button Text: Text, which you want to show on the button.

Sliders and Animated Menu

Sliders: Select the Slider Style : Shadows if you wish to give to your slider, if not select default.
Slider Post ID: Go to Sliders->All Sliders and note the slider id which you have made earlier as shown previously.

Animated Menu
Animated Menu Style: Choose out of eight styles from the dropdown.
Animated Menu Size:
a. Normal 180px
b. Small 120px
c. Mini 80px
d. Big 230px

Link to URL : Web/Page Address you want to link it to. Select Icon : Choose an icon.
Content : This is your heading
Sub Content : This is your sub heading
Click on “Add Item” is you wish to add more like four in a row in case of Normal size menu or five in a row in case of Small size.

Taglines & Video

Tagline
Tagline Style: Select out of Boxed, Full Width, Full Width attach to top.
Background Effect: Select out of nine background effect or None if you don’t want any effect.
Tagline: Write your tagline here. It also supports shortcodes such as buttons, icons etc.

Video:
Enter the embed code from the video. Currently supported players are Youtube, Vimeo, Blip.tv, Viddler, Kickstarter. The embed code must be from <iframe> to </iframe>. Delete all the other html after <iframe>, since those are the text and other links/ads placed in the respective site.

Tooltips, Author, Gallery and Audio

Training Video Coming Soon...

Widgets Setup

VibeCom Comes with Prebuilt 17 Widgets. Most of these widgets are easy to use, Plus internal error handling and messaging system gives proper warnings and message if settings are not proper. Watch below video on How to setup these Widgets.

Contact,404 & Coming Soon Page setup

Setting Up a Complete Site within 5 Minutes.

Setting up a News Section.