EXCEPTION

Theme User Guide

Thank you for purchasing our Theme. Please do not forget to rate the Theme and We'll be waiting for your Feedback. It would be nice to see your comments on our product, this documentation consists of several parts and shows you how to set up and administrate your WordPress site.

We did our best to make this documentation as clear as possible. However, if you have any difficulties with the our theme or any suggestions on improving the template or the documentation, feel free to contact us via our support link: support@it-rays.net

First of all what is WordPress CMS?

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It enables you to build Websites and powerful on-line applications and requires almost no technical skills or knowledge to manage. Many aspects, including its ease of use and extensibility, have made WordPress the most popular Web site software available. Learn More

What is a WordPress Theme ?

A WordPress Theme is a skin for a website built with the WordPress CMS platform. In other words, you can easily change your WordPress Web site appearance by installing a new Theme in a few easy steps. With all its simplicity, a WordPress Theme is provided with all the necessary source files and you are free to edit or extend it the way you need.

Files Structure

The Theme package you have downloaded consists of several folders. Let's see what each folder contains:

  1. Documentation
  2.  
  3. Licensing
  4.  
  5. Resources
  6.   demo-data: inludes all demo data files such as: layer slider, revslider folder, content.xml, essential_grid.json, go-pricing.txt, theme_options.txt, widgets.json files that will be explained below.
  7.   wp-plugins: includes all used WordPress plugins.
  8.   
  9. Theme
  10.   exception.zip
  11.   exception-child.zip
  12.

CSS Files and Structure

I'm using 4 Customizable CSS styling files in this theme.

The light.css and dark.css for the light and dark skins, also Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The style.php file contains all of the specific styling for the page that is customized by theme options, such as: custom title height, custom body background, etc...

The custom-colors.php file contains all of the custom skin colors for the page, if you used a custom skin color in theme options page.

The main light.css and dark.css files contains all of the specific styling for the page. The file is separated into sections using:

  1. /*===========================================================================
  2.     CONTENTS:
  3.     
  4.     1. CSS RESET.
  5.     2. TOP BAR STYLE.
  6.     3. HEADER STYLE:
  7.         3.1. Header styles:
  8.         	3.1.1. Header style 1.
  9.         	3.1.2. Header style 2.
  10.         	3.1.3. Header style 3.
  11.         	3.1.4. Header style 4.
  12.         	3.1.5. Header style 5.
  13.         	3.1.6. Header style 6.
  14.         	3.1.7. Header style 7.
  15.         	3.1.8. FullScreen Header.
  16.         	3.1.9. Custom Header.
  17.         3.2. Mega Menu.
  18.         3.3. Sticky Header.
  19.         3.4. One Page Header.
  20.         3.5. Header Search.
  21.         3.4. Login Box.
  22.     4. BLOCKS BACKGROUNDS.
  23.     5. COMMON STYLES.
  24.     6. TYPOGRAPHY.
  25.     7. SHORTCODES:
  26. 	    7.1. Icon Boxes styles:
  27. 	        7.1.1. Icon Box style 1.
  28. 	        7.1.2. Icon Box style 2.
  29. 	        7.1.3. Icon Box style 3.
  30. 	        7.1.4. Icon Box style 4.
  31. 	        7.1.5. Icon Box style 5.
  32. 	        7.1.6. Icon Box style 6.
  33. 	        7.1.7. Icon Box style 7.
  34. 	        7.1.8. Icon Box style 8.
  35. 	        7.1.9. Icon Box style 9.
  36.         	7.1.10. Icon Box style 10.
  37. 	                
  38.         7.2. Fun Staff:
  39.         	7.2.1. Fun Staff Style 1.
  40.         	7.2.2. Fun Staff Style 2.
  41.         	7.2.3. Fun Staff Style 3.
  42.         	
  43.         7.3. Testimonials Style:	
  44. 	        7.3.1. Testimonials Style 1.
  45. 	        7.3.2. Testimonials Style 2.
  46. 	        7.3.3. Testimonials Style 3.
  47. 	        7.3.4. Testimonials Style 4.
  48. 	        7.3.5. Testimonials Style 5.
  49. 	        
  50. 	    7.4. Tabs Style.
  51. 	    7.5. Accordions Style.
  52. 	    7.6. Clients Styles.
  53. 	    7.7. Team Styles. 
  54. 	    7.8. Dividers Styles.
  55. 	    7.9. Counters Styles.  
  56.         7.10. Information boxes.
  57.         
  58.         
  59.    8. PAGE SPECIFIC STYLES:
  60.         8.1. BreadCrumbs.
  61.         8.2. About pages.
  62.         8.3. Portfolio pages.
  63.         8.4. Pricing Tables.
  64.         8.5. Blog.
  65.         8.6. Contact pages.
  66.         8.7. 404 page.
  67.         8.8. Coming Soon.
  68.         8.9. News Magazine Page.
  69.         8.10. Form Controls.
  70.         
  71.         
  72.    9. PAGE TITLES:
  73.         9.1. Page title 1.
  74.         9.2. Page title 2.
  75.         9.3. Page title 3.
  76.         9.4. Page title 4.
  77.         9.5. Page title 5.
  78.         9.6. Page title 6.
  79.         9.7. Page title 7.
  80.         9.8. Page title 8.
  81.         9.9. Page title 9.
  82.         9.10. Page title 10.
  83.         
  84.    
  85.    10. WIDGETS.
  86.    11. FOOTER.
  87.    12. FIXED LAYOUT STYLES.
  88.    
  89. ============================================================================= */

