EXO theme documentation

Firstly, we would love to send you our great thanks for purchasing our theme!

This guide provides instructions for installation, help on getting started and extensive documentation of features. It is recommended that you read it thoroughly to fully leverage the EXO theme's capabilities. Please also make sure to check out our Video Tutorials as they explain everything covered in here in greater depth. We hope you enjoy building with EXO as much as we enjoyed developing it and continue to develop with new features!

To use EXO theme, you should be running WordPress 4.2 or higher, PHP5 or higher, and MySQL5 or higher. To ensure your host can work well with EXO theme, please check below requirement:

• - Your web host has the minimum requirements to run WordPress.
• - You are running the latest version of WordPress.
• - You had proper secured passwords FTP and Database.

Before starting the theme installation and configuration of your new theme, you must first have WordPress already installed on a server.

If you are struggling, here are very detailed source for WordPress Installation guide:

• WordPress Codex: WordPress information and instruction to install.
• FAQ New To WordPress: Popular FAQs about WordPress installation

If you prefer something more visual, you can watch this video tutorial on how to install WordPress created by us.

(Please be noted that the video shown is from our NUVO Restaurant theme, but with the same process applied)

Once you have setup a copy of WordPress, there are two ways you can go about installing the theme:

• 1. FTP Upload
  

  Unzip the downloaded file and upload the theme directory /EXO/ into your WordPress themes directory /wp-content/themes/.

• 2. WordPress Upload
  

  This is definitely the easier route for most. Simply navigate to Appearance > Add New Themes > Upload. Click the 'browse' button and locate the still zipped theme folder. The theme will be uploaded and installed in a matter of seconds.

  Here is our video tutorial to help you through the process

After installing the theme successfully, you can optionally import the supplied dummy data in order to get a feel for things. If you're interested in importing the data, pleave check the Demo Data section below

Once you have installed and activated our theme, you will be prompted to install required and recommended plugins. Just click the link to begin installing plugins.

Next, check boxes to select all the plugins you want to install, select the bulk action of install from the dropdown box and then click the button to apply.

Select the plugins you had installed, and then apply the bulk action to activate them.

Finally, you will got a confirmation notice that your plugins were activated.

Here is our video tutorial to help you through the process

Noted: Before you install our themes, please read some of our tips here:

• How to install sample data using one-click importer in CMS theme 
• How to install sample data using import xml method

To help you set up website with the least effort, we included in the theme package dummy content file. After installing it, all content seen on the live demo will be imported except for images and videos.

There are two methods you can use, one is using our One-click Importer, the other is Importing manually. To go with the former option, please follow the steps below:

1. 1. Go to EXO Theme on the left menu

   

2. 2. Click on Demo Content, you will see the import demo data screen below

   

3. 3. Just click Import now and wait for the process to complete
4. 4. After the importation is finished, Save Changes and you are done.

Here is our video tutorial to help you through the process of installing plugins and demo data of EXO theme

Now you have a website just like our demo, with the pictures replaced by grey images.

To imprort the demo content by default WordPress option, please follow the steps below:

1. 1. Go to Tools>Import.
2. 2. Select Wordpress system then browse for the .xml file. You shoud be able to find it following the path wp_EXO>inc>dummy>EXO>XML.
3. 3. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
4. 4. You will then have the option to import attachments, check on the "Download and import file attachments" box.
5. 5. Click Submit.

Now you have a website just like our demo, with the pictures replaced by grey images.

CMSSuperheroes plugin is required for core function of all our themes. Please install it along with the theme to have major functions work properly.

After installation, you will be suggested to install additional plugins. To install them and activate, please navigate to Plugins, you will see a list of required and optional plugins. We recommend that you install the following to get the best of our theme:

Visual Composer is the most popular drag and drop editor for WordPress.

If you need dedicated support for this component, please visit: Visual Composer on Code Canyon

Create a responsive (mobile friendly) or fullwidth slider with must-see effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page!

Customize this slider with our convenient drag & drop backend to your very needs. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

For premium support with this plugin please visit: Revolution Slider on CodeCanyon

Contact Form 7 is one of the most popular form builders for wordpress.

We have created styles ready for you to use within your EXO theme.

For detailed information and support on this plugin, please go to: https://wordpress.org/plugins/contact-form-7/

Essential Grid is an amazing plugin for Wordpress developed by 'Theme Punch' that comes FREE as part of the EXO Theme. Within this documentation we have covered everything you need to know about using the plugin with the 'EXO' theme. 

If you need premium support for this plugin you will need to purchase the plugin on CodeCanyon, you will then get a 'Purchase Registration Code'. You can then create your account on the 'ThemePunch Support Website'.

