Xinterio Theme - Documentation

Get Started

First, thank you for purchasing our theme!

This guide provides instructions for installation, help on getting started and extensive documentation of features. It is recommended you read it thoroughly to fully leverage the Xinterio theme's capabilities. Please also make sure to check out our Video Tutorials as they explain everything covered in here in greater depth. We hope you enjoy building with Xinterio as much as we enjoyed developing it and continue to develop with new features!

WordPress Installation

Before beginning the installation and configuring of your new theme, you must first have WordPress already installed on a server.

If you are struggling, here is a very detailed guide at WordPress Codex that will walk you through every step.

If you prefer something more visual, you can watch this video tutorial on how to install Wordpress by us

(Please note the video shown is third party video, but the same process applies)

Installing Theme

Once you have setup a copy of WordPress, there are multiple ways you can go about installing the theme. Here are different ways:

Install theme via "Envato Market" plugin (recommended)
Install theme via WordPress admin panel
Install theme via FTP

1. Install theme via "Envato Market" plugin

This is the easiest method to install our theme. Just install "Envato Market" plugin and configure it. This "Envato Market" plugin also provides one-click update feature for our theme.

Also here is step by step guide with details and images:

First, install Envato Market plugin. Click here to download the plugin. This will download the zip file with the plugin in it. No need to unzip it – we’ll be installing it as is. Now that you have the plugin, go ahead and log into WordPress admin section.
To install the plugin navigate to Plugins > Add New and click on the Upload Plugin button at the top of the page:
Next browser for the "envato-market.zip" file that you downloaded:
Then click the button "Install Now" button. This will install the plugin:
Now Activate the plugin by clicking "Activate" link. The plugin should be activated like this:

Envato Market Plugin Setup

To get started click on the "Envato Market" link in your dashboard menu. You should see a screen similar to the one below. The very first step is to create an Envato API token. To do this, click on the generate a personal token link (highlighted in red below).
If you’re already logged into your Envato account you’ll be token to the screen below (otherwise you will be prompted to login first before being redirected to this page). On this screen you can see what the Envato Market plugin is requesting permission to access via your Envato account (Envato sites, the ability to download your items, a list of your purchases and verification of your purchases). To proceed give your token a name, check the box that you have read and agree to the terms and then click the green button to create your token.
Once your token is created you will see a green success screen. Copy your token code (this is very important since Envato doesn’t store a copy of the token for you), check to confirm that you’ve copied it and click the white button that you got it.
Now go back to your WordPress installation and paste in your Envato API token then click save.
It’s possible that you might see the error (shown below) when you first enter your token. Don’t worry, just go back to the previous page and try again. It should work on the second go.
Once your token is saved and validated your page will refresh to show your Envato Market landing page with added tabs for your items. The added tab(s) display all of your theme and plugin purchases as well as their version numbers and quick links to the theme and author pages. So now you can install theme and also update theme in just one click.

2. Install theme via WordPress admin panel

First go to themeforest.net and go to Downloads section from the top-right menu.
Now click on green Download button next to Xinterio theme.
You will see some options. Now click on Installable WordPress file only link.
A file will be downloaded. Rename this file to xinterio.zip
Download xinterio.zip from themeforest.net site.
Log into the WordPress admin panel.
Navigate to Appearance > Themes and click on Add New and Upload Theme.
Select the xinterio.zip file and click Install Now button.
After the successful installation, click on Activate or navigate to the Appearance > Themes and click on Activate button to activate the newly installed theme.
Now process for the theme setup wizard to install plugins and demo data.

3. Install theme via FTP

First go to themeforest.net and go to Downloads section from the top-right menu.
Now click on green Download button next to Xinterio theme.
You will see some options. Now click on Installable WordPress file only link.
A file will be downloaded. Rename this file to xinterio.zip
Download xinterio.zip from themeforest.net site.
Log into your web server with FTP client software.
Unzip the xinterio.zip file (downloaded from themeforest.net site) and ONLY use the extracted /Xinterio theme folder.
Upload the extracted Xinterio theme folder into /wp-content/themes folder.
Navigate to the Appearance > Themes tab and activate the theme.
Now process for the theme setup wizard to install plugins and demo data.

