Infinite Pro Documentation

General Info

General Info

We would like to thank you for purchasing Infinite! We are very pleased you have chosen Infinite for your website, you will not be disappointed! Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need to use Infinite. Infinite can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please see our section on WordPress to help you get started.If you are unable to find your answer here in our documentation, we encourage you to perform a Forum Search for your answer. Chances are your question or issue have been brought up already and the answer is waiting to be found. If you are unable to find it anywhere, then please go go our forum section and post up a new topic with all the details we need. Please be sure to include your site URL as well. Thank you, we hope you enjoy using Infinite!

Back To Top

WordPress Information

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes. Below are all the useful links for WordPress information.

 

Back To Top

Requirements For Infinite

To use Infinite, you must be running WordPress 3.5 or higher, PHP5.3 or higher, and mysql 5 or higher. We have tested it with Windows, Linux and Mac. Below are a list of items you should ensure your host can comply with.

  • Check to ensure that your web host has the minimum requirements to run WordPress.
  • Always make sure they are running the latest version of WordPress
  • You can download the latest release of WordPress from official WordPress website
  • Always create secure passwords FTP and Database
Hosting is more secure when PHP applications, like WordPress, are run using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using suPHP. Just ask your potential host if they run suPHP or something similar.

We recommend using WpEngine.com or JustHost.com for all your hosting needs. 

 

Back To Top

Free Support Forum

All of our items come with free support, and we have a dedicated support forum to handle your requests. Support is limited to questions regarding the theme’s features or problems with the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme then you should enlist the help of a developer.

For free support, follow the steps

Step 1 – Login to the Support Forum using your username and password created while purchasing the theme from ravichandrach.com. If you purchased the Theme from Mojo Themes or  CreativeMarket, enter a item comment for Infinite where you purchased it and mention your email address. A new account will be created with that email address and the password will be emailed to you

Step2 – Once you login to the forum you can start using it

Back To Top

Before You Post On Forum

To help speed along your request, we require that you follow the steps below before posting a new topic on the forum. This is for the benefit of everyone and will help make the entire forum more efficient. It’s very important and we ask that everyone who posts follow these steps.

Step 1 – Always check the Documentation. Most questions can be answered in those areas.

Step 2 – Always perform a Forum Search before you post, its very possible your issue has already been brought up and has been answered.

Step 3 – If your question has not been brought up, then please post a new topic and always include:

  • Your live site URL that shows the issue
  • Version of Infinite and version of WordPress you are using
  • Specific browser or device involved if applicable
  • Detailed information describing the issue
  • Possible screenshots of the issue

 

Step 4 – To speed the process up, quickly post a second reply and include your WP & FTP login info and be sure to check the “set as private reply” checkbox so only our team will see.

Step 5 – Patiently wait! We strive to get you answers as quickly as possible. Do not BUMP your thread, it will take 2X as long to get a reply because we answer threads from old to new.

Step 6 – Don’t post any spam, we will remove them and could possibly remove the user account.

Back To Top

Installation

Installation

You can install the theme in two ways: through WordPress, or via FTP. The Infinite.zip file is the Installable WordPress Theme and what you need to use to get the theme installed. Please see the following sections for each method on how to install Infinite.

Back To Top

WordPress Installation

Follow the steps below to install via WordPress.

Step 1 – Login to your WordPress admin panel

Step 2 – Navigate to Appearance > Themes.

Step 3 – Click Install Themes and hit the upload link.

upload-theme

Step 4 – Navigate to find the “Infinite.zip” file on your computer and click “Install Now”

Step 5 – Wait while the theme is uploaded and installed.

Step 6 – Activate the newly installed theme. Go to Appearance > Themes and activate it.

Step 7 – Once you Activate the theme you will get a Notification message asking you to Install “Required” and “Recommended” plugins, install all the required Plugins.

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

If you get the “Are You Sure You Want To Do This” message when installing Infinite.zip file via WordPress, it means you have an upload file size limit. Install the theme via FTP if this happens, or call your hosting company and ask them to increase the limit.

Back To Top

FTP Installation

Follow the steps below to install via FTP.

Step 1 – Log into your hosting space via an FTP softwareStep 2 – Unzip the Infinite.zip file and ONLY use the extracted Infinite theme folder

Step 3 – Upload the extracted Infinitetheme folder into wp-content > themes folder

Step 4 – Activate the newly installed theme. Go to Appearance > Themes and activate it.

Step 5 – Once you Activate the theme you will get a Notification message asking you to Install “Required” and “Recommended” plugins, install all the required Plugins.

upload-ftp

Back To Top

How to activate Infinite Pro theme

You need to activate Infinite Pro theme to receive auto updates. Once activated, if there a new version of Infinite Pro available you get the update notification right in your wordpress admin backend just like a normal plugin.

To activate the Infinite Pro Theme follow the below steps

Step 1 – Navigate to Infinite Options > Theme Activation Tab.

Step 2 – Enter your license key (If you purchased the Theme from Mojo Themes or  CreativeMarket, enter a item comment for Infinite where you purchased it and mention your email address. A new account will be created with that email address and the password will be emailed to you along with the license key).

Step 3 – Click on Activate  button, it takes few seconds to check the license key and once your license key is authenticated your theme will be activated and you will receive auto updates.

activate-theme

 

Back To Top

How To Update Theme

If you have Activated the Infinite Pro theme using a license key, you will receive auto updates and you can choose to update it right from the wordpress admin screen. However, for some reasons you want to manually update the theme, please follow the below steps.

Download the Theme from where you purchased it

How To Update Your Theme Via FTP

Step 1 – Go to “wp-content > themes” location and backup your “Infinite” theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

Step 2 – Retrieve the “Infinite.zip” file from your new download and extract the file to get the “Infinite” theme folder.

Step 3 – Then simply drag and drop the new “Infinite” theme folder into “wp-content > themes” location. Choose to “Replace” the current one if you did not delete it.

How To Update Your Theme Via WordPress

Step 1 – You need to deactivate the current “Infinite” theme in the “appearance > themes” section by simply activating a different theme. Once you activate a different theme, you can delete the Infinite theme. Dont worry, your content will not be lost.