Essential Grid is an all-purpose grid building solution for WordPress that allows you to display different kinds of content in a highly customizable grid. Possible applications range from portfolios, blogs, galleries, services, product sliders, testimonials and anything else you can imagine. With it's various supported media types like images, youtube & vimeo videos, html5 self- hosted videos and even iframe content.

Using Essential Grid

We have created a video tutorial to show you how easy you can create stunning portfolios and blogs within your theme, using 'Essential Grid'.

(Please note this video is from our Pro Business theme, but the exact same principals apply)

The most popular free plugin for eCommerce. It is recommended in case you are creating your online eCommerce website. EXO is not only compatible with WooCommerce plugin but also comes with specific shortcodes and customized features for the plugin.

For detailed information and support on this plugin, please go to: http://www.woothemes.com/woocommerce/

1. 1. From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.



2. 2. Select Create a new menu at the top of the page



3. 3. Enter a name for your new menu in the Menu Name box
4. 4. Click the Create Menu button. 

Your new custom menu has been defined.

You can add different link types into your menu, these are split between panes left of the menu you're currently editing.

1. 1. Locate the pane entitled Pages.
2. 2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
3. 3. Select the Pages that you want to add by clicking the checkbox next to each Page's title.
4. 4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
5. 5. Click the Save Menu button once you've added all the menu items you want.

Your custom menu has now been saved.

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple 'drag and drop' interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the 'child' underneath its 'parent' and then drag it slightly to the right.

1. 1. Position the mouse over the 'child' menu item.
2. 2. Whilst holding the left mouse button, drag it to the right.
3. 3. Release the mouse button.
4. 4. Repeat these steps for each sub-menu item.



5. 5. Click the Save Menu button in the Menu Editor to save your changes.

1. 1. Scroll to the bottom of the menu editor window.
2. 2. In the section titled Theme locations, click the check box for the location where you want your menu to appear.



3. 3. Click Save menu once you've made your selection.

Congratulations! Your menu has now been added to your site.

To add icon to menu item, in Appearance>Menus, click on the arrow on the right end of each menu item for more options, you will find the field Menu Icon, click Browse icon to select icons.

For main menu items, you will have more options than sub menu items. You can set background color, icon color and icon font size.

Don't forget to Save Changes when you are done.

Our theme includes various options for you to easily customise your menu. You can find them in CMS EXO>Main Menu

For more details, head on to Theme Options section

EXO supports 6 menu locations. You can select a menu for each location from corresponding dropdown list.

Pages are backbond of a website. You may need number of pages to display fully website content. Below is the guide to create a new page in EXO theme:

1. 1. Navigate to Page>Add New to start creating a new page
2. 2. Enter Page title and select Page Template on the right side bar. Now you can start adding elements into page to build page content. To edit more conveniently, switch to Backend Editor to add shortcode in Visual Composer.



We have created 2 super detailed video tutorials to show you all the steps and some tips when creating a page with EXO theme.

Creating Page with EXO theme - Part 1:

Creating Page with EXO theme - Part 2:

3. 3. Save changes and Publish your page.

With the Page Options specially built for our themes, you can easily customize the Layout, Header and Page Title of every page.

General

First take a look at the General tab, you will see a switch button. By turning it On/Off, you can change the Page Layout from Full Width to Boxed and vice versa in an instant. You also can choose sidebar for the page, enable onepage or rows navigation layout.

When enable Onepage option, you will have settings for your onepage:

• Speed: You can set moving speed here
• Offset: You can set scroll offset speed here
• Easing: Allow you setting moving effect

To set up onepage, you must be done some tasks more to setup menu and custom link for each onepage section. Please watch video below for detailed guide:

When enable Rows Navigation option, you can create a page with navigation arrow to each row in page.

• Navigation Top: Enable navigation arrow on top
• Navigation Bottom: Enable navigation arrow at bottom
• Arrow Color: Select color of arrow
• Arrow Color Hover: Select color when hovering in the arrow

Body

• Color: Select background color for page body
• Image: Select background image for page body
• Repeat: For background image, you can set it to be repeated, in X or Y dimension
• Size: Set the size of image
• Position: Set the position of background image
• Custom Class: Add custom class
• Enable Border Body: Enable border of body

Header