Theme Setup with demo content

Theme setup is very easy. The setup wizard will open when you activate Xinterio theme. The setup wizard will install child theme, then install plugins and then insert demo content setup like page/post content, widgets etc..

Plugins

Our Xinterio theme comes with some usefull plugins. Some plugins are required and some are recommended plugins. Here are details or each plugin.

Xinterio Theme Addons

This is the base plugin of our theme. This is required plugin. This plugin includes all Custom Post Types and shortcodes.

Elementor Page Builder

Elementor Page Builder is a live page builder, with no limits of design. A page builder that delivers high-end page designs and advanced capabilities, never before seen on WordPress.

Revolution Slider

Create a responsive (mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for Xinterio engines). See the heaps of custom transitions/animations for each object on the page!

Customize this slider with our convenient drag & drop backend to your very needs. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

Advanced Custom Fields

Advanced Custom Fields plugin generated Meta Boxes that gives option to add special boxes in single page/post pages edit screen.

ACF Photo Gallery Field

A lightweight extension of Advanced Custom Field (ACF) that adds Photo Gallery field to any post/pages on your WordPress website.

CF Post Formats

This plugin adds admin interface and structured post meta for WordPress post formats

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

You can easily get this plugin in wordpress.org: Contact Form 7 Plugin

Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancestor. This plugin generates locational breadcrumb trails for your WordPress powered blog or website.

These breadcrumb trails are highly customizable to suit the needs of just about any website running WordPress. The Administrative interface makes setting options easy, while a direct class access is available for theme developers and more adventurous users.

You can easily get this plugin in wordpress.org: Breadcrumb NavXT

Envato Market

This plugin helps customers receive updates to their premium Themes & Plugins purchased through Envato Market (ThemeForest & CodeCanyon).

Authors are encouraged to implement this plugin in their items so that customers have a reliable and consistent experience across products.

You can easily get this plugin in envato.com: Envato Market

Theme Sections

There are different sections in Xinterio theme. Here you will find name of each section name so you can find their options easily. You can customize each sections from Xinterio Options easily.

Xinterio Options (Theme Options)

Xinterio Options (Theme Options) panel is created with WordPress' Customize section. We added our own options with WordPress' default options.

Also this Customize options panel will provide live preview of the effects so you can see the effect of each options here.

After clicking on the Xinterio Options panel you will redirected to the Customize section. It has two sections. Left area called "Options Panel" and the right area called "Preview panel". See screenshot given below:

Now click on the Xinterio Options and you will see lot's of options for different theme sections.

Also you will get pen-icon to quick edit that area. Just click on the pen-icon to go to the option directly. See screenshot given below:

Xinterio Options

Now you can see different sections list. This are the group of the options. Clicking on each section will show options for that section.

General Options:
You can change Global color, secondary color, Gradient color, Logo etc from here.
Typography Options:
Here you can change font family, font size, folor color etc for different areas. For example, you can change font-family or font-size for general texts, H1 to H6 tags, Heading texts, Subheading texts, Widget heading etc.
Pre-header Options:
The pre-header section will appear above the header area. This will show small texts like email, phone number, social links etc. You can change background color, text color, left content, right content from here. This will effect only the pre-header area. (Where is Pre-header area?)
Header Options:
Here you can change header style. Also you can edit content specially created for special header style. Also you can edit header button options, background color, header height etc. You can show or hide search icon, shop icon (if WooCommerce plugin is active) etc. (Where is Header area?)
Menu Options:
This is for menu appear in header area. Here you can edit Main menu typography like font-family, font-size etc options. Also you can change dropdown menu options like background color, font color etc too.
Titlebar Options:
Generally the Titlebar will appear on inner page. This will appear below header area. This will show page title, subtitle and breadcrumb. (Where is Titlebar?)
Footer Options:
There is footer area at bottom of each page. It contains two areas. The first footer area will show widgets and second area will show copyright text and other things. (Where is Footer area?)