Step 2 – Retrieve the “Infinite.zip” file from your new download.

Step 3 – Then simply upload the “Infinite.zip” file in the “appearance > themes” section. Click on the “Install Themes” tab at the top and choose to upload the zip file.

Step 4 – Once it uploads, choose to activate it. You’re done!

Back To Top

Demo Content

Demo Content

When you first install any wordpress theme, it will not contain all the extra content that you might of seen in the live demo. Usually you have to import an XML file which can be troublesome. We’ve made it easier by creating a Theme Options Demo Content Importer. Using this you can install all the Demo Content with just a button click.

Back To Top

Manual Installation

For any reason if you want to import Demo Content manually, please follow the below steps

Step 1 – Navigate to Tools > Import panel and click on WordPress. If you don’t have the WordPress Importer plugin already, it will take you to the WordPress Importer installation screen. Install the wordpress importer plugin and activate It

Step 2 – Navigate to Tools > Import and click on WordPress, you will see an option to choose a file. If you have extracted the Infinite.zip folder to your local computer, select Infinite Folder > framework > importer > dummy > infinite.data.xml and upload this file. Worpdress will ask you for some options like users, choose the appropriate options. This will also takes some time to import all content.

Back To Top

One Click Installation

The fastest and easiest way to import our demo content is to use our Theme Options Demo Content Importer. Our importer will give you all pages and posts, several sample sliders, assigned pages, and more. This is recommended to do on fresh installs because it will replace your current theme options and other settings. So the best time to use the importer, is when you first install Infinite. To import our demo content, please see the steps below.

Step 1 – Install and activate these plugins before you proceed: Revolution Slider, WooCommerce. Woocommerce is only needed if you want an online shop.

Step 2 – Navigate to Infinite Options panel and click on the General Settings tab.

Step 3 – Click the “Import Data” button and be sure to read the popup message.

Step 4 – Once the button is clicked, it can take some time to import everything. Please be patient and wait for it all to load. Once it loads, you will see a “Success” message. Once you receive the success message, please visit your site to view all the demo content.

Common Issues – If you already have sliders made, its possible that our demo sliders may not be applied to the pages. Sliders are applied by the “Slider ID” and each slider gets its own unique ID and they are given in numerical order. If you open up a page after importing the content, and you see an error stating something like “LayerSlider cannot be found”, you only need to edit the page, and then assign the correct slider to display on the page.

Back To Top

Pages

Setting Up Contact Page

Infinite includes a contact page with a built in contact form.

To create the Contact Page, follow the steps below

 

  • Create a new page and give it any name you wish
  • In the Page Attributes box on the right hand side, set the Template to Contact us
  • Save the page and reload it, once you save it the page options will have new options now, which are explained below
    • Admin email – The email address of the administrator who should receive an email when the contact form is filled out
    • Text – Any text you want to show in the contact form, usually something you want to inform the user
    • Address – Your address, this will be shown in the contact form
    • Phone – Your Phone #
    • Fax – Your fax #
    • Email – Your email address you want to show in the contact form
  • Once you are done, be sure to Publish

 

Please Note: Setting the page template to Contact will automatically set the contact form, you can show or hide the sidebar by select the “Display Sidebar” option in the Page Options

Back To Top

Setting Up Home Page

Infinite includes 5 pre-designed home pagess. Any of the layout options you see on the 5 home pages can be used on your home page or any other page via shortcodes, you are not stuck with the pre-designed options. You can mix and match anyway you like.

Homepages can be built through a combination of shortcodes or with our pre-designed demo pages.

To use one of our pre-designed layouts, simply set the homepage as that page, instructions to set your home page are below

To create your home page with shortcodes, click the shortcode icons you want in the Visual Editor and populate your content. See our shortcodes section for more detailed info on how to use them

Once you have created your home page, you need to select it to show up as the home page. To do this, follow the steps below.

  • Navigate to Settings > Reading
  • Select A Static Page for Front Page Displays
  • Select your new home page for the Front Page

home-page

 

Back To Top

Pages

You can create any number of pages with content. Infinite includes several page templates to choose from, and you will need to choose the page template that suits your needs.

 

Follow These Steps Below To Create A New Page

Step 1 – Navigate to Pages and click Add New.

Step 1 – Input a new name for your page, then find the Page Attributes box on right side.

Step 2 – Set your Parent page; it’s usually set to No Parent

Step 3 – Set your template from the dropdown list. See list of page templates below.

Step 4 – Select any number of page options in the Page Options box

Step 5 – Content for your page goes in the editing field, use the Visual or Text editor. Page content is mainly built using Shortcodes, see the Shortcodes section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page

 

Below are the page templates along with a description of each one

  • Default: this is the default page template that automatically has the sidebar with it. Choose this template for your blog
  • Contact: this is the contact page template that you should choose when you make your contact page with  contact form
  • Portfolio Pages: these are all the portfolio page layout templates, choose grid, 2, 3 or 4 columns depending on the layout you want.
  • Blog Pages: these are all the portfolio page layout templates, choose grid, timeline, normal or medium depending on the layout you want.

 

Here is a screenshot that shows you the various areas and descriptions of the page settings described above

Note: This screenshot is when the Pixgridder plugin is not activated or disabled for this page, check the Pixgridder section for screenshot with the pixgridder enabled

page

Back To Top

Blog

Setting Up The Blog

To setup your blog page, create a new page and name it anything that you want. Make sure the page Template is set to one of the Blog templates in the Page Attributes Box on the right hand side of the page editor. Doing that will automatically apply the sidebar to your blog page based on the Template you choose. Infinite has 4 different blog layout designs; Grid, Timeline, Medium and Normal. Each layout can be used with or without a sidebar.

  • Then add the page you just created to your menu to access the Blog page

 