• Custom Header: Select a preset custom header
• Header Setting: Enable/Disable Header on page
• Header Fullwidth: Enable/Disable Header fullwidth
• Header Position: Select header position as left, right or top
• Header Top: Enable/Disable top header
• Show/Hide Sidebar: Choose to show/hide sidebar
• Logo: Add logo image and its settings
• Header Fixed: Enable/Disable fixed header
• Background Setting: You can give each page a unique Header with these options. Select background color or image and its setting of size, position, parallax and more
• Sticky Header: Choose show/hide to enable/disable sticky header. You can select background color, border image or border bottom of sticky header and add custom logo when header is sticky

Menu

• Main Nav Height: Set height for main nav bar
• Make Menu Item As Button: Choose Yes/No to set menu item as nav button
• Menu Position: Select menu position as left or right
• Menu Font Color/Hover Color/Active Color: Select font color, hover color and active color for menu item
• Sub Menu Background Color/Hover Color: Select background color and hover color for sub menu
• Sub Menu Font Color/Hover Color/Border Color: Select font color, hover color, border color for sub menu
• Sticky Menu Font Color - First Level: Select font color, hover color and active color for sticky menu
• Manage Locations: Select locations for main navigation, top navigation, left/right navigation, menu for 404 page and sticky header navigation

Page Title

Enable Custom Setting, you will have setting options for page title.

• Page Title Setting: If you choose to show page title, you will be able to add change setting for title and subtitle alignment, color and size
• Background Setting: You can set background color or image for page title and its settings of size, position, parallax, padding, margin and more
• Breadcumb: You can choose to hide or custom the breadcumb with some settings of alignment, color, custom text and padding

Footer

• Footer Top Widgets: Choose yes/no to show footer top widget
• Link Color/Color Hover: Select link color and hover color
• Heading Title Color: Select heading title color
• Background Color: Select background color
• Heading Title Color: Select heading title color
• Heading Title Color: Select heading title color
• Background Color/Image: Select background color or image
• Heading Title Color: Select heading title color
• Repeat/Size/Attachment/Position/Off Border Top Image/Arrow Color: Configure setting for background image
• Enable Curve: Enable curve for footer
• Curve Color/Height: If curve is enabled, select its color and height
• Footer Top Padding/Margin: Select footer top padding and margin
• Footer Bottom: If enable footer bottom, you can set up background color, color, link color and hover color for it

Page Template

• Select Categories: Select blog post categories to display
• Select Portfolio Categories: Select portfolio categories to display
• Post Per Page: Select number of post per page
• Select Columns: Select number of column
• Show Loadmore: Show/Hide loadmore
• Show Filter: Show/hide filter for masonry template

Angle

• Enable Angle Page Title: Choose to enable/disable angle page title
• Angle Page Title Style: Select angle page title style
• Angle Page Title Height: Enter angle page title height
• Angle Page Title Color: Select angle page title color

Angled row is a special feature of EXO theme that allows you to create dynamic style with angle for rows. To create angled row in any page, please follow these steps:

1. 1. Navigate to Page, select a page you want to add angled rows and click Edit Page. Using VC, you can add a new row or edit existing row you want to create angle.

   

2. 2. In Row Settings>Style tab, select Row Style as Custom. Move to Angle Tab, here you can setup position, height, color, style for angle of the row.





We have created a video tutorial to show you steps to create angled rows with different styles as in our demo.

(Please note this video is from our Spectrum theme, but the exact same principals applied)

3. 3. Save changes and see the result.

To set a page as Home page, go to Settings > Reading in your WordPress Dashboard panel.

1. 1. Set "Front page displays" as "A Static Page"
2. 2. In the drop down menu for "Front Page" choose a page which will be your home page.



3. 3. Save changes.

Creating Pricing Items

To create pricing table, first you need to create pricing items. 

1. 1. Navigate to Pricing> Service>Add New



2. 2. Give a title to your pricing item and select price category.
3. 3. Price detail can be inputted in the Price Option section on the left side.



In the Pricing Option section, you'll find options to 

• - Add Price
• - Add Value (Month, Week, Year,..)
• - Add up to 10 options
• - Add Button URL and text
• - Make the price item as featured
4. 4. Click Publish when you are done.

Adding Pricing Table to page

After creating all Pricing Items, to add them in a page, first choose to Edit that page.

1. 1. Using Visual Composer, choose Add Element



2. 2. Select Pricing



3. 3. In General Setting, enter Title, Sub Title, Description and change their settings of color, size,



4. 5. In Source Settings tab, choose categories and order of pricing item to show



5. 6. In Layout tab, select layout and number of column



6. 6. In Item Option tab, you have all option to setup content and button color, background and more



7. 7. Save Changes

Click Preview or Publish to see the result. Your pricing items now show up nicely in a pricing table.

Creating Portfolio Items