Ex: If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

  1. .top-bar {
  2. 	border-bottom: 1px #eee solid;
  3. 	background: #f4f4f4;
  4. 	text-transform: uppercase;
  5. 	font-size: 11px;
  6. }

CSS Stylesheet files structure

this is the contents of css folder inside the theme folder.

File Name Description
assets/css/light.css This file contains all the necessary styling rules for the theme, actually it's main css file for the light theme.
assets/css/dark.css This file contains all the necessary styling rules for the theme, actually it's main css file for the dark theme.
assets/css/assets.css All Assets needed for Animations, prettyPhoto and Slick Slider compressed in this file to save performance.
assets/css/ie.css IE hacks for IE browsers less than IE9
assets/css/ie9.css IE9 hacks for IE9 browser
assets/css/responsive.css RoyalSlider Touch-Enabled jQuery Image Gallery
assets/css/custom-colors.php contains all of the custom skin colors for the page, if you used a custom skin color in theme options page.
assets/css/style.php contains all of specific styling for the page which customized by theme options, such as: custom title height, custom backgrounds, etc...
rtl.css RTL right to left support.

JavaScript

This theme imports 8 Javascript files.

File Name Description
assets/js/assets.js This file contains all the necessary styling rules for the theme, actually it's main css file for the dark theme.
assets/js/html5.js fix HTML5 Support on Browsers Less Than IE9.
assets/js/jflickrfeed.min.js Responsible For The Twitter API.
assets/js/jquery.min.js main jquery library if not loaded by default in wordPress.
assets/js/masonry.js Responsible for masonry style if not loaded by default in wordPress.
assets/js/script.js Responsible For The Main Custom jQuery Function In The Whole Site.
assets/js/script-rtl.js Responsible For The Main Custom jQuery Function In The Whole Site in RTL support.

Theme Installation

1) Download & Organize Files

After downloading the ZIP file from ThemeForest UNIZP that file, after unzipping you see various structure of theme.
  • Theme/exception.zip (Root file to install wordpress theme)
  • Documentation (Directory which includes theme documentation file)
  • Licensing (File which include information about wordpress & theme under GPL liscense)
  • Resources (Directory which includes codecanyon plugins, xml dump, jquery files, etc...)

2) Installing Theme

A - Installing your theme via Wordpress
  1. Login to your wordpress dashboard, go to WordPress Appearance -> Themes section.
  2. Click on Install Themes tab.
  3. Click on Choose File button, and select .zip theme file and click Install Now button.
  4. If you uploading process fails due to theme broken issues, then you may refer here