After your Blog page is made, you have to create posts to show up on the blog page. Follow the steps below to create a blog post.

 

  • All of your blog posts are made in the Posts section of your wordpress admin. Click on Posts to open the section.
  • At the top of the posts page, click on Add New to make a new post. Create a title and insert your post content in the editing field
  • On the right hand side of the post page is the Categories box. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the Category name.
  • You can also apply Tags to a post. The Tag box is below the Category box. Simply insert your tags, separate multiple tags with commas
  • To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use As Featured Image
  • Once you have everything you want selected, click Publish and your post will show up on your blog page

Here is a screenshot that shows you the important areas of the blog post page outlined above

post

Back To Top

Portfolio

Setting Up The Portfolio

To setup your portfolio page, create a new page and name it anything that you want. Infinite includes 5 different portfolio templates, Grid, 1-4 column. Select the page Template of your choice.

After you create your new page and select the template, you need to make portfolio posts. Each portfolio item gets a thumbnail added to the main listing page (by setting a featured image for each post) and also gets a single portfolio page.

After your Portfolio page is set, you create posts to show up on the portfolio page. Follow the steps below to create a portfolio post.

 

  • All of your portfolio posts are made in the Portfolio Items section of your wordpress admin. Click on Portfolio Items to open the section.
  • At the top of the page, click on Add New Portfolio Item to make a new portfolio item. Create a title and insert your post content in the editing field
  • On the right hand side of the post page is the Categories box. These Categories are the filters that will sit above your portfolio images and allow you to filter the different types of projects. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a portfolio item, simply check the box next to the name.
  • Also on the right hand side of the post page is the Skill box. Follow the same steps above for Categories to create a new Skill
  • To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use As Featured Image. Setting a Featured Image is important because it is needed for the thumbnails to show up on the main portfolio page.
  • Below the post content editing field are your Portfolio Options. You can set various things here including, project attributes that show up on the single portfolio post pages, type of portfolio (Accordion or Normal), Project Url, Task and Client
  • Once you have everything you want selected, click Publish and your portfolio item will show up on your portfolio listing page and the single portfolio item page

 

Here is a screenshot that shows you the important areas of the portfolio post page outlined above

 

portfolio

Infinite also allows for Unlimited Portfolio Pages with a custom set of Categories (Filters) per Portfolio page

 

To setup multiple portfolio pages, simply create a new page for each portfolio you want to have, and select the page Template of your choice for each of those pages as the above directions state. You can select Portfolio One, Two, Three or Four Column for each Portfolio page and each portfolio page can have a different template as well as a custom set of Category Filters.

Infinite gives you the option to choose the portfolio categories you want to display in any of the portfolio templates, open the page which has a Portfolio Template and you will see a new option Portfolio Categories in the Page options. This will show all the categories in Portfolio and you can only check the categories you want to display in this page. If you want to display all categories, don’t check anything

portfolio-template-options

 

 

 

Back To Top

Menu

Setting Up The Menu

Infinite supports custom WordPress menus, with up to three levels of dropdown support for the main menu. Infinite supports one main menu. If you’ve imported the demo data as described above, then please follow those steps and select the demo navigation menu called “infinite” as the main navigation. If you are making a new menu and would like to assign it to the main menu, read below.

 

To setup a new menu, please follow the steps below. Its best to already have your pages created, even if they are blank pages.

 

  • Navigate to Apperance > Menus page
  • Click the “+” icon to make a new menu. Enter the name then hit Create Menu
  • To add a menu item, you can easily select one of your already made pages on the left hand side and click Add to Menu
  • You can also add menu items by entering a custom name and custom link into the Custom Links box.
  • You can manage your menus using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section.
  • After setting up your menu, select the menu you just created as the Main Navigation in the Theme Locations box
  • Once its all done, make sure you click the Save button.

Back To Top

PixGridder

PixGridder

PixGridder is a “grid builder” instead of a page builder, because a page builder is commonly intended as a tool that allows to create sections and, usually, comes with shortcodes such as tabs, accordions, particular sections, galleries etc… And, in many cases, all these shortcodes are not compatible with other similar plugins you could prefer to use.

PixGridder is instead very simple, because it only allows to split your page into rows and columns by moving the functions available on your tinyMCE editor from the whole page to each column you decide to split your page into. In this way you can use the plugins you prefer with the shortcodes you prefer (and also the buttons available on your tinyMCE editor) since the editor is exactly the same one you would have without using PixGridder.

How it works

PixGridder doesn’t generate shortcodes, it only puts into your posts and pages some html comments like this: <!--pixgridder:row[cols=3]-->

They’re invisible except through the source code. So if you want to disable the plugin you don’t have to worry about a lot of strange and unuseful shortcodes across your content because everything will be hidden for both the users and the search engine robots.

However, if you want to remove any trace of the plugin from the source code of a page, you can do it by enabling the “no trace” option: you’ll get rid of all the HTML comments, but you’ll keep unaltered your content.

Standard PixGridder

Standard PixGridder has the below features

 

  1. title and version of the installed plugin
  2. Preview tab: by clicking it you will see the live site with a preview of the changes, not editable from the preview visual itself
  3. Builder tab: where you can edit your page/post by using the grid builder
  4. row dragger: use it to sort your rows and move them to the top or to the bottom
  5. ID and class: use it to open a dialog box where to add an ID or a class to your row
  6. clone button: clone your entire row and append the clone below the original one (everything will be cloned, cloumns, IDs, classes etc.)
  7. column select: select how many columns your row is based on
  8. delete: remove the row
  9. alert icon: this icon will appear when you make a not-allowed operation, such as adding a column where there is no space for other columns or try to reduce the width of column if it already has got the minimum width allowed
  10. add row: click to add an empty row
  11. add column: click to add an empty column
  12. column dragger: use it to sort your columns and move them to the left or to the right inside a row
  13. column content: here is displayed a preview of the content (the font and the text color won’t reflect on the frontend)
  14. expand column: click to increase the width of the column
  15. contract column: click to reduce the width of the column
  16. edit column: click to open a dialog box where to edit the content of the column (a tinyMCE editor will open in the dialog box, the width of the textarea will be relative to the max width set for the theme you’re using and the width of the column you’re editing)
  17. clone button: clone your entire column and append the clone to the right of the original one, if there is enough space (everything will be cloned, content, ID, class etc.)
  18. ID and class: use it to open a dialog box where to add an ID or a class to your column
  19. delete: remove the column
  20. “Disable the grid builder”: tick the checkbox and update the page → now the page is editable without using the grid builder, but the frontend still displays columns and rows, so pay attention to not remove any html comment or you risk to break the layout
  21. “Remove any trace of PixGridder from this page”: tick the checkbox and update the page → all the row and the columns will be removed but without touching the content, still available both on the frontend and on the editor