To create a Portfolio page, first you need to create Portfolio Items

1. 1. Navigate to Portfolio > Service>Add New



2. 2. Give a title and description for your item
3. 3. In Portfolio Setting, you will find all setting for your project: Project link, About, Similar Project, Testimonial, Style, Gallery and Conclusion image



4. 4. Choose Portfolio Category and Set Featured Image, for your project
5. 5. Publish

Adding Portfolio to Page

Now, to add portfolio to a certain page, in Pages, choose the page you want and click Edit (Add New page if you want to add Portfolio to a brand new page)

1. 1. Using Visual Composer, choose Add Element



2. 2. Select Portfolio if you want to add portfolio grid or masonry to the page



You can configure the shortcode options with source options, layout option, Item option and extra option as you want.

3. 3. Select Portfolio Carousel if you want to add portfolio carousel to the page



You can configure the shortcode options with general, source options, layout option, Item option and extra option as you want.

4. 4. Publish

You are done creating your Portfolio Page, congrats!

To Add Widget on Sidebar, please following these steps:

1. 1. Navigate to Appearance>Widgets to access the list of widgets and widget section that they can be added. The left hand side show all widgets you can use. The right hand side shows all different section you can add widgets to.
2. 2. Simply drag and drop the widget you want into the widgets section you want to the right hand side.
3. 3. When you finished, make sure to click “Save” in the widget editing box to save the widgets assed to your sidebar.

The options panel is home to all of the theme's extensive configuration options. To view the panel, navigate to 'Appearance > Theme Options' in the left-hand menu. Here you have the ability to alter many core aspects that make up how your theme looks and behaves. Any of the options that have some ambiguity to them conviently have descriptions to explain their purpose.

With our built-in importer, you will be able to get your site ready in a flash. Simply click Import now to start importing demo data.

In this section, you will have the setting options for homepage with page loading, favicon and spacing.

Here you can set up layout for all pages. Turning on Boxed Layout will change all page layouts from full width to boxed. You can change the layout of each page individually using Page Options. You can also customize the body's Background, Margin and Padding.

Set Up Logo

You can select an image file in your library or upload a new file from your computer to set as logo. Follow the steps below to set up your logo:

1. 1. Go to CMS EXO>Logo 
2. 2. To set logo, cick Upload.
3. 3. If you already had the logo image in your media library, simply click on it then choose Select at the bottom right. If not, switch to Upload files tab then browse for the file in your computer. After it is uploaded to your library, click on it then Select.



4. 4. You can scale the logo up and down by changing Logo Height. Note that Logo Height is limited by Header Height, if you want to enlarge the logo, you must increase Header Height as well.
5. 5. If you enable Sticky Menu, the menu will resize smaller and stick at the top of the screen as you scroll down, hence the size of the logo will change accordingly. Sticky Header Logo Height option allows you to change its size on sticky menu.
6. 6. Enter Logo Margin and Padding to adjust logo position on menu.

This is one of most important sections for theme because this is what users see first. With our Theme Options, you will find various options to configure Header, including changing Layout, Background, Height, Margin, Position, Border. You also find configuration options for Sticky Menu here.

• Select a Header Layout: Select one in 3 preset header layouts of EXO theme
• Header Fullwidth: Enable fullwidth header
• Enable Header Fixed: Enable fixed (or sticky) header
• Menu Position: Select menu position s left or right
• Background: Setup background color or image and its settings
• Transparent Header: Enter value of header transparency as you want
• Parallax Background Image: Turn on to enable parallax background image
• Header Border Color/Width: Select color and width of header border as you want
• Header Margin/Padding: Adjust header margin and padding

Don't forget to Save Changes when you are done.

Header Top is the small bar at the top of website that is commonly used for displaying social icons, phone number, address etc. Turn it on to start configure and use it on your site.

To enable/diasale Sticky Menu, go to CMS EXO>Header>Sticky Header. 

• Stick Height: Set height for sticky menu
• Sticky Border Bottom Image: Enable border image for sticky menu
• Select Image: Select the image for border bottom
• Border Height: Enter height of border in px
• Enable Sticky Header on Tablet/Mobile: turn this option on to enable sticky header on tablet or mobile

Don't forget to Save Changes when you are done.

Customizing Menu

Our theme includes various options for you to easily customise your menu. You can find them in CMS EXO>Main Menu

• Main Nav Height:  Set height for main navigation
• Menu First Level Text Uppercase: Turn on to set menu first level text as Uppercase
• Main Menu Border Color - First Level: Select border color for first level menu
• Select Main Menu Font: Select font family for main menu and other font settings
• Select Sticky Menu Font: If you turn on sticky menu, select font family and other font settings for sticky menu here

