The Parallaxer WP - Parallax Effects on Content

Intro - top

The Parallaxer PRO is the ultimate Parallax blocks builder plugin for your WordPress site. It features Shortcode Generator, Visual Composer generation and many options along the way!

Wow your visitors with DZS Parallaxer and install easy in any template, and setup any content in any size.

Live Preview - here

Parallaxer Features

• fully responsive - looks great from mobile to HD
• touch optimized - touch devices are not forgotten
• CSS3 technology - this component uses cutting-edge css3 definitions
• easy install - purchase, download the zip, read the docs
• iPhone / iPad optimized - this gallery has been optimized for Apple touch devices
• Android optimized - this component has been tested on Android 4.0+ Chrome
• SEO friendly - built with search engine optimization on mind from the ground up, the Testimonial Rotator uses non hidden valid html markup to build the widget
• compatible with all major browsers, including IE - compatible from IE9 to IE11+, Chrome, Safari and Firefox
• retina ready - looks great on retina devices
• shortcode generator - generate the shortcode on the fly
• visual composer integration - integrate in the most powerful page builder
• developer / SASS powered - this component's CSS has been built on top of SASS which means SASS users will have an easy time modifying the skins. For non-SASS users it's no problem either because CSS files ( generated by SASS ) are provided

What do you get?

• layouter WordPress plugin - get creative!
• documentation - extensive documentation on how to install & configure the plugin
• free updates - even if the value of this gallery increases with upcoming updates, you will get them for free
• free support - via my forum -> http://digitalzoomstudio.net/support/

Installation - top

1. Just download the zip from your http://codecanyon.net/user/yourusername/downloads directory in a folder of your choosing.
2. Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:

3. Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
4. You should now see the scroller button on each post / page:
   
5. Start cusomizing to your needs. Have fun!
   

Here is a sample install video:

Knowledge base - top

For more complete and up to data tutorials visit - Our knowledge base

Adding to the Post / Page - top

1. access / create your post / page
2. click the Parallaxer shortcode button ( show below )
3. insert your image via the Add Media button
   
4. all done!

Example shortcode

Special Features- top

Have custom content instead of images

You can have custom content instead of images, like a YouTube video. All you have to do is press the enable custom content checkbox. A new editor will come up. It's recommeded that you use the Text editor for html content.

Example shortcode embedding a YouTube video:

TIP - For hiding the controls, just input height="640"instead of height="600"

Doing this in Visual Composer

You can do Custom Content in Visual Compser too. Just a little bit different. You need to Enable Text Mode in the Content editor.

If you want to add a center text too or a separator, you can do it

Displaying some custom text /html above the parallaxer

You can use the Content editor in the Shortcode generator. Again it's recommeded to use the Text editor for custom html.

Example of shortcode displaying a semi-transparent black overlay and a big centered hero text overneath:

How to add text content inside parallaxer and adapt height to it / responsive

Just use the shortcode generator, add a background and make sure Adapt Height to Content Width is set to on

and that should be it.

Example shortcode you can just paste

How to add a separator in the Shortcode Generator

This image should make it clear:

How to apply the oneelement effect on any element

For example, if we want to apply the oneelement effect on this image

We just wrap the image into this shortcode

Setting a custom width to parallaxer

The parallaxer will always be fullwidth of the parent container ( or it can be the full page width if you enable the breakout option ) . But you can edit the parent container's width

How to set up the demo team module

Open the shortcode generator, and under the content field, click the Add Team Module button, the text appended will be:

I bolded the part which handles the parallax properties. This is the attribute - [{property:"opacity",value:"{{val}}",initial:"0",mid:"1",final:"0"},{property:"transform",value:"translate3d(0,{{val}}px,0)",initial:"-30",mid:"0",final:"0"}] .

It's basic javascript object structure. You can modify any css property on this.

How to enable

Go to Parallaxer > Parallaxer ( settings page ) and enable it.

Then you will find the Module Features Shortcode Generator on any post / page.

FAQ - top

You can check this link for a list of popular questions. Other questions you might have:

Is it iOS compatible ?

Yes, it has been built from the ground up and tested to work on the iPhone / iPad.

How to change preloader icon ?

To change loading icon you can go to Parallaxer > Settings and in extra css enter

body .preloader-semicircles{
width: 30px; height: 30px; background-image:url(url(https://placeholdit.imgix.net/~text?txtsize=33&txt=placeholder&w=400&h=1000)); animation:none; -webkit-animation:none; border-radius:0; }  body .preloader-semicircles:after{ display:none; } 

Developer Tips - top

The builder application welcomes all . No support is offered for customizations.

Recommended Programs

You can generally use any text editing software to edit most content/code, but this is what I recommend:

• .zip – Normally you could just right click and extract to a folder of choice [ on both Mac and Windows ]
• .html - Notepad++
• .js - Notepad++
• .as - Notepad++
• .fla - Flash CS5
• .xml – Notepad++