Note : This method will only work if your server allows space greater than 5 MB. Usually hosting providers provides only 2 MB
B - Installing your theme via FTP
  1. Go to the downloaded package then select Theme/exception.zip and extract it.
  2. copy extracted files in exception folder to /wp-content/themes/exception via FTP Clients
  3. For example theme should be in wp-content/themes/exception
  4. Follow the instruction below for activating the theme.

3) Activating Theme

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. From the Available Themes section, click on the EXCEPTION title (or EXCEPTION screenshot) to activate.
  4. A preview of the Theme will be shown.
  5. To activate the Theme click the Activate EXCEPTION link in the top right.

4) Import Demo Content

A - Import Demo Content via XML DUMP
  1. Go to your wodpress admin panel
  2. Under the Tools tab select Import
  3. In the new page appeared select the last item "WordPress"
  4. Find the Resources folder inside the root folder of EXCEPTION Theme.
  5. Inside resources folder open demo-data folder content.xml
B - Import Demo Content via One-Click-Install Method
  1. Go to your wodpress admin panel
  2. Under Appearance tab click on EXCEPTION
  3. you will find an import Demo Data button, click it (this will import posts, categories, menus and widgets.), then you are about to finish
  4. To Import sliders, Essential grid posts and grids and Go Pricing content, just go to these plugins in the left side panel of the Administration Panel and select import/export link in each plugin then import the corresponding content for each plugin from demo-data folder.
  5. Enjoy.

5) Theme Updates

If you want further notice about EXCEPTION Theme updates, then please follows us on twitter or constantly visit our support Team.

Pages And Site Templates

When you need to create a page just go to administration panel, and under Pages tab click Add New, then you will get this screen:



1) Template

As you see in the Page Template, you can see that there are 5 custom templates:

2) Page Layout Mode

As you see in the Page Layout Mode, you can see that there are 4 Layout Modes:

  1. Full Width: This is for pages that has no sidebar, and takes the full content container width.
  2. Full Page: This is for pages that takes the full page width not centered content.
  3. Left Bar: Content with left sidebar pages.
  4. Right Bar: Content with left sidebar pages.

3) Page Menu

As you see in the Select Menu, you can Choose a different menu for this page only.

Page Editor:



----- When you select BACKEND EDITOR, this screen will appear:



Theme Options

To Navigate to the theme options and begin customizing the look and feel or your website, you can:

Let's discuss each element in our theme.

Top Right Buttons

Save Changes & Restore Defaults Buttons on the top right of the page.

  • Save Changes: After selecting your options from the theme options panel click this button to save the changes.
  • Restore Defaults: When you click this button, a message will appear to you, choose OK and hit the save changes button to reset the theme options to their default values or cancel this action by clicking on cancel button.

General Settings

Property Description
One-Click Install Demo Data By clicking this button a new message will appear to confirm if you want to import the demo data which will install some demo pages, posts, menus etc...
Favicon This is the Favicon site identity that appears on the top left of the browser's address bar, it is preferred to upload a file with .ico extension with size 16pxx16px. Learn more.
Custom CSS Here You can add Custom CSS Code that will be applied on the front page.
Google Analytics - Tracking Code Copy and paste your google analytics code here and it will be inserted automatically in your page footer.
Custom Javascript Here You can add Custom JS Code that will be applied on the front page.
Tags Limit Control the Number of tags that will be displayed in tags widgets.
Contact Details This block contains your address, Phone number and your Email that will be shown in: top bar contact or in footer contact widget.
Twitter API Config To change the twitter api to yours, you see 3 inputs: Twitter usename: put yours, Widget ID: you have to register a widget on twitter by going to This Link then after finishing, copy the output and paste it in a new text file, find "data-widget-id" copy it's value and paste it in Widget ID, Tweets Limit: type the number of tweets to be shown in this widget.
Authors Page Settings This setting is for the Author's details page that can be found in this link: http://YOUR-DOMAIN/author/USER-NAME/, You can show hide author information, posts by author, and the way to display the author's posts (Large image, Small image, Grid, Masonry and Timeline) and even add text or HTML to be shown before and after All authors' pages.

