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:

What is WordPress? Wikipedia, and WordPress FAQ Read here!
Tutorial of how to Install WordPress? Watch Video
WordPress Lessons Visit Articles

Server Requirements

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
Are You Sure You Want To Do This? Read here
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.

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

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 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

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.

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

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 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
Advanced tab - Click here

Element: 360 Degree

360 degree rotate image with mouse move or handle

Placeholder - Image placeholder on first load
Stripe Image - Horizontal image with multiple view of original image
Frames Count - Number of images on stripe image
Rotate On - Type of rotate on mouse or on hover
Container Styling - Container styling background, border, etc.
Handle - Bottom bar and handle with icon
Handle styling - Handle icon styling background, color, size, etc.
Bar styling - Bottom bar styling background
Advanced tab - Click here

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.

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
Advanced tab - Click here

Element: Animated Text

Awesome text animation changes with CSS3 and custom delay.

Prefix - The text before animated words
Words - The words that you want to make them animate, Separate words by comma
Suffix - The text after animated words
Effect - Over 10 different nice CSS animations
HTML tag - This is optional if you want you can change this element output HTML tag
Animation delay - Delay time in milisecond for text animations changes
Container Styling - Overall container styling such as background, border, etc.
Animated words - Animated words styling background, color, size, etc.
Prefix Styling - Styling of the text before animated words
Suffix Styling - Styling of the text after animated words
Advanced tab - Click here

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

Style - Over 22 predefined styles and hover effects
Title - Set box title, each style title position is different
Caption - Set caption text, this usually showing below title
Link - The URL where the link from the button leads to
Image - Upload your own image for banner box background
Image size - You can set customize size for background if its too big
Image opacity - Box background image opacity percentage
Image hover opacity - Hover background image opacity percentage
Container Styling - Overall container styling padding, background, border, etc.
Title Styling - Title styling color, typography, etc.
Caption Styling - Caption styling color, typography, etc.
Background layer - Custom background shape with offset to out sides of container
Advanced tab - Click here

Element: Before and After

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

Before image - First image at the left side of comparison slider
Before title - Title at the left side of comparison slider
After image - First image at the left side of comparison slider
After title - Title at the left side of comparison slider
Container Styling - Overall container styling padding, background, border, etc.
Handle Styling - Handle background, size, color, margin, etc.
Title Styling - Title styling color, typography, background, etc.
Background layer - Custom background shape with offset to out sides of container
Advanced tab - Click here

Element: Button

Fully customizable and stylish button with a lot of different effects

Title - The button title or text
Subtitle - You can set subtitle below button title
Link - The URL where the link from the button leads to
Position - Button position inline | block | left | center | right
Button Styling - Customize button styling background, color, size, etc.
Icon - Set specific retina icon for button beside title and subtitle
Icon Position - Select icon position before or after button title
Icon Styling - Customize icon styling background, color, size, etc.
Button Effect - Over 18 button hover effects with animation
Text Effect - Over 9 button text effects on hover
Alternative title - If you set text effect then you can set alternative title
Alternative Subtitle - If you set text effect then you can set alternative subtitle
Presets - This element have multiple stylish presets that you can use them
Advanced tab - Click here

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.

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
Previous icon - Previous arrow button icon
Next icon - Next arrow button icon
Previous icon styling - Previous arrows icon styling background, color, opacity, size, etc.
Next icon styling - Next arrows icon styling background, color, opacity, size, etc.
Dots position - 12 Positions are available for carousel bullet dots
Dots style - 7 Predefined carousel dots styles you can choose
Dots inside carousel? - Will display dots inside slider container on the images
Dots show on hover? - Only show dots when mouse hovered on the slider container
Dots color - Carousel dots color scheme
Advanced tab - Click here

Element: Contact Form 7 Pro

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

Contact Form - Select your contact form, If you haevn't, Go to Dashboard > Contact and create a contact form
Container Styling - Overall contact form styling like background, border, padding, etc.
Labels Styling - Labels above inputs styling typography, color, size, etc.
Inputs Styling - Inputs and textarea styling background, color, size, etc.
Button Styling - Buttons styling background, color, size, etc.
Select option Styling - Select fields styling background, color, size, etc.
Select dropdown Styling - Dropdown styling background, color, size, etc.
All Rows Styling - You can add style for each contact form fields rows
Each Fields Styling - You can also customize each rows styling, for example you can set width 48% to field 1 and 2 to see changes
Advanced tab - Click here

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.

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
Advanced tab - Click here

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
Advanced tab - Click here

