ZT Parallax Guide

Introduction


Current Version 1.1.0 (March 17, 2013)

First of all a huge THANK YOU for purchasing our ZT Parallax Module. If you have any questions, please do not hesitate to contact us via ourHelpdesk System. Thanks so much!

ZT Parallax it is a unique module from Zootemplate.com, which quite simple to use and yet offers high-level modularity. Parallax module provides you the ability to quickly and easily build an amazing animated background with parallax effect and flexible content for your own site.

Requirements:

ZT Parallax has the following requirements in order to operate:

  • Joomla 2.5, or Joomla 3.x – ensure you are using the latest version
  • Compatible Browsers: Firefox, Chrome, Safari, IE8+, Opera.

In this example we will learn how to create a simple background image and content with Parallax module in a few steps. This is not a comprehensive guide but it would help you to get started.

1. Installation Guide


In this document, we will find step by step instructions for installing and using ZT Parallax effectively. You only need to take a few quick steps:

1. 1. Download extension package


Installing ZT Parallax takes just a matter of few minutes.

The first thing you’ll need to do is download the latest version of this module. The package you will download, is compatible with both Joomla 2.5.x and Joomla 3.x. It does not need to be uncompressed.

1. 2. Install extension package


Once you have downloaded the package, Log into your Joomla 2.5 or Joomla 3 Administrator section.

  • In the top menu, hover over Extensions and then select Extension Manager
  • In the Upload Package File section, click Browse and find the file you just download (mod_zt_parallax_vX.Y.Z.zip) in step 1 above. After you have selected this file, click the Upload and Install button.

install_module

When your ZT Parallax has been uploaded and installed successfully, you will see a confirmation message:

message

2. Extensions Usage Guide


ZT Parallax is a highly configurable module that allows you to control the various aspects of its appearance and functions. Please follow these steps to configure and use your new Weather module effectively:

2. 1. Enable Module


At this point we have installed a ZT Parallax module, however by default new modules are not enabled, so we’ll now enable the module.

  • Go to Extensions menu => Module Manager
  • Search for Module ZT Parallax by making use of the filter or looking for this module’s name from the select type menu.
  • Click on the status icon next to the module to enable it.

config_module

2. 2. Configure Module


This module contains several groups of options. First, you need to publish this module, assign it to a visible module position and change its order as well:

basic_setting

Note: There can be many module positions listed for you to select, but make sure that the module position you select is visible in front-page

Under Menu Assignment, select which pages you want to show the module on. You can choose On all Pages, No Pages, Only on the pages selected, or On all pages except those selected.

menu_assignment

All other important settings of this module are listed specifically below:

2. 2. 1. Add a Parallax Background


This lesson gives you a guide to adding a parallax image to a background.

  • Choose a background for your parallax of your site by clicking Background Type in the Site Admin then one of the following tabs:
    • Custom Background – Upload your own custom Photo or use a Video from Vimeo.
    • Background Image – Choose from a gallery of images.
    • Background Vimeo/Youtube – put a video from Vimeo or Youtube as the background
2. 2. 1. 1. Custom Background

You can set your Custom Background by selecting the Custom option from dropdown list. Then configure the settings discussed below:

custom

MP4 Video and Video Webm fomat supported!

  • Video Link mp4: Insert your MP4 Video link.
  • Video Link webm: Insert your Webm Video link.
  • Mute: Disable/Enable Video mute.
  • Opacity: Enables you to specify a level of transparency for the form and its controls. The opacity property can take a value from 0.0 – 1.0
  • Select Image Poster: Select an image as poster to your video. You can either browse the image from media library or upload an image.
  • Overlay Color: A color overlay is a simple effect that can be applied to images or video. Click on Color Overlay and you will see color selection.
  • Set min height: Sets the minimum height. Notice to Get (eg:250) and remove the “px” part of your string.
  • Show Box: Enable this option will show your video player. You can watch Video using box.
  • LightBox Video/Images: Insert the full URL of what you want to link to in the lightbox. This can be a link to an image, a YouTube of Vimeo video page.
  • Custom Title Icon: Create your own video’s title with icon
  • Custom tag icon: You can use tags “i” or “img”
  • Custom class icon: add a custom class option for the tag Icon.
  • Text: insert the html formatted text into the parallax editor. Text then will show up in the parallax.

