Eight

Extra powerful and stylish WordPress theme

By DFDevelopment

 

Thank you

We would like to say thank you for choosing Eight theme. In this documentation you will find everything you need to use this theme. If you have any questions which are not covered in this documentation, please, create a ticket or email us your problem or question.

 

About Eight theme

Eight is an ultimate and extra customizable wordpress theme, that helps to create excellent websites without spending significant amount of time and efforts. Its user-friendly interface, modern and nifty design, much more additional tools and features make Eight useful, customizable and straightforward. Easy installation, demo export and setup – all you need to build good website. A lot of useful plugins, interactivity, numerous modules for different purposes, fast and helpful support make Eight very necessary thing for any kind of website.



NB! All the images presented in the Eight Theme are for the familiarization only and are not allowed for personal or commercial usage. You may buy them on Shutterstock or Fotolia to use for your purposes.

 

 

 

Installing by WP Administration Panels
  1. Extract the zip file which you've downloaded from CodeCanyon.
  2. Login to your WordPress admin area. Navigate to Appearance > Themes > Add New.
  3. Click on the Upload Theme button on the top.
  4. Click on Choose File and select "Eight.zip" file from extracted zip file.
  5. Hit Install Now button.
  6. Then click on Activate link.

You can find all about theme installation and setup on WordPress Сodex as well.

Note In case you receive internal server error or "Are you sure you want to do this?" message, you should increase the upload_max_filesize, memory_limit at least 128MB in php.ini (For Windows platform use php -i | find /i "Configuration File" command to know the location of your php.ini file. Ubuntu command - php -i | grep 'Configuration File'). Most hosting providers have small file upload limit. What you can do in this case: you can upload the theme by FTP or contact your host provider to increase upload limit.

 

Installing by FTP
  1. Extract the zip file which you've downloaded from CodeCanyon. You should receive "Eight" folder.
  2. Connect to you server by FTP application then navigate to /wp-content/themes/.
  3. Upload here the "Eight" folder which is extracted.
  4. Login to your WordPress admin area and navigate to Appearance > Themes, hover over the Eight theme and the button Activate will appear, hit it.
  5. Your selected theme will immediately become active.

 

Plugins installation

After installing and activating the theme your can install the plugins that are included to the theme. You can choose the necessary or just install all the proposed plugins. You will be able to delete unnecessary later.

After theme installation you will receive the following notification in the top

In case you want to install these plugins, hit Begin installing plugins. We are strongly recommend to install those plugins, so you will be able to create full layouts. In case you still do not want to install plugins, you can ignore this message by hitting Dismiss this notice.

If you hit Begin installing plugins

  1. You will proceed to Install Required Plugins section.
  2. By ticking on squared box near Plugin you will choose all the plugins. In case you want to select not all plugins, but certain - tick on the chosen ones.
  3.  

  4. Click on Bulk Actions and choose Install from drop-down list.
  5. Hit Apply button.

After this all the plugins will be installed and activated.

Info If you need to install/find/uninstall/manage other plugins, please, visit Wordpress Codex Managing Plugins for Automatic Plugin Installation instructions, Manual Plugin Installation instructions and uninstall plugin instructions.

 

 

 

Manual update

Go to your CodeCanyon account, to download page and re-download the theme (updates are free of charge). Once you've downloaded the most recent version, you can deactivate and remove the old version, then install the new one. Your sliders, content, settings, options are all safe in the database, removing the theme won't touch them.

 

Auto update

Activate the auto update simply by going to Options > Theme Update and enter Your Envato Username in the field "ThemeForest Username", Your Secret API Key to field "Secret API Key" and hit Save Changes. The theme will be automatically updated when the new version is available.

Info How to find Secret API Key:

 

 

 

This paragraph is optional and you may ignore it in case you wouldn't like to use demo content for your site and want to proceed further. If you are going to use the demo content, follow the instructions below.

 

Pay attention that demo import will overwrite your database and we strongly recommend to save a back-up before starting import.

 

Demo content importing

After installing the theme you will be able to import the demo data, to receive exactly the same layouts, pages and posts, as in our demo website.

Note You can upload 5 pre-built layouts with the Demo content Installing. They are iOS, iOS2, Medicine, Magazine and Shop.

Note We may not include into import package some pages like: 404 page, Contacts page, Features page, Shortcodes page, that you can see on demo website. Some images and other media can be replaced by gray images, as we do not allowed to distribute images from demo website. So note (!) that it's NOT the problem of import process, just replace the media with your files, or email us to find out how to create missing/not included pages, in case you do not know how.

If you installed all the plugins included to the theme, you may notice that we included Installer Plugin that will help you to import data with only one click. If you installed the plugins selectively, open the folder with the theme and find the folder "Plugins" inside. This folder contains all the plugins included with theme. You need easy_installer.zip file for import. To know how to install plugins manually go to the Installing section > Plugins installation > Info label.

Go to the admin area and find Installer Panel in Appearance section of your admin menu.

Click it and you will go to the Import section.

Simply click Run installer. You will get a notification about successful installation of demo content to your site in a while.



In case you want to install only one layout or any other not included to the Main demo content by clicking on this layout in Installer panel

Note We would like to pay attention that you need to install WooCommerce and YITH WooCommerce Wishlist plugins before import, if you want to import shop as well. These plugins are optional and not included to theme, but you can download them following these links: WooCommerce plugin and YITH WooCommerce Wishlist plugin.

The theme is ready for work.

In case there's an issue, that styling options and color schemes are not installed and working properly, you can upload them once again from main content folder: Main files\import\layout_name\redux_options.txt. Open this file and copy the content.
Then go to Options > Import/Export

and select Import from file. Paste the information from redux_options.txt and click Import.

 

Info Sometimes, because of different reasons (low hosting productivity, low php memory limit etc), you may face difficulties with demo content import. It's not a big problem, simply go to Tools > Import section of your admin bar.

Then click Wordpress

You will find only_content.zip package in Demo-data folder of your Mainfiles package that you've downloaded from themeforest. Unzip this package, upload all_content.xml and click Upload file and import.

Fill in the form, check the Dowmload and import file attachments checkbox and click Submit. That's all.

If you would like to download the extended version of demo-content, all you have to do is to upload full_demo_content.xml file instead of all_content.xml. You will find it in full_dedmo_content.zip package of the same folder. But we do not recommend to import extended demo on hosting or server with low productivity.

 

 

Additional settings after import

After import you can select the page, which will be your homepage in Settings > Reading > A static page (select below). Choose the page from Front page: drop-down list.


To assign a menu to the primary menu location go to the Appearance > Menus and select a menu from the list Select a menu to edit:. Choose the menu that you want to have as main menu in header. Choose, for example, Primary Navigation from list of menus. Hit Select button. The chosen menu will be opened.

After that scroll down to the bottom of menu to Menu Settings and check the box Primary Navigation of Theme locations. Click on Save Menu button to save changes. The location will be selected to the chosen menu.

 

Fonts import

After the theme installation we provide you with the pack of Google Fonts. But you have to set them the way you like.
For this go to Appearance > Fonts and select New font rule.


Now you'll be able to style the Font the way that suits your site best.

Revolution Slider import

To import Revolution slider you need Revolution slider plugin to be installed. You can find the file revslider.zip in the folder Plugins of the theme, if you haven't installed it yet.

 

 

 

In case you want add something special to your page, you may use Stunning header.

 

Stunning header creation for single page, post, etc.

To add Stunning header to a certain page, please, go to Edit page and find Stunning header options. Here you're able to customize it to your taste.


Firstly, you see the Background image uploading option. Click Upload > Media library select the image Show, set its Alignment and Size and click on Use as Background image.


Then there are the following options:
Background position to set the alignment of the image:
Background color set it in case you want to have this color to be shown when the image is not enough for the header width;
Page subtitle type here the subtitle text;
Text alignment you may choose where to display the page attributes - Title, Subtitle and Breadcrumbs;
Fixed background image position set it On to make your header stuck to the top of the page with no parallax while scrolling, or Off to make it sliding up and down the image;
Background check set it to Default to use the whole site BG check, Lite when your image is light and you want to use dark font color, or Dark if the image is dark and you need light font colors.


This is how it may look on your page

 

Default stunning header for the whole site.

In case you want to create only one Header for all pages (that have templates with header) of your site, please, go to Options > Styling options > Stunning header options.


Here you can see the same options for the Header as they were on the Edit page. Style them as you need.
By switching On/Off you may enable/disable the Stunning header at your site.

 

 

 

Page creation + standard parameters

Creation of a new layout/page is very simple:

  1. Hover over Pages on the admin panel on the left and click on Add New.
  2. Type the title of the page in the field Enter title here.
  3. Click on Publish button.

With those simple steps you created a page for different purposes. To make pages in form of blog, portfolio, grids, page with different sidebars here is the option called Template inside the Page Attributes section of the right sidebar. Choose the template called Page with left sidebar and you will be able to put the right sidebar to the page. In case you select Portfolio 3 columns you will receive the page with your portfolio items in three columns.

All the templates are presented at our demo website, that you can review at Themeforest. In case you have difficulties with templates, write us and we will answer all your questions.