PixGridder bundled with Infinite Theme

PixGridder bundled with the Infinite theme has additional options not available in the standard one available in wordpress repository.

Section/Full Width Row

Choose either a normal row or a section (which lets you change the background color or image)

If you choose a section you will see a new settings icon, clicking on that will open a dialog box with the section options.

row-section

 

 

Section Options

  • Text Color – The color of the text within the section
  • Background Color – The background color of the section
  • Background Image – The background image of the section , this overrides the background color
  • Border Top Color – The border color at the top of the section
  • Border Bottom Color – The border color at the bottom of the section
  • Shadow Top – Show or hide Box Shadow at the top of the section
  • Shadow Bottom – Show or hide Box Shadow at the bottom of the section
  • Space Top – Empty space (Padding) you want at the top of the section (in pixels), this will be inside of the Section
  • Space Bottom – Empty space (Padding) you want at the bottom of the section (in pixels), this will be inside of the Section

section

 

 

Back To Top

Revolution Slider

Revolution Slider

Infinite includes the newly popular REVOLUTION SLIDER CREATED BY THEMEPUNCH. This slider is a beautifully animated slider that is 100% rsponsive and has some amazing options. Below documentation is taken from the revolution slider documentation

Back To Top

Create Slider

Create Slider

 

How to create new Slider ?

  • Select the New Installed Revolution Slider
  • Press Create New Slider

 

Your First  Slider

  • Set the Slider Title and the Slider Alias (please don’t use special chars and spaces here !)
  • Select your Layout and Settings and press Create Slider. (below you will see a Description for each settings in and Possibilities)

 

 

Back To Top

Main Settings

Main Settings

Editing Main Settings

  • Once you Created a Slider, you can open the Slider Settings  (Settings) any time to manage any general settings per Slider

 

 

Slider Title

A Internal used Name for the Slider. Only for Backend Usage

Slider Alias

An individual name of the slider. Dont use Speical chars and spaces here. This will be used for ShortCode embeding and for any other art for embeding and corresponding / link internal to the slider.

 

Slider Shortcode

This is the Shortcode to embed into your WordPress Pages, widgets etc.

 

Source Type

  • Posts
    Pull content for the slides from WordPress Posts by Categories and/or Tags
  • Specific Posts
    Pull content for the slides from specific choosen WordPress Posts
  • Gallery (this was the only type in previous versions)
    This is the default type, no content from other sources will be pulled.
    This type will be used most of the times.

 

Slider Layouts

  • Fixed
    A None Responsive Version of the Slider. Will have a prepared Width and height. Used for Older Themes
  • Custom (it has been called “Responsive” in Earlier version)
    A Custom Grid system to set size of Slider per Browser Size. You can define different Levels for sizes. Only used for Frameworks where no Fluid Widths has been used. (i.e. Skeleton)
  • AutoResponsive (it has been called “Fullwdith” in earlier versions)
    Used for Fluid Responsive themes, where the Slider calculates its onw size for every Browser size. Only max widt hand height of Grid should be defined. In case the Container Width is not Boxed, it will go Fullwidth Automatically
  • FullScreen
    Slider will take the height of Window and center the preseted Grid within. It will always try to go FullHeight and Fullwidth if the wrapping container allows.
    Please be sure to set a minimum height on FullScreen setting. This will make sure that the Slider won’t be really small in height on mobile devices and that it will have a height if it is not in the visible field on pageloading.

Grid Settings

Depending on the Layout you can set the Width and Height of the Captions. The Slider will go Fullwdith or Fullwidth and Fullheight in case you set AutoResponsive or FullScreen.  Caption Grid will be centered always within the slider container.

In some cases (Custom) you can set multiple Levels depending on Screen Size. This is not needed in AutoResponsive and FullScreen mode.

Fullscreen mode allows you to set a Container (per class or ID) which heights decrease the height of the FullScreen Slider Container automatically in every responsive level

 

Layout Example

Here you can see how the Slider will be seen on your Site, depending on what Settings you use in the Slider Layout and the two options “Unlimited Height” and “Force Full Width”

 

Save Settings

It updates your last settings to the Slider. If it is not pressed and you leave the Main Settings panel, your settings will be lost.

 

Delete Slider

Delete your current Slider.

Edit Slides

Open the Edit Slide Panel for further settings per Slide

Preview Slider

Preview the current Slider with all its slides and settings in an iframe.

 

General Settings

Delay

Set the Delay Globaly for each slide. You can modificate the Delay Time per Slide under the Edit Slide function.

Shuffle Mode

Random Order of Slides on/off

Lazy Load

Use Dummy images during Document Load. Main images per slider are loaded on Demand when the slide is shown first time.

Use Multi Language (WPML)

If WPML is installed, this enables the multilanguage option for the Slider. After this is set to true, you can choose in which languages each slide can be seen, and each slide can have multiple versions for each language with own captions and so on.

Stop Slider

Use this setting to stop the Slider after a predefined Loop and at a predefined Slide.  Loops 0 means in the first loop to stop and Stop At Slide 1 would stop directly at First slide.   i.e. Stop After Loops 2  and Stop At Slide 3 would stop the slider after 2 Loops ath the 3thd slide.

 

 

Google Fonts

Used for Google Font Embeding in Slider. You can add unlimited Fonts here, all of them will be available in the CSS Editor.

  • Visit The Google Font Page and search for your Font
  • Click on Quick Use and Select Standard Tab. Add this code into the textfield.
  • To add more fonts, click on Add New (Screenshot)

See also Caption HOW TO USE GOOGLE FONT later below

 

 

Position