Don't forget to Save Changes when you are done.

Default Menu

In Default Menu tab, you have all setting options for main menu font and background color, hover color, active color for each level.

Mobile Color

In Mobile Color tab, you will find settings for menu font and background color of meach level on mobile.

To enable/diasale Hidden Sidebar, go to CMS EXO>Hidden Sidebar. 

• Hidden Sidebar Width: Set width for hidden sidebar
• Hidden Sidebar Icon: Set icon for hidden sidebar
• Hidden Sidebar Text: Enter text for hidden sidebar
• Hidden Sidebar Background Color: Select background color
• Hidden Sidebar Font Color: Select font color

Don't forget to Save Changes when you are done and come to frontend to see the result (The hidden sidebar in our demo is the orange one on the right side):

Footer Layout

In Footer tab, you can select footer layout, enable fullwidth and Back To Top button. Footer consists of Footer Top and Footer Bottom.

Footer Top

Footer Top can show up to 4 widget columns. To enable Footer Top Widgets, turn on the option and start to configure various settings for Footer Top. We included huge number of setting options, from adding widgets to setting color, size, position of background, text, link, border, margin, arrow and curve.

Don't forget to Save Changes when you are done and come to frontend to see the result:

Footer Bottom

Footer Top can show up to 2 widget columns that you can choose to display social icons, copyright claim... or other contents. To enable Footer Bottom Widgets, turn on the option and start to configure various settings for Footer Bottom. We included huge number of setting options, from adding widgets to setting color, alignment, width of background, text, link, border, padding and margin.

Don't forget to Save Changes when you are done and come to frontend to see the result:

There are a lot of options regarding buttons that you will find here. In the Button section, you can turn on/off Uppercase style and adjust padding and margin of the button. You can also customise Default Button and Primary Button in corresponding tabs. For each button type, you can configure all settings such as color, hover color, size, style for text, background and border. Those are two types of button that you may set when creating a button using Shortcode.

All options relating to Page Title and Breadcrumb can be found here.

Page Title Bar

From Page Title Bar tab, you are able to configure all settings for page title bar: alignment and border, title font, color, size and background, margin and padding for title bar.

Breadcrumb

You can choose to show/hide Breadcumb on PC and mobile and change Breadcrumb text, font and style here.

You can set color and style for almost everything in Form, Content and Font. Explore it yourself and be dazzled by the numerous options.

Form Styles

You can select color and style for background, text, field and border of forms.

Content Area

You can select color and style for background, text, field and border of main content area.

Font Colors

You can select color and hover color for all text link.

Not just color, all text elements are also within your control. Define the style of Body text and H1 to H6 Headlines yourself.

Heading

You can change settings including font, color, size, weight, height, alignment for each heading from H1 to H6.

Extra

Add font option to call individual font for your use later.

Local Font

Select Local font to call for your use later.

In this section, you will find all settings for Blog, including below general setting, Search, Archive, Post, Page, and Detail.

Select layout for your blog page, title heading, show/hide Readmore in posts or the lenght of post intro text.

Search

This is all setting for blog search where you can choose to show/hide heading, page title, breadcumbs on search or search view type.

Archive

You have all setting for your archive page here.

Post

All settings for post come here. You can change setting to show/hide page title, post title, breadcumb, post elements such as thumbnail, tags, social icon, or edit title and sub title color, layout and style of post.

Page

All settings for blog page come here. You can change setting to show/hide page title, heading, breadcumb, comments, animations, or select page layout.

Detail

All settings for single post come here. You can change setting to show/hide title, author, category, tags, comments, likes, or sharing icons.

From EXO theme option, you also have simple settings for Team custom post type. You can enable/disable page title, breadcumb of Teams page and turn on/off to transform page title text to Uppercase.

EXO comes with Font Awesome and Font Ionicons library. You can turn on/off each of them based on your own need.

It is easy to create the 404 Page with EXO theme. You are able to configure to show/hide heading, page title , fade out animation, breadcumb, Back to Homepage or From Page link and add image and id for the page.

Please create/paste custom css here. Make sure css is out of any errors/mistakes. Please always remember to click "Save Changes" button. Without that, you will lose all your changes.

You can enable Smooth Scroll and Parallax Effect in this section

This section is especially for all those who want to move settings from theme options panel between themes or when you move your website from test server to live. Please always remember to click "Save Changes" button. Without that you will lose all your changes.

Visual Composer is a powerful Wordpress page builder that allows you to create complex page layouts without touching a single line of code. To switch to Visual Composer's Backend Editor, click on this button

