XTRA Theme Documentation

Thank you for purchasing our theme

If you can't find your answer on this documentation, visit our Support Center

Getting Started

To use XTRA theme you must have WordPress engine installed. We assume you have a working version of WordPress already up and running. We also encourage you to actively use the links below. These useful resources cover most of general WordPress questions you may have:

Server Requirements

According to WordPress official web site, To run WordPress they recommended your host supports:

Setting these values will ensure you will not get error messages during the installation. To safeguard your website, please use secure passwords and the latest version of WordPress and plugins. To avoid any errors that might come up during the installation we recommend to have memory limit set up to 512M. If you are in a legacy environment where you only have older PHP or MySQL versions, WordPress also works with PHP 5.6+ and MySQL 5.0+, but these versions have reached official End Of Life and as such may expose your site to security vulnerabilities.

Mehod 1: Theme Installation Via Admin Panel

First of all you need to download the theme installable file from your account that purchased item, go to your ThemeForest Account > Downloads Tab

Now go to your site Dashboard > Appearance > Themes and click on Add New Theme like below

Now click on Upload Theme

Choose zipped file that you have Downloaded from ThemeForest and click on Install button, then wait for installation process

Final step click on Activate theme

Mehod 2: Theme Installation Via FTP

If you can't install theme via method 1, So try this way:

Plugins Installation Process

After activating the XTRA theme, you will see message that tells you to install required plugins, click on Begin Installing Plugins or if you can’t see that message, Go to Appearance > Install plugins and star install all the plugins

Next step select all the plugins and change drop down menu to Install then click on Apply button and wait for installation process

After installing plugins you will redirect to plugins list, again select all the plugins and change drop down this time to Activate and click on Apply button then wait for activation process

If you faced any problem or couldn’t install plugins, feel free to contact us.

Method 1: Quick Demo Import Process

Our theme have 1 Click Demo Importer, so you just need go to Theme Options > Demo Importer or Appearance > Customize > Demo Importer and import your demo like below example shot:

Method 2: Import Demo Manually

If you want to import demo data manually, then follow below steps:

Child Theme Installation

This is optional and not neccessary, but if you want to install child theme, Exactly like Theme Installation process, after installing original theme install xtra-child.zip file and activate it. You can find child zip file in full package that you've downloaded from themeforest.

Please note: Parent theme should be deactive and DO NOT delete it.

Installation Troubleshooting

Update Guide for Theme and Plugins

Its Important that after updating theme or plugins, Clear / Delete your browser Cache.

If you want to update WPBakery Page Builder or Revolution Slider plugins, Delete them and then install new versions from Appearance > Install Plugins

Demo Edit Guide

Via edit guide you can find where to edit elements, header, footer, etc.

Create a New Page or Post

By this quick tutorial you will learn how to create a new page(s) or post(s) on your website

Page Builder Video Tutorials

WPBakery Page Builder (formerly Visual Composer) video tutorials will quickly guide you through everything you need to know about WPBakery Page Builder to create WordPress site. Video tutorials are created in a way that even pro WPBakery Page Builder user or WordPress developer will discover helpful tips and hidden features of the most popular page builder plugin for WordPress.

Click here to visit page builder Video Tutorials Academy

Back-end Editor with Page Builder

Click on Backend Editor button then you will see page builder welcome screen like this

Now click on + Add Element then you will see list of page builder elements, select Button element

Now you can see button element has been added to page builder editor and you can also see button settings modal box, So make your changes and click on save button. Now update page and see your page live.

Front-end Editor with Page Builder

Click on Frontend Editor to see live editor page builder welcome screen like second shot

Set Slider for Specific Page(s)

Our theme is fully compatible with an extremely powerful Revolution Slider plugin.

Now insert new slider title and slug then click on save icon and wait for loading next page.

Follow below shot to add Background Image for your slide

Follow below shot to add title, caption, etc. to your slide

If you want to create another slider click on Add Slider area and do steps again to add background and title or etc.

Finally go to Dashboard > Pages and edit your page which you want to have slider and like below shot go to page settings and set slider name.