The next settings concern to the ability to change the status of the page, visibility and the date of publishing. This section is very useful when you want to set settings to visibility of your page, etc. Here you can delete the page by clicking on Move to Trash.

You also able to select the header type for each page, you've created with option Select header type (adding the header type to page is described in section "Header Variants Selection") and add the sidebar to the page (all about sidebars and adding them to the pages are described in section "Custom Sidebars + Widgets"). To add the featured image/thumbnail to the page there is the option called Featured Image in the right sidebar as well.

 

Stunning header options

On the editing mode of the page you also have the option Stunning header options. This option will help you to create a unique header style for each page.

Background adding variants

After adding the image with the help of any of these options you will receive the following appearance:

By clicking on the red "No entry" sign you will be able to delete the image if you want to upload another one.

Other header options

Lets go to next options. Background position - this option will help you to display the certain part of the image in the header. It means that if you choose right top from the list, then the right top part of the image will be dislayed as main in header. If you have a very large image and you want a specific part of the image to be dispayed, you choose it and there will accent on this part, not on others. You will not need to cut the necessary part. Just select the section of the image to be in accent.

Background color - you can select the color for header instead of image. Page subtitle - insert the subtitle for the header. You can select the Fixed background image position, so you will be able to fix the image and it will not move while scrolling. If your image or the color of the header are dark select Background check as Dark and the text on header will be ligth and seen very well. If the image or color are light - then it's better to choose Lite variant.

 

Boxed Page Background Options

In case you want to put the image or color to the background of page you can use these options: Background color - choose the backgroud color. Fixed backrgound - check this option, if you want the background to be while page scrolling. Background image - select the image for background (how to choose this option you already know in this section of documentation above). Background image repeat - if you want your background image to be repeated, then choose from list the direction of repeat.

 

Additional options

Revolution Slider Options - you are able to create a new template slider in Revolution slider section (how to do this read the documentation of Revolution slider, the link to the documentation can be found in section "News Page & Revolution Sliders Creation" of this documentation) and then choose here it's template.

To top settings - by checking on the Display to top link above footer the link/button/icon/sign tthat will help to scroll instantly to top will appear at the bottom of the page above the footer.

 

Layouts Settings Option

To go to the layout settings option navigate to admin panel of your website. Click on Options > Layouts Settings. On this page you can configure layouts of different pages. You can select the type of layout for a certain type of pages: single page, 404 page, archieve, etc. So you do not need to select the type of layout for every page you've created. Just select the single layout for all the pages, posts, headers. Also you can choose the headers for every page types and posts.

The settings concerning the Visual composer and Visual builder options (how to use them on the page) you can read in this documentation on appropriate sections.

 

 

 

The video on how to create the layout with the help of Visual Builder you can find on our Youtube video Main Layout Creation.

The Visual Builder plugin is a powerful tool for creating website pages. It includes more than 30 modules. Each of them has its own settings and are very simple and convenient for use. More info about the Visual Builder you can at the author page on Themeforest.

 

Metro Visual Builder Settings

To use the Visual builder you need to be the Metro Visual Builder plugin to be installed. You can find the installation file at the theme folder called Plugins. How to install the plugin read at the section "Installing" of this documentation. After installing and activating the plugin, the page of plugin settings will appear. You can always find these settings by navigating to admin panel on the left > Settings > Metro Visual Builder. The page consists of several fields. We will describe you what settings are necessary to do, and what are not.

So the settings page consists of: 1) Show the editor for: option - this option is necessary if you want to add more then just Posts and Pages to work with builder. Select Testimonials or Timeline, and the section of Visual Builder will be available on its items creation pages. You will be able to add modules for the elements that selected in Show the editor for: option. 2) Grid: option - choose another grid ONLY if your theme uses that grid, we are not recommend to do any changes on this option. The default grid is set, so leave it untouched. 3) Activate Metro Visual Builder: option - is set to Yes as default. 4) Show Metro Visual Builder editor: option - is set to Yes as default as well. Show the editor in the add/edit page. You can temporarly hide it with this option.

On the editing page, when you create a page you can scroll to the bottom of the page and see the settings Metro Visual Builder Settings. You can activate/desactivate the Visual Builder section on Activate Metro Visual Builder? and put it to Yes - activate, No - desactivate, Both - you will be able to use the standard editor on the top + visual buider modules. You can activate/desactivate Activate Row Navigation? and Activate Scroll Navigation? as well.

To use the Visual Builder to built layouts we created two templates: For page builder - very useful if you want to paste the slider shortcode on the top of the page or For page builder + Header - if you want to have the header on the top. So when you create a page just go to the option Page Attributes and in the field Template select one of this two templates. How to create pages/layouts and learn more about it's options you can read the section "Layout/Page Creation and Settings" of this documentation.

 

You can use the Visual Builder for other templates to add different modules as well.

More information on layout/page creation options you can read at the section "Layout/Page Creation and Settings" of this documentation.

 

Metro Visual Builder Using

On the editing page of the page you are creating there is Visual Builder section on the bottom of the editing page. You can use both + ADD SECTION links on the right part of the red bars for adding sections to your page. The only difference between them is, that the first one adds sections to the top, above other sections, and the second one - to the bottom, below other sections.

When you click + ADD SECTION link the window Add section appear and you have to select the type of section from the proposed. There are several of them, so you can use different sections for different rows.

Click on the section you choose and it will be added to the row.

When the section is selected you can start to add modules. Simply click + Add module link inside the section. For different columns you can put different modules. Here we have only one column - Full width type of section, so we add only one module inside.

After clicking on this link the new window Add a new module will appear. It consists of the list of all the modules, included to the Visual Builder plugin.

To add the selected module just click on it, so the settings window of this module will appear.

There are four groups of modules for faster navigation: Content Modules, Presentation Modules, Video Modules and Custom Content Modules. The name of each group helps to understand, what these modules developed for.

1) Content Modules developed to display some information you would like to public.

2) Presentation Modules developed to display good-looking content, often used as advertisement.

3) It's really easy to understand that the Video Module is made for inserting the video content.

4) Custom Content Modules are made for those, who want to use some self-developed code.

To delete the section, click on the delete section button on the right part of the section.

If you want to delete all sections from your page, simply click - DELETE ALL BLOCKS link on the bottom of the all sections on the right.

Hovering over the single module it became darker and the title of the module and three buttons on the right side appear. The first button with pensil icon inside - for editing the module, the editing window will appear if click on; the second button with four arrows icon - for moving the module to another column or another section column; the third button with basket icon - to delete the module, so by clicking on this button you will be able to delete the module.

Metro Visual Builder makes it possible to move your modules between columns of one section. Simply click on the second button with four arrows icon and by holding the mouse move to another column and wait until the white box will appear and then drop it into it.

You are able to move the modules between sections.

Moreover you can re-order the sections by clicking on the title of the first section Re-order rows and holding the mouse move it under the second section.

 

How to Work with Visual Builder Modules

It's very easy to work with Visual Builder module. They all have almost the same settings. After you choose the section and clicking on the module you want to add the window appear with all the settings that can be done to this module. For example, lets try to add Testimonials module and personalize it.

Select the module from the list of modules and click on it, the window with settings will appear. The settings window here consists of several parts: Titles options, Slide show options, unique ID field, Effects options. Other modules may consist of other additional options.

By clicking on the white arrow near the module name Testimonials module you will navigate to the modules list to select another module. By clicking on the Save changes button you will add the module + save all the settings that were made in settings.

When clicking on the option name + Titles options the titles options are opened, and they will help you to edit the title/subtitle names, align, color, allocate, add title icon, title decoration, etc. So you can set all the settings you want.

The other settings section is the main section. You have to press on the blue Add Client button to add the testimonials items.

The testimonials item will be added, and its settings section will be opened. Here you can put the clients name, position, add clients image, content, link to page, etc.

You can add as many items as you want here. To remove the client just check the remove check-box on the right part of the clients panel. After saving the module it will be deleted. To move the boxes just drag-n-drop them by using the four-arrows button near the name of the module.

The other options are: Unique ID, can be used when you need to know the id of this module. Effects options are used to set the Appear effects for the module (you module may appear with the effect "Fade in" for example, when you scroll down to it on the page, this means that you can choose the animation effect for the module content appearance), appear effect should be selected from the drop-down list. Here you also can also add the Additional CSS classes - for better customization you can type the name of CSS class for each module; Additional CSS styles - styles like width:10px; height:15px;, etc., you can create CSS with additional class in Options > Main options > Custom CSS field. Also you can use the Slideshow options, that will help to make changes in sliding feature of this module. Those settings are very simple to understand.

Click Save changes and enjoy your testimonials block.

 

What is "Title allocate"?

If you want to highlight your title in the way of allocating the last words or random letters just select the Title allocate to Yes.

 

How does "Display the 'read more' link" Option Work?

Some modules may contain the option Display the "read more" link. If you want to add "Read more" link, you must set the option type the Display the "read more" link to Yes. After that insert the url at the field "Read more" link text:.

 

How to Work with "Row setting"?

Each section has its own Row settings.