When Visual Composer's editing panel comes up, click on either of these buttons to Add Element

A shortcode selecting panel will show up where you can see all the shortcodes available in the theme. Select the one you would like to use.

You will then encounter a setting panel for the shortcode (each shortcode has it own setting options), after a bit of configuration, it will show up nicely on your page.

• Phone Number: Choose yes or no to show Phone Number
• Message: Choose yes or no to show Message box

Cart & Search shortcode is used to create Cart and Search box which you will need when using WooCommerce for online shop.

• Show Cart: Choose yes or no to show Cart icon
• Show Search: Choose yes or no to show Search box

Client Carousel shortcode is used to display Client in carousel slider.

Add Clients

• 1. To display client carousel, first you need to create client items. Go to Client>Add new







• 2. Enter the client name in Title field. Add Featured Image and Client URL if any.
• 3. Select a Category for your client.
• 4. Finally, hit Publish. You will have your client ready to be displayed on frontend.

After creating several client items, it's time to display them in a page using CMS Client Carousel shortcode

• 1. Go to Page Editing panel.
• 2. Using Visual Composer, choose Add Element
• 3. Select Client Carousel and configure the shortcode settings
• 
• Heading: Add heading for the client carousel shortcode
• Heading Size: Select heading size
• Heading Icon: Enter class name of Awesome icon
• Heading Align: Set alignment as left, right or center
• Heading Text Style: Set text style for heading as Uppercase, lowercase or CAPITALIZE
• Sub Heading: Add sub heading for the client carousel shortcode
• Sub Heading Size: Select sub heading size
• Description: Add description for the client carousel shortcode
• 4. Save Changes

• Counter Type: You can choose the starting number of the counter between Zero and Random
• Digit: Enter the number value of your counter
• Digit Prefix: Enter the prefix for digit
• Suffix: Enter the suffix, for instance %
• Digit Heading Type: Enter heading type for digit
• Digit Font Size: Enter font size for digit in px
• Digit Font Color: Select color for digit
• Digit Margin: Enter margin for digit
• Text: Enter text for counter
• Text Size: Enter font size for text in px
• Text Font Weight: Select font weight for text as bold or italic
• Text Color: Select color for text
• Text Style: Select text style as Uppercase, lowercase or CAPTALIZE

• Icon Library: Choose an icon library from dropbox
• Icon Item: Select icon from chosen library
• Icon Size: Enter size for icon in px or %
• Icon Color: Choose a color for icon

• Content Align: Choose content alignment as left, right or center
• Content Border Box: Choose yes or no to show border box for content
• Border Width: Enter border width in px or %
• Border Style: Choose border style as solid, dotted, dashed or double
• Border Radius: Enter radius size if any
• Border Color: Select border color
• Border Color Hover: Select border color when hover
• Background: Select background color
• Background hover: Select background color when hover
• Padding Box: Enter padding of box
• Box Width: Enter width of box
• Box Height: Enter height of box
• Layout: Select box layout

• Title: Enter title for your cover box. Title will show on the top of cover box (See image below).
• Title Size: Enter size of title
• Title Align: Choose between Center, Left and Right
• Title Color: Select color for title
• Item Active Default: Select the active item by default
• Item Title Size: Choose item title size
• Description: Add description for cover box
• Item Title Color: Choose item title color
• Item Description Color: Choose item description color
• Item Link Label: Add link label of item if any
• Item Link Target: Set link target as self, blank, parent or top
• Image Size: Set as full or thumbnail

Then you can add up to 4 items for a cover box. Each item has its title, sub title, description, image and link. You also can add button in Extra Option part. Here is example of cover box shortcode:

This shortcode is used for creating custom heading with Google Font. You can configure individual heading with font and various style options.

• Icon: Choose icon to add to dropcap
• Layout: Select dropcap layout
• Color First Text Icon: Select color of dropcap text or icon
• Background Color First Text Icon: Select background color of dropcap text or icon
• Border Color First Text Icon: Select border color of dropcap text or icon
• Border Radius: Enter the value of border radius
• Content Color: Select color of content
• Content: Enter main content
• Extra Class: Add extra class

Example of dropcap shortcode

• General: All settings for title, sub title, alignment, layout and animation
• Icon: Select and configure all settings for icon: color, size, background, width, height
• Border: All settings for icon border: color, hover color, style, radius
• Image: You can add image instead of icon from library and have all settings for it as for icon. Here is an example of fancy icon box using image:

  

• Content: Enter content and change settings for it
• Extra: Extra setting for box background, border, padding and margin