Revolution Slider Documentation and Videos

Click here to visit Slider Revolution documentation and tutorials

Click here to visit Slider Revolution youtube channel

Menus

The theme supports various menu styles and locations. You can set it in Appearance > Menus > Manage Locations section. See the location of menu areas on the screenshot below:

You can assign a separate, pre-created menu to any of the locations. For showing any locations on your website, Go to Theme Options > Header > Header and add Menu elements and choose location.

Adding icon to menu items

The theme supports icon for each menu items, Go to Appearance > Menus and edit menu(s) that you want to add icon, then like below shot Choose your icon.

If you want to keep only icon without menu label/title, then check Only Icon option.

Mega Menu

See this 3 minutes video tutorial to learn how mega menu works. Mega menu drop down design is according to your imported demo or your changes on menu drop down settings.

OnePage Menu for a Specific Page

If you want to have one page menu with scroll to anchor feature, Then go to Appearance > Menus and create a new menu then assign it to OnePage Location

Then go to Pages and edit your page that you want to have OnePage menu and from page settings, Check OnePage menu

Please Note: in OnePage menu feature, your menus URL should be have like this #section_about

Where to Enable Sidebars and Widgets?

The theme supports multiple location sidebars area, Go to Appearance > Widgets You can see available sidebars and widgets, Example for overall site sidebar's in first step you need to add some widgets inside your primary sidebar, like below shot:

After adding widgets go to Theme Options > General > Sidebar Position and choose sidebar position, like below shot:

If you want to add different widgets for portfolio or shop, First you need to set some widget from Appearance > Widgets to portfolio or product sidebars, then go to Theme Options > Portfolio or Theme Options > WooCommerce and choose sidebar position. Also do same steps for other post types.

Footer Widgets

In this theme you can have up to 6 columns sidebars area for footer, Go to Appearance > Widgets and add widgets into Footer 1 to Footer 6

Now go to Theme Options > Footer > Footer Widgets and select footer layout mode:

Shop Pages Sidebar and Widgets

In this theme you can have up to 2 columns sidebars area for shop pages, Go to Appearance > Widgets and add widgets into Product Primary and Product Secondary sidebars area

Then go to Theme Options > WooCommerce > Settings and select Sidebar Position

Portfolio Pages Sidebar and Widgets

In this theme you can have up to 2 columns sidebars area for portfolio or other post types pages, Go to Appearance > Widgets and add widgets into Portfolio Primary and Portfolio Secondary sidebars area

Then go to Theme Options > Portfolio > Settings and select Sidebar Position

Theme Options

Theme Options is located in Appearance > Customize and all the options are live, it means you can see changes before publish and save.

General Settings

Typography

Typography - In the Typography panel you can set Google fonts or change fonts size of overall website. For example if you think your site overall font size is small, then click on Body StyleKit then set font size to 26px to see changes. There are over 870 google fonts that you can set for Body or Headlines, Please note, Only use 1 or Maximum 2 fonts on your site because site speed issue. If you want to use custom font in your WordPress editor in posts, Then from last option in typography panel, Add some fonts, then in WP Editor you can access them.


Header

Header Builder Video

Title and Breadcrumbs

Footer

Footer Builder Video

Blog

If you want to change number of posts for blog pages, Go to Dashboard > Settings > Reading

How to Create Custom Blog Archive Template?

In our theme you can create custom blog template with page builder posts grid element. Please follow steps below to create and setup your website custom blog page.

Go to Dashboard > Pages > Add New, create new page and name it My Blog Template

Then publish page and click on Front End editor button above text editor and after loading page, Edit your Posts Grid Element and create your design, then update page.

Finally go to Appearance > Customize > Blog > Blog Settings and Choose your new blog template like below shot:

For setting number of posts, Go to Dashboard > Settings > Reading

Portfolio

How to Create Custom Portfolio Archive Template?

In our theme you can create custom portfolio template with page builder posts grid element. Please follow steps below to create and setup your website custom portfolio page.

Go to Dashboard > Pages > Add New, create new page and name it My Portfolio Template