Notice: the text or HTML content before and after author's content will be applied on all authors pages not only one author's page.
Search Page Settings Choose How you want to show Search results page (Without Side Bar Or Left, Right Side Bar).

Top Bar Settings

Property Description
Top Bar Settings

These settings let you Show / Hide top bar and also choose what to show on the left and right sides of the top bar on your site.

  • Top bar left content
    • Social Icons: Displays social icons with links to your social media pages on left side.
    • Contact Info: Address, email address will be shown on the left of top bar on left side.
    • Top Bar Menu Links: Displays a menu, to show it, go to Appearance, then menus and select Top bar menu then add menu items to it (this will be shown on left side).
    • Login / Register Links: Displays a login / register links and welcome to guest on left side.
    • Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
    • Text or HTML: Adds whatever text or HTML code you want that will appear on left side.
    • Empty ( No Content ):Leave left side empty without content.
  • Top bar Right content
    • Social Icons: Displays social icons with links to your social media pages on right side.
    • Contact Info: Address, email address will be shown on the left of top bar on right side.
    • Top Bar Menu Links: Displays a menu, to show it, go to Appearance, then menus and select Top bar menu then add menu items to it (this will be shown on right side).
    • Login / Register Links: Displays a login / register links and welcome to guest on right side.
    • Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
    • Text or HTML: Adds whatever text or HTML code you want that will appear on right side.
    • Empty ( No Content ):Leave right side empty without content.
  • Show Shopping Cart: Select this option to show the shopping cart in the top bar.
  • Cart Position: choose to put the shopping cart on left or right in the top bar.
Top Bar Styling
  • Top Bar background color: Choose your new custom background color from the color picker.
  • Background Image: Select an image from the uploader or insert an image url to use for the top bar background image.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
  • Top Bar Separators color: Colorizing the line separators between texts or links in the top bar.
  • Top Bar color: Colorizing the text in the top bar.
  • Top Bar Icons color: Colorizing the icons in the top bar.

Header Settings

Property Description
Header Layouts This option enables you to select header style from the 7 available header style, just click on the image of the header you want and then hit the save changes button.
Header settings

These settings let you choose the header options on your site.

  • Main Menu Effect: Choose the animation that will show up the sub menu of the Main menu items.
  • Mega Menu Style: Choose one of the 3 available mega menu styles.
  • Background color: Choose your new custom background color from the color picker.
  • Background Image: Select an image from the uploader or insert an image url to use for the header background image.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
  • Header 7 Banner Image: This option is only available in header 7, and lets you upload Ads image to be shown in the top of the page (baside the logo).
  • Header 7 Banner Link: Ads link to be set on the header 7 banner image.
Logo settings
  • Site Title: Choose your new custom background color from the color picker.
  • Logo Font Family: Select an image from the uploader or insert an image url to use for the top bar background image.
  • Logo Font Size: This option lets you choose if the background will fit the container width and height or not.
  • Logo Font Weight: Colorizing the line separators between texts or links in the top bar.
  • Logo image: Colorizing the text in the top bar.
Slogan settings
  • Site Slogan: Choose your new custom background color from the color picker.
  • Slogan Font Family: Select an image from the uploader or insert an image url to use for the top bar background image.
  • Slogan Font Size: This option lets you choose if the background will fit the container width and height or not.
  • Slogan Font Weight: Colorizing the line separators between texts or links in the top bar.
Sticky Header settings
  • Enable Sticky Header: Lets you choose Enable / Disable Sticky header.
  • Background color: Choose your new custom background color from the color picker.
  • Background Opacity: Range fron 0 to 1 to the background transparency.

Appearance

Property Description
General options
  • Page Transitions Enable / disable Page Transitions.
  • animation In: choose how the page transition (IN) animation.
  • animation Out: choose how the page transition (Out) animation.
  • Enable Smooth Scroll on the page: This option Enable / Disable the smooth scroll on the page.
