Xzopro WordPress Theme

Business And Financial Consulting WordPress Theme


  • Created : 20th Aug 2018
  • Latest update : 24th April 2020

Install wordpress


To get this theme you must have WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are some useful links on WordPress information:

Install theme


When purchasing Xzopro theme from Themeforest, you will be able to download Xzopro files from your Themeforest account. The main_files contains all files, you have to find xzopro.zip and upload it on your directory.

Install Xzopro theme via wordpress.


  1. Unzip the downloaded package from Themeforest and inside it find the file xzopro.zip
  2. Login to your WordPress dashboard, go to Appearance > Themes > Add New > Upload Theme and click Choose File Button.
  3. After slelct"xzopro.zip" from your computer Click on "Install Now" button.
  4. Wait the theme being uploaded and installed.
  5. To activate the theme: Go to Appearance > Themes hover over the theme and and click Activate.

Install theme via FTP.


Follow the steps below to install theme via FTP.

  1. Log into your hosting space via an FTP software
  2. Unzip the xzopro.zip file and ONLY use the extracted xzopro theme folder
  3. Upload the extracted xzopro theme folder into wp-content > themes folder
  4. To activate the theme: Go to Appearance > Themes hover over the theme and and click Activate.

Common Install Error: Are You Sure You Want To Do This?

The “Are You Sure You Want To Do This” message may occur, means that you are limited in upload file size. Consider install the theme via FTP if this happens, or contact your hosting provider and ask them to increase the limited size.

Install required plugins


Once you activated Xzopro theme than You will get a notice for installing required plugins.

  1. Click on "Begin installing plugins" to install required plugins.
  2. Select all required plugin, From the top dropdown menu select Install and click Apply.
  3. After Install all plugins sucessfully click Return to Required Plugins Installer.
  4. Select all required plugin, From the top dropdown menu select Activete and click Apply.

Import demo data


Import Demo Data – Now users can quickly and easily import our demo content with only one click to the button. This is the preferred method because it's the fastest and easiest way to get our demo content. It will import all our pages, posts, sliders etc.. If you wish to use our One Click Demo Content Importer, please see the guide below.

Note : Demo data is only for theme testing purpose. Do not install demo data on a production website.
  1. For import demo data go on Appearance > Import demo data.
  2. You will see demo data import screen.
  3. Click on import demo data and please wait for import all data. It may take 3 to 5 minute depends on your sarver speed. Please be patient don't click import demo data button twice.
Note : Some of demo content like header and footer content are not import by demo Importer. But don't worry about it. You can easily set it from theme options.

Create Pages


If you complete install required plugins section sucessfully you are ready to create homepage or any other pages. If you complete Import demo data you will see all pages are already created. However if you need to create a page you can do it by yourself so easily. We’ve created visual composer addons and template so you can easily use them.

You just need to add row and column for page structure and then use any of addons. Before using slides, Projects and Testimonial addon you need to add slides, Projects and Testimonial via WordPress custom post that already registered. After adding some slides, Portfolio, Testimonial you are ready to use these addon.

Also, you can create pages useing pre-made template via this steps.

  1. Click on Pages > Add New.
  2. click on WpBakery Page builder (If you are using wordpress 5.0) .
  3. click on backend editor.
  4. click on templates.
  5. click on Default templates. You will see all default template here.
  6. click on one of those templates and change with your own content.
  7. Scroll down to the page and you will see page setting options here.
    1. Page Header: — This field is optional. Site default header is your selected header style from theme option. If you want to use a diffrent header in a page you can use this field.
    2. Enable Banner: — Enable or disable Page banner.
    3. Background Image: — Every page have a default banner image (If your banner is enable) selected from theme option. But you can upload your banner here if you want to use diffrent image from theme option.
    4. Use Custom Title: — If you want to use custom title write title here.If you don't, leave it blank.
    5. Banner Text Align: — You can set banner text align globally for evry page or post from theme option. Aslo set banner text align individualy for every page from here.
    Note : Its easy to set Page Header, Banner , Banner text align for all posts and page from theme option at once. But what if you want to use a diffrent header , banner image or text align in a specific page or post. Thats why we create this option for a better user expirence.
  8. After all necessary changes click Publish button and you will be done.

Theme options


Using theme options, you can control every setting on the theme. Let’s start learning theme options. Go to Appearance > Xzopro Options

