Create an account

Support & Documentation

If you have questions or need help to setup any of our products please start a support ticket on our support page. All our products come with an active subscription plan that includes our support.

JP Squares

Article Index

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 .

Have a look our super amazed "JP Squares" output.

 We are a recommended expert in building extensions & websites with/for YOOtheme  


Joomla Extensions

JoomlaPro.com is not affiliated with or endorsed by the Joomla Project or Open Source Matters. The Joomla name and logo are used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.


© Copyright 2011-2021 - JoomlaPro.com - All Rights Reserved | JoomlaPro.com is part of
 WNmedia.se, Joomlaproffs.se and Webbproffs.se