When open the row setting you will see the window with row settings.

Don't forget to press Save changes button to save all the row settings.

 

How to Work with "Column setting"?

The way of columns displaying can be setted by pressing the Column settings button.

Column Settings form has almost the same options as Row Settings. First of all, you can set the background image - how to add the image and make other setting read above on the section "How to Work with "Row setting"?". As the options for background are exactly the same.

You can also set paddings for every sides of the section: top, bottom, right, left.

To know how to use the option Highlight you can read at the section "Highlights Creation" further of this documentation. It will tell you how to use Highlights in details.

CSS rules: - add additional css styles. A column span for small devices could be chosen from the drop-down list of the setting Mobile cols:.

Save changes button should also be pressed to save all the settings you've made.

 

 

 

Animated Text Module

You can add awesome animated module. Just add Animated module and fill the boxes inside module.

You will get the following result.

 

Our Clients Module

Now you can add a background image to emphasize the brightness of the page. Go inside the module and add a background image.

You will get the following result.

 

Promo Image Module

You can add a module that will scroll when you hover your image. Just add image in box in Promo Image module.

You will get the following result. If you hover over this image to scroll to the bottom of it.

Do not forget to save all your changes.

 

 

 

Add a gorgeous module. It has the effect of magnifying glass over an image. Just use Magnifier Module for this.

Create a new row > Add shortcode > Magnifier module. Type Title and Subtitle, if needed, and style them using tips from Changing Titles/Subtitles Types.

Add an image, and press Save changes

Here is what you can get:

 

 

 

News Page Slider Creation

Before creating news page slider you need News Page Slider plugin to be installed. You can find it (news-page-slider.zip) in the folder Plugins inside folder with theme.

  1. Navigate to News Page Slider at admin panel on the left. The next window will be opened
  2. Click on Add New button on the top. The section of slider editing will be opened.
  3. Put the name of the slider in the field Type your slider name here.
  4. Next you will see slider settings. Let's begin with Basic settings:
    Show Post Type - you can display only posts in the slider.
    Choose Sorting of Posts - you are able to select the sorting of elements by date, by slug or title, etc.
    In combination with option Choose Order of Posts you can select the ascending, descending or random order of sorting, so, for example, sorting by date in descending order will show the lately created posts.
    Number of Posts slides - allow to select how many posts slides will be displaying. Try to put 10 slides, so you slider will work normally.
    Cache time [in minutes] - enter time in minutes to cache slider for more high performance. Set 0 to disable slider cache. In period of 10 minutes the system will check for newly created posts.
    Choose slides format - allow to select the appearance of slider. There are several variants, so you can choose most appropriate for you.
  5. The next settings - Slideshow options:
    Automated cycling - you can enable automatic cycling of the slides.
    Cycle Interval - indicate the delay between cycles in milliseconds.
  6. Let's go to settings Slider elementssettings:
    Display Post title - if you check this option, the element information will be displayed. Clean checkbox to hide element information.
    Display Post description - if checked - element description will be displayed, clean checkbox to hide element description.
    Limit Description (Number of words) - put the number of words to display in description.
    Display link to full page - check the checkbox to display a title of the post as link to full post page.
  7. Next setting is Select content: Slider items from Posts - choose the category/-ies of posts to display in slider. To choose all the categories click n the first category and then push Shift + the last element. Of just use Ctrl + each element in course to choose a lot of separate items from the list. For Mac: hold down the command button to select multiple posts.
  8. Push Save changes button to save your settings.

Note If you want to create this slider you need to create a sufficient number of posts. The minimum number of posts is 3 to display the slider. In case you want your slider to cycle, then number of posts must be x2. All the post need to have a thumbnail, so they will be displayed in the slider.

After creating the slider you can copy the shortcode of the slider and use it whenever you need.

Info How to use shortcodes of news page slider in Shortcode Module of Visual Builder read instructions at "How to use sliders' shortcodes" part below of current section.

 

Revolution Slider Creation

To create the revolution slider, you need to install the Revolution Slider plugin, that you also can find in theme folder (revslider.zip).

  1. Go to the admin area of your website. Click on Revolution Slider on admin menu on the left.
  2. The window with Revolution Sliders list will be opened. To create a new slider click on Create New Slider under Revolution Sliders list.
  3. You will shift to the settings page of slider, where you need to put the name of the slider and make necessary settings. After that click on Create Slider under option fields.

Info More full information on how to create revolution slider and description of it's settings and options you can find on the documentation page of Revolution Slider plugin. Any questions concerning the plugin you can address to Revolution Slider plugin support team. How to use shortcodes of revolution slider in Shortcode Module of Visual Builder read instructions at "How to use sliders' shortcodes" part below of current section.

 

Master Slider Import/Export

Firstly, need to install the Master Slider plugin, that you can find in theme folder (masterslider-installable.zip).

  1. After that, go to the admin area of your website. Click on Master Slider on admin menu on the left.
  2. The window of Master sliders list will be opened. To create a new slider click on + Create New Slider button.

    To create the master slider read more on the last section of this documentation. You will find the link to official documentation of the master slider plugin.
  3. To import/export the slider press Import & Export gray button. The window will open. On import section you can import the slider from the theme folder. Click on Choose file, choose the file from theme folder and press Import blue button. To export already existing sliders choose them here from the list of sliders and press Export blue button.

Info More full information on how to create revolution slider and description of it's settings and options you can find on section "Plugins Documentation" of this documentation + point 6.

 

How to use sliders' shortcodes

After creating sliders you can use their shortcodes in order to display the sliders in your layouts. We will tell here how to put the shortcodes into Shortcode Module of Visual Builder plugin. Before using the Visual Builder read instructions on how to install and setup Visual Builder plugin at "Metro Visual Builder" section.

The shortcodes of sliders you can see on sliders sections under caption Shortcode. For example, revolution slider and news page slider shortcodes:

 

Add a slider into Shortcodes module.

As an example, let it be some Master Slider:

There you will see such option as Preloader enable > Yes/No, and Start height option.
Your slider uploads more slowly, than the other content of the page. And, if you choose No, the Content will upload, and then it will jump down as far as the Slider will appear on the top of the page.


And if you choose Yes in Preloader enable and type the height of your slider in Start height, you'll have a blank field for the slider to upload and your Content will be displayed on its place at once:

Pay attention to the Start height field. It is the height of your future blank field for the slider. You have to type the height of your slider there.

 

 

 

If you want to create the blog page, firstly, you need to create a simple page. How to do this read the previous section of this documentation. You can also open already created page.

The key moment is to choose from the list Template one of the template that begins with Posts... All this templates with Posts in the beginning were created to build blog pages. So after creating/opening the page, choose necessary template from the group that begins with Posts... and click on Publish / Update button.

Note Only after chosing the blog template and clicking on Publish / Update button, the options for blog pages will appear. If you just open the editor mode for the page, there will be NO options for blog.

After doing the previous steps, the section with blog parameters will appear.

Display posts of certain category? - if you choose this option, you will be able to display not all the blog posts, but from selected categories. Blog Category will allow to choose what categories must be displayed in the blog page. Number of posts to display - option to print the number of posts you want to display on the page. After making changes in those options do not forgot to Update the page.

Info We pay an individual attention to the last option called Save image ratio for thumbnails, so you can read about this option on the section "Blog Pages Masonry" of this documentation.

 

 

 

If you want to diplay the blog posts in the form of masonry, all you need is to add new page/open existing page. After chosing the blog template and clicking on Publish / Update button the options for blog pages will appear. The last option called Save image ratio for thumbnails.

This option will help you to display posts in masonry way. Just tick this option on and use masonry blog.

 

 

 

There are several ways to create contacts page for your website. The first variant you can read at "Metro Visual Builder" section of this documentation, where you will be able to discover how to gather your contact page with the help of "For page builder" template and Metro Visual Builder modules for contacts.

In this section we will tell you how to create contacts page using page template Contacts page. Both ways are exactly interchangeable. It means that you can create exactly the same contacts page by using any of these methods.

So the steps are the following:

  1. Go to the admin panel and add new page or open the page, that will be used for company contacts. To discover how to create layout/page, navigate to "Layout/Page Creation and Settings" section of this documentation.
  2. Go to the section of page editing. Put the name of the page or don't do this, if the page is already created. On the right sidebar you will see Page Attributes and Template field inside it.
  3. Clicking on Template field the drop-down list will appear. Select Contacts page and Update the page or Publish it.
  4. So now your page will be contacts page, it means that you will be able to have the map in the top of the page. To put the address to the map and to make some other settings navigate to Options > Contact page options.
  5. Here you will be able to put the Custom Form Shortcode you need to use in contacts page and make settings according to map zoom, address, etc.

After this, you can put text in the editor of the editing page, use Visual Composer or Visual Builder to put additional blocks to your contact form page.

 

 

 

Simple Portfolio Item Creation
  1. To create portfolios navigate to the admin panel and find Portfolios item in the left menu. Hover over the Portfolios and the additional submenu will appear. Choose Add New. By clicking on this menu item you will navigate to the Add New Portfolio item section, where you will be able to create new portfolio item.
  2. Enter the name of the portfolio at the field Enter title here.
  3. Click on Publish button.