Layout options
  • Choose layout: Choose the Wide or Boxed Layout of your site.
  • Body Background color: Choose your new body custom background color from the color picker.
  • Body Font color: Choose your new custom body font (text) color from the color picker.
  • Use patterns ?: if enabled a Custom body pattern background image will be used.
  • Pattern Background Image: Select an image from the available 10 patterns to use for the body background image.
  • Upload Background Image: Select an image from the uploader or insert an image url to use for the body background image.
  • Fixed Background: if enabled the body background image will be fixed with page scroll down.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
  • Responsive Layout: if Enabled the responsive design features will be activated. If unselected then the fixed layout is used.
  • Content Width: if not responsive layout type here the main container width in (px) or (%) etc... and this will apply the fixed layout.

Page Titles

Property Description
  • Page Title Style: Choose from the available 10 page title styles.
  • Custom Height: type the custom page title height in px or em.
  • Page Title icon: Select page title icon from the popup to be shown in the page title block.
Custom Page Title Background
  • Use Custom Page Title Background?: if enabled the page title will display a custom background image from below.
  • Custom Page Title Background: Select an image from the uploader or insert an image url to use for the page title background image.
  • Fixed Background: if enabled the body background image will be fixed with page scroll down.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.

Colors

Property Description
Theme Color

Select the theme color that will be applied on all elements of your site. (Light & Dark theme colors)
Predefined Color Schemes
  • 12 Predefined skin colors choose the one from existing skin files to be applied on all colored elements on your site.
  • Last choice is CUSTOM COLORS: Choose your new custom skin color from the color picker..

Typography

Property Description
Body Typography

Select the BODY font family from the font selector and also select font size, font weight and line height of all body elements EXCEPT:

The Menu typography, The Sub Menu typography and The Headings typography are not affected by this option because they have their own settings.
Menu Typography

Select the Menu font family from the font selector and also select font size, font weight and line height of all body elements EXCEPT:
Sub Menu Typography

Select the Sub Menu font family from the font selector and also select font size, font weight and line height of all body elements EXCEPT:
Headings Typography

Select the Headings font family from the font selector and also select font size, font weight and line height of all body elements EXCEPT:

Blog options

Property Description
Blog listing page settings
  • Blog Listing Style: Select your prefered blog posts listing style and they are:
    1. Large image.
    2. Small image.
    3. Timeline.
    4. Masonry.
    5. Grid.
  • Blog Sidebar: Select how the layout will look (With right sidebar or left sidebar or witout sidebar).
  • Excerpt Length: the text length that appears in the posts list description.
  • Pager Type: We have 3 pager types (Numeric + Navigation pager and Older Newer page or Load more pager).
  • Numeric + Navigation Pager Style: Numeric pager have 6 styles that you can choose from them the one suits you.
  • Numeric + Navigation Pager Position: control the pager position (Left, Right and Center position).
Single blog post page settings
  • Show Post Image: if enabled the post details page will show the post image.
  • Show Date: if enabled the post details page will show the date.
  • Show By Author: if enabled the post details page will show the author.
  • Show Category: if enabled the post details page will show the post category.
  • Show Post Content: if enabled the post details page will show the post content.
  • Show Tags: if enabled the post details page will show the tags.
  • Show Social Sharing options: if enabled the post details page will show the share buttons.
  • Show Post navigation: if enabled the post details page will show the next post, previous post links navigation.
  • Show Comments: if enabled the post details page will show the post comments.
  • Show Related Posts: if enabled the post details page will show the related posts block.

Sidebars

EXCEPTION Comes with Unlimited SideBars Feature that enables you to add unlimited numbers of side bars in your wordpress site.

to do this click on add sidebar, a new textbox will appear, then add your sidebar name and hit save changes button.

Social icons

This option adds 24 social icon to your site with links to your social media pages, just type the link in the approperate textbox and an icon will be shown on your site.

WooCommerce