General Settings

  1. Primary Color: — Change theme primary color from here.
  2. Secondary Color: — Change theme secondary color from here.
  3. Preloader: —Enable or disable preloader from here.
  4. Preloader Background Color: —Select preloader wrapper background color from here.
Note : Some Color are not change yet? Don't panic. We use some color from visual composer addon. Go to page and edit color settings from addon you want to change. In case you want different color for your Header and Footer.So we do not add Header and Footer color options here. You can change Header and Footer color from Header and Footer options.

Typography

You can change theme typography from here

  1. Body Font: — Change body Font, Font weight, Font style, Font-size from here.
  2. Menu / Navigation Font: — Change Menu / Navigation Font, Font weight, Font style, Font size from here.
  3. h1,h2, h3, h4, h5, h6 Font: — Change h1,h2, h3, h4, h5, h6 Font, Font weight, Font style, Font size from thes options.
Note : In case you want different color for your Header and Footer.So we do not add Header and Footer color options here. You can change Header and Footer color from Header and Footer options.

Header Options > Header General Settings

You can change header general options from here

  1. Select Header Style: — Select site default header style from here. You can override this option in individual page
  2. Header 1 Search Form Background Color: — Select header 1 search background color from here
  3. Header 2 Search Form Background Color: — Select header 2 search background color from here
  4. Header Button Text: — Type Header Button text here
  5. Header Button Url: — Type Header Button URL here

Header Options > Header Top

You can change header top settings from here

Note : This Options depends on Header style option from Header general settings.If you select header style 1 from Header general settings You can see header top options for header style one here. If you select header style 2 from Header general settings you can see header top options for header two here.
  1. Background Color: — Select header top background color.
  2. Top Left text: — Add header Top left text from here.
  3. Top Left text Color: — Select header top left text color from here.
  4. Top Left text Hover Color: — Select header top left text hover color from here.
  5. Top Social Icons: — Add top sosial icons from here.
  6. Top Icon Color: — Select sosial icons color from here.
  7. Top Icon Hover Color: — Select sosial icons hover color from here.
  8. Top Right Text: — Add top right text from here.
Note : What if you set header style 1 for site default header but want use header style 2 in a specific page? Just select header style 2 first from theme option and fill all fields from header top option for header style 2. And save it once. After that you can use any time in any page.

Header Options > Logos

You can change site logo settings from here

  1. Header 1 Logo: — Upload header - 1 logo here.
  2. Header 2 Logo: — Upload header - 2 logo here.

Header Options > Menu

You can change menu settings from here

  1. Menu Fixed On Top: — If you want fixed menu then select ON.
  2. Menu Background Color: — select menu area background color from here.
  3. Menu Text Color: — select menu text color from here.
  4. Menu Text Hover Color: — select menu text hover color from here.
  5. Dropdown Menu Background Color: — select dropdown menu background color from here.
  6. Dropdown Menu Text Color: — select dropdown menu text color from here.
  7. Dropdown Menu Item Hover Background: — select dropdown menu hover background color from here.

Layout and Options > Banner options

Change default banner options from here

  1. Banner Background Image: — Upload default banner image for all page / post. You can override this settings in individual page / post.
  2. Banner Text Align: — Select banner default text align. You can override this settings in individual page / post.

Layout and Options > Blog page

You can change blog page options from here

  1. Blog Page Layout: — Select blog page layout
  2. Enable Blog Banner?: — Enable or disable blog page banner
  3. Blog Banner Background Image: — Upload blog banner image
  4. Blog Banner Title?: — Type banner title here
  5. Blog Banner Text Align: — Select blog banner text align

Layout and Options > Single Post

You can change search page options from here

  1. Layout: — Select single post default layout. You can override this settings in individual post.
  2. Show Post Categoriese?: — If you want to show Category, select On
  3. Show Post Tags?: — If you want to show tags, select On
  4. Enable Next - Previous Link On Single Post?: — If you want to show next - previous post links on single post, select On

Layout and Options > Archive Page

You can change archive page options from here

  1. Archive Page Layout: — Select Archive page layout.
  2. Archive Banner Background Image: — Change archive page banner image from hrer.

Layout And Options > Search Page

You can change search page options from here

  1. Search Page Layout: — Select archive page layout.
  2. Search Banner Background Image: — Change archive page banner image from hrer.

Layout And Options > Error 404 Page

You can change error 404 page options from here

  1. Error 404 Page Layout: — Select archive page layout.
  2. Error 404 Banner Background Image: — Change archive page banner image from hrer.

Footer Options > Footer Widget Area

