JP Squares

JP Squares plugin is an easy way to create animated squares with effectful background.

How to install:

• Download the latest “JP Squares” plugin package from product page.

• Install the downloaded “jp_squares.zip” using the extension manager menu in the administrator section of your Joomla website.

• After JP Squares plugin successfully installed in your website then go to the next step.

• From the main joomla menu click “Extensions -> Plugins”. Use the Search or Filter feature to find the installed plugin, and then make sure the installed plugin is enabled.

JP Squares Configuration :

JP Squares plugin settings makes easy to design the squares effect according to your requirements.

• Under "Download ID - Auto Updates", gently fill the Download ID received during the product purchase for easy updates of future versions directly from the joomla extensions.

• You can find the different settings for JP Squares as follows

• Target Div ID - You can add one or more div ids seperated by comma(,) in which the gradient animated effect to be applied in your site.

• Background Color - Select the background color of the JP Sqaures layout section from color palette.

• Square Size - Describes the square size in px.

• Squares Count - Describe the number of squares to be used in the effect.

• Squares Opacity - Describes the transparency-level of the square where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

• Animation Delay - Describes the time in seconds, in which the square animation starts.

• Animation Duration - Describes the duration time in seconds.

• Color # - Select the different colors from the color palette for the squares.

• Opacity for Full Effect - Opacity for overlay effect where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent..

• Once finished all the settings for the plugin , Click "Save & Close".

Add squares animation effect to template:

• Here we demonstrated using "YOOtheme PRO" template website builder and you can use your own template to do the same.

• Then you can easily add the effect by defining the div ID used in Target div ID .
• Note: Please remove any bg image or any other bg color to the section if anything applied.

• Instantly the square effect is added to the desired divs in the site layout .