zt_vimeo

2. 2. 1. 2. Image Background

The Parallax Module offers the background Images option for your background to choose from. Choose one of the Images from media library or upload an image by following these steps:

background_image

  • Background type: Choose the Image as your background type
  • Opacity: Enables you to specify a level of transparency for the form and its controls. The opacity property can take a value from 0.0 – 1.0
  • Overlay Color: A color overlay is a simple effect that can be applied to images or video. Click on Color Overlay and you will see color selection.
  • Background Image: simply add a background image by clicking the Select button from Background Image option. You can choose one of the Images from media library or upload an image.
  • Text: insert the html formatted text into the parallax editor. Text then will show up in the parallax.

<div class="container">
<div class="ptitle wow bounceInDown animated">
<h2>Our Works</h2>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 image wow rollIn animated"><img title="logo" src="images/workh.png" alt="zt_happy" border="0" /></div>
<div class="information col-lg-6 col-md-6 col-sm-6 col-xs-6"><br />
</div>
<div class="information col-md-6 wow bounceInRight animated">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere enim et nunc ultrices malesuada non sit amet turpis. Integer vitae nulla purus. Sed mauris velit, congue vitaeplacea, gravida elementum magna.</p>
<p>Vestibulum et purus sit amet velit commodo sagittis. Aliquam feugiat lacinia dolor vitae pharetra. In lacus leo, laoreet at vestibulum sed.</p>
<p><a class="zt-readmore" href="#">Read More</a></p>
</div>
</div>
2. 2. 1. 3. Vimeo/Youtube Background

Parallax module supports to turn videos on YouTube or Vimeo into beautiful full-screen backgrounds.

  • If your background type is Vimeo:

vimeo

Vimeo ID: All the vimeo video urls I see are always: http://vimeo.com/50834315. Get Vimeo id from a vimeo url and insert into this field.

Ratio video: video aspect ratio with parent div

  • If your background type is Youtube:

youtube

Video ID: insert your Youtube video ID. The video ID is the part between v= and & of the video’s URL.

Mute: Disable/Enable Video mute.

Control bar: Select to show or hide the control bar for the youtube video on screen.

Quality: Select the video quality.

Opacity: Enables you to specify a level of transparency for the form and its controls. The opacity property can take a value from 0.0 – 1.0

Ratio: Set the aspect ratio of video

2. 2. 2. Add Parallax Content


This is the back-end screen where you can add and edit Parallax content.

text_editor

You should now be on the content editor screen. We can entere some sample text or even insert an image into the intro text area.

NOTE: Remember to always turn off Toggle Editor when you want to edit HTML in the content section. Otherwise Toggle Editor can break your content.

2. 2. 3. Set up Parallax module


Once we have added background image and content to your parallax module, we’ll go ahead to configure the placement and the height of parallax:

set_parallax

  • Background Position: Specifies the position of a background image within its containing element.
  • Parallax Background: Parallax Background will be showed or not.
  • Repeat Background:The background image will be repeated both vertically and horizontally. This is default
  • Color Text: Select the color of parallax text
  • Top Padding: set the distance between the text and border-top of background image.
  • Bottom Padding: set the distance between the text and border-bottom of background image.

2. 2. 4. Advanced Options


The advanced module settings allow you to modify:

advanced

  • Module tag– to change the div in section
  • Bootstrap size– changing Bootstrap span grid class
  • Header tag– which aims for better SEO
  • Header class– adds the Bootstrap class in the page header
  • Module style– to inherit the Joomla installed template for the module styling.

Congratulations! You have just installed and configure ZT Parallax Module for your Joomla Site. Now return your homepage to see how it works.

3. Support Us


We want to know if you are happy, unhappy, or disappointed with something the feature has done, or if you have a suggestion about how we can do something better.

Please raise your support queries in our HelpDesk and make sure you follow the support guidelines. We spend more time in getting the information from user in case the support guidelines are not followed.

All feedback will be taken seriously and treated confidentially.

4. Let’s us know what you think


Help us improve this document by leaving your comments below. Thank you!