That's the standard steps to create one portfolio item. Let's go through the settings, that we have on the page of portfolio editing to create sterling portfolio item.

Info How to add new Portfolio Categories and Tags (another variants): navigate to the Portfolios > Portfolio Categories / Tags section. Here the editing page for portfolio/tag will appear. For portfolio on the left part of the page there is the section to enter name, slug, parent and description of the category. By clicking in the Add New Portfolio Category button in the bottom you will add the new category to the right part of the editing page, where the list of categories is located. You can edit/delete categories. For tags, almost the same as for portfolio, page for adding the tags will appear. Here you can update the popular tags in the top of the page, edit them if you need. To add new tag you need to enter the name, slug and descripton to the tag in the left and click on Add New Tag button. The list of created tags are on the right part of the page. Note The name is mandatory field; slug, parent and description are optional; if the slug was not entered, it will be the same as the name by default.

Info How to upload self hosted videos (Self hosted video file in mp4 format & Self hosted video file in mp4 format):

  1. Click on Upload File button.
  2. On the opened window you are allowed to drop the file inside the uploading section or select the file from folder on your computer. After that your file will be uploading. Wait a few seconds and do not close the window until the file uploaded.
  3. After the file uploaded you will receive the window with some settings. You can change the caption, description, title of the video, if you need this.
  4. Click on File URL button and the url of video will be added to the field Link URL.
  5. After that press Use as Self hosted video file in mp4 format button. So you video will be added to your portfolio. In case you do not need this video click on Delete link. You will also be able to remove the video and to view the video file as well.
  6. You can also select the video from Gallery (n) and Media Library, but do not forget to click on File URL button and then on Use as Self hosted video file in mp4 format button.

In case you will have problems with the last paragraph (6) write us and we will give you the help.

Info To learn more about Advanced Custom Fields plugin and its use you can in documentation at Advanced Custom Fields website.

After making the changes in settings/options of portfolio item do not forget to Update the item to save your changes.

 

Portfolio Options

There are several portfolio options that will help you to customize your portfolio pages. Navigate to the admin panel and go to Options > Portfolio Options. Let's go through this options:

  1. Portfolio page option will help you to choose the main portfolio page (for proper urls).
  2. Panel for items sorting - Display panel for portfolio isotope items sorting by category. If you want to sort the items choose this option and the panel with categories will appear.
  3. Portfolio text location - You can select the location of the description and the custom fields. There are two options: to the right and in full width.
  4. You can choose the variant of displaying the attached images of inner portfolio page as slider or as an item by using option Portfolio image display.
  5. Display block under single item is the option to switch on/off the block with recent portfolio items in bottom of the portfolio page.
  6. Block shortcode - by default here is displayed block with recent items [mvb_recent_works main_title="Recent projects"][/mvb_recent_works]. You can put any shortcode you need here.

After making changes do not forget to save them by clicking on Save Changes button.

 

 

 

There are a various portfolio pages type included to the theme. All of them you can see on the demo website in the section "Portfolio". All the demo pages can be imported and then used by you to create any portfolio page to display your portfolio items. To choose the template for portfolio page go to the admin panel and navigate to edit the page, where you would like to display your portfolio works. Or create the page. On the right part of the page you will see Template section, choose the templates begin with Portfolio...

After clicking on Update/Update button the page will be saved and additional options will appear.

The first option is Select portfolio parameters. This option have several sections: Display of certain category? - check it, if you want to display items from a certain category; Portfolio Category - select the category/ies you want to display; Number of items - choose how many items to display on the page; if you want to display all the items from category/ies leave this field blank.

 

Pagination Type Option

The next option: Portfolio Pagination type - you can change the pagination type (read more button) for blog pages and portfolio pages. Just go to the editing of page with portfolio template and find the option called Portfolio pagination type on this page.

Here you can choose Default and receive the following pagination

In case you choose Ajax you will receice the Ajax pagination, it will load the posts/portfolio items on one page

you will receive the following Read more button

 

Portfolio Masonry One Row

To add portfolio masonry in one row navigate to the settings of page, where you want to create this masonry. Add the section "full width" and the module of visual page builder called Portfolio Masonry One Row. Here you can set the height of the masonry and other settings, on row settings of the section you can set the full width to Yes, so the portfolio masonry will displayed in one fullwidth row. How to use Visual Builder modules you can read at the section "Metro Visual Builder" of this documentation.

 

Portfolio Masonry Two Rows

If you want to create a portfolio masonry in two rows, that you can review at our demo website, navigate to the settings of page, where you want to create this masonry. Add the section of Visual Builder called fullwidth Select Add shortcode > Portfolio Masonry Two Rows.
Type Title and Subtitle if needed. Then scroll down to the Portfolio works settings.

Here the left part of the portfolio works refer to all the available portfolio items you have. If some portfolio items are not listed here, that's mean that you do not assign a featured image/thumbnail to the portfolio item. So, to display the items image just go to the editing page of the portfolio item and choose the thumbnail (how to select the thumbnail for portfolio item read on the section Portfolio Item Creation + Options > subsection "Simple Portfolio Item Creation").
The right side is the part, where you put the portfolio items you want to be shown in module. You can move items by drag-n-drop from left Available to right Visible part - to add, otherwise - to remove from Visible list of items. Also here you can see the Height and the Width for each item, so you can select them for every single image and modify the way it will be displayed according to selected parameters.
For this module we have a grid 9x4 boxes.

For example, lets have a look at the item called Nibh euismod.

This element has height = 2 and width = 4. This means, the image will be displayed in a grid in 2x4 box.

The images you see in Visible block are arranged in a grid from left to right and from top to bottom.

After assigning the Width and Height to each item save all your changes.

In case you want your masonry to have the full width click Row settings > Full width > Yes .

Here is the final Portfolio:

 

 

 

To create the post follow the following simple steps:

  1. Navigate to the admin area and hover over Posts menu item on the left panel.
  2. Choose Add New and the editing page of the post will appear.
  3. Input the name of the post in the field Input title here. You can use the standard editor in the front to add the text/description to your post.
  4. On right part of the page there is the section Publish. Here you can edit the status, visibility and publishing date of the post.
  5. By default the post type will be Standard. You can see this on the section Format.

    You can see, that the format can be of 5 types: Standard - the text inside the editor and image of the post; Gallery - the gallery of images will be displayed on the post page, you can add the text to the editor as well; Video - the field to add the video file to the page will appear, it will help to display videos on the post page; Quote - the post will be the quote; Audio - you will be able to add the audio file, so any visitor will be able to listen to audio on your post page. After making the settings click on Publish button.

 

Standart Post

To make a post in a standard format, you can type any text in the text field of classic editor.

You can add an image by clicking on Add media button in the bottom of the editor. The window to add the image from the gallery will appear. You can select from already uploaded or upload the new ones by switching to the tab Upload Files. Click on the image you want to insert and the settings on the rigth part of the window will appear. Here you can make any settings at ATTACHMENT DETAILS and ATTACHMENT DISPLAY SETTINGS: you can align the image to the right, center, left part of the post; link to the items from the drop-down list and change the size. After all the settings click Insert into post button. Also you can clear you selection by clicking on red link at the bottom Clear.

You images will be added to the editor. Do not forget to Update the post. You are able to use the Visual as well as Text editors by changing the tabs in the right-top corner of the editor. You are able to use Visual Page Builder to instert text in text module. You can use both the Editor and Visual Builder to create posts. How to use modules of Visual Builder you can read at the section "Metro Visual Builder" of this documentation.

 

Gallery Post

If you make a gallery post, switch to format Gallery in format section and clicking on Update button. After that the panel Images Gallery on right sidebar will appear.

Click Add gallery images button, so the window to add images will appear. Select the images from media library by clicking on them (use SHIFT or CTRL, if you need) from the gallery or upload yours by switching on Upload Files tab and clicking on Select Files button. Select images from computer and press Add to Gallery button.

On the right block of this window you can select change the ATTACHMENT DETAILS:Title, Caption, Alt Text and Description for choosing image. Click on each image and make changes, after that insert into gallery. This section is optional.

After clicking on the button you can see all the chosen images inside Images gallery block and can reorder the images the way you want by dragging and dropping. Clicking on the Delete link under each image you can remove the image from the gallery.

Info All the following options inside the post editing page: Stunning header options, Publish, Select header type, Featured Image - you can read at the section "Layout/Page Creation and Settings" + subsection "Page creation + standard parameters", as far as these options are absolutely the same. How to add Categories and Tags you can read at section "Portfolio Item Creation + Options" + subsection "Simple Portfolio Item Creation" + Info label. About option Select custom sidebar you can read at section "Custom Sidebars + Widgets" of this documentation.

So you can put in the section Featured image an featured image/thumbnail to your post.

 

Video Post

To make a video post switch to video format at the section Format and update the post. After updating/publishing you will see the section in this editing page called Post video.

Add youtube or vimeo video ids in the fields You tube video ID or Vimeo video ID. ID - is the last part of the video link. For example, browse the video you want to add, click on the Share button under the video and copy only the last part of the url "http://youtu.be/vxxQrF2VxTA". Here you need only vxxQrF2VxTA and this is the necessary ID. The same you can find on vimeo videos.