Element: Counter

Count from 0 to the certain number that you want

Prefix - The text before or above number
Number - Number which you want to count automatically from 0 to it
Symbol - Symbol after number
Suffix - The text after or below number
Position - Potion of container or element children
Duration seconds - How many seconds you want to take count from 0 to your number
Delay seconds - How many seconds you want to stop before starting counter to count
Container Styling - Container styling such as background or border, etc.
Number Styling - Styling of number color, size, font family, etc.
Symbol Styling - Styling of symbol color, size, font family, etc.
Prefix Styling - Styling of prefix text color, size, font family, etc.
Suffix Styling - Styling of suffix text color, size, font family, etc.
Advanced tab - Click here

Element: Free Line

Rotatable stylish line with custom size, vertical or horizontal support

Position - Line positon left | center | right
Line Styling - Line color, width, height, rotate, etc.
Circles Type - Circles two sides of line
Circles Styling - Circles styling radius, color, size, etc.
Advanced tab - Click here

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.

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
Advanced tab - Click here

Element: Gallery

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

Gallery type - There are 3 types Gallery | Instagram | Linakable that you can set custom link to images
Add images - Add your gallery images one by one each one can have link, title, etc.
Images - Add your gallery images
Username or Hashtag - Instagram Username (Account should be public) or Hashtag (Hashtag should be like this #business)
Count - Number of images to show, Maximum 9 images
Update cache - Update transient for getting new data from instagram, Recommended 72 hours
Images size - Instagram images sizes
Layout - Gallery templates, There are more than 20 gallery styles
Custom size - You can set custom images size e.g. 400x600
Images gap - Custom margin / gap between gallery images
Ideal height - If you set layout 1, So you can set custom ideal height for images
Hover style - Choose hover style of icon, title and caption of images
Intro animation - Custom animation for loading images on first load
Details align - Title and caption position on image or after image
Hover visibility - Hover details and icon visibility mode, Show on hover or keep showing
Hover effect - Custom CSS hover effect for icon, title and caption
Hover image effect - Custom image effect on mouse hover
Icon - Select icon, this will show on image hover
Container Styling - Overall styling background, border, shadow, etc.
Gallery items Styling - Styling for each items such as background, border, shadow, etc.
Images Styling - Styling for images only, border, shadow, etc.
Overlay scale - Gallery items have overaly color on hover, You can change scale size of it
Overlay Styling - You can change overlay hover color or add custom border
Icon Styling - Style icon on hover with color, size, background, etc.
Title Styling - Images title styling such as color, font family, size, etc.
Badges Styling - Linkable gallery items badges styling color, font, size, etc.
Filter Position - If you set linkable gallery and add class for each items, Then you can have filters.
Filter Show all - Translation of Show All button in gallery filters
Filter Container Styling - Styling of overall filters container
Filter Filters Styling - Each filter styling color, background, size, etc.
Filter Active filter Styling - Activated filter styling colo, background, etc.
Filter Filters Delimiter Styling - You can add delimiter between filters, Any charachters allowed
Carousel Settings - Same as Carousel Settings
Cursor image - You can set custom cursor on images hover
Cursor Size and Position - If you set custom cursor, then you can select best size for it
Advanced tab - Click here

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

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
Advanced tab - Click here

Element: Gradient Title

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

Text - Set you text, title, or contnet
Background - Set background colors or image
Presets - This element have multiple stylish presets that you can use them
Advanced tab - Click here

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

Year Title - Add year of event or any title you want
Container Styling - Container styling background, color, etc.
Line Styling - Vertical line styling color, size, etc.
Year Styling - Year title styling color, font, size, etc.
Circle Styling - Circle beside year title styling color, size, etc.
Advanced tab - Click here

Element: Hotspot

Top offset - Top offset in percentage according to parent columns position
Left offset - Left offset in percentage according to parent columns position
Icon - Select hotspot icon
Icon style - Icon predefined styles and sizes
Icon styling - Icon styles background, color, size, etc.
Icon effect - Icon CSS3 animation effect
Effect duration - Animation effect speed
Tooltip type - Over 10 different tooltip with different animations on showing
Tooltip Background - Background color of tooltip area
Tooltip Position - Over 8 different tooltip position you can choose
Tooltip Always open? - If you want to show tooltip content without hover
Content Type - You can select direct content or assign page as content inside tooltip
Page as Content - You can select custom page as content of tooltip, Suitable for adding custom elements
Contnet styling - Tootlip content styling background, color, font size, etc.
Content - Finally add your content of tooltip here
Advanced tab - Click here

Element: Image

Image - Upload your own image
Image Size - Optional you can add custom image size, suitable for resizing image on the fly
Image opacity - You can set custom opacity percentage for current image
Image Position - Available positions are inline | left | center | right | block
Custom Width - This custom size will re-scale image for fit to new size
Link - Lightbox or The URL where the link from the button leads to
Image Styling - Image container styling background, border, shadow, etc.
Background layer - Custom background shape with offset to out sides of container
Hover Image - If you want to have different image on hover then upload your image
Hover opacity - You can set custom opacity percentage for current hover image
Hover effect - Add custom CSS effect when image wants to change to hover image
Tooltip - Tooltip above image on mouse hover, Only allows string
Tooltip Styling - Tooltip styling background, color, border, etc.
Advanced tab - Click here

Element: Image Hover Zoom

Image - Upload your own image in high resolution
Image size - You can set custom size, suitable for resizing image on the fly
Container styling - Container styling border, shadow, margin, etc.
Background layer - Custom background shape with offset to out sides of container
Advanced tab - Click here

Element: Login and Registration

Login form? - Display login form for users
Registration form? - Display registration form for users
Pass Recovery form? - Display password recovery form for users
Show form for admin? - For admin display all forms, For styling purpose
GDPR Confirmation - If you fill this field, Under form will display GDPR message checkbox
GDPR Error - If users do not check GDPR field and submit form, Ajax will return this message
Translation - You can translate all inputs and forms
Container Styling - Overall container styling, Suitable for adding background with padding
Inputs Styling - Styling of inputs background, color, size, etc.
Button Styling - All buttons styling background, color, size, etc.
Button loader Styling - Button loader animation border color
Links Styling - Links color, size and typography
Messages Styling - Returning ajax messages color, size and typography
Title - You can insert HTML code or title above each forms
Title Styling - Title styling color, typography, size, etc.
Advanced tab - Click here

Element: Music Player

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

Track(s) - Add track(s) upload your MP3 file for each track
Player width - Wdith of the player according to parent size
Playlist height - Default playlist height, If you set this, then playlist will have scrollbar
Container styling - Overall player styling margin, background, padding, shadow, etc.
Player styling - Player styling color scheme, border radius, etc.
Only play button ? - Only show play icon and hide all controls
Playlist open? - By default playlist is hidden, If you check this, then playlist will display
Fixed bottom? - This is awesome feature that you can set player fixed in bottom of screen
Dark text? - Will make all text and icons on player in dark mode
Flat? - Flat will removes gradient color scheme of player
Auto play? - Will automatically rub player on page laods
Center mode? - Center mode is according to player width and parent width size
Advanced tab - Click here

Element: News Ticker

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

Type - Type of slider Horizontal | Vertical | Fade
Badge - Badge title or text of new ticker
Auto Play - Number of seconds delay for changing slides
Container Styling - Overall container styling background, border, shadow, etc.
Badge Styling - Badge title styling color, background, border, etc.
Links Styling - Posts titles styling color, typography, etc.
Meta Styling - Posts date meta styling color, size, etc.
Arrows Styling - Slider arrows styling colors
Posts count - Number of posts you want to show in news ticker
Order - Order of posts default or reverse
Orderby - Order by title, date, random or etc.
Category(s) - You can filter posts by categories slugs
Tag(s) - You can filter posts by tags slugs
Search keyword - You can filter posts by specific keyword
Advanced tab - Click here

Element: Parallax Layers

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

Container Styling - Overall container styling of all layers
Extra class - If you want to add custom CSS, then add your custom class
Layers - Add layers with your own images
Image - Upload your own image for this layer
Position - Position of this layer, Its according to left and top of parent container
Item styling - Image or layer styling background, size, radius, shadow, etc.
Parallax - You can make this element moveable on scrolling or mouse moves
Parallax speed - Element parallax move speed on scrolling
Mouse speed - Element move speed on mouse moves
CSS Animation - Show element on page loads with custom animation effect
Animation Delay - You can set animation delay time in miliseconds

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.

Unique ID - This is important field and you need to put specific ID e.g. my_popup_3
Visibility mode? - If you want to show popup on page loads you can set this option
Extra class - Extra class for who need to add custom CSS for this element
Scrollbar? - If you have long text or contnet in popup, then you can limit height of popup
Overlay background - Overally background color behind popup modal box
Popup Styling - Popup content area styling background, color, size, etc.
Close icon Styling - Popup close icon styling color, background, border radius, etc.

Element: Posts Grid

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

Layout - Gallery templates, There are more than 20 gallery styles
Posts gap - Custom margin / gap between gallery images
Posts count - Number of posts to display
Posts details style - Choose hover style of icon, title and caption of images
Icon - Select icon, this will show on post hover
Intro animation - Custom animation for loading images on first load
Meta position? - Meta position before posts title or after title or excerpt
Details align - Title and caption position on image or after image
Hover visibility - Hover details and icon visibility mode, Show on hover or keep showing
Hover effect - Custom CSS hover effect for icon, title and caption
Hover image effect - Custom image effect on mouse hover
Ideal height - If you set layout 1, So you can set custom ideal height for images
All posts Styling - Overall styling background, border, shadow, etc.
Images Styling - Styling for images only, border, shadow, etc.
Overlay scale - Gallery items have overaly color on hover, You can change scale size of it
Overlay Styling - You can change overlay hover color or add custom border
Icon Styling - Style icon on hover with color, size, background, etc.
Title Styling - Images title styling such as color, font family, size, etc.
Posts Meta - Posts meta below title such as date | category | tag | author name | custom text
Meta Styling - Meta details styling color, size, typography, etc.
Meta Icons Styling - If your meta details have icon, you can styling color, size, etc. of icons
Exceprt words lenght - Number of words to show for the post content
Excerpt Styling - Post description styling color, size, background, etc.
Read more button - Do you want to show read more button under post description?
Pagination Type - Pagination type Load more | Infinity | Numbers | Old prev/next
Pagination Position - Pagination position left | center | right
Pagination Title - Load more button title
Pagination End Message - Show this messsage on button when last post reached
Pagination Posts count - Number of posts you want to show after each load more button clicked
Pagination Load more Styling - Button styling color, background, border, etc.
Pagination Active mode Styling - Button border color while animation
Choose Filters - You can find and select category or tag for posts filters, this will show above posts.
Filter Position - If you set linkable gallery and add class for each items, Then you can have filters.
Filter Show all - Translation of Show All button in gallery filters
Filter Container Styling - Styling of overall filters container
Filter Filters Styling - Each filter styling color, background, size, etc.
Filter Active filter Styling - Activated filter styling colo, background, etc.
Filter Filters Delimiter Styling - You can add delimiter between filters, Any charachters allowed
Query Post Type - Select post type name
Query Order - Show posts in reverse mode or default
Query Orderby - Filter posts order by date | id | title | random | etc
Query Category Taxonomy - Name of category taxonomy for current post type
Query Category(s) - Type and select your category(s)
Tags Taxonomy - Name of tag taxonomy for current post type
Query Tag(s) - Type and select your tag(s
Query Search keyword - You can filter posts by specific keyword, Posts will shows only contains this keyword
Query Filter by ID(s) - If you want to show specific posts, then add posts IDs and separate by comma
Carousel Settings - Same as Carousel Settings
Cursor image - You can set custom cursor on images hover
Cursor Size and Position - If you set custom cursor, then you can select best size for it
Advanced tab - Click here

Element: Process Line Vertical

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

Number - Number or letter of current process item
Height - Set specific height for vertical line
Position - Number or letter position, default | middle | top
Number Styling - Number or letter styling color, backgroud, border, etc.
Line Styling - Vertical line styling color, etc.
Content - After adding procoess line element, by clicking on + you can add text element inside process line
Advanced tab - Click here

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

Road - Road direction, over 15 different mixed directions
Height - Element height size by px
Line Color - Road line color
Lines Style - Line style solid | dotted | dashed
Line Size - Line size 1px | 2px | 3px | 4px | 5px
Icon Type - Icon type image | icon | letter or number
Icon - Select your favorite icon
Number - Set number or letter
Image - Upload your own image, PNG recommended if have background color
Style - Predefined icon styles Rhombus | Pin | Custom such as circle or square
Icon Styling - Icon styling background, color, size, etc.
Advanced tab - Click here

Element: Progress Bar

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

Title - Title or text above progress bar
Number - Progress bar percentage e.g. 90%
Icon - Set icon before title of progress bar
Style - Select predefined style
Animated stripes? - CSS animation stripes on progressed bar
Styling - Styling of title, icon, number, bar, etc. such as background, color, size, etc.
Advanced tab - Click here

Element: Quote

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

Predefined Style - Some predefined styles and postions
Quote Content - Text of your quote
Image - Upload your quote owner photo
Name - Quote full name
Subname - Quote owner subname or subtitle
Stars Rating? - Display custom 5 star rating
Stars Color - Color of stars, usually is yellow
Quote Shape - Quote icon overlay quote text container
Styling - All styling colors, background, shadow, etc.
Advanced tab - Click here

Element: Separator

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

Style - Select separator from 30 different styles
Rotate - You can rotate separator with 3 types
Extra class - If you want add custom CSS, then add custom class here
Top Color - Separator color scheme
Bottom Color - Some separators have bottom color
Layer Position - Static, relative or absolute according to your needs
Layer Priority - Separator layer priority according to previus and next elements
Top offset - If you set position to absolute or ralative then this works
Left offset - If you set position to absolute or ralative then this works
Height - Some of separators allow you to set custom height

Element: Services

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

Layout - Horizontal or vertical service box
Title - Service box bold title
Description - Service box description or custom shortcode
Position - Horizontal position of icon, left or right
Link - The URL where the link from the button leads to
Icon type - Service box icon type icon, image, number, etc.
Icon - Choose your favorite icon from library
Image - Upload your service box icon or logo
Number - Insert number or letter instead icon for service box
Hover effect? - Overall hover effect for service box
Icon styling - Icon styling color, background, size, etc.
Other Styling - Overall, title, description styling color, background, etc.
Separator - If you set layout to vertical then you can add separator icon or line
Advanced tab - Click here

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.

Height - Default height of viewable area
Overlay Color - Overlay color for inner content
Show More - Show more button title
Icon More - Show more choose icon from library
Show Less - Show less button title
Icon Less - Show less choose icon from library
Styling - Button styling color, background, etc.
Advanced tab - Click here

Element: Icons

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

Icon(s) - Add simple icon(s) or social icon(s)
Position - Icons position Left, center or right
Tooltip? - Do you want tooltip on icons hover? set this field
Hover effect - Custom CSS hover effects on mouse hover
Inline title? - Inline title after each icons
Social icons color - Social icons color mode to original brand
Styling - Styling of container, each icons, tooltip, inline title, etc.
Advanced tab - Click here

Element: Stylish Lists

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

List Items - Add list items title, sub title and icon
List type - Old HTML list type
Styling - Styling container, each list items, icons, colors, etc.
Presets - This element have multiple stylish presets that you can use them
Advanced tab - Click here

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

Form Style - Predefined subscribe form styles and button positions
Position - Form position according to form width left | center | right
Action URL - Action URL after submit subscribe form
Form Placeholder - Placehoder title such as Enter your email
Input Type - Input type according to your need or receiver site
Input Name Attribute - This will be extra param after input URL
Button title - Submit form button title
Button icon - Choose your favorite button icon from library
Styling - Overall, input, button styling background, color, size, etc.
Presets - This element have multiple stylish presets that you can use them
Advanced tab - Click here

Element: SVG Cover

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

Image - Upload your own image
Color - SVG fill color according to site background color
Style - Choose one of SVG styles that you like
Image offset - Image vertical offset in px
Custom width - Custom width for element container
Advanced tab - Click here

Element: Tabs

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

Style - Tabs positon, vertical or horizontal, left, center or right
Effect - Content CSS effect when tabs changes
Hover Instead Click? - Change tabs on hover instead click
Container - Container styling background, padding, border, etc.
Tabs Row - Tabs row styling background, inline or block, border, etc.
All tabs - Each tabs title styling colors, size, typography, etc.
Active Tab - Active tab styling background, color, etc.
Icons - If you have icons on tabs then you can edit icon colors, size, etc.
Content - Tabs content area styling background, color, size, etc.
Presets - This element have multiple stylish presets that you can use them
Advanced tab - Click here

Element: Team Member

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

Team Style - Predefined styles and icons positions
Hover Mode? - Hover mode and how to show icons and title
Image - Upload your team member image
Image Size - You can resize image on the fly by setting this field
Name, Job Title - Name and sub name of current team member
Social - Add social icon(s) for this team member
Position - Icons position Left, center or right
Tooltip? - Do you want tooltip on icons hover? set this field
Hover Effect - Custom CSS hover effects on mouse hover
Social Icons color - Social icons color mode to original brand
Vertical Mode? - Make icons in vertical mode
Social Styling - Social styling colors, size, background, border, etc.
Other Styling - Image, Title, Container styling background, padding, shadow, etc.
Background layer - Custom background shape with offset to out sides of container
Presets - This element have multiple stylish presets that you can use them
Advanced tab - Click here

Element: Testimonials

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

Template - Select available template for this testimonial
Content - Testimonial text or contnet
Image - Upload client photo, recommended 80x80 px
Name - Full name of client
Sub Name - Client sub title, sub name or short description
Arrow - Arrow above client photo
Arrow Color - Arrow custom color
Styling - Container, image, title styling colors, background, border, etc.
Advanced tab - Click here

Element: Timeline

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

Style - Choose from 5 available predefined styles
Align - Timeline alling left | center | right
Line styling - Line styling color, shadow, etc.
Extra class - If you want to add custom CSS so add extra class here
Advanced tab - Click here

Element: Title and Text

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

Title - Title or text or any content
Positon? - Overall position inline, block, center, left or right
Container Styling - Overall title styling background, border, etc.
Line - Line type before, after, above or below title
Line(s) Styling - Styling of line(s) background, shadow, maring, position, etc.
Line(s) Container - Styling of line(s) parent background, shadow, maring, position, etc.
Icon - You can set icon, image, number or letter before and after title
Icon Styling - Icon styling background, color, size, rotate, shadow, etc.
Shape - Shape, big text, big icon, etc. in backface of title
Shape Styling - Shape styling background, color, size, etc.
Presets - This element have multiple stylish presets that you can use them
Advanced tab - Click here

Element: Twitter

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

Username - You twitter account name
Tweets numbers - Number of tweets to show
Advanced tab - Click here

Element: Video Player

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

Video URL - Youtube or vimeo video URL
Image Placeholder - Image placeholder instead default video image
Inline Video? - Inline iframe instead of video popup
Title - Title after overlay icon (optional)
Sub Title - Sub title under title (optional)
Icon - Change default icon and choose your favorite icon from icon library
Icon position - Icon position on video image over 5 position are available
Icon size - Icon predefiend sizes, also you can change icon size from icon StyleKit
Ripple Icon FX? - Ripple animation FX for icon only
Styling - Styling of container, title, icon background, color, size, border, etc.
Advanced tab - Click here

Element: Working Hours

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

Items - List of items with left and right title and text
Line Between ? - Enable line between left and right text
Container - Overall styling background, shadow, border, etc.
Line - Line styling color, shadow, margin, etc.
Left text - Left text color, size, typography, etc.
Right text - Right text color, size, typography, etc.
Badge - Badge text background, color, size, typography, etc.
Sub title - Sub title color, size, typography, etc.
Icon - Icon background, color, size, border, etc.
Advanced tab - Click here

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

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
Download codevz.pot file using POEdit software (Download software here)
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.

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.
If you need support, visit our Support Center

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

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.