You can change footer widget area options from here

  1. Background Image: — Upload footer widget area background image.
  2. Background Color: — Select footer widget area background color.
  3. Text Color: — Select footer widget area text color.
  4. Text Hover Color: — Select footer widget area text hover color. Only work if text have any link.
  5. First Widget Width: — Type first widget width in %
  6. Second Widget Height: — Type second widget width in %
  7. Third Widget Width: — Type third widget width in %
  8. Fourth Widget Height: — Type fourth widget width in %
Note : You can add or change widgets from Appearance > Widgets

Footer Options > Footer Bottom

You can change footer bottom area options from here

  1. Copyright Text: — Type copyright text here.
  2. Background: — Select footer bottom background color.
  3. Text Color: — Select footer bottom text color.
  4. Text Hover Color: — Select footer bottom text hover color.

Visual composer addons


As we said, we have added some custom visual composer addons on this theme. Let’s learn how to manage them

About Box

  1. Icon Type: — Select box icon type.
  2. Icon: — Select box icon.
  3. Box Title: — Type box title here.
  4. Box Description: — Type box descrioptio here.
  5. Box Link Type: — Select box link type.
  6. Select Page: — Select a page. Depends on box link type.
  7. External Link: — Type external link here. Depends on box link type.

Brand logos

  1. Upload Logos: — Upload brand logos.
  2. Height: — Logo box height in pixel.
  3. Desktop Count: —How many logos show on desktop in one time
  4. Tablate Count: —How many logos show on tablate device in one time
  5. Mobile Count: —How many logos show on mobile device in one time
  6. Click slider options tab and you will see this field for brand logos
  7. Enable Autoplay?: —Enable or disable logos autoplay.
  8. Enable Loop?: —Enable or disable slider loop.
  9. Slide Time: —Select slide time.

Button

  1. Button Type: — Select button type.
  2. Link type: — Select link type.
  3. Select A page: — Select a wordpress page.
  4. Enter URL: — Type external link here.
  5. Button Text: — Type button text here.
  6. Button Background Color: — Select button background color.
  7. Button Background Color On Hover: — Select button background color on hover.
  8. Button Text Color: — Select button text Color.
  9. Button Text Color On Hover: — Select button text Color on hover.

Choose Us Box

  1. Icon Type : — Select box icon type.
  2. Flaticon / FontAwesome : — Select box icon.
  3. Box Title : — Type box title here.
  4. Box Description : — Type box description here.

Counter Box

  1. Icon Type : — Select box icon type.
  2. Flaticon / FontAwesome : — Select box icon.
  3. Count Number : — Type count number here.
  4. Units : — Type count unit here ( example +, % ).
  5. Count Text : — Type count box text.

Call To Action

  1. CTA Title : — Type call to action title here.
  2. CTA Subtitle : — Type call to action subtitle here.
  3. Button Type : — Select button type.
  4. Button Text : — Type button text.
  5. Link To : — Select url type.
  6. Select Page : — Select a page.
  7. Link : — Enter external link here

Contact Info Box

Click up arrow and edit exsisting one. click + icon for add row

  1. Icon Type : — Select row icon type
  2. Flaticon / Fontawesome : — Select row icon.
  3. Info Title : — Type title here
  4. Info Description : — Type description here
  5. Info Box Background Color : — Select box background color.
  6. Icon and Heading Color : — Select box icon and heading color.
  7. Info Text Color : — Select box text Color.

Google map

Click up arrow and edit exsisting one. click + icon for add more location

  1. Map API Key : — Paste your map api key here.
  2. Latitude : — Type map latitude here
  3. Longitude : — Type map longitude here
  4. Info Text: — Type info window text here.
  5. Map Height : — Set map height in pixel.
  6. Map Zoom : — type map zoom.
  7. Enable Info Window? : — Enable or disable info window
  8. Map Marker Image : — Upload map marker image
  9. Enable Map Marker Animation? : — Enable or disable marker bounce animation

Popup Video

  1. Title: — Type title here.
  2. Description: — Type description here.
  3. Video Url: — Type video url here.
  4. Content Container Width: — Select content container width.
  5. Content Container Offset: — Select content container Offset.
  6. Text Color: — Select text color.

Progress Bar

Click up arrow and edit exsisting one. click + icon for add more progress bar

  1. Progress Bar Title : — Type bar title here.
  2. Progress Percentage : — Type progress percentage without % symbol. example 80.
  3. Text Color : — Select progress bar text color.
  4. Border Color : — Select progress bar border color.
  5. Background Color : — Select bar background color. Leave it empty if want to use transparent background.
  6. Fill Color : — Select bar fill color.