Property Description
  • Show Side Bar: In the shop pages select to show / hide the shop sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
  • Products Columns: Number of products columns per row.
  • Pager Style: Select from 6 available styles the one suits you.
  • Pager Position: control the pager position (Left, Right and Center position).
Single Product page settings
  • Show Side Bar ? In the product page select to show / hide the shop sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .

BBPress (Forums)

  • Show Side Bar: In the shop pages select to show / hide the forums sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
  • Pager Style: Select from 6 available styles the one suits you.
  • Pager Position: control the pager position (Left, Right and Center position).
  • Show Welcome message: Show / Hide welcome message on the top of the forum index page.
  • Welcome Message: Type the text that appears in the welcome message on the top of the forum index page.
  • Enable Forum Icons: if Enabled, you can add image ( or icon ) beside the forum name and this will apear in the foums list.

BuddyPress

  • Show Side Bar: In the shop pages select to show / hide the buddypress sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .

Downloads

  • Show Side Bar: In the shop pages select to show / hide the downloads sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
  • Downloads Columns: Number of Downloads columns per row.
  • Pager Style: Select from 6 available styles the one suits you.
  • Pager Position: control the pager position (Left, Right and Center position).

Contact

Property Description
  • Contact us style: Select contact us page style from the 4 predefined styles.
  • Contact description: Type here your description that will appear at the right side of the contact page.
Google Map Settings
  • Show Google Map: Show / Hide Google map.
  • Map Height: control the google map height, just insert heigh in numbers.
  • scrollwheel: choose to enable / disable scrollwheel on the google map.
Contact Locations

Click on Add Office and you will be able to add unlimited number of offices:

  • Office Location: Type here your office location that will appear at the right side of the contact page.
  • Office Address: Type here your office address that will appear at the right side of the contact page.
  • Office Email: Type here your email address that will appear at the right side of the contact page.
  • Office Phone: Type here your office phone number that will appear at the right side of the contact page.
  • Office FAX: Type here your office fax number that will appear at the right side of the contact page.
  • Latitude: insert the Latitude that provided in google maps iframe code.
  • Longitude: insert the Longitude that provided in google maps iframe code.

Coming Soon Settings

Property Description
Page Settings
  • Enable Maintenace Mode: If YES the site will be closed except for admins (Maintainace Mode Enabled).
  • Large Heading : Large Welcome heading text will that will be shown on the top of the content.
  • Large Heading Color : Choose a solid color for the coming soon Large Heading color.
  • Large Heading 2 : Large Welcome heading 2 text will that will be shown below large heading.
  • Large Heading 2 Color : Choose a solid color for the coming soon Large Heading 2 color.
  • Description: Enter here your description text to tell visitors about your site or any other info.
  • Description Color : Choose a solid color for the coming soon Description color.
  • Show Counter: Show / Hide Count-down timer that tells the visitors about the opening time.
  • Date: Choose your date from the date picker that open by clicking the textbox.
  • Digits Background Image: Select an image or insert an image url to use for the coming soon main digits background.
  • Digits color: Choose a solid color for the coming soon Digits color.
  • Digits Bottom text color: Choose a solid color for the coming soon Digits Bottom text color.
Social icons
  • Show Social Links: Show / Hide the social links under the Counter.
  • Social Links textboxes: In each textbox type your social pages links.
  • Social icons Background color: Choose a solid color for the coming soon Social icons Background color.
  • Social icons Hover Background color: Choose a solid color for the coming soon Social icons Hover Background color.
  • Social icons color: Choose a solid color for the coming soon Social icons color.
  • Social icons Border color: Choose a solid color for the coming soon Social icons Border color.
Coming Soon Styling
  • background color: Choose a solid color for the coming soon main container background.
  • Background Image: Select an image or insert an image url to use for the coming soon main container background..
  • 100% Background Image: Check this box to have the top bar background image display at 100% in width and height and scale according to the browser size..
  • Background repeat: Select how the background image repeats.
  • Fixed Background: Please choose parallax effect for the backgroud.

Custom Shortcodes