Then publish page and click on Front End editor button above text editor and after loading page, Edit your Posts Grid Element and create your design, then update page.

Finally go to Appearance > Customize > Portfolio > Portfolio Settings and Choose your new portfolio template like below shot:

WooCommerce

Backup / Reset

Other Options

For adding favicon go to Theme Options > Site Identity and upload your favicon.

Page Builder Theme Elements

In this theme page builder have over 100 elements that near half of them are premium that only our theme have.

Theme Elements Advanced Settings

Each theme elements have some common settings that you can find them under Advanced tab. Some elements have all of these settings and others have some of these settings.

Element: 2 Buttons

Two stylish buttons stick together splitted by separator text or icon.

Element: 360 Degree

360 degree rotate image with mouse move or handle

Element: Accordion and Toggle

Show and Hide large content at any time. Add accoridon to the page then click on accordion + container and add Accordion Child element, Again you can see + icon, Click on it to add any elements inside accordion child. Do same steps after adding Accordion Child to add more accordion items.

Element: Animated Text

Awesome text animation changes with CSS3 and custom delay.

Element: Banner

Image box banner with title, caption and awesome hover effects and styles

Element: Before and After

Before and after images comparison, Compare two image with each other

Element: Button

Fully customizable and stylish button with a lot of different effects

Element: Carousel

Carousel element, You can add any element inside carousel such as image, text, gallery, video, etc. First add carousel via page builder then click on + to add elements into carousel, By editing carousel settings you can set number of slider and other settings.

Element: Contact Form 7 Pro

Contact form 7 with custom StyleKits and more ability to design inputs, buttons, etc.

Element: Content Box

Content box is a magical element, It haven't any content by defualt but you can add anything inside it and make different styling to overall content box styling, such as background, color, border, CSS hover effect, etc. You can find example in our theme demo preview.

In bellow shot, You can see, I set color and background color for content box and added text element inside content box.

Element: Countdown

Time reminder for event with stylish designs or minimal, there are multiple different presets that you can use. Also this element supports Count down, Count up and loop timer

Element: Counter

Count from 0 to the certain number that you want

Element: Free Line

Rotatable stylish line with custom size, vertical or horizontal support

Element: Free Spot Element

This element is made for professional users only, You can add any element inside this element and drag it anywhere you want, While you are dragging element, Element settings modal box should be open to get position. Position will set from parent column location.

Element: Gallery

Powerful stylish Gallery element with over 20 different gallery templates. Grid, Masonry, Metro, etc. All parts and styling are customizable.

Element: Gap

Gap element is a useful element that you can insert between other elements. Its smart which means you can set different height size for different devices desktop | tablet | mobile

Element: Google Map

Custom modern Google Map element, fully customizable colors, sizes, styling, pin, information, etc.

Element: Gradient Title

Title with inside gradient background color or background image or gif animation for background purpose

Element: History Timeline

History of events timeline, Minimal and easy to use, Insert a History Timeline element then click + to add text element inside it for description

Element: Hotspot

Element: Image

Element: Image Hover Zoom

Element: Login and Registration

Element: Music Player

Music Player suitable for single or multiple tracks, supports MP3 format, You can change color of player.

Element: News Ticker

Display trending posts titles as ticker slider, All styling are customizable, you can filter posts by custom query.

Element: Parallax Layers

Display trending posts titles as ticker slider, All styling are customizable, you can filter posts by custom query.

Element: Popup Modal Box

Show popup modal box on page loads or by click on custom button or link, Popup can contains any element inside itself and its fully customizable.

Element: Posts Grid

Display blog or other post types posts as Grid | Masonry | Metro styles anywhere you want. Fully customizable and filterable.

Element: Process Line Vertical

Display process content in vertical mode with number or specific letter.

Element: Process Road

Icon and line to four directions, Instead icon also image or number or letter is allowed, Also you can customize icon styling

Element: Progress Bar

Show skills progress bar from 0% to specific percentage up to 100%, Fully customizable and unlimited colors

Element: Quote

Display your quotes with name, subname and image of quote owner with unlimited styles

Element: Separator