Projects

  1. Project Count: — Select How many project item you want to show.
  2. Enable Masonry?: — Enable or disable masonry.
  3. Project Column Width: —Select project item column width
  4. Enable Filter Option?: —Enable or disable filter option.
  5. Enable Pagination?: —If total projects number is greater than project count and you want to show other projects in next page select yes.
  6. Button Text: —Type button text here.
Note : Add some projects via WordPress custom post ( already registered ) before using this addon. How to add a project item?

Projects gallery and details

  1. Upload Images : — Upload gallery images.
  2. Enable Gallery Image Autoplay? : — Enable or disable gallery image autoplay.
  3. Box title: — Details box title.
  4. Bold Text: — Type bold text here.
  5. Normal Text: — Type normal text here.

Pricing Table

  1. Table Title : — Type table title here.
  2. Table Tag : — Type table tag text here. example : Popular, Basic, Exclusive etc.
  3. Icon Type : — Select icon type.
  4. Flaticon / FOntAwesome : — Select icon
  5. Click up arrow and edit exsisting row. click + icon to add new row

  6. Row Text : - Type table row text here.
  7. Currency Symbol : - Enter currency symbol here. Example $, €, ৳ etc.
  8. Price : - Enter price here.
  9. Button Text : - Enter button text here.
  10. Button Link / Url : - Enter button link here.

Recent Posts

  1. Post count : —Select how many post you want to show.
  2. Category : —Select a category if you want to show specific categories posts

Service Box

  1. Box Style : —Select service box style.
  2. Icon Type : —Select icon type.
  3. Flaticon / FontAwesome : —Select icon.
  4. Box Title : —Type box title text.
  5. Box Description : —Type box description text.
  6. Box Link Type : —Select Link type.
  7. Select Page : —Select a page.
  8. Type URL : —Type url here.
  9. Button Text : —Type button text here.
  10. Button Text Color : —Button text color.

Section Title

  1. Section Title : —Type section title here.
  2. Section Title Description : —Type section title description here.
  3. Title Heading Color : —Select title heading color.
  4. Title Text Color : —Select title text color.
  5. Title Shape Color : —Select title shape color.

Slider

  1. Slider Count: — Select how many slider item you want to show.
  2. Category: — Select slider category.
  3. Click slider options tab and you will see this more options for slider addon
  4. Slide Effect: —Select a slide effect.
  5. Enable Slider Content Animation?: —Enable or disable slider content animation.
  6. Enable Autoplay?: —Enable or disable slider autoplay.
  7. Slide Interval: —Select slider interval
  8. Enable loop?: —Enable or disable loop
  9. Show Navigation Arrows On Hover?: —Enable or disable navigation arrows.
  10. Show Navigation Dots.: —Enable or disable navigation dots.
Note : Add some slider item via WordPress custom post ( already registered ) before using this addon. How to add slide?

Testimonial Slider

  1. Testimonial Count: — Select how many testimonial item you want to show.
  2. Category: — Select testimonial category.
  3. Click slider options tab and you will see this more options for slider addon
  4. Enable Autoplay?: —Enable or disable slider autoplay.
  5. Slide Interval: —Select slider interval
  6. Enable loop?: —Enable or disable loop
  7. Show Navigation Arrows On Hover?: —Enable or disable navigation arrows.
  8. Show Navigation Dots.: —Enable or disable navigation dots.
Note : Add some testimonial item via WordPress custom post ( already registered ) before using this addon. How to add testimonial?

Team Member

  1. Member Image: — Upload member image.
  2. Member Name: — Type member name.
  3. Member Designation: — Type member designation.
  4. Click up arrow and edit exsisting member social icon. click + icon to add new icon

  5. Icon : — Select social icon.
  6. Icon URL : — Type social icon Url.

Text With Button

  1. Small Title: — Type small title here. You can leave it empty if you dont want to use it.
  2. Small Title Color: — Select small title color.
  3. Main Title: — Type main title here.
  4. Main Title Color: — Select main title color.
  5. Content Text: —Type content text here.
  6. Content Text Color: —Select content text color.
  7. Button Text: —Type button text here.
  8. Button Link: —Type button URL here.

Text With Border Image

  1. Upload Image: — Upload image here.
  2. Image Border Color: — Select border color.
  3. Title: — Type title here.
  4. Content Text: — Type content text here.