EXCEPTION comes with 13 custom shortcodes + the 67 default shortcodes from Visual composer. to see how to use the default visual composer shortcodes just go to visual composer documentation and follow the steps.

Now Let's Explain the Row Properties in visual composer: As you see the following image , the numbers on each item describes what it do.

  1. Edit the row properties.
  2. Copy row.
  3. Delete row.
  4. Row columns.
  5. Add new element in the row
  6. Edit existing column in this row.
  7. Delete existing column in this row.
  8. Add new element in the row

Now we'll see how to use the custom shortcodes

Add New Row

Row Shortcode is default visual composer shortcode but we made some modifications to suit our new design, let's see how to configure it:

When you click add new element, a popup window will appear (like the next screenshot), Click on Row then a new element will be now seen in the content area, check the next image:

1) Gereral Row Properties



  1. If Checked the row will take full width of the container.
  2. If Checked the row content will be stretched to full width not centered in the page container.
  3. Select the padding values Top and Bottom for this row. (Normal: 40px, X-small: 10px, Small: 20px, Large: 80px, X-large: 160px,No Padding: 0px )
  4. Assign ID to this Row, This will be required in ONE-PAGE Creation.
  5. Add Extra class name to style this row individually.


2) Design Options



  1. Row Background Color
  2. Row Background Image
  3. Row Background Image properties: background repeat, background position and the third select is to make it fixed or scroll with mousewheel.
  4. This option lets you choose if the background will fit the container width and height or not.
  5. Apply Parallax effect on the background image.
  6. Create Layer over the background image.
  7. The background color of the overlay layer.
  8. The Overlay transparency level, Value from 0 to 1.
  9. Text color in this Row


3) Video Background



  1. Video in mp4 format you can upload it or type an external link from other url
  2. Video in webm format you can upload it or type an external link from other url
  3. Video in ogv format you can upload it or type an external link from other url

Column Settings

Column Shortcode is default visual composer shortcode but we made some modifications to suit our new design, let's see how to configure it:

When you click edit element, a popup window will appear (like the next screenshot), check the next image: 




  1. Choose the way to animate this column.
  2. Animation duration in milliseconds.
  3. Animation Delay in milliseconds till this column appears.

Heading 2

When you click add new Heading 2, a popup window will appear (like the next screenshot), check the next image: 




  1. Heading Title Text.
  2. Select tag h1,h2,h3,h4,h5 and h6.
  3. Align Heading Left, Right or Center.
  4. Select heading style from available 8 heading styles.
  5. Select Heading font weight.
  6. Custom Heading Color from color chooser.
  7. Select text style (uppercase or normal).
  8. Add Icon beside the heading text.
  9. Select how the heading will be animated.

Icon Box

When you click add new icon box, a popup window will appear and have some properties that can be:

1) General
  1. Box Title: Enter text for box title.
  2. Box Content: Enter description text for box content.
  3. CSS Animation: Select animation type, delay and duration.
2) Box Icon
  • Box Icon: Select your icon from icons chooser.
3) Extras
  1. Box Link: Enter link for read more button.
  2. Box Style: Select box style from available 10 box styles.

Testimonials

When you click add new Testimonials, a popup window will appear (like the next screenshot), check the next image:

Click Add element and a new popup will appear with only one child element in it ( Testimonial BlockQuote ), click it and the properties will appear:



  1. Author name
  2. Text (BlockQuote) by this author
  3. Slogan or Company name for this author
  4. Upload or select an existing image for this author.

Fun Staff

When you click add new Fun Staff Row, a popup window will appear (like the next screenshot), check the next image:

Click Add element and a new popup will appear with only one child element in it ( Fun Staff ), click it and the properties will appear:



  1. Title for this fun staff item
  2. Item Value in numbers that will be aniamted.
  3. Select your icon from icons chooser.

Recent Posts

Hint This shortcode is specially designed for the news magazine page, but if you need to use it in other page or for other purpose it is Ok.

When you click add recent posts, a popup window will appear and have some properties that can be:

  1. Item Title: Enter the title for this box.
  2. Category: Select the posts category that will be shown.

