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:
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:
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:
Unzip the downloaded file and upload the theme directory /EXO/ into your WordPress themes directory /wp-content/themes/.
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
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:
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:
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/
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:
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:
With the Page Options specially built for our themes, you can easily customize the Layout, Header and Page Title of every page.
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:
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.
Enable Custom Setting, you will have setting options for page title.
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:
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)
To create pricing table, first you need to create pricing items.
In the Pricing Option section, you'll find options to
After creating all Pricing Items, to add them in a page, first choose to Edit that page.
Click Preview or Publish to see the result. Your pricing items now show up nicely in a pricing table.
To create a Portfolio page, first you need to create Portfolio Items
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)
You can configure the shortcode options with source options, layout option, Item option and extra option as you want.
You can configure the shortcode options with general, source options, layout option, Item option and extra option as you want.
You are done creating your Portfolio Page, congrats!
To Add Widget on Sidebar, please following these steps:
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.
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:
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.
Don't forget to Save Changes when you are done.
To enable/diasale Sticky Menu, go to CMS EXO>Header>Sticky Header.
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
Don't forget to Save Changes when you are done.
In Default Menu tab, you have all setting options for main menu font and background color, hover color, active color for each level.
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.
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):
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 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 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.
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.
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.
You can select color and style for background, text, field and border of forms.
You can select color and style for background, text, field and border of main content area.
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.
You can change settings including font, color, size, weight, height, alignment for each heading from H1 to H6.
Add font option to call individual font for your use later.
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.
This is all setting for blog search where you can choose to show/hide heading, page title, breadcumbs on search or search view type.
You have all setting for your archive page here.
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.
All settings for blog page come here. You can change setting to show/hide page title, heading, breadcumb, comments, animations, or select page layout.
All settings for single post come here. You can change setting to show/hide title, author, category, tags, comments, likes, or sharing icons.
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.
Client Carousel shortcode is used to display Client in carousel slider.
After creating several client items, it's time to display them in a page using CMS Client Carousel shortcode
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:
Example of dropcap shortcode
Example of a row of 4 fancy icon boxs:
Google Map allows to embed a google map in EXO style.
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.
Example of Google Map shortcode:
Example of magazine post shortcode:
Example of pie chart shortcode:
Please find detailed guide on how to create portfolio item at our previous section Page>Portfolio Page
Example of portfolio shortcode:
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:
Example of progress bar shortcode:
Recent Post shortcode allows you to display latest blog posts to a page.
Shop Carousel can be used to display product carousel when you install WooCommerce for your online shop.
CS Social allows to display social links.
After creating several member profile items, it's time to display them in a page using CMS Carousel shortcode
After creating several testimonial items, it's time to display them in a page using Testimonial shortcode
Video HTML 5 allows to display self-hosted video as 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.
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:
You can update our theme using 1 of the two ways below
1, Update theme using Envato WordPress Toolkit2, 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.