The Position of the Slider within the Contaienr which is wrapping the slider.

 

 

Appearance

Shadow Type

Choose between different Shadow Effects under the slider. Shadow Height is excluded of the Slide Height ! You may need to set extra margin bottom via the Position Settings !

 

 

Touch Enabled

Turns on the Swipe function for navigation on mobile devices

 

Stop On Hover

Stops the Main slide Timer on MOuse Hover. Captions are still playing within the slide

 

Navigation Type

Set the Layout of navigation. Only Bullets, Bullets and Arrow, Thumbnails or None

 

Navigation Arrows

Choose between custom positions (solo) or Fixed position next to the bullets /thumbnails.

 

Navigation Style

The Style / Art of the Navigation

 

Positions

Per Bullet, Navigation Arrow you can set a Position per Align and per Offsets. I.e. Left Center aligned arrow still can have an offset to move it in different directions

 

Thumbnails

Thumbnail Width and Height and shown Amount of Thumbs in same time. On Hover the Thumbs are scrolled.

Mobile Visibility

Hide Slider Under Width

The Slider will be hidden and stopped if the Browser Size goes under this presetted Size. Works only if Custom Sizes set to Slider

Hide Defined Layers under Width

Hides predefined Captions if the Browser Size is smaller then this predefined size. To select Captions to hide, go in the Slide Editor and turn on / off the option on the Captions one by one.

 

Hide All Layers Under Width

Hides All Captions if the Browser Size is smaller then this predefined size.

 

Hide Arrows/Bullets/Thumbnails on Mobile

Hides chosen navigation type if the Slider is viewed on a Mobile device.

 

Alternate First Slide

You can set a different First Slide than the Slides Order use. You can set also a different First Transition then it defined in the Slide Editor to make sure that the first Transition is some Eye Catching animation, but later only use the Slide transitions i.e

 

Troubleshooting

In Some Theme the Output of the Slider is broken, filled due br and p tags. Also some theme has jQuery conflicts or embedding the jQuery library in a way which would break the slider. In this case please turn on the Output Filters, and try the different settings to see if the Output art fix your issue.  (most Problem solved by setting this to “by Echo Output”)

 

Back To Top

Slides Editor

Slides Editor

 

Add New Slide to the Slider

Click on Slide Editor to get in the Overview of the Slides added in the Slider. If there are no Slides added yet, New Slide or New Transparent Slide can be used to add Slides to the Slider. Add New Slide can be done also in the TAB View once the Edit Slide View is opened. See Later Below.

 

Delete/Duplicate/Copy/Move

Each Slide can be Deleted, Duplicated, Copied or Moved into an other Slider !

 

Turn On/Off Publishing of the Slider

During Editing/Modification the Slide it is clever to turn off the Visibility on Frontend. CLick simple on the 

 

Drag And Drop to Reorder

Simple Drag and Drop the slides to reorder them. Use the  for this.
This can also be done in Slide Edit Mode by dragging and reordering the tabs on the top.

 

 

Back To Top

Slide General Settings

Slide General Settings

 

Navigate between the Slides simple selecting The Tabs on the top. Dont forget to Update the Slide before you Leave one tab !

 

Each Slide has its own Genearal Setting. You can set transitions, Local delays, thumbnails etc. here.

Slide Title

Used only Internal Naming of the slides

 

State

Published / Unpublished  – used for Editing, modificating the slide. If it is Unpublished, frontend wont show this slide at all.

 

Visible From/Until

If set, the Slide will only be visible between the set times.
If Visible Until is not set, the Slide will be visible as soon as the Visible From date is reached.
If Visible From is not set, the Slide will be visible until the Visible Until date is reached.

 

Transitions

The Animation Style how the Slide appearance. You can select more than one from a multiplie choise drop down list.  Every new loop will use an other Transition if you selected more then one.

 

Slot Amount

The Amount of Boxes / Slots the slides divided into during the animation.

 

Rotation

The Rotation Degree on Simple Transitions. (-720 – 720, 999 = random)

 

Transition Duration

The Duration of the Transition. (Default 300, min 100 max 2000 ms)

 

Delay

A Local Delay for Slide. It overwrites the Global setting

 

Enable Link

it allows a Full width/height link on the Slide.  You can set Link Target and LInk URL here, or a Built in function like swap to slide X, previous Slide, Next Slide

 

The Image Source for the Main Image

A Slide can have an Image, Transparent Image, Solid Color or External Image as Main Image.  This Image is the “Main Layer” in the background which has been animated via the General Settings predefined Transtions parameter.

 

Background Fit/Repeat/Position

With these options, the chosen background image can be adjusted

 

Ken Burns Effect / Pan Zoom Effect

This effect is available ony for Image BG and External URL.

 

  • Background Start Position defines the Position where the Ken Burns effect will start. This can be directly seen in the Drag & Drop Editor
  • Background End Position defines the Position where the Ken Burns effect will end.
  • Start Fit/End Fit defines the Pan Zoom the image will be at the Start/End. The Start Zoom can be directly seen in the Drag & Drop Editor
  • Easing defines the easing the Background Image will have
  • Duration defines the duration all the effects will take. Default is the Slide duration.

 

 

The Drag And Drop Editor

Here you can Drag And Drop Move any Added Layer. The Best Way to move the Elements in the Right Position. Items are default aligned to left / top but via the Layer Styleing you can select different Aligns.

 

Back To Top

Text Layers

Text Layers

You can choose from following layers / captions:  HTML Markups,  Image, Video

For individual TEXT / HTML Markup Layer click on Add Layer and follow the following settings:

 

Style / Edit Style / Edit Global Styles

To define a predefined Style or add your own Style use the Style Drop Down list. You can change the Styling of the captions / Layers via the Embeded CSS Editor (Edit Style)

Use HTML5 Standard markups in case you wish to embed paragraphs, headings, buttons etc.
The Captions have the white-space:nowrap setting default. It is important because of the transitions. Please use <br> for linebreaking, or add different layers for multiple lines.

For further styling that is not possible through Edit Style, use the Edit Global Styles and put your Styles there.

 

Align & Positions