Over 30 custom row or columns separator with unlimited colors and multiple directions.

Element: Services

Show service box with icon, number, image, title and description with stylish presets and unlimited styling options.

Element: Show More and Less

You can show a part of content or text or elements and by click on Show More, you can see full text and content, This item is really useful.

Element: Icons

Add single or multiple icons, social icons, icons with inline title, etc. Fully customizable with nice features.

Element: Stylish Lists

Make unlimited lists with full control over styling, colors, sizes, icons, etc.

Element: Subscribe

Subscribe form suitable for newsletter, subscribe, mailchip, feedburner, search or etc. Fully customizable with presets.

Element: SVG Cover

Add your images with awesome modern SVG covers with over 20 styles

Element: Tabs

Add unlimited tabs and include any element inside tabs content such as text, video, image, etc.

Element: Team Member

Add team member item with image, title, subtitle, social icons, hover effect and unlimited styling.

Element: Testimonials

Show you clients testimonial with their photos, names, sub names, etc. You can also customize all styles.

Element: Timeline

Custom timeline element with 3 position of inner children, unlimited colors and you can add any element inside each timeline items.

Element: Title and Text

Advanced title and text element with extra styling, extra line, custom icon, new shape feature, etc.

Element: Twitter

Show your latest tweets as a widget anywhere you want in your site.

Element: Video Player

Video player as popup on click or as inline iframe on click on same posiiton.

Element: Working Hours

Show working hours of days with working times, every parts have StyleKit

Frequently Asked Questions

Scroll down to read some important frequently asked questions, These are really helpful, please read them before submiting any support ticket. Thanks

How to change theme primary colors?

Go to Theme Options > General > Theme Colors > Primary then you can change theme primary or secondary colors or customize general styles.

How to change site width size?

Go to Theme Options > General > Layout > Width then you can change site width with px or %, example 1200px or 80%

How to change footer Copyright text?

You can find and change copyright text from Theme Options > Footer > Footer Bottom Bar, Usually like blow shot (Because elements are generate dynamically, It may you see it in the different place)

Set Home page and Blog page

How to Change Site Background?

For changing site background Colors or Image, go to Theme Options > General Settings > Theme Colors and find Body background StyleKit, Click on it to open body styles options, Like below image add background or change color

If you want to add or change background color or image of specific Page or Post, So edit your page or post and in page meta settings find Page Background Style Kit, Like below image:

Make sure to Update your page/post after making any changes in the Page Settings otherwise they won’t work on your live site.

Parallax Background Effect for Row

Add easy to use parallax effect to your WordPress site with WPBakery Page Builder. Easy to add parallax background for any row.

Maintenance Mode and Coming Soon

Our theme have built-in maintenace mode feature and you can create page and assign it for maintenance mode. Go to Dashboard > Pages > Add New and like below shot create your maintenance page and set page settings.

Now go to Theme Options > General > Advanced Mode and set maintenance page, like below shot, Now all your site visitors will redirect to maintenance page automatically.

Custom Page 404

If you want to have custom page for error page 404, So go to Dashboard > Pages > Add New and create new page like below shot:

Now go to Theme Options > General > Page 404 and set new page 404

Translation and Multilingual

Our product is fully translation ready! The translation file is located in Codevz plugin in the /lang/ folder, We recommend WPML plugin, Also you can use POEdit software.

To translate, just follow these steps:

We constantly develop new features, so after downloading a new Version we recommend to check that everything is translated correct. Multilingual website: If you want to create a powerful multilingual website you can use WPML multilingual plugin, thats a powerful, easy and fully compatible with our theme. for more information about WPML Click Here

SEO

Install and use this plugin: WP SEO by YOAST, If you do not want to install any plugin, You can enable theme built-in SEO feature, Go to Theme Options > General > Advanced and enable SEO meta tags.

How to fix error 404 on Portfolio pages?

Go to Settings > Permalinks and Select the default permalinks and Save. Then re-select your preferred permalinks. This will Flush the rewrite rules and should solve your problem. Also make sure that none of your Custom Post Types and Single pages have the same name. If they do, rename the single page, including the slug.