You can upload self-hosted videos from your computer location in format mp4 or webM.

Info How to insert embeded videos to your post read on the section "Portfolio Item Creation + Options" + subsection "Simple Portfolio Item Creation" + Info label - How to upload self hosted videos (Self hosted video file in mp4 format & Self hosted video file in mp4 format).

 

Quote Post

To make the quote post witch to format Quote. You can insert the text of quote in the editor field. Here on the page you will see the option Post Quote. Here you can put the author name at the field Quote author name.

 

Audio Post

Switch to format Audio and update/publish. Use audio embed code or upload self hosted audio file from your computer location in mp3 format.

If you want to use audio embed code, you must use link with .mp3 at the end of links. For example, http://designshack.net/tutorialexamples/MP3/SearchTheWorld.mp3

Info How to upload self hosted audios (Self hosted audio file in mp3 format):

  1. Click on Upload File button of the field Self hosted audio file in mp3 format.
  2. On the opened window you are allowed to drop the file inside the uploading section or select the file from folder on your computer. After that your file will be uploading. Wait a few seconds and do not close the window until the file uploaded.
  3. After the file uploaded you will receive the window with some settings. You can change the caption, description, title of the audio, if you need this.
  4. Click on File URL button and the url of audio will be added to the field Link URL.
  5. After that press Use as Self hosted audio file in mp3 format button. So you audio will be added to your post. In case you do not need this audio click on Delete link. You will also be able to remove the audio and to listen the audio file as well.
  6. You can also select the audio from Gallery (n) and Media Library, but do not forget to click on File URL button and then on Use as Self hosted audio file in mp3 format button.

 

SoundCloud Service

You can create a post with the music from SoundCloud service. SoundCloud is the world’s leading social sound platform where anyone can create sounds and share them everywhere. Recording and uploading sounds to SoundCloud lets people easily share them privately with their friends or publicly to blogs, sites and social networks. It takes just a click to share sounds to Twitter, Tumblr, Facebook and Foursquare. To learn more about this service go to the official website of Soundcloud.

To put the SoundCloud code into your post, you need firstly create an audio post. Follow the standard steps for audio post creation. After you've created the audio post the field Soundloud audio for inserting the code from SoundCloud service will appear.

After that go to Soundcloud and search for the musical composition, that you want to insert into post. Open the page with the composition and find the Share button.

After clicking to the sharing button the new window will appear. Switch to the Embed tab in the top of the window. On the window the field with code Code & preview will appear. Moreover, if you scroll down to the bottom, you will notice the More options link. By clicking on it you will be able to choose the size of the composition frame and switch on/off Automatic play. After selecting the options, all you need is to copy the code of the frame inside field Code & preview.

The code you copied insert into the field Soundloud audio and Update the post. Enjoy the music!

 

Posts List Options

Additional post settings you can adjust in admin panel > Options > Posts list options - parameters for posts and archives (social share, etc.)

Here at the section Inner post page options you can switch on/off the displaying of social share buttons, add any other social share buttons to the field, enable/disable the information about the author of the post, display/remove featured image on inner page of single post. You can also Display block under single blog item - that means that you will put the block with recent news to the post page. You can put your shortcodes to Block shortcode field.

At the section Archive page options you can crop the post thumbnails image, so you can set the Post thumbnail width (in px) and Post thumbnail height (in px). Post info - it is information about the post (time and date of creation, author, comments on the post), you can switch it on/off.

Do not forget to save the changes by clicking on Save Changes.

 

 

 

To create the custom sidebars you need to install the Sidebar Generator plugin, which is recommended to install and included to the theme folder. If you haven't installed it yet, then go to the Plugins > Add New. You can find the file with plugin in the theme folder. It called "smk-sidebar-generator.zip". Choose this file while adding the new plugin and after the install activate it.

You already know how install plugins at the section "Installing" + subsection "Plugins installation".

After you have installed Sidebar Generator, navigate to Appearance > Sidebar Generator.

To create a custom sidebar you need to enter the name of your new sidebar and click Add new button.

After clicking on the button the new sidebar will be created and you will be able to see it on this page on list of sidebars. You can see that there are several fields of created sidebar: SIDEBAR NAME: - the name of sidebar, ID - the id of sidebar, SHORTCODE: - the shortcode you can use to put on the shortcode module of visual builder.

To delete your custom sidebar, click on the gray button called Remove near your sidebar. Don't forget to click Save changes button to save your sidebar.

So now, you've created a sidebar that you will be able to use for any page, post, etc. Now you need to add the content to sidebar. Widgets will help you to do this. Follow Appearance > Widgets to add some widgets.

On the right part of the widgets page you will see your sidebar + prebuilt sidebars, if you import the demo content. You can find your created sidebar and clicking on it you open it. Here is the sidebar called First sidebar and it is empty.

On the left part of the widgets page you see the list of available widgets. To add the widget to sidebar click on it's bottom panel with widget name and the list of available sidebars will appear. We choosed Archieve widget and clicked on it.

Choose the sidebar and click on Add Widget button. You can put the widgets to other sidebars on this page: footer section, sidebars for shop, etc.

You can also just drag and drop some widgets to your custom sidebar. Click on the widget, holding the mouse button drag the widget to the sidebar area and then release the mouse button, when the dotted box will appear on th sidebar area. When the widget is added, the settings window of the widget will appear - you will be able to put the name, text and other staff inside the widget. Do not forget to click on Save button to save changes. You can also delete and close the widget.

For pages: to add the custom sidebar to the page go to the editing page of the page, were you want to add the custom sidebar and find the section called Template and select one from templates: Page with right sidebar, Page with left sidebar, Page with both sidebars. So your page will have the sidebar.

For posts/etc you do not have the templates section, you do not need to choose it. Independently of where you put the sidebar (posts/pages/etc.), find the section called Select custom sidebar on the editing page of post/page/etc. For pages: if you choose the template Page with right sidebar - then you need to choose the sidebar under Sidebar_Right field; if Page with left sidebar - choose the sidebar under c field; if Page with both sidebars - both Sidebar_Right and Sidebar_Right fields. For posts/etc: select any field you want. After choosing the sidebar click on updating button.

These simple steps will help to use sidebars for posts/pages/etc, wherever you see the Select custom sidebar section on editing page.

 

 

 

Timeline Creation

Timeline is the best tool to display chronology of the events of your company in the theme. Before using the Timeline module of Visual Builder you need to create the timeline and add the items to your timeline.

To create a timeline navigate to admin panel > Timeline items > Timeline. Here you can create any number of timelines. On the left part of the page put the name of the timeline at the field Name and the slug at the field Slug. The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens. Other fields Parent and Description are optional.

On the right part you are able to review all the created timelines you have. You can delete/edit them. You can also see how many items have each timeline.

 

Single Timeline Item Creation

To create the single timeline item, that you will add to the timeline follow the instructions:

Navigate to admin panel > Timeline > Add new.

The editing page Add New Timeline Item of timeline will appear. Put the name to the field Enter title here. On the standard editor you can put any text you need. Here you have some options: Publish, To top settings, Select header type - you can read about these options above of this documentation. Custom Fields section is to put the custom fields to the timeline element. The new option is Attributes: here you can (optional) choose the parent of the item and insert the order number in Order - meta-box to display timeline items in correct order.

At the section on the right sidebar called Timelines you have to assign the current timeline item to the timeline, where you want to show this item. You are able to create the new timeline also here by pressing + Add New Timeline link. So it is important to select the timeline for all the items, so they will be displayed on the timeline on the page.

You can set the subtitle for the timeline item and the icon, that will be dislayed on the timeline module. Put the date of timeline item creation, if you need.

You can also use the Metro Visual Builder for timeline item. For that purpose, go to the admin panel > Settings > Metro Visual Builder and tick the Timeline items of the field Show the editor for:, then save changes.

 

Timeline Display on Page

To display timeline on the page you need the Metro Visual Builder plugin to be installed. To learn more about Metro Visual Builder you can on the section "Metro Visual Builder" of this documentation.

There are two Visual Builder modules to display the timelines: Timeline Horizontal module - the timeline will be displayed horizontally on the page; Timeline module - the timeline will be displayed vertically on the page;

So, open the page, where you need to put the timeline and navigate to Metro Visual Builder section at the bottom of the editing page. Add the section (we recommend Full width) and add one of modules called Timeline or Timeline Horizontal. Do the settings at the editing page of the module: the timeline title to display on the page, the subtitle if you need.

The important field is Select timeline to display:. Choose from the drop-down list the timeline/s you want to display. On the list there are all the timelines you've created. Click on Save changes button. That's all. Look at you page and it will contain the timeline, consists of timeline items, you've created.

So you can create new timelines, add timeline items to the timelines by following the above instructions. All of them will be displayed on the timeline on your page.

 

 

 