Set the Align of the Layers / Captions.  Left Top is default.  Drag and Drop move of the Layer will based on the Align. If you set the Align to Center Center, the Drag And drop will be based on this aligned position and use an Offset.

i.e. Center Center Offset X -100px Offset Y -100px  will be used in every reposnive size linear calculated.  If the Screen size is scaled to 50% than the Item is still in the middle of the grid and offset is -50px -50px  (linear calculated).

Center Center snaps the Center Center of the Layer to the Center Center position of the Gird.  Right Bottom snaps the Rightr bottom corner of the Layer to the Right Bottom corner of the Grid et.c..

 

Layer Animation

 

Start Transition

The way the Caption appear on the screen.  Select one of the Aniamtion , Easing and Speed.

End Transition

Optional. If not set, the Reverse Aniamtion will be used as set in the Start Transtion.

In case the slide sould stay all the time on the slide, but end animation should be different then Start animation, please select your End animation, and set End Time to the same as the Slide Delay.  If no End Time set, End animation will be ignored !

 

Link to Slide

Set a Special Link, like Swap to Previous / Next slide, Predefined Slide, Scroll Under the Slider etc.

Left Corner / Right Corner

Draw a Sharp Corner of the Caption. Only works if Background Color has been set for Caption

Responsive Through All Levels

If set, all HTML COntainers within this Caption are resized linear to Slider Sizes. Default turned off, and only top level markup within Caption is resized

Hide Under Width

Hide Caption under a certain width. This is useful, to have a more clear slide on mobile devices i.e.

Attributes

Set extra attributes into the caption, like extra classes, IDs or title

 

Back To Top

Image Layers

Image Layers

You can choose from following layers / captions:  HTML Markups,  Image, Video

For an individual Image Layer click on Add Image Layer and follow the following settings:

 

Style / Edit CSS

To define a predefined Style or add your own Style use the Style Drop Down list. You can change the Styling of the captions / Layers via the Embeded CSS Editor (Edit Style)

Use HTML5 Standard markups in case you wish to embed paragraphs, headings, buttons etc.
The Captions have the white-space:nowrap setting default. It is important because of the transitions. Please use <br> for linebreaking, or add different layers for multiple lines.

For further styling that is not possible through Edit Style, use the Edit Global Styles and put your Styles there.

 

Change Image Source

Change the Image Source itself

Alt Text

Set your own Alt Text here for SEO

Align & Positions

Set the Align of the Layers / Captions.  Left Top is default.  Drag and Drop move of the Layer will based on the Align. If you set the Align to Center Center, the Drag And drop will be based on this aligned position and use an Offset.

i.e. Center Center Offset X -100px Offset Y -100px  will be used in every reposnive size linear calculated.  If the Screen size is scaled to 50% than the Item is still in the middle of the grid and offset is -50px -50px  (linear calculated).

Center Center snaps the Center Center of the Layer to the Center Center position of the Gird.  Right Bottom snaps the Rightr bottom corner of the Layer to the Right Bottom corner of the Grid et.c..

Image Scaling

Change the Width/Height of the image, you can also scale the image proportional.

 

 

Start Transition

The way the Caption appear on the screen.  Select one of the Aniamtion , Easing and Speed.

End Transition

Optional. If not set, the Reverse Aniamtion will be used as set in the Start Transtion.

In case the slide sould stay all the time on the slide, but end animation should be different then Start animation, please select your End animation, and set End Time to the same as the Slide Delay.  If no End Time set, End animation will be ignored !

 

Image Link

The Link URL if Image has been clicked

Link Open In

The Link Target if Image has been clicked

Link to Slide

Set a Special Link, like Swap to Previous / Next slide, Predefined Slide, Scroll Under the Slider etc.

Hide Under Width

Hide Caption under a certain width. This is useful, to have a more clear slide on mobile devices i.e.

Attributes

Set extra attributes into the caption, like extra classes, IDs or title

 

Back To Top

Video Layers

Video Layers

You can choose from following layers / captions:  HTML Markups,  Image, Video

For individuall Video Layer click on simple Add Layer: Video and follow the following settings:

 

Choose from Youtbe / Vimeo / HTML5:

 

YouTube / Vimeo Settings

Enter ID / URL

Set the Vimeo / YouTuve Video ID here and Click on Search

Width / Height

Set the Basic Width and Height you wish to present your Iframe Embeded Video in the Slider

FullWidth

If selected, Video will be Shown in FullWidth Mode (within the Grid !) on the Slider

Video Loop

If selected, Video will be automatically looped

 

Preview Image

If set, the Video will have this as an overlay, the image will be automatic cropped at the output to fit the video size.
With a click on the Image, it will vanish and the video will start.

 

Arrguments

Set Indiivdual iFrame / Video Arguments here

AutoPlay

If Slide is loaded, video will play automatically

Note: enabling this setting will show the “Only 1st Time” option. Also checking this will have the effect that the video will only played one single time automatically

Next Slide on End

After Video has been played, next slide Transition starts automatically

Force Rewind

Video will always play from the beginning each time the Slide is shown

Mute

Video will be muted

HTML5 Video Settings

Enter Sources of Video (can set different Sources for Fallbacks)

Use an Image to show when Video is not Player

MP4/WEBM, OGV Sources should be added with Absolute Link

Width / Height

Set the Basic Width and Height you wish to present your iFrame Embedded Video in the Slider

FullWidth

If selected, Video will be Shown in FullWidth Mode (within the Grid !) on the Slider

Loop Video

If selected, the Video will loop

Autoplay

If checked, the Video will automatic play every time the Video appears on the Slide

Note: enabling this setting will show the “Only 1st Time” option. Also checking this will have the effect that the video will only played one single time automatically

Hide Controls

If selected, the Video will not have control buttons. This should be used with the autoplay option or the will probably not see that this is an video, that can be played.

 

Force Rewind

Video will always play from the beginning each time the Slide is shown

Mute

Video will be muted

Arrguments

Set Indiivdual iFrame / Video Arguments here

Style / Edit CSS