Example of a row of 4 fancy icon boxs:

• General: Add title and select its color and size
• Content Option: Add image, set image width and height; add content text and configure its color
• Layout Option: Select layout for box
• Extra Option: Add Read More link and Custom class if needed

Google Map allows to embed a google map in EXO style.

• 
• General: Add title, color, size, API key of your map, address, map type, zoom level and width-height of your map shortcode
• Marker: You can use any image as marker. Choose to show info window, marker title, description and its coordinate (latitude and longitude)

  How to know your Latitude and Longtitude? On your computer, visit Google Maps. Right-click a location on the map. Select What's here?.Coordinates will appear either in or below the search box.

• Multiple Marker:To pin multiple markers on your different locations, enter list (as shown in tooltip) in Marker List field.
• Map Style: Select a map style for your map
• Control: Choose to show/hide map controls

Example of Google Map shortcode:

• Icon Library: Select icon library
• Icon Item: Select icon from library
• Custom Icon Class: Add custom class for the icon
• Icon Color: Select icon color
• Icon Size: Set icon size

Example of icon shortcode:

• Title: Add title of banner
• Heading Size: Select heading size
• Add link title: Check the box to add link title
• Title Color: Select color of title
• Icon: Add icon class
• Add Link Icon: Add link to icon
• Icon Color: Select icon color
• Icon Size: Add icon size
• Short Description: Add short description
• Short Description Color: Select description color
• Full Description: Add full description
• Full Description Color: Select description color
• Image: Add image instead of icon and setup its width and height
• Read More Text: Add read more text
• Read More Link: Add read more link
• Style: Select style
• Animation: Select animation
• Custom Class: Add custom class

• Title: Add title for latest twitter shortcode
• Heading Size: Select heading size
• Title Color: Select title color
• Consumer key/Consumer secret/Access token/Accesstoken secret: Enter your Twitter account needed key. You can find your necessary key by creating application here https://apps.twitter.com/.
• Cache Time: Set time cache time to refresh new feed
• Username: Enter username
• Tweets To Show: Set number of latest tweet to show
• Show Avatar: Choose to show/hide avatar
• Exclude Replies: Choose to show/hide replies
• Type of Transition: Select type of transition
• Extra Class: Add extra class if any
• And more setting for latest tweet slide

• Extra Class Name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
• Logo Height: Set logo height in px
• Logo: Add logo image

This shortcode can be used to add a certain menu into page. You can select a menu and configure layout style, link and background color and more.

• General: Select title size and transform
• Source: Select catogories, limit number of items and date format
• Feature Post: Choose to show/hide featured post and its image, date and description
• List Posts: Choose to show/hide image, date, description in post list
• Layout: Select layout for post list

Example of magazine post shortcode:

• Widget Title: Enter title of pie chart
• Value: Add value of pie chart
• Label Value: Add label of value
• Unit: Add unit of pie chart
• Extra Class: Add a class name to refer to its custom css
• Heading Size: Select heading size
• Title Color: Select color of title
• Icon: Add icon class
• Icon Size: Font size of icon
• Icon Color Select icon color
• Bar Color: Select bar color
• Bar Width: Add bar width
• Description: Enter description
• Style: Select style for pie chart

Example of pie chart shortcode:

Please find detailed guide on how to create portfolio item at our previous section Page>Portfolio Page

• Source Option: In Source setting tab, select catogories, number of post per page and order of post displayed
• Layout Option: In Layout Option tab, select layout, number of row, navigation and other layout settings
• Item Option: Change setting for content and image
• Extra Option: Add View All Link and Text and extra class if needed

Example of portfolio shortcode:

• Source Option: In Source setting tab, select catogories, number of post per page and order of post displayed
• Layout Option: In Layout Option tab, select layout, number of row, navigation and other layout settings
• Item Option: Change setting for content and image
• Extra Option: Add View More Link and Text and extra class if needed

Example of post carousel shortcode:

Please find detailed guide on how to create pricing item and pricing table at our previous section Page>Pring Page

Example of pricing shortcode:

You can add a process of up to 8 steps. Each step has icon, title and description. Besides, you can configure settings for icon, title and set number of column.

• General: In general setting tab, you can configure all settings for title, description and icon
• Progress Bar: In progress bar tab, you will have all settings for value: label, color, background, border...
• Layout: Select layout for progress bar and add extra class if needed

Example of progress bar shortcode:

Recent Post shortcode allows you to display latest blog posts to a page.