You can change Copyright text from this section. Also you can change other settings like background color text color etc.

For footer widget area, just add widgets in Dashboard >> Appearance >> Widgets section. Just go to Widget Area section for more details about widgets in footer area.
Social Links Options:
You can set your social links here and show them at different areas with [pbmit-social-links] shortcode. You can set Facebook, Twitter, LinkedIn, YouTube etc profile links from here and show them using this shortcode.
Blog Options:
You can set Blog view style here. You can also set other options like Social Share links (like share on Facebook, Twitter etc), limit post text, set Blog page Sidebar etc. The Blog page is the page which you set in Appearance >> Settings >> Reading >> Posts Page option.
Portfolio Options:
This section contains options related to Portfolio section. You can select view of Single Portfolio. Also other options like show or hide Related Portfolio, Portfolio view on "Portfolio Category" page, Sidebar view on Single Portfolio and Category view etc.

Also you can change title (the "Portfolio" title), permalink (the "portfolio" word in URL) to anything that you want from here. So you can customize as per your requirement. This will change title globally.
Service Options:
This section contains options related to Service section. You can select view of Single Service. Also other options like show or hide Related Service, Service view on "Service Category" page, Sidebar view on Single Service and Category view etc.

Also you can change title (the "Service" title), permalink (the "service" word in URL) to anything that you want from here. So you can customize as per your requirement. This will change title globally.
Team Member Options:
This section contains options related to Team Member section. You can select view of Single Team Member. Also other options like Team Member view on "Team Member Group" page, Sidebar view on Single Team Member and Group page view etc.

Also you can change title (the "Team Member" title), permalink (the "team" word in URL) to anything that you want from here. So you can customize as per your requirement. This will change title globally.
Testimonial Options:
You can change title (the "Team Member" title), permalink (the "team" word in URL) to anything that you want from here. So you can customize as per your requirement. This will change title globally.
Search Results Options:
You can customize Search Results page sidebar from here. Also you can customize text for "No Results Found" message.
Error 404 Options:
You can edit the "Error 404" page from here. This is the page when user enters wrong text with your domain. Sometimes user tries to the page which is not found on your site. So this 404 error page will appear. You can customize text, background color, background image etc from here.
CSS/JS Options:
You can add your custom CSS or JS code from here. This change will be applied globally (will appear on all pages) so make sure you add correct code. This is for advanced users only.

Setup Header Slider

You can select your slider for header area on any page. Just edit the page (generally your homepage) and select the slider. Please see the screenshot given below:

TIP:

We recommend you to hide Titlebar and also select "No Sidebar" (for full wide page) in sidebar option so it will look good and feel like homepage. See screenshot given below for steps:

Learn basics of "Revolution Slider" plugin:

It's very easy to create a new slider. Here is a getting started video where you can learn how to create a new slider or modify your existing slider. Click here to see their document and learn basics and become pro.

You can also see video to learn basics or Slider Revolution plugin. See this video:

Titlebar Settings

Don't know what is Titlebar area? Click here to know Titlebar section in our theme.

Titlebar will appear below header and slider. This will show page title, sub-title and breadcrumb.

There are two types of options for Titlebar area:

"Titlebar Settings" under "Xinterio Options":
This options are available in Xinterio Options section. This options will be applied globally to all page/post/portfolio/service etc.
Titlebar Settings on Single Page/Post edit page:
This options are available on edit page of page/post/portfolio/service etc.

"Titlebar Settings" under "Xinterio Options"

You can see the screensot of the Titlebar Settings ( which appear under Xinterio Options) provided on the right side.

This is global options and will apply globally to all Titlebar appear on any page/post/portfolio/service etc.

This provides all options like background color, background image, font-family, height of the Titlebar, Titlebar style etc.

Titlebar Settings on Single Page/Post edit page:

This will override the options set under Xinterio Options > Titlebar Settings options. This will help you to set special design the Titlebar on specific page or post.

You can hide the Titlebar on a specific page by select YES in the Hide Titlebar? options.

Pre-header Settings