To Define a predefined Style or add your own Style use the Style Drop Down list. You can change the Styling of the captions / Layers via the Embedded CSS Editor

Use HTML5 Standard markups in case you wish to embed paragraphs, headings, buttons etc.
The Captions have the white-space:nowrap setting default. It is important because of the transitions. Please use <br> for linebreaking, or add different layers for multiple lines.

Edit Video

Open the Dialog Window as by Adding the Video Layer

Align & Positions

Set the Align of the Layers / Captions.  Left Top is default.  Drag and Drop move of the Layer will based on the Align. If you set the Align to Center Center, the Drag And drop will be based on this aligned position and use an Offset.

i.e. Center Center Offset X -100px Offset Y -100px  will be used in every reposnive size linear calculated.  If the Screen size is scaled to 50% than the Item is still in the middle of the grid and offset is -50px -50px  (linear calculated).

Center Center snaps the Center Center of the Layer to the Center Center position of the Gird.  Right Bottom snaps the Rightr bottom corner of the Layer to the Right Bottom corner of the Grid et.c..

 

 

Start Transition

The way the Caption appear on the screen.  Select one of the Aniamtion , Easing and Speed.

End Transition

Optional. If not set, the Reverse Aniamtion will be used as set in the Start Transtion.

In case the slide sould stay all the time on the slide, but end animation should be different then Start animation, please select your End animation, and set End Time to the same as the Slide Delay.  If no End Time set, End animation will be ignored !

 

Link to Slide

Set a Special Link, like Swap to Previous / Next slide, Predefined Slide, Scroll Under the Slider etc.

Left Corner / Right Corner

Draw a Sharp Corner of the Caption. Only works if Background Color has been set for Caption

Responsive Through All Levels

If set, all HTML COntainers within this Caption are resized linear to Slider Sizes. Default turned off, and only top level markup within Caption is resized

Hide Under Width

Hide Caption under a certain width. This is useful, to have a more clear slide on mobile devices i.e.

Attributes

Set extra attributes into the caption, like extra classes, IDs or title

Back To Top

Layer Sorting And Timing

Layer Sorting And Timing

In the Layer Sorting Table you can drag and Drop the layers to change their z-Index or Start time automatically.

Choose “By Depth” for editing the z-index of the layer/caption.

Choose “By Time” for editing the Timing of the layer/caption.

Manually Editig is also possible.

 

Click on the “eye” icon to hide / show the Layer from the Drag &  Drop Section above, for easy Editing of the captions.

Click on the “lock” icon to lock / unlock the Layer from the Drag &  Drop Section above. If a layer is locked, it can’t be dragged in the editor. This is useful if you have many captions and need exact positions that should not be changed anymore.

Clicking on one Layer selects that Layer for Further editing.

Back To Top

Add Slider to Page

Add Slider to Page

To add Full Width slider to a page

  • To add a full width slider to a page, open the page in the wordpres editor, in the Page Options, select the slider from the Revolution Slider dropdown and save your page.

To add via Shortcode

  • Simply open the Revolution Slider Backend for the overview list of Sliders.
  • Copy the Shortcode you wish to embed in the page.
  • Paste the Shortcode into your page.

 

 

Alternative Ways to add the Slider to your Theme:

  • * From the theme html use: <?php putRevSlider( "alias" ) ?> example: <?php putRevSlider("homeslider") ?>
    For show only on homepage use: <?php putRevSlider("homeslider","homepage") ?>
    For show on certain pages use: <?php putRevSlider("homeslider","2,10") ?>
  • * From the widgets panel drag the “Revolution Slider” widget to the desired sidebar
  • * From the post editor insert the shortcode from the sliders table

Back To Top

Google Fonts

Google Fonts

  • Open the Slider Settings
  • Click on the tab Google Font Settings
  • Check “Yes” at Load Google Font
  • Visit The Google Font Page and search for your Font (Screenshot)
  • Click on Quick Use and look at the Select Tab. Add this code to your Google Font Settings Field (The google font families to load).
  • Click on “Add New” to add unlimited fonts to the Slider.
  • To integrate the font, copy the font-family settings from Google Font page and edit a Style, open the advanced tab and put it into there. For further details look at the CSS Editor part later on.

 



Back To Top

CSS Editor

CSS Editor

To access the CSS Editor:

  • Edit a slide
  • Select a caption/image/video
  • Open the Layer General Parameters Tab
  • Select the Style that you want to edit or to add a new Style, input a new style name (at least two characters needed) Note: the style name is the CSS class!
  • Click on Edit Style

Now you will see the style editor:

  • Basic Styles can be easily changed through the Simple Editor Tab.
  • Under Font – Family you will find here the earlier mentioned Fonts, you inserted at the Slider Settings Panel.
  • For Advanced Settings, you can always open the Advanced Editor Tab and put all your CSS Styles for this CSS Class in here.
  • Every change you do, will be directly visible at the top. The example text will show how your style will be at the end!

  • To enable different styles on hover, click on the Hover tab and check the checkbox “enable :hover”
  • The Settings from the Idle state will be copied automatically if there was no hover style before.

 

To Save your changes, please click on Save/Change and follow the steps shown.

Delete Styles

To delete a Style, select it and click on Style Edit.
Now click on Delete and confirm your deletion.
Note: this can’t be undone!

Static Styles/Global Styles

If you want to add Styles that can’t be done through the Editor, there is also a solution for you:

  • Click on Edit Global Styles. This is in the Layer General Tabs near the Edit Style Button.
  • Put your custom CSS into the Static Styles tab. These Styles will be loaded on every page where a Slider is visible.
  • Press Save to save your newly added styles.
  • The Dynamic Styles tab shows the current styles, that will be loaded on the frontend (only styles that are used by Sliders will be loaded for better loading times)

Back To Top

Post Slider

Post Slider

For a Post based Slider, do the following steps:

  • First create a Template Slider
  • The Layout of the Post Slider will be defined through the Template Slider Settings!
  • Add Slides to the created Template Slider, these slides will be used by the Post Slider, that we will create later on.