How to change posts date format?

Go to Settings > General and change your site Date Format.

How to change posts per page on blog pages?

Go to Settings > Reading and change posts per page number.

How to disable comments form on specific page?

Edit your page and from top right of screen click on Screen Options, Then check Discussion, Then scroll down under WordPress Editor you can find Discussion section. Now un-check Allow Comments, Please check below shot:

How to import another Demo or Re-import Current Demo?

For new import WordPress can’t re-import pages again even selected demo is different, So go to Dashboard > Pages and delete all the pages, Also delete from Trash, Now you can go to Demo Importer and import new demo.

Enable Page Builder for custom post types

To enable or disable the WPBakery Page Builder (formerly known as Visual Composer) for your website custom post types simply go to Dashboard > WPBakery Page Builder > Role Manager and under the user role you want to set the post types, click on Custom from the drop down then check all the post types you want to use the Page Builder on.

Show Popup Modal Box with Click on Button

This is a example tutorial and you can do it on any pages, For now create a new page from Dashboard > Pages > Add New like below shot:

Now go to the Frontend Editor and add button element then set unique button URL with hash like below

Now add Popup Modal Box element and set same unique ID for it without hash

Click on the Popup hashtag in the page to open popup modal box, then you can add any elements inside it, like below

Login Popup Modal Box on Header

Create a new page from Dashboard > Pages > Add New and name it Login Popup like

Now go to the Frontend Editor and add Popup Modal Box element then set unique ID for it example login_popup

Then click on the Popup hashtag in the page to open popup modal box, then add Login and Register element inside popup

After updating page, Go to Theme Options > Header > Header or other header rows, Then add Icon and Text element, like below shot and set link #login_popup

Now add another Custom Page element and assign Login Popup Page, then save options and check your site login popup :)

Customize Widgets Styling Separately

If you have any available widget on your site pages, You can customize widget styling separatelly, For this purpose go to Theme Options > Widgets > Primary (According to your widget position), Then follow below shot:

How To Add New Custom Post Type?

Simply go to Theme Options > General > Advanced and add your new custom post type(s)

After adding new post type(s), Go to Dashboard > Settings > Permalinks and save it once for fixing error 404 on post type pages

If you want to change slug or title of your new post type(s), Go to Theme Options you can new post type(s) panels

Adding Google Analytics Tracking Code

Adding Google Analytics Tracking Code to your website is very easy, please follow the guide below.

1. Locate your Tracking code: Your tracking code is located in Google Analytics under the Admin panel. Make sure you are copying all the Tracking Code and NOT the user id.

2. Add tracking code to your site: Go to Theme Options > General Settings > Custom Codes > Before closing /head and paste your tracking code

Customize WordPress Login Page

If you want to customize your default WordPress login page, Install and use this free plugin: Admin Custom Login

How to add Custom CSS code to your website?

If you want to add some CSS codes, Go to Theme Options > Additional CSS

RTL Mode

Our theme is compatible with RTL languages sites, If you are running WordPress in your language and its RTL, So theme automatically will loads necessary styles for RTL purpose. If you are not running RTL WordPress and want to load RTL mode styles, So go to Theme Options > General > Layout and turn RTL Mode ON

All page builder elements also supports RTL mode, If you have any questions related to theme, Feel free to contact us.

Theme License and Support

Google Fonts and GDPR Compliance

Install and enable this plugin: Selfhost Google Fonts

Bundled Plugins Licenses

When Premium plugins are Bundled with the theme, you can use the plugins without any problem. All plugins are fully functional even though you don’t get a plugins purchase code for Activation.

Since you purchased a Bundled product, you DO NOT have a license key for that plugins so you can’t enter anything in this field. Updates to the plugins are provided when the theme itself is updated and or via Tickets or via Email.

However, if you want automatic updates and support from the plugin developer you need to purchase it Separately, this is 100% optional.

Sources and Credits

Report Bug or Request Support

If you are having any issues or faced any errors with the theme or have any questions regarding how to use or install the theme, simply you can contact us.

Via our Support Center you can submit an private ticket, our support staff will help you asap.