• 
• 1. Change setting for heading, sub heading and description
• 2. In Source Option, select categories of post and edit setting for content and image
• 3. In Layout Option, select layout type, style and number of column
• 4. In Sort Option, select number of posts per page and edit setting of its order
• 5. In Extra Option, you can add box shadow, add view all text and link or add extra class if needed

Shop Carousel can be used to display product carousel when you install WooCommerce for your online shop.

• 
• General: In General setting tab, setup color, size and alignment for heading and sub heading
• Source Option: In Source setting tab, select catogories, number of item per page and order of post displayed
• Carousel Setting: Change setting for carousel slide such as width, margin, speed, navigation...
• Layout Option: In Layout Option tab, select layout, number of row, navigation and other layout and content settings
• Extra Option: Add Read More Link and Text and extra class if needed

CS Social allows to display social links.

• 
• General: In General setting tab, edit setting for heading, description and layout
• Icon: In Icon setting tab, select size, color, hover color, background color, background hover color, width and height of icon
• Border: In Border setting tab, select color, width, style and radius for border
• Link Icon: In Link Icon tab, select up to 13 icon and add link of each icon

Add Team Member

• 1. To display a team profile, first you need to create member profile items. Go to Team>Add new
• 
• 2. Enter the staff name in Title field. Add some Description in the content section if you want.
• 3. Select a Category for your staff. It will show up under the staff's name as his/her position. Create more Category by clicking Add New Team Category
• 4. Set staff's profile picture by choosing a Featured Image

  

• 5. Finally, Publish
• Result

After creating several member profile items, it's time to display them in a page using CMS Carousel shortcode

• 1. Go to Page Editing panel.
• 2. Using Visual Composer, choose Add Element
• 3. Select Team

  

• 4. In Source Option Tab, select catogories, number of post per page and order of testimonial displayed
• 5. In Layout Option Tab, select layout, number of row, item with, space and navigation
• 6. In Item Option Tab, edit setting for content and image
• 7. In Extra Option Tab, add View More Link and Text and extra class if needed
• 8. Save Changes and see result

Add Testimonial

• 1. To display a testimonial, first you need to create testimonial items. Go to Testimonial>Add new
• 
• 2. Enter the customer name in title Title field. Add Testimonial in the content section.
• 3. Select a Category for your testimonial. Create more Category by clicking Add New Team Category
• 4. Set customer's picture by choosing a Featured Image
• 5. Finally, Publish

After creating several testimonial items, it's time to display them in a page using Testimonial shortcode

• 1. Go to Page Editing panel.
• 2. Using Visual Composer, choose Add Element
• 3. Select Testimonial

  

• 4. In Source Option Tab, select catogories, number of post per page and order of testimonial displayed
• 5. In Layout Option Tab, select layout, number of row, item with, space and navigation
• 6. In Item Option Tab, edit setting for content and image
• 7. In Extra Option Tab, add View All Link and Text and extra class if needed
• 8. Save Changes and see result

Video HTML 5 allows to display self-hosted video as video background.

• 
• 1. In General Tab, select layout and add custom class if needed
• 2. In Image Tab, select image for video poster and edit its width and height
• 3. In Video Tab, edit setting for video background and add link of self-hosted video
• 4. In Content Tab, add content displayed on video background

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide. You can also use POEdit plugin for translation.

• 1. Located the .po and .mo files in folder /languages.
• 
• 2. Select language in admin options.
• 
• 3. Find language prefix (save option and reload front-end view html).
• 
• 2. Copy two file .po & .mo and rename to eg( en_CA.mo & en_CA.po ... ) same for other languages .
• 
• 3. Open the file .po with POEdit and translate the texts into your preferred language.
• 
• 4. When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
• 5. When that’s done, simply upload the files to your theme folder.

Our themes are optimized with H1, H2, H3, H4, H5 tags, clean code, HTML5 but if you want to get higher ranking on search engines, you might need some help from suggested SEO plugins and Google Pagespeed Service below:

• Yoast SEO plugin
• Google Pagespeed Service
• Smush.it ( Optimizing Images )
• SEO Friendly Images ( SEO Images )

You can update our theme using 1 of the two ways below

1, Update theme using Envato WordPress Toolkit

2, Update theme manually

If you have any trouble while using auto update (It is likely to be permission issue), you may want to manually update the theme via FTP or Cpanel.

Download the latest version of the theme on ThemeForest download page and simply replace the old one via FTP or Cpanel.

We are always happy to help you with any questions and listen to recommendations you have for the EXO theme. If you need any help or support, please contact us

directly via Email: support@cmssuperheroes.com or

quickly at CMSSuperheroes Support Forum. If you got any problem about purchase code when entering our forum, please check out guide about How to fill purchase code here.