You can show some Facts about anything you want.

  1. Create a new raw: Add section > Full Width.

    Then click Add shortcode > % Facts.
  2. New window will appear, where you can type and style Title and Subtitle. More information about styling text you can find in Changing Titles/Subtitles Types.
  3. Next step is creating boxes with facts: click ADD FACT > Fact:. Fill this item with content

    Here you can insert Icon and choose Icons color scheme.
  4. Add as many facts as you need. Right above the boxes with facts you can find some options to style them. Click Animate facts > Yes if you want the numbers started to grow from "0" to your number when this module appears on the screen.


    There is also an option to pick the Facts type:


  5. Here is how the Default Facts type looks like:


    Here is the Circle Facts type


    Next is the Left icon Facts type


    And here we come to the Bordered icon Facts type

 

You can style Our Team module for your purposes.

  1. Create a new raw: Add section > Full Width.

    Then click Add shortcode > Our Team.
  2. New window will appear.

    Here you can type a Title and style it in Editor.
    To add an icon click the button Add icon. Select the one you need and press Insert icon.

    You can also add Title read more text and insert Read more URL.
    There are also different kinds of Title decoration

    Here you can also type and style Subtitle
  3. Next step is creating team members themselves. Click ADD TEAM MEMBER > Member: Member name. Fill this item with content

    Here you can insert links to your social profiles.
  4. Add as many team members as you need repeating the 3rd step.

  5. Information about the Slideshow options you can read at Step 3 Presentation Boxes Carousel
  6. There are also two Module styles: Rounded and Square.


    This is how the Rounded style looks:


    An this is the Square style:


  7. Pay attention to the size of your images! The minimal size for Rounded style is 180x180px; for Square style is 280x355px.

 

To add new presentation to the pages of you website, you need to make sure that Visual Builder is activated for editing slides.

  1. Navigate to the admin panel Settings and find Visual Builder.

    Put the check mark at Content presentation items. And Save Changes.
  2. Then you can start the presentation creating itself. Navigate to the admin panel Presentation and pick All presentation items. Here you can see what your presentation consists of.

    Click Add new button.
  3. The page for editing a slide of your presentation will appear. Type the title of the slide

    E.g.: History
  4. Scroll down the window to the Visual Page Builder. And create a section to your taste Add section. As an example here is the row with an image and a text.

    Click Publish in the top right corner.
  5. Add new slide by clicking Add new.

    And repeat the steps 3 and 4 to create new presentation item. As an example it can be Our Team module.

    This way you can create as many presentation slides, as you want.
  6. Now, to combine these items into one presentation, go to the page where your presentation is going to be, or create a new page. How to create a page you can see at Layout/Page Creation and Settings. Click Add section > Module Presentation.

    Here you can add Title and Subtitle of your presentation, or insert Icons. Scroll down to Select presentation to display and choose Select presentation. You can also Select tabs orientation for Vertical or Horizontal. Press Save changes.
  7. Here is what you have to get in Visual Builder:

    And after clicking View page in top left corner

    you will have a presentation on your page. The first slide:

    The second slide:

 

You can style Presentation Boxes module to your taste.

  1. Create a new raw: Add section > Full Width.

    Then click Add shortcode > Presentation Boxes.

  2. New window will appear.

    Here you can type a Title and style it in Editor.

    For example, you can make your title Thin: select the title > Format > Formats > Font weight > Thin text.

    To add an icon click the button Add icon

    Select the one you need and press Insert icon

    There are also different kinds of Title decoration

    Here you can also type Subtitle
  3. Next step is creating presentation boxes themselves. Click ADD BOX > Box: Box Title

    Fill this item with content

    Instead of icon you can insert an image

    You can also add Read more link:

    To style all icons of the Presentation Boxes Icon style > Without decoration

    Also there is an option to pick Read more button style

  4. Add as many boxes as you need repeating the 3rd step.

    Press Save changes
  5. This is what you get in Visual Builder.

    Click View page and you will get

 

You can style Presentation Boxes Left Aligned module to your taste.

  1. Create a new raw: Add section > Full Width.

    Then click Add shortcode > Presentation Boxes Left Aligned.
  2. New window will appear.


    In Titles options you can type Title/Subtitle and style them as needed. See how to do that in Changing Titles/Subtitles Types
  3. Next step is creating presentation boxes themselves. Click ADD BOX > Box: Box Title Fill this item with content

    You can also add Read more link:

  4. Add as many boxes as you need repeating the 3rd step.


    Here you can style your Module. In Module decoration style you can choose Main style, Alternative style or How it works style. Also Read more button style is available in two variants: Main style and Alternative style. Press Save changes
  5. Click View page. Here are the styling variants:
    How it works style


    Alternative style


    Main style

 

You can choose Testimonials module to your taste.

Create a new raw: Add section


  1. The first one is Testimonials module.

    Click Add shortcode > Testimonials module. Fill in the Title and Subtitle if needed. How to style them you can read in Changing Titles/Subtitles Types

    Then you have to ADD CLIENT and fill in the Title, Client job, Content and insert Image:

    Add as many clients as you need.

    Scroll down to Slideshow options. See how it all works in Step 3 Presentation Boxes Carousel. This is an example:

    Save changes and View page:

  2. The second is Testimonials vertical module

    Create a section with Two columns. Click Add shortcode > Testimonials vertical module. Fill in the Title and Subtitle if needed. How to style them you can read in Changing Titles/Subtitles Types

    Add as many clients as you need, fill in the Title, Client job, Content and insert Image. Choose the Image align:

    Also you can add Testimonial rating

    Save changes and View page:

  3. The third is Testimonials slider alternative style.

    Click Add shortcode > Testimonials slider alternative style. Fill in the Title and Subtitle if needed. How to style them you can read in Changing Titles/Subtitles Types

    Add as many clients as you need, fill in the Title, Client job, Content and insert Image. Scroll down to Slideshow options. See how it all works in Step 3 Presentation Boxes Carousel. There is an option Navbar width that allows you to choose the width of your slider:

    Save Changes and View page:

  4. The fourth is Testimonials small alternative style.

    Click Add shortcode > Testimonials small alternative style. Fill in the Title and Subtitle if needed. How to style them you can read in Changing Titles/Subtitles Types

    Add as many clients as you need, fill in the Title, Client job, Content and insert Image. Scroll down to Slideshow options. See how it all works in Step 3 Presentation Boxes Carousel. You can choose to display 2 items on the page:


    It will be displayed like:


    And here is like 3 items will be displayed:

  5. The fifth is Words from module.

    Click Add shortcode > Words from module. Fill in the Title and Subtitle if needed. How to style them you can read in Changing Titles/Subtitles Types

    Add as many authors as you need, fill in the Author name, Author job, Heading, Content and insert Image.


    Scroll down to Slideshow options. See how it all works in Step 3 Presentation Boxes Carousel. As an example, here we have Number of slides to show: 2


    And here is how it will be displayed:


    You can compare it to Number of slides to show: 1

 

You can create any content slider with Sliding Content Module.



How to style Title and Subtitle you can read in Changing Titles/Subtitles Types.

Click ADD ITEM and fill it with content you need. As an example, you can insert Image into 4 items.


Scroll down to the Slideshow options:


Here you can set the way your slides will appear on the screen.
Autostart Slideshow > Yes/No to make your slides change automatically or by the user's actions.
You can pick Number of slides to show:
1 if you want your slides displaying one by one on the page:


3 to display 3 slides on page, central bigger:


For such options as Enable navigation arrows, Enable pagination and Show cursor in move mode, please, consult Stepp 3 of Presentation Boxes Carousel.
To make your slides displaying from the start after you scrolled the last slide choose Circle mode > Yes.
If you have not only images, but also a text in your Sliding Items, you can select the Image alignment: Top, Bottom, Left or Right. As an example, here we have Bottom alignment:


You can also choose Row settings > Row options > Full width > Yes to display your Sliding Content Module on Full width:

 

 

 

You can create content boxes with different color decorations using two modules: Boxed Content Module and Message Box Module.



How to style Title and Subtitle you can read in Changing Titles/Subtitles Types.

Click Add shortcode > Boxed Content Module and fill it with content you need. You can choose between 4 Box styles: Default, Gray, Blue and Dark:

Here is the example of all 4 Styles:


Message Box Module works almost the same.
You can also choose between 4 Box styles: Info, Success, Warning and Error:


This is how they will look:

 

 

 

You can create a box with countdown timer that will show the time left to some important event.

Add row and a shortcode Countdown timer Module.

How to style Title and Subtitle you can read in Changing Titles/Subtitles Types.



Here you can type the Event date: pay attention to the correct order Month.Date.Year - separated by dots. Also there's a field for Event time: 24-hour format separated by colon.
Read more link will be displayed in a form of a button, if you choose Display the "read more" link > Yes.
And View all displays in a form of a link.
You may type any text, that will be suitable to your website countdown.
Click Save changes.

Here is the what you'll have:


 

 

 