Posts From Category

Hint This shortcode is specially designed for the news magazine page, but if you need to use it in other page or for other purpose it is Ok.

When you click add Posts From Category, a popup window will appear and have some properties that can be:

  • Category: Select the posts category that will be shown.

News In Pictures

Hint This shortcode is specially designed for the news magazine page, but if you need to use it in other page or for other purpose it is Ok.

When you click add News In Pictures, a popup window will appear and have some properties that can be:

  1. Item Title: Enter the title for this box.
  2. Category: Select the posts category that will be shown.

Posts Slider 2

Hint This shortcode is specially designed for the news magazine page, but if you need to use it in other page or for other purpose it is Ok.

When you click add Posts Slider 2, a popup window will appear and have some properties that can be:

  1. Item Title: Enter the title for this box.
  2. Category: Select the posts category that will be shown.

Clients

When you click add new Clients, a popup window will appear (like the next screenshot), check the next image:

Click Add element and a new popup will appear with only one child element in it ( Client ), click it and the properties will appear:



  1. Upload or select an existing Client image.
  2. Link for the client page

Team Member

When you click add new Team Member, a popup window will appear (like the next screenshot), check the next image: 




  1. Upload or select an existing Member image.
  2. Type Member name.
  3. Type Member position.
  4. Type Member Description text.
  5. Select Team member style from available 2 Member styles.

Counter

When you click add new Counter, a popup window will appear and have some properties that can be:

1) General
  1. Item Title: Enter text for item title.
  2. Title Color: select title color from color chooser.
  3. Title Size: Type title font size in px or em.
  4. Description: Enter item description text.
2) Counter Values
  1. From: start number.
  2. To: end number.
  3. Start After: Enter the delay time that the numbers begin counting after it ( in milliseconds ).
  4. Numbers Color: select numbers color from color chooser.
  5. Numbers Size: Type numbers font size in px or em.
3) Icon
  1. Item Icon: Select your icon from icons chooser.
  2. Icon Size: Type icon size in px or em.
  3. Icon Color: Select your icon color from color chooser.
  4. Clear after icon ?: makes the icon in a separate block clear befor and after it.

Counter 2

When you click add new Counter 2 without icon, a popup window will appear and have some properties that can be:

1) General
  1. Text Before: Enter text before the numbers.
  2. Text After: Enter text for after the numbers.
  3. Text Color: select text color from color chooser.
  4. Text Size: Type Text font size in px or em.
2) Counter Values
  1. From: start number.
  2. To: end number.
  3. Start After: Enter the delay time that the numbers begin counting after it ( in milliseconds ).
  4. Numbers Color: select numbers color from color chooser.
  5. Numbers Size: Type numbers font size in px or em.

Dividers

When you click add new Divider, a popup window will appear and have some properties that can be:

  • Divider Style: Select the divider style from 10 available styles.
  • CSS Animation: Select animation type, delay and duration.

Custom Page Options

Notic: These options are applied individually on the page you are editing only, so this can give the page a custom options such as hiding header, footer, customizing the page title for this page only. As a result for that, you can build all your site pages and posts with different styles.

Option Description
Page Title Settings As Explained in the theme options you can do all above steps in this section, you can hide page title, add custom background image, custom icon, set different page title style from the 10 available, set custom height, custon colors and also set custom video background, and too many other options.
Header Settings Show / Hide header and top bar, set different header style.
Footer Settings Show / Hide Footer, set different footer style.

Create Or Modify One Page

To Create a One Page you have two important tasks :

1) Menu configuration

Important: All links you created in this menu we'll create a Rows in the page with number equals to these menu items number.




2) Page configuration

codecanyon Plugins Documentations

Plugin Name Documentation URL
Essential Grid WordPress Plugin LINK
Go - Responsive Pricing & Compare Tables for WP LINK
Visual Composer: Page Builder for WordPress LINK
Slider Revolution Responsive WordPress Plugin LINK
Layer Slider WordPress Plugin LINK

Credits