Thank you for purchasing interact theme. This documentation will help to know more about theme and how is structured and how to use the theme features.

Requirements

To be able to use interact theme, you must have the following:

  • Setup Wordpress CMS Last Version.
  • Upload Wordpress Theme (interact).
  • An FTP tool to upload the files for (interact)
  • Make sure you upload the required assets files/folders listed below:
    • /assets/* - Assets Folder
    • /framework/* - Framework Folder
    • /assets/style.css - Main Stylesheet File
    • functions.php - Main theme php functions
    • *.php - Other Files

Installation

Follow the steps below to get started with your interact:

  1. Open the Package Folder to find all Files.
  2. You will need to upload requirement files

Active Theme

Follow this step you need:

  1. You will need to active interact theme from wp-admin > apperance > themes.
screenshot screenshot screenshot

Active Plugins

Follow the steps below to get started with activation required plugins:

  1. Active Plugins Which get with theme activation
  2. In your admin panel, go to Appearance -> Install Plugins.
  3. Active wordpress import plugin, you can find it wp-admin > tools > import > wp wordess import
  4. Active importer/exporter widget plugin, you can find it here
screenshot screenshot screenshot

Import Content

Follow the steps below to import content to website:

  1. Active wordpress import plugin
  2. Uploas data.xml which included in demo-data Folder
screenshot screenshot screenshot
  1. You need upload two files on the path below:
  2. - attachment-data.xml
  3. - data.xml
screenshot screenshot

Update Theme Options

Greate, Now start to import options for website

  1. you can find theme option in wp-admin > theme options
  2. Get options form theme-options.json which include in Package
  3. Copy options form file to your theme
  4. CLick Import.
screenshot screenshot screenshot

Import Widgets

Follow the steps below to import revolution slider to website:

  1. active importer/exporter widget plugin, you can find it here
  2. import widgets.wie which include in Package
screenshot

Theme options

Follow the steps below to know how to edit theme options:

logo options screenshot
layout options screenshot
Custom css and javascript screenshot
social network screenshot
Header Options screenshot
Module Bulider screenshot
Header Bulider screenshot
Page Title Options screenshot
Blog Option screenshot Blog Option (archives) screenshot Blog Option (Single) screenshot
Portfolio Option screenshot Portfolio Option (Single) screenshot
Shop Option screenshot Shop Option (archive page) screenshot
Style Options screenshot
Typography Options screenshot

Mega menus

From the 'Appearance' menu select the 'Menus' option to bring up the Menu Editor.

screenshot

1. select form custom link and check create mega menu for this item

screenshot

2. Create Columns for what you want and remove link

screenshot

3. Add link if you need to add icon you can add icon code from Font Awesome Library or Themify Icons

screenshot

page

page Options

With the Page Options specially built for our themes, you can easily customize Header, Page Title, Footer, Page Option, One Page of every page.

NoteThis Edits For Current page Only
body screenshot Header screenshot page title screenshot Footer screenshot

Home page

To set a page as Home page, go to Settings > Reading in your WordPress Dashboard panel.

screenshot screenshot
Standard Format
screenshot
Video Format
screenshot
Quote Format
screenshot
Link Format
screenshot
Gallery Format
screenshot
Audio Format
screenshot
Testimonial
screenshot screenshot
Team Member
screenshot screenshot
Portfolio
screenshot screenshot
Client Logo
screenshot screenshot screenshot

elements

Visual Composer is a powerful Wordpress page builder that allows you to create complex page layouts without touching a single line of code. To switch to Visual Composer's Backend Editor, click on this button:

screenshot screenshot

A shortcode selecting panel will show up, you can see all the shortcode available in the theme. Select the one you would like to use.

screenshot
tabs
screenshot
  • Style: select tab style
  • active tab: You can active any tab
  • Then you can add any elements you need to put it inside tabs
screenshot
Accordion
screenshot
  • active tab: You can active any accordion
  • Style: select accordion style
Heading
screenshot
  • Style Heading: Select Heading color "Dark", "light"
  • Content Alignment: Select content align "Text Center" , "Text Right" and "Text Left"
screenshot
  • Heading Element Tag: Select Heading Tag "h1", "h2", "h3", "h4", "h5" and "h6"
  • Title Text: write title heading
  • Content: write title description
screenshot
  • Extra Class: If you wish to add extra class to this element
  • Extra id: If you wish to add extra id to this element
Clients image
screenshot screenshot screenshot
  • Style: select clients style
  • Clients Count: Number Of Items to show
screenshot
  • Client Categories: select Which categories would you like to show
Hero Content
screenshot
  • Style Heading: Select Heading color "Dark", "light"
  • Content Alignment: Select content align "Text Center" , "Text Right" and "Text Left"
screenshot
  • Heading Element Tag: Select Heading Tag "h1", "h2", "h3", "h4", "h5" and "h6"
  • Title Text: write title heading
  • Content: write description text
  • Button Link: click on select url to Add link for button.
  • Button Text: Enter text for button.
Popup Video Style
screenshot
  • Popup Video Style: Select Popup Video Style
  • Upload images: Upload images you want to show in gallery
screenshot
  • Add Video links: click on select url to Add Url link and text link
Testimonial Block
screenshot screenshot screenshot
  • Testimonial Block style: select Testimonial Block style.
  • Testimonial Block Count: Enter Post Count.
screenshot
  • Testimonial ID: Enter Testimonial id.
Team Block
screenshot screenshot
  • Team Block style: select Testimonial Block style.
  • Team Block Count: Enter Post Count.
screenshot
  • Team ID: Enter Team id.
Portfolio Block
screenshot screenshot screenshot
  • style: select Portfolio Block style.
  • Portfolio Block Count: Enter Post Count.
screenshot
  • Enable Fillter Portfolio: Enable / Disable Fillter Portfolio.
  • Default Text: enter text.
screenshot
  • Portfolio Categories: Select Which categories would you like to show?
  • Portfolio ID: Enter Portfolio id.
List icon Block
screenshot
  • Text Content: Enter Text Content.
  • Icon library: Select Icon library
  • Select Icon: Select Icon
Location Map
screenshot
  • Add a custom map size: set width and height for map.
  • Upload Map Marker: Select Icon library
screenshot
  • Enter a marker title: set width and height for map.
  • Address: Enter map locaion Address
  • Lat Position: Enter google map lat long
  • Lng Position: Enter google map lng long
  • Map Zoom: Enter map zoom value
Alert Block
screenshot
  • Style: select alert block Style.
  • Main Alart Color: Select Main Alart Color
  • Background Alart Color: Select Background Alart Color
  • Text Alart Color: Select Text Alart Color
screenshot
  • Alerts Title: Enter Alerts Title.
  • Alerts Description: Enter Alerts Description.
  • Icon library: Select Icon library
  • Select Icon: Select Icon
Blockquots Blocks
screenshot
  • Style: select Blockquots Style.
screenshot
  • Content: Enter Blockquote Content.
  • Blockquote Title: Enter Blockquote Title.
Buttons
screenshot
  • Style: select Button Style.
  • Button Link URL: click on select url to Add link url and text for button.
screenshot
  • Select Button width: Select Button width "full width" and "auto width"
  • Select Button style:Select Button style "background color", "background Gradient", "background White" and "background Dark"
  • Select Button Border:Select Button Border "with Border" and "without Border"
  • Select Button Border style:Select Button Border style "with Border radius" and "with Border radius"
  • Select Button Hover style:Select Button Hover style "Button Hover Normal" and "Button Hover inverse"
Circles
screenshot
  • Style: select Circles Style.
screenshot
  • Circle Title: Enter Circle Title.
  • Circle Description: Enter Circle Description.
  • Circle Percent: Enter Circle Percent for example 80%.
screenshot
  • Select circle Style: select Circle Style "show icon" and "show percentage"
Counters
screenshot
  • Counters Style: select Counters Style.
  • Select Counters Layout Color Style: Select Counters Layout Color Style "dark color" and "light color"
screenshot
  • Counters Title: Enter Counters Title.
  • Counters Description: Enter Counters Description.
  • Select Counters Style: Show / Hide icon
Countdown
screenshot
  • Countdown Style: select Countdown Style.
  • Select Countdown Style: Select Select Countdown Style "light style" and "dark style"
screenshot
  • Countdown Year: Enter Countdown Year.
  • Countdown Month: Enter Countdown Month.
  • Countdown Day: Enter Countdown Day.
Timeline
screenshot
  • Timeline Title: select Timeline Title.
  • Timeline From: select Timeline From.
  • Timeline To: select Timeline To.
  • Select item position: Select item position "position right" and "position lefta"
Call to action
screenshot
  • Call to Action Style: select Call to Action Style.
  • Select Countdown Style: Select Select Countdown Style "light style" and "dark style"
screenshot
  • Style Heading: select Style Heading "dark" and "light"
  • Call to Action Title: Enter Call to Action Title
  • Call to Action Description: Enter Call to Action Description
  • Button Link: click on select url to Add link url and text for button.
Social icons
screenshot
  • Select Social Media Background style: Select Social Media Background style "with background" and "without background"
  • Facebook link: add your facebbok account link
Mailchamp
screenshot
  • Circle Style: Select Circle Style
screenshot
  • Form ID Subscribe: Enter Form ID Subscribe
  • Subscribe Style: Select Subscribe Style "light" and "dark"
Progress Bars
screenshot
  • Progress Bars style: Select Progress Bars Style
screenshot
  • Progress Bars Title: Enter Progress Bars Title
  • Progress Bars percent: Enter Progress Bars percent
Pricing
screenshot
  • Pricing style: Select Pricing Style
screenshot
  • Pricing Title: Enter Pricing Title
  • Pricing Percent: Enter Pricing Percent
  • Pricing Description: Enter Pricing Description
screenshot
  • Button Link: click on select url to Add link url and text for button.
  • Enable Active: Enable / disable active pricing.
Grid Block
screenshot
  • Data source: Select content type for your grid.
  • Post Count: Enter Post Count.
  • Post Order By: Select Post Order By "Date", "Random" and "Comment Count"
List Block
screenshot
  • Data source: Select content type for your grid.
  • Post Count: Enter Post Count.
  • Display Style: Select display style for grid.
  • Post Order By: Select Post Order By "Date", "Random" and "Comment Count"

Credit Files

I've used the following images, icons or other files as listed.

JavaScript Plugins
  1. jQuery
  2. bootstrap
  3. Owl Carousel
  4. Counter Up
  5. Magnific Popup
  6. Images Loaded
  7. Isotope
  8. countdown
  9. jquery gmap
  10. easy pie chart
  11. jQuery Waypoints
Icon Font
  1. FontAwesome
  2. Linearicons
  3. themify
  4. typicons
CSS Library
  1. Animate.css

Support

If you need any help. Feel free to contact us. We will reply within 24 hours. Send a mail from Profile Support

changelog

Initial Release V1.0

Released on 2 June 2018.

Top