Don't know what is Pre-header area? Click here to know about Pre-header section in our theme.

Pre-header section will appear above header area. You can show or hide it globally from Xinterio Options >> Pre-header Settings section.

You can change background color, background image, text color etc settings too.

There are two areas where you can show contents. The Left content area and the right content area. You can edit both area content from here.

This is usefull for small details like phone number, address of your office or social links (via shortcode).

Page/Post Options (Meta Boxes Options)

Meta box are special options that will apply to current page or post only. So you can set special view of a page or post. See above image for the Metabox example.

Xinterio - General Options

This metabox has three tabs.

Tab 1: Header Slider Options
Select "No slider" to not show any slider. This is useful for all inner pages.

Select "Revolution Slider" to select and show slider created in "Revolution Slider" plugin.

Select "Custom Code for Slider" to select and show slider created in any other plugin. You just need shortcode for the slider so you can paste here.
Tab 2: Titlebar Options
This is specially created section for Titlebar Options. This will be applied to the Titlebar only on the page or post that you are editing.
Tab 3: Background Options
This is background options. This will be applied to the page or post that you are editing.

Blog Section

Blog is a special part in all themes. We also designed blog with a unique design. There are different areas for blog section:

Blog post on home page or any other page (Using Elementor editor)
A dedicated Blog page: Where all posts will be shown

Blog post on home page or any other page (Using Elementor editor)

We created a Blog Element in Elementor Page Builder which you can use to show post on any page you want. Just drag and drop the Xinterio Blog Element on any page and the post list will appear.

There are lot's of options to select in this Blog element.

Content Tab: Heading & Subheading options

The heading and subheading will appear at top of the element. You can change text, add link to the heading or subheading, change alignment, change tag (for SEO purpose) etc.

Content Tab: Data options

You can select the post options here. Like how many posts you like to show, show posts from selected category, post order etc.

Style Tab: Select Style

There is also style selector under Style tab. From where you can select post box style view.

Style Tab: Column or Carousel view

You can select how your post boxes will appear. Either Row/Column view or Carousel (sliding animated) view.

ROW COLUMN VIEW: The Row/Column view is simple box view which will appear in normal row and column view.

CAROUSEL VIEW: The Carousel view will be animated sliding view. There are lot's of options for the slideing animatins. Like animation speed, animation column, auto-play on or off, Loop post boxes, show/hide the dot or arrow navigation etc.

A dedicated Blog page: Where all posts will be shown

This is the blog page which you select from Settings >> Reading section.

By using this way, you don't need to add any Elementor element. This is WordPress' core way to show all posts. Technically this is called Blogroll page. This will show all blogs in big thumbnail view.

But you can change the view easily. Just go to Xinterio Options >> Blog Options and you will find all options to modify the view. You can convert it to block view, column view, limit the blog intro text etc.

Portfolio Section

The Portfolio section is very useful section where you can show your real work examples. This is useful for showing your fully finished successful project so your user can see your real world projects. Also it's not limited to this only. There are unlimited possibilities with this section. You can rename this section completely and create something new.

There are two process to setup Portfolio section.

Creating some individual Portfolio
Add Portfolio element (via Elementor Page Builder) on a page to show all Portfolio

1. Creating some individual Portfolio

Just go to Portfolio section and create some portfolio. Here is the full detail about how to create a Portfolio:

First go to Portfolio >> Add New to create a new Portfolio.

Than fill the content as described below

This will create a new portfolio. Repeat this steps and create some 3 or 6 portfolio posts with the steps described above.

Tip

If you already done demo content setup than you can edit existing portfolio and check how we added data so you can understand each option perfectly.

2. Add Portfolio element (via Elementor Page Builder) on a page to show all Portfolio

Now we have some Portfolio posts. So we can show all Portfolio on a page. Create a new page and add Xinterio Portfolio Element on a page by dragging it.

There are lot's of options to select in this Portfolio element.

Content Tab: Heading & Subheading options

The heading and subheading will appear at top of the element. You can change text, add link to the heading or subheading, change alignment, change tag (for SEO purpose) etc.