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:
According to WordPress official web site, To run WordPress they recommended your host supports:
PHP version 7 or greater
MySQL 5.6 or greater OR MariaDB 10.0 or greater
The mod_rewrite Apache module
PHP memory limit 128M and max_execution_time 300
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 Xtratheme.com > My account like below shot
Click on View Details and Downloads and in purchase confirmation page download latest verson of theme file.
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:
Log in to your server via your FTP software ( FileZilla, Transmit, etc )
Unzip the xtra.zip file, ONLY use the extracted theme folder.
Upload the extracted theme folder into wp-content > themes
Activate the newly installed theme by going to Appearance > Themes
Go to Appearance > Install Plugins and install all required plugins
Simply click the Install button on each plugin to install them
Done
Theme Activation Process
Go to your xtratheme.com > My account and under Purchase code(s) section find License certificate and purchase code
After copying purchase code go to your site Dashboard > XTRA and insert your purchase code and activate theme
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:
1. Go to Theme Options > Demo Importer and download your demo zip file
2. Unzip downloaded zip package
3. Go to Tools > Import
4. Run WordPress Importer then upload content.xml file and wait until imports complete
5. From demo folder find options.txt and open it > copy all codes > paste it to Theme Options > Backup > Import and click on import button
6. Via Plugins > Add New install this plugin Widgets Importer / Exporter
7. Go to Tools > Widgets Importer / Exporter and upload widgets.wie
8. Go to Revolution Slider and click on Import Slider
9. Import home.zip or any zip file included inside demo folder
10. Go to Settings > Reading and set Home page and Blog page
11. Go to Appearance > Menus and set Menu Location to Primary
12. All done
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
Theme is missing the style.css stylesheet error? It means you have uploaded wrong file, So first download package from themeforest and unzip it, now in folder find theme xtra.zip file and upload it from Appearance > Themes > Add New
Fatal error: Can't use function return: You should upgrade your server PHP to version 7 or at least 5.6
Fatal error: allowed memory size xx: Increase your server PHP memory limit and check your server error log file.
How to fix white screen (blank) page? Increase your server PHP memory limit and check your server error log file.
HTTP ERROR 500: You should upgrade your server PHP to version 7 or at least 5.6
Internal Server Error: You should upgrade your server PHP to version 7 or at least 5.6
What to do if demo content import fails? If the import stalls and fails to respond after a few minutes, or it fails with a simple error message like “Import failed,” You are suffering from PHP configuration limits that are set too low to complete the process. You should contact your web host and ask them to increase those limits
Demo data installed correctly, but there's no imges? You either forgot to import attachments when installing demo data, or your server is configured to not allow incoming attachments. You'll need to go through the theme, posts, portfolios and set featured images accordingly.
Seeing a red warning where a revolution slider should be? You just need to import the demo slider included in your themes demo data folder provided in your package.
No Menus?! Help! This is simple, go to appearance -> menus and set your registered menus to a theme location.
I'm getting 404 errors on posts, pages! Go to Settings > Permalinks and save permalinks structure.
Update Guide for Theme and Plugins
Theme have automatic updates feature and you can update your theme and plugins from your website admin Dashboard > Updates page or Plugins and Themes page. Bellow also you can learn manually update:
1. (Optional) Backup your theme options before any updates, go to Theme Options > Backup
2. Delete Codevz Plus plugin from Dashboard > Plugins
3. First you must download new theme package from Xtratheme.com, then connect to your FTP and upload new XTRA theme folder to your themes folder instead old XTRA theme folder.
4. After updating the theme, Install new version of Codevz Plus plugin from Appearance > Install Plugins
5. Done
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.
By this quick tutorial you will learn how to create a new page(s) or post(s) on your website
1. To create a new page go to Pages > Add New and for post go to Posts > Add New
2. Insert your new page title
3. Insert some content for this new page
4. Click on Publish button to create this page
5. Backend editor is page builder that allows you to add element in page such as video, button, etc
6. Frontend editor is visual page builder that allows you to add element in page such as video, button
7. Options for editor such as font size, font family, font style and etc.
8. If you want to add HTML code or shortcodes in the editor, change editor mode to text
9. Post status, date and visibility for visitors
10. Page attributes that you can set parent of this page (Optional)
1. Set custom page layout for this page
2. Set custom sidebar position for this page
3. Page content gap, as your needs
4. Body background color or image for this page
5. Hide header only on this page
6. Hide footer only on this page
7. One page menu only on this page
8. Header styling and title or slider settings
1. Custom header position for this page
2. Custom title or slider type
3. Header background or title background of tpage, according to header position and title type
4. Custom styling for page title according to title type
5. Breadcrumbs color and size
6. Background of header top bar
7. Background of middle header row
8. Background of header bottom bar
9. Background of overall header all rows
10. Background of fixed side if theme options was set to fixed side
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 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
1. Page builder logo and loading
2. Add Element(s) in the page
3. Add premade Template(s) in the page
4. Preview mode, Will disable grids and controls of elements
5. Page title option and custom CSS for page
6. View page in responsive modes such as mobile
7. Back to back-end editor
8. Update current page and save changes
9. Close page builder and see live site
10. Add element(s) in the page
11. Add only Text element in the page
12. Add premade template(s) in the page
1. Edit Row settings
2. Change number of Row Columns
3. Prepend column to current Row
4. Duplicate Row
5. Delete Row with its content
6. Column settings
7. Edit element
8. Duplicate element
9. Delete element
10. Its button element
11. Button element settings modal box
12. Add new element in same column after button
Set Slider for Specific Page(s)
Our theme is fully compatible with an extremely powerful Revolution Slider plugin.
1. Go to Appearance > Revolution Slider
2. You can edit your current slider
3. Create new slider
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.
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
Layout
Layout - 3 different types, Full width without border, Boxed with different backgrounds and Boxed margin
Site Width - You can change Site Width with px or %, if you need full width set 98%
Sidebar Position - There are multiple different sidebar positions Left, Right, Double, Mix, etc.
Sticky Sidebars - This will turn siebars sticky on page scrolling, affects on all the pages
RTL Mode - If you want to load RTL styles, turn this option ON
Responsive - Enable styling for mobile and small devices, We recommend to keep this ON
Theme colors
Primary - Example if site color is red and you change it to green, everywhere in site, red colors will change to green
Secondary - Such as primary color, This option only works if you have any second color on the site
Dark Mode - By enabling this option, dark CSS will loads, If you still see any light parts, you need fix them manually
Styles - You can set body background, styling of buttons, styling of widgets, etc. on your needs.
Loading
Loading - By enabling loading option, Your visitors will see loading screen before your site pages.
Page 404
Custom 404 Page - If you want custom page 404, Go to Pages and create your own 404 then assing it here
404 Message - Default page 404 have message that says Page not found!, So you can change it
404 Button Title - In page 404 you can change title of Back to Homepage button title
Custom codes If you want to add custom codes to your site such as meta tags, CSS, JS, etc.
Advances settings SEO options, Custom post types, Maintenance Mode, Lazyload, Popup, etc.
Maintenance Mode - If you assign any page, All of your visitors will redirect to it automatically
Lazyload - Will help you to speed up your site page by loading images on scrolling
Post Types - You can add unlimited post types and manage settings with different templates
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
Logo - Prepare logo image
Logo - Set your site logo and styling logo
Logo Alternative - Such as logo, But its usefull for other ways example custom sticky or footer
Logo Tooltip - Will shows on mouse hover, You can create a page with some text then assing it here.
Social Icons
Social Icons - Add any social icons you want then you can show them in header
Settings - Select hover effect, color mode, tooltip, etc. and customize styling of icons
Header
Left - Left place of top bar header, You can add element such as text or menu
Center - Center place of top bar header, You can add element such as text or menu
Right - Right place of top bar header, You can add element such as text or menu
Container - If you want to set top bar header background click on this stylekit
Row Inner - If you want to set top bar header width size click on this stylekit
Menu Styling - If you have menu on this row, So you can customize styling of it, fully live
Header top bar Exactly like header you can create or edit elements but for top bar header
Header bottom bar Exactly like header you can create or edit elements but for bottom bar header
Sticky Header You can select which header you want to be sticky or such as header create separate sticky header
Mobile and Tablet Header Such as other row you can also create your own mobile header
Fixed Side Fixed side a little different, Because it have Top, Middle and bottom elements location
More If you want to add backround to overall header go there, Additionally header supports extra panel
Header Builder Video
Title and Breadcrumbs
Header Position - You can set header top or header overlay or header after title and slider
Title Type - Global settings for all site pages
None - Disable title and breadcrumbs section on all pages
Title and Breadcrumbs - Its clear, It will show title and or breadcrumbs on pages
Revolution Slider - If you want slider on all site pages, then select this option
Custom Shortcode - If you wish to display something with custom code on all pages, then try this
Custom Page - You can also create an page and assing it here instead title and breadcrumbs section
Settings
Container background - If you want to have background color or image for title section, click on Container stylekit
Page Title styling - If you want to change page title size or font, Click on Page Title stylekit
Breadcrumbs delimiter - Add icon between breadcrumbs items
Breadcrumbs styling - If you want to change page breadcrumbs size or font, Click on this stylekit
Footer
Footer You can set widgets or copyright text, Footer allows you to build 3 row
Top of Footer Exactly like header you can create or edit elements for top bar of footer
Widgets Layout and styling, if you want to add footer widgets go to Appearance > Widgets
Bottom of Footer Exactly like header you can create or edit elements for bottom bar of footer
More Back to top button and quick contact form settings, Will visible in right bottom of website
Footer Builder Video
Blog
Blog You can set blog template, customize posts stylig, search settings, etc.
Blog Settings Set template, layout, translations, etc.
Blog Styling If you set one of default templates, then you can customize all styling of posts for archive pages
Single Settings You can translate important titles, hide or show post meta in single post page
Single Styling Customize single page styling, colors, font size, etc.
Search settings Filter post types, change search title, sidebar position
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
Portfolio Its custom post type for portfolio but you canset new slugs, styling posts, etc.
Portfolio Slug Set template, layout, translations, etc.
Portfolio Settings Set slugs, title, columns, number of posts, etc.
Portfolio Styles If you set one of default templates, then you can customize all styling of posts for archive pages
Portfolio Single Settings You can translate important titles, hide or show post meta in single post page
Portfolio Single Styles Customize single page styling, colors, font size, etc.
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
WooCommerce If you installed WooCommerce plugin then you can manage some of shop settings here
WooCommerce Settings Manage layout, columns, number of products, Single pages, etc.
WooCommerce Styles Customize products styling, colors, sizes, etc.
Backup / Reset
Backup / Reset From Theme Options > Backup, you can download file or copy backup of Options or reset all the settings
Restore or import By pasting in first field you can import your previously backed up file of options
Other Options
Site Identity Set title and favicon for your site
Menus You can edit your site menus items, links, titles, etc.
Widgets If you have sidebar on your site, then you can customize widgets
Homepage Settings Set custom page for home or blog posts page
Additional CSS If you have some custom CSS, so put it there
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.
Hide on Tablet? - You can make this element moveable on scrolling
Hide on Mobile? - You can make this element moveable on scrolling
Parallax - You can make this element moveable on scrolling
Parallax speed - Element parallax move speed on scrolling
Mouse speed - Element move speed on mouse moves
Tilt effect - Parallax on hover tilt effect, a tiny requestAnimationFrame powered 60+fps
Tilt Glare - Glare effect on mouse hover
Tilt Scale - Scale effect on mouse hover
CSS Animation - Show element on page scrolling with custom animation effect
Animation Delay - You can set animation delay time in miliseconds
Extra Class - Allows you to set up additional decorations for element with custom CSS
Element: 2 Buttons
Two stylish buttons stick together splitted by separator text or icon.
Button 1 - The title of button 1
Link 1 - The URL where the link from the button leads to
Button 2 - The title of button 2
Link 2 - The URL where the link from the button leads to
Position - Buttons position available at left | center | right
Styling - Buttons styling baclground, color, typography, etc.
Separator - Separator type available at Text | Icon
Separator Text - Separator content text or number
Separator Icon - Select icon from icons library
Separator Style - Predefined different separator styles
Separator styling - Separator styling baclground, color, typography, etc.
Presets - This element have multiple stylish presets that you can use them
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.
Toggle mode? - Will allows you to open and close each accordion items separatelly
1st open? - Show first accordion item on page loads and hide all other accordion items
Icons before title? - Move open and close icon position before accordion title
Inline subtitle? - If you added subtitle for accordion title, you can make subtitle inline after title
Default icon - Icon for when accordion child is closed
Activated icon - Icon for when accordion child is opened
Icon styling - Open and close icons styling background, color, size, etc.
Container Styling - Overall accordion containers background, padding or border.
Titles Styling - Accordion child title styling color, size, etc. when accordion is closed.
Active title Styling - Accordion title styling when accordion is opened
Subtitle Styling - Accordion subtitle styling such as color, size, etc.
Content Styling - Accordion content styling background, color, padding, etc.
Presets - This element have multiple stylish presets that you can use them
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.
Container styling - You can set background or border for overall carousel
Slides to show - Number of slides you want to show on view
Slides to scroll - Number of slides when slides wants to change
Gap between slides - (px) Margin between each slides, e.x. 20px
Infinite? - Slider without end and after last slide will back to first slide
Auto play? - Start changing slider on automatically after specific time
Autoplay delay - If you set autoplay then you can set specific delay time
Center mode? - Center mode only works if you set slides to show 3 or 5 or 7
Center padding - This is optional, you can fix position of center slide as your needs
Slides styling - Styling for all slides except center slide, you can set opacity, filter, etc.
Center slide styling - Styling for all center slide only, you can set opacity, filter, etc.
Arrows position - Next and previous arrow position, 9 position are available to choose
Arrows inside carousel? - Will display arrows inside slider container on the images
Show on hover? - Only show arrows when mouse hovered on the slider container
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.
Box type - You can set default box content or split box with image and content
Clickable box? - The URL where the link from the button leads to
Image - If you set box type to split box then you can set image here
Image position - Split box image and content position left | right | top | bottom
Hide box arrow? - Split box have arrow on image, You can hide it by check this field
Default effect - By default you can set CSS effect and it works without mouse hover
Hover effect - Also you can set hover effect for content box, there are over 12 effects
Container Styling - You can style content box background, colors, border, etc.
Background layer - Custom background shape with offset to out sides of container
Back Box? - Hidden content on back box and only display hidden content on mouse hover
Back box Title - Title of content on back box
Back box Content - Content of back box
Back box Button Title - Button of content on back box
Back box Button Link - The URL where the link from the button leads to
Back box Content position - There are 9 back box content positon, You can choose
Back box Hover effect - How would you like to show back box content on hover? there are 10 custom effects
Back box Container Styling - You can style back box background, color, border, etc.
Back box Content Styling - Content of back box styling such as color, font, etc.
Back box Title Styling - You can change back box title size, color, font family, etc.
Back box Button Styling - Styling of back box button background, color, border, hover, etc.
Background stretch - This option only works if you set box type to default and set background color of container
Scrollable height - If you have long content in content box, you can set custom height size
Scrollbar Color - If you set custom scrollable height size, then you can set scrollbar color
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
Type - You can choose coutn down or count up or even loop timer
Date - Counter date e.x. 2022/06/20 18:30
Position - Container position left | right | cente | vertical
Minutes (Loop) - If you set element type to loop timer then you can set seconds, e.x. 120 (means 2 minutes)
Day - Translation of Day
Hour - Translation of Hour
Minute - Translation of Minute
Second - Translation of Second
Apostrophe s - Translation of Apostrophe s
Expired message - Translation of expired message
Container Styling - You can set custom background or border for overall container
Columns Styling - You can set custom width or background or border for each columns
Numbers Styling - Style color or size of countdown numbers
Titles Styling - Style color or size of countdown titles below numbers
Expired message Styling - Style color or size of countdown expired message after end timer
Presets - This element have multiple stylish presets that you can use them
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.
Top offset - Top offset from parent columns, If you drag element, automatically will find position
Left offset - Left offset from parent columns, If you drag element, automatically will find position
Custom width - You can set custom width size for container
Custom Rotate - You can set custom rotate for container
Layer Priority - If you have multiple free spot element on each other, Then you can set layer priority for each one
Hover - You can set hover feature, This option wokrs with parent column hover
Loop animation - There are some CSS animations that you can set for your element
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
Height - Custom height size for gap e.g. 50px
Height on Tablet - Custom height size for gap only on Tablet
Height on Mobile - Custom height size for gap only on Mobile
Element: Google Map
Custom modern Google Map element, fully customizable colors, sizes, styling, pin, information, etc.
Google API Key - This is important, You can get your API Key from Here
Lat - Is latitude that you can find it for your address Here
Long - Is longitude that you can find it for your address Here
Zoom - Number of zoom on map, this works reverse mode, 14 is default
Map size - You can set map width and height size in px
Color scheme - Color scheme of map
Custom color - You can set custom color scheme for google map
Grayscale Effect? - You can also set grayscale mode for map
Marker - If you want you can set custom market / pin image for your map
Marker image - Set custom market image, recommended PNG format
Info text - You can insert your office or company information and will display on marker
Show info by default? - Display information on marker by default
Enable mouse wheel? - Enable mouse wheel for zoom in or zoom out on map
Hide map controls? - This will hide all map controls like zoom icons
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
Go to Settings > Reading and 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:
Via FTP connect to you server and go to wp-content > plugins > codevz-plus folder
Create a new .po file with name as your language code (for e.g. German is de_DE.po)
Translate your wanted texts into your language
Hit save, a new .mo file should be created
Upload the new .po and .mo files to lang folder where you have downloaded original file
Done, Now if your site language has been set, So WordPress automatically will load language files
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
If you want to use theme on multiple domains, then you need to buy a regular license per domain.
Your support period will expire after 6 month and you need to extend your support for another 6 months or a year.
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
Framework by CodeStar
Images by Envato Elements, Shutterstock, Unsplash
Fonts by Google Web Fonts
Icons by FontAwesome
Icons by Flaticons
jQuery Isotope by metafizzy.co
jQuery Tilt FX by Gijs Rogé
jQuery NiceScroll by Inuyaksa
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.