To add dynamic content from Posts to a Slide:

  • Edit the Slide from the Template Slider
  • Press Add Layer to add a new text layer
  • Click on insert post template in the Layer General Parameters Tab
  • Choose one of the placeholders in the dialog
  • It will now be automatically be the text, this will be filled with Post informations

Now Create another Slider, and choose Post or Specific Posts as Source. The difference is, that under Specific Posts, you can choose exactly which Posts you want to use. Under Posts you can Select a whole Categories and/or Tags. Every Post that matches these Categories/Tags will be shown.
Now select unter Template Slider the previously created Template Slider! Save it and insert your Post Slider to your Pages/Posts like a normal Slider.

Back To Top

Import Export

Import Export

Import

To Import Existing Sliders (i.e. from our FREE EXPORTS) you can use the Import Function to overwrite existing Slider Settings or to create a new Slide from your Exported settings.

Since version 4.0, you can also import custom animations, dynamic styles, static styles and images through this! This means the whole Slider with images can be imported and everything will work without any work!

Choose the Export file (in newer versions this is a .zip. But you can also still use the old .txt files only).

IMPORTANT: Choose if you want to overwrite or append the Custom Animations and Static Styles.
Choosing overwrite means, that if the Animation exists, it will be updated. For the Static Styles means: The whole file with all Styles will be overwritten. This can’t be undone so please be sure to Save these file or to be sure, try to use append.

IMPORTANT: Dynamic Styles will always be overwritten, so if you import Sliders from another website, be sure that the exported Slider only uses unique Styles in Captions!

Export

To export the whole Slider click on Export. This will include the slider settings with all slides, dynamic styles, static styles and all images, that the slider is using.

Replace Image URL’s

This will replace all layer and background image url’s. Example: http://localhost/ to http://yourwbsite.com/.
Note: the replace is not reversible.

Back To Top

General Settings WP Backend

General Settings WP Backend

For Setting the Rights for WP Backend or using Revslider Libraries Globally / Locally please use the Global Settings. 

 

Plugin Permissions are Granted to

Admin

Editor & Admin

Author & Editor & Admin

 

Include Revslider libraries globally

Add css and js includes only on all pages. Id turned to off they will added to pages where the rev_slider shortcode exists only. This will work only when the slider added by a shortcode.

 

Pages to include RevSlider libraries

Specify the page id’s that the front end includes will be included in. Example: 2,3,5 also: homepage,3,4

 

Put JS Includes To Footer

Set this to On if you want that your JS Includes are written into the footer instead of the header of your website.

Back To Top

Shortcodes

Shortcodes

Infinite comes with lots of shortcodes, to use any shortcode we recommend you to use the Shortcode helper in the Text editor, as the shortcode helper opens a very user friendly Dialog box and you can simply visually select all the options for that shortcode. However if you want to know all the options provided in Infinite shortcodes, check the below link for the description and options available for all shortcodes

shortcodes

Click Here to View all Shortcodes

Back To Top

Widgets

Widgets

Infinite Widgets

Infinite comes with the below custom widgets

  • Contact Info: Provides contact information to the users based on the information you enter in the admin area
  • Recent Portfolio: Shows Recent portfolio items you created
  • Recent Posts: Shows Recent posts in the same way as you see in the demo, this is different from the normal Recent Posts widget in wordpress
  • Tag Cloud: Display tags which are designed and formatted, different from the default wordpress widget
  • Twitter Widget: Display recent tweets from a user, check the Twitter widget section on how to setup the Twitter widget
  • Flickr Widget: Display Flickr photo stream of a user

If you set the “Footer Columns” option in the “Theme Option” page to 2, the make sure that you don’t group more than 2 widgets in a Footer Widget, Infinite provides two footer widgets and you can have different widgets in each of them. But only set the number of widgets as per the “Footer Columns” option in a single footer widget

Back To Top

Setting up Twitter Widget

You need to have Twitter App (Twitter API credentials) to use the twitter widget

Creating the Twitter App

Watch the below video on how to setup Twitter App and get the API credentials

http://vimeo.com/60891535

Or you can follow the below steps as well

  1. Log into Twitter’s developers section.
  2. Go to “My Applications,” and click “Create a new application.”
  3. Fill out the required fields, accept the rules of the road, and then click on the “Create your Twitter application” button. You will not need a callback URL for this app, so feel free to leave it blank.
  4. Once the app has been created, click the “Create my access token” button.
  5. You’re done! You will need the following data later on:
    • consumer key,
    • consumer secret,
    • access token,
    • access token secret.

Adding the App details in the Theme

  1. Once you have created the app, login to your wordpress admin backend
  2. Go To Infinite Options and select the Twitter API tab
  3. Fill the four fields with the information you got when you created the app & save changes.
  4. Simply add the widget in sidebar or footer. You can add any number of widgets using one one API key

twitter

Fill the above 4 fields and then you can start using the twitter widget

Back To Top

Theme Options

Theme Options

Infinite comes with lots of customization options, each options is grouped into category and each category has a tab, explore the options. Each options has a good description the in the Theme options page itself.  Be sure to hit Save Options to save your settings once you are done.

theme-options

Back To Top

Credits

Credits

* Google Fonts (available through Google web Fonts: http://www.google.com/webfonts/specimen/Open+Sans), licensed under Apache License Version 2 (http://www.apache.org/licenses/LICENSE-2.0.html)
* FlexSlider by WooThemes under the GPLv2 license (http://www.gnu.org/licenses/gpl-2.0.html)
* FontAwesome by Dave Gandy (http://fontawesome.io) licensed under the SIL OFL 1.1 (http://scripts.sil.org/OFL)
* TGM Plugin Activation library (https://github.com/thomasgriffin/TGM-Plugin-Activation) licensed under GNU General Public License v2.0 or later
* Meta Box library (http://en.bainternet.info) licensed under GNU General Public LIcense v3.0
* Twitter bootstrap licensed under The MIT License (MIT)
* Modernizr Licensed under MIT & BSD
* Masonry lincesed under MIT License
* Colorbox Licensed under MIT
* Flickr pictures from following authors licensed under Creative Commons danielviero clab4design br1dotcom

Back To Top