Text With Title

  1. Title: — Type title here.
  2. Title Font Size: — Type title font size in pixel. example : 36
  3. Content Text: — Type content text here

Text With Image And list

  1. Upload Image: — Upload image here.
  2. Title: — Type title here.
  3. Content Text: — Type content text here
  4. Click up arrow and edit exsisting list item. click + icon to add new list item

  5. List Text: — Type list text here.
  6. Icon Type: — Select icon type.
  7. Flaticon / FontAwesome: — Select icon.
  8. Upload Image Icon: — Upload image icon here.

Text With Background Color

  1. Title: — Type title here.
  2. Content Text: — Type content text here.
  3. Text Color: — Select text color.
  4. Background Color: — Select background color.

Unordered List

  1. Title: — Type title here.
  2. Click up arrow and edit exsisting list item. click + icon to add new list item

  3. List Text: — Type list text here.
  4. Icon Type: — Select icon type.
  5. Flaticon / FontAwesome: — Select icon.
  6. Upload Image Icon: — Upload image icon here.

Custom Post Type


This theme provide 3 custom post type. Slides, Porojects, and Testimonial. Let's know more about all custom post type.

Slides


To add a slide go to Dashboard left menu > Slides > Add New. Then follow below image and do it step by step as we mark.Some options are set by default so you don't have to customize it. But if you want you can customize it as you want. Onely 1, 2, 3, 4, 9,11 fields are required to successfully create a slide item.


Projects

To add a Projects go to Dashboard left menu > Projects > Add New. Then follow below image and do it step by step as we mark.


Testimonials

To add a Testimonial go to Dashboard Left Menu > Testimonials > Add New. Then follow below image and do it step by step as we mark.


Custom Widget


This theme provide three custom widget. To add this widget navigate to "Appearance > Widgets."

Xzopro : Recent Posts Widget

  1. Title: — Type widget title here
  2. Post Count: — How many post you want to show.

Xzopro : About And social Widget

  1. Title: — Type widget title here
  2. Logo Image URL: — Upload logo ang give image src url here.
  3. Short Description: — Type about text here.
  4. Social Icon Heading: — Type social icons heading.
  5. Facebook URL: — Type facebook url.
  6. Twitter URL: — Type Twitter url.
  7. Google Plus URL: — Type Google Plus url.

Xzopro : contact Address Widget

  1. Title: — Type widget title here
  2. Short Description: — Type short description here
  3. Email: — Type email here
  4. Mobile Number: — Type mobile number here
  5. Subscribe Form Shortcode: — Type subscribe form shortcode here

Theme Updates


There are 2 methods to update WordPress themes to the newer version. These new updates are essential if you want to have a bug free website as we give new features and improvements to the theme over time. Some of these updates might be needed in order to make the theme compatible with WordPress newer versions. There is no risk of losing your settings and pages (If you don't edited theme core files). However if you had done modifications in parent theme files, then they will be lost.

Please note that before updating a theme, we recommend you to make a backup of your modified files. Also, we recommend to deactivate its current version and then upload the zip file with new theme version then activate and update the theme.

Using FTP


  1. Login in to your Themeforest account and go to downloads (Dashboard > downloads)
  2. Download the theme into your computer
  3. Install an FTP program (Filezilla is free)
  4. Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP
  5. Unzip the item main file
  6. Locate the xzopro.zip file and unzip it. Make sure your unzipping software does not create an extra directory with the same name nested into each other.
  7. Drag and drop theme main folder into your FTP program with the destination: “YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/”
  8. FTP program will give a warning that there is an existing with the same directory name, choose replace all.And wait until all files are replaced

Update Through WordPress Admin Panel


  1. Navigate to Appearance > Themes Activate another theme to deactivate the Xzopro theme
  2. Delete the installed Xzopro theme.
  3. Unzip the file you just downloaded from ThemeForest and locate the WordPress Theme xzopro.zip
  4. Still within the Themes section, on the header tab, click on “Install Themes” , then on the header second tab click “Upload” .
  5. Click “Browse…”and locate the new theme file xzopro.zip
  6. The “Upgrade existing theme?” option choose “Yes” from the dropdown list.
  7. Click “Install Now”.
  8. Click “Activate”.

Support / Contact With Us


Please follow the steps below :
  1. Please go to support.themedraft.net
  2. Register an account or Log in your account.
  3. Find Xzopro theme forum and create your topic. ( Click here for Xzopro theme forum )