To add the button to the pages of you website, you need Visual Builder plugin to be installed to the theme. Read section "Installing" of this documentation to know hot to install the plugin.

  1. Navigate to the page, where you want to add the button. Scroll down to the Visual Builder section and add any section you want. All the buttons will look perfect on any section you choose. After that choose the Text module.
  2. The settings window will appear. Scroll on the window and find the editor field to put the content.
    .
  3. Click on the Insert button and find Insert styled button.

    Press this item and you will see the settings of the button. Here you can see Title section, Icon section and Border section.
    In the Title section you may type the Title and insert a Link. Choose Title alignment among Center/Left/Right to align the title.
    Also you may choose the Button width from Auto and Fullwidth.
    You may also set the Button height, Text size, Letter spacing and select Font weight from 100 till 900.
    Also you may select the Text color: Main site color/Second site color/Third site color/Fourth site color/White/Dark/Gray, and select one of the eight Background colors.
    There's also an option to choose the Hover style of your button among the Style 1 - the background color just fades in, Style 2 - bg color fades in from left, Style 3 - bg color fades in from top.
    And the Background color can also be of 8 types: Main site color/Second site color/Third site color/Fourth site color/White/Dark/Gray/Transparent.


    Scroll down to the Icon section.
    Here you can Add icon, set the Icon size in pixels, select the Icon style from 5 available positions and decorations, and choose one of the 7 Icon colors.
    As for the Border section you may type the Border width and Border radius (the way the button corners will look) in pixels.
    There's also an option to select the Border style: Solid/Dashed/Dotted.
    Also here you can choose the Border color from 8 available.


    You can Preview the button in the editor to see whether you're satisied with the settings you've applied, and change them, if needed.
  4. Then press OK button. The button code will be added to the editor.
  5. Then you can add any additional text to the editor and make other settings. As a result you will receive the button, that you saw on preview.

 

The Highlights - is the section of the column, that can be highlighted with color or image, so the whole row can look like it is in full width, wider and look very interesting. As an example, let's create very simple row with highlight.

Firstly, you need your page template to be For page builder or For page builder + header to be able to put the full width for your highlight. To read more about page templates you can in section "Page creation + standard parameters" of this documentation.

Then, create a section Three columns, for example. We putted here three modules: two Text modules in right and left sections and Fullscreen video module to the center section.

After that go to the row settings of the section. Select the background color, put the "Row padding Top: 60px" and "Row padding Bottom: Normal", or you can put any other paddings you need and Save. These settings will be applied to all the section.

After that you will need to go to the first module Text modules from the left and put any text you want inside the editor, then go to column settings of this text module. Here you can find the section for highlight settings: choose the Enable Highlight: to Yes, choose the color of the highlight in field Highlight Color:, or select the image at Highlight Background Image:, and other settings. You can set the Repeat: - the image will be repeated on the column; Position: - the position of the image on the column. But these options are used if you insert an image instead of color. After that put the Top: and Bottom: paddings, so you will have the padding from top/bottom borders to your text, and choose the Left: and Right: paddings from left and right border of your highlight. Also you can choose the Background Check: here, so if the highlight is dark your text will be light.

You can add the video to the middle module and text the right module. Choose the row and column paddings you needed to align texts as you need.

There are a variety of variants to use highlights for every row. You can also use the CSS rules to put padding or margins. In case you have difficulties with highlights, email our support and they will help you to customize the highlight.

 

 

 

We have two parallax related modules: Parallax image module and Slide parallax. And both of them can add dynamic style to your website.

At first we'll take a look at Parallax image module.


You can add Title/Subtitle and style them to your taste. How to do that you can find in Changing Titles/Subtitles Types

Here you can add Image and select Parallax speed from Slow/Medium/Fast. This will be the speed of your image changing its position while scrolling. that you can paste from any web site.


Save changes and here is the image position when you firstly see it on the page


And here it appears after you scroll the page a bit down

There is also Slide parallax module you can use.

Press Add shortcode > Slide parallax.

You can add Title/Subtitle and style them to your taste. How to do that you can find in Changing Titles/Subtitles Types

You have to add Image left and Image right and Save changes.


Your module will look like two pictures combined together with a vertical divider.


And you can use the slider to view both images while watching the site.

 

 

 

You can also create an effect of parallax background and content sliding up and down

The first effect is fixed content sliding on the parallax background. That effect is possible to achieve in row settings: Row settings > Background options. There you can insert image and select BG_check that's needed: Light if your image is light and you need dark text, or Dark if your image is dark and you need light text.
Then you can proceed to the parallax itself. Select Attachment position - Parallax and choose Parallax speed: Slow/Medium/Fast. It is the speed of background image parallax scrolling.

Then you can proceed to filling in the row with content. As an example, we've added Parallax image module with Parallax speed: Fast to create an effect of sliding parallax image on parallax background. Also we've added two Text modules and Features list, they are static.

Here is how it will be displayed when you scroll down the page






Note the different position of the background image relating to the page scrolling. The text content has the same top and bottom paddings while scrolling the page; however the parallax image changes it's position.

The other option is content attached to the background and sliding with it.
You can achieve that effect in row settings: Row settings > Background options > Add the image. And then Row settings > Row options > Enable parallax > Yes and Parallax speed: Slow/Medium/Fast.


Save changes and Add shortcode.
As an example we have Text module. As a result you'll have content attached to the background image and while scrolling there will be an effect of some kind of a gap, that shows you the details below it.




Note, that the text position does not change.

 

 

 

You can add different Video modules to your layout.

At first we'll take a look at Video module. You an add Title/Subtitle and style them to your taste. How to do that you can find in Changing Titles/Subtitles Types

In this menu there is a space for Video URL, that you can paste from any web site. You can also add a Feature Image. It will cover your video on a layout before you click on it.


In case you won't pick any Feature Image, the video will display on its own on the layout.
Here is the video with Feature Image:


And here it's without Feature Image:


There is also Fullscreen video module you can use.

Press Add shortcode > Fullscreen video. You an add Title/Subtitle and style them to your taste. How to do that you can find in Changing Titles/Subtitles Types

You have to add Icon, because only after clicking on it the Fullscreen video will be activated. There are options to type Icon size, pick Icon color and Select icon decoration type from None, Circle or Square.


There you also have to pick the Source of the video from Youtube and Vimeo.


Pay attention to the Video ID field. You don't have to insert the whole URL, but only the ID. Here it's highlighted:


Press Save changes. Here is what you can have in three columns with Feature list, Fullscreen video and Text module. After clicking on the Icon the Fullscreen video will start.

 

 

 

You can add Acordion module to to present the information in structured and hidden boxes.

Create a Row. Notice, that this module looks better, if it's added not to the row with full width, but to some Column. You an add Title/Subtitle and style them to your taste. How to do that you can find in Changing Titles/Subtitles Types

Click Add section. Fill in the Section title and Section content fields. Add Icon if needed. Add as many Sections as you need.


Click Save changes

Here is what you'll get as a result:


Pay attention, that the color of your Acordion module is the Main site color. You can choose it in the admin pannel > Options > Styling options > Main site color.

 

 

 

Row Label is very useful part of the row, where you can show you visitors the most important information, contacts, etc. so the visitors will see this information first. As an example, lets create row label called Extra features list.

Firstly, you need to add any section of Visual Builder and any modules you need. Here we putted Presentation Boxes module.

Navigate to the row settings of the current section. Here you will find the section called Row label. Click on it and it will be opened. On the editing section of row label you have to select Yes in Enabled, so the label will be displayed. After that you are able to choose the position of the label: on left side of the section, on right or on center. You can select the form of the label at Form: and the size at Size:, the title and the text of the label, etc.

After making all the settings save the row settings clicking on Save changes button. There are different forms of row label (Form: option), so you can try all of them and choose the most appropriate for you.

 

 

 

You can hide some blocks, that you do not need to display all the time, but only when you click on it, it appear. It is possible to open this block, when you need to see/use it and close as well. There is the special option to do this for any section of Visual Builder you want. As an example, lets hide Contact form, as we do not need to show it all the time, but can open it, when need to send a message.

Create a section Full width and add the module Google Maps module. Make all the necessary settings inside the module editing page and save them. After that, open the row settings of a section and find the option Row hide options. Choose the type as Open if you want the row be opened by default, or Close, so the row will be closed when the page is loaded and you will be able to open it. Title: - insert the title of the hiding row.

 

 

 

To make your web site look even much more exciting, we've created a number of Delimiters that you can use as top and/or bottom border of the row.

Pay attention, that when you add Row delimiter to a certain row it will influence the following row! We do all changes to the raw with Text module.
As an example here you can see one row with Text module and another with Share module. To make a shadow over the background image of the second row you must do following steps: click Row settings of the Text module row > Row options > Row delimiter > With shadow above.


And here is what you will get a nice shadow on the Share module row:


If you want to have a shadow in the bottom of the current Raw, just pick Row delimiter: with shadow above. Your shadow will be directed upwards:

To use Row delimiter: color triangle you have to select a background color of the raw, that will also be the color of the triangle, and Save changes


To use Row delimiter: transparent triangle top you have to set the background color or image of the previous raw, as far as the delimiter influences the top of this row and makes a part of the previous one visible:

In case you pick Row delimiter: transparent triangle bottom, it will make the upward triangle of the following row visible.

You can also use Row delimiter: fade top, Row delimiter: fade bottom or Row delimiter: fade both top and bottom. As an example here we've used Row delimiter: fade both top and bottom for the raw with Text module, that is between two rows with the same background image:


The last in the list is Row delimiter: boxed border. Its width is 1200px, and it has left and right paddings. To show you the difference between it and Row delimiter: default this screenshot is attached:


On the top you can see the Default delimiter, added to the upper row, and on the bottom there is Boxed border delimiter.

 

 

 

You can create awesome effect on your web site using Animated Text Module.

Create a New Row: Add section > Full width, go to Row settings > Background options and insert an image to your taste. Pay attention to the BG check option: whether your image is dark or light select the needed value: Light or Dark.

Then go to Row options and set the Top padding and Bottom padding. The bigger values you type, the highest image in the row you'll get.


Click Save changes

Now edit the Animated Text Module. Create as many Boxes as you need, as an example we have 3 Boxes. Type some Content and Save changes.

Click View Page, and this is about what you'll get:


An amazing animation effect on the appearing text.

 

 

 

To hide the search or the login forms on the header navigate to the admin panel > Options > Main Options and find Show login form in header and Show search form in header options. Switch them On/Off and that's all.

 

 

 

There are a lot of settings for changing the styles of titles/subtitles. As an example add the Text module of Visual Page Builder. You will see the title Editor right in the top.

When you click on Editor the new window with understandable interface will appear. Here you can modify text to your taste.
For example, to make the text Thin highlight the text and click Format > Formats > Font weight > Thin text

Let's also make some words Bold and Underlined: select text > Format > Bold and Format > Underline. You may add another features, such as Italic text, Strikethrough text, Superscript/Subscript text to your taste. To divide title into two lines just press Enter button in Editor.
If you press Text, you'll see a formated text

And this is how it will look like on your website

Also there is an option to highlight some words or letters in a title: Title allocate > Yes, Title allocate type > Rand letter/Last words:

There are also options to add Title icon, choose Title icon position, Title icon size (in px) and Title icon color.
Moreover different Title decoration styles are available:

Here is the example of this one title decoration:

To insert a link into a text you have to highlight the link text > Insert > Insert link

And type the URL or link to existing content.

Here is content with link text highlighted

Also there is an option to set the certain color of Title, Subtitle and Text. Click on Options > Styling options > Color of titles/Color of subtitles/Color of text and choose the color. Pay attention, that this option influences all web site.

You can also insert a link after a title. To do that type the Title read more text and Read more URL or Link to page.

Here is the link under the Title

You can do exactly the same things with formatting the Subtitle and Content texts.

There is also an option to add Decoration image in title options. Here you can Add image that will be displayed under the Title:


You can also choose its position:


This is what you'll get on your page:

 

 

 

In case you need to define the first letter in a Text, you can use Dropcaps options.


Here you have to select Dropcaps enable > Yes, and choose among three Dropcaps Types > Single, Rectangular or Round; and among Dropcaps Styles > Dark or Main site color.

As an example here we show you all Dropcaps options you may have: Single, Main site color, Single, Dark, Rectangular, Dark, Rectangular, Main site color, Round, Main site color and Round, Dark:

 

 

 

Navigate to the admin panel > Options > Main Options. Here are some settings for logo customization.

Header logo position - set the position of the logo to right, left or top.

Find the field called Header Logotype image. Press the Upload button and select the image from the media library or upload from the computer. After that save the changes. In case you want to remove the logo click on the blue link Remove Upload. Header Logotype image for retina - the option to add the logo image for the mobile devices.

Header Logotype second image - the image for the sticky header that appear when scroll down on the page. Header Logotype second image for retina - logo for retina.

You are able to set the Logotype for Logo-Widget. So the logo image will be set to the logo widget, you will be able to add this widget to footer or to the sidebars at Appearance > Widgets.

The field Small logotype for Subfooter. The small logotype will be displayed on the thin subfooter on the left part of it.

 

 

You can change the pre-built fonts and sizes of each type of Titles/Subtitles: H1, H2, H3, H4, H5, H6, Block title, Features title, Box name and Text.
Navigate to admin panel > Options > Custom typography.

You can change the Title Font/Subtitle Font to Default, Standard or Google;
You can select other Title Font Size / Subtitle Font Size by dragging the green slider from left to right and vice versa;
There is the option to change the Title Font Weight / Subtitle Font Weight also using the slider;
Change the Title Font Style / Subtitle Font Style to Normal or Italic;
All the same features are available for the other items in Custom typography section.

Do not forget to save all the changes by clicking on Save Changes button.

 

 

 

Now we have pre-built classes that allows to style each widget. You can find the CSS class in the bottom of each widget.

Background-main makes the background of your widget of the main site color with no delimiter.
Background-main-with-delim creates main site color background and transparent delimiter on the bottom of the widget.
White sets white as the background color with no delimiter.
White-with-delim creates a transparent delimiter on the bottom of the white background widget.
In case you leave the CSS class field blank, the widget background will be transparent.

Here are the examples of what you can get:

Here you can see the Background-main and White CSS class.


Here is White-with-delim and Background-main styles of the widgets.


There's blank CSS class and Background-main on this example.

 

 

 

If you have any questions please follow these steps:

 

Themes Supporting INCLUDES:

 

Themes Supporting does NOT include:

 

Important Note For the fast troubleshooting, please, send us detailed description of the issue you have. Make sure that you don't forget to send us your website url with our theme installed. Moreover, we are often asking for the WP admin access information (login and password), so create an access for our support to be able to access your admin area for troubleshooting.

 

 

 

Please login to your CodeCanyon account and navigate to your Downloads page and rate theme as shown below. Thanks in advance!

 

 

 

You will find the included plugins documentation in the Documentation folder. But we would also like to provide some useful links for you.

 

1. Bbpress documentation link

Getting started with bbPress bbPress, which is a popular forum management plugin for WordPress, is relatively simple to install and run. However, if you are not familiar with the WordPress installation environment, it could be a bit daunting. This chapter will serve as an introduction to bbPress and will guide you through the installation of bbPress onto your WordPress-based website. By the end of the chapter, you will have an understanding of bbPress and will have learned the following:

 

What is bbPress?

bbPress is a template-driven forum management plugin built to be used with WordPress. It is designed to be a light plugin, with additional features being added through extensions known as plugins should you want more functionality. Forums have been around for almost as long as the Internet and are a great way for people with similar interests to connect over the Internet. Examples of the types of sites that can benefit from a forum include:

Forums can be a lot of work to get started but can eventually become a valuable asset to your website and often will drive a lot of traffi c to it. Furthermore, forums can also be a great asset to your online presence, building a community around your services.

 

Installing bbPress

As bbPress is a WordPress plugin, we will need to install it like a plugin. Thankfully, this is relatively straightforward and there are three ways to install plugins, which are described as follows:

 

Method 1 – downloading and installing the plugin from the WordPress repository

The following are the steps to be performed for downloading and installing the plugin from the WordPress repository:

  1. In your WordPress installation, visit your login page, which will look similar to http://www.yourwordpressdomain.com/wp-admin/. Log in with your username and password, and you will be taken to the WordPress Dashboard. On the Dashboard screen, down the left-hand side, you should see a menu titled Plugins. If you hover over Plugins, a pop-up menu should appear, with one of the options being Add New. Click on this option. You will be taken to a screen that has a search box. This will allow you to search the WordPress plugin repository for any plugin that is present within it. As bbPress is a WordPress plugin, we can find bbPress using this method. Type in bbPress and click on the Search Plugins button. From here, you should see a list of plugins returned in the search for bbPress. One will be the proper bbPress plugin.
  2. If the plugin name is bbPress, and its author is The bbPress Community, you have found the correct plugin! Click on the Install Now link beneath the plugin name, and the plugin will be installed.
  3. If the installation is successful, you will be given two options: Activate Plugin and Return to Plugin Installer.
  4. If you click on Activate Plugin, the plugin will be activated.
  5. Alternatively, if you click on Return to Plugin Installer, you'll be taken back to the Plugin Installation Screen. From here, click on Plugins in the left-hand menu, search for bbPress in the list, and click on Activate to activate bbPress.

 

Method 2 – uploading a ZIP file of bbPress to WordPress

The following are the steps to be performed while uploading a ZIP fi le of bbPress to WordPress:

  1. Visit the URL http://wordpress.org/extend/plugins/bbpress/ and click on the download button; you will download the latest version of bbPress, which you should save to an easy-to-fi nd location, such as the desktop.
  2. Then, log in to your WordPress administration site, and in the left navigation hover over Plugins and select Add New; you should be taken to the Add New Plugins screen. Along the top, you should see a link called Upload.
  3. Click on Choose File, and then navigate to where you saved the bbPress. zip file. Make sure the ZIP file's name is in the box, and then click on Install Now. If successful, you will be given the choice to activate the plugin as described previously.

 

2. Buddypress documentation link.

3. Woocommerce documentation link.

4. SMK Sidebar Generator plugin's page link.

5. Advanced Custom fields documentation link.

6. Master Slider Plugin documentation link.

7. Layer Slider Plugin documentation link.

8. Go - Responsive Pricing & Compare Tables for WP Plugin documentation link.