If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress. How to work with Cherry Media Parallax Plugin (based on Cherry 3.x)

Our support team is glad to present a new guide on working with Cherry Media Parallax plugin in WordPress that shows how to change your pages content appearance by adding specific parallax features.

WordPress. How to work with Cherry MediaParallax Plugin

Once you have installed your WordPress template, it appears with the same background for the content. In case you need to change design of the specific area , you may use parallax features.

First you need to prepare your site to working with parallax plugin:

  1. Download the plugin via the following link and save the file to your computer:
  2. Install this plugin to your WordPress site in Plugins -> Add new -> Upload section:

    2_05

  3. Make sure the plugin is activated in Plugins -> Installed plugins section. Once it is activated, you can use Cherry Parallax shortcodes on your pages.

To use parallax plugin effects, you should open any site page and wrap the desired content with the required parallax shortcode.

  1. For example, you have posts_grid shortcode on the page:
    [posts_grid columns="4" rows="2" order_by="date" order="DESC" thumb_width="150" thumb_height="150" meta="no"
     excerpt_count="7" link="yes" link_text="more"]

    3_03

  2. In order to set background media, you may change it to
    [cherry_media_parallax typemedia="video" buffer_ratio="1" src_mp4="curtsurfing.mp4" src_webm="curtsurfing.webm"
    src_ogv="curtsurfing.ogv" src_poster="curtsurfing.jpg" custom_class="cherry_media_parallax_1"]
    
    [posts_grid columns="4" rows="2" order_by="date" order="DESC" thumb_width="150" thumb_height="150" meta="no"
     excerpt_count="7" link="yes" link_text="more"]
    
    [/cherry_media_parallax]

    In this shortcode there are the following parameters available:

    •                 	typemedia="video"

      or

                      	typemedia="image"

      means that video/image file will show up as a background of the chosen area. It is set to video by default.

    •                 	buffer_ratio="1"

      Buffer_ratio parameter takes a numeric value with a floating point (float), this number represents how many times the block with parallax is greater than the outer container. The greater the number, the stronger the media unit moves, the more pronounced the effect is.

    • 	
                      	src_mp4="curtsurfing.mp4" 
                      	src_webm="curtsurfing.webm" 
                      	src_ogv="curtsurfing.ogv"

      You need to set 3 video file formats: mp4, webm, ogv. Just upload videos to your media library and set files names to the shortcode.

    • 	
                      	src_poster="curtsurfing.jpg"

      Scr_poster image is for browsers that do not support the tag . Poster is an optional attribute of video tag, it is displayed while browser buffers necessary video part. The same poster will be seen in the oudated browsers like IE 8 or in any other browser that can not, for whatever reason, display your video.

    • 	
                      	custom_class="cherry_media_parallax_1"

      You may set custom css class for applying your style rules to the specific part of content.

  3. Another kind of parallax is
    [cherry_fixed_parallax src_poster="content_bg1.jpg" offset_value="no" fixed_value="no"
    custom_class="cherry_fixed_parallax1"]
    
    [posts_grid columns="4" rows="2" order_by="date" order="DESC" thumb_width="150" thumb_height="150" meta="no"
     excerpt_count="7" link="yes" link_text="more"]
    
    [/cherry_fixed_parallax]

    This kind of parallax is based on css property background-attachment: fixed; but with a shift in background-position.

    In this shortcode there are the following parameters available:

    • 	
                      	src_poster="content_bg1.jpg"

      Upload your desired image to the media library and set the file name here.

    • 	
                      	offset_value="no"

      Offset value yes/no sets a background image shift on the page scroll.

    • 	
                      	fixed_value="no"

      Fixed value yes/no is for using css property background-attachment: fixed; it can also be added invert_value (yes / no) to invert the offset if necessary.

    • 	
                      	custom_class="cherry_media_parallax_1"

      You may set custom css class for applying your style rules only to the specific part of content.

    It will let you have this look:

    4_03

Thank you for reading this tutorial. Feel free to check the video instruction below:

WordPress. How to work with Cherry MediaParallax Plugin