Skip to main content

List of all our extensions

Create an account

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 “” 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 of "JP Squares" output.

Joomla 4.0 supported
6 months support & updates
6 months of access to support and downloads/updates. The extensions will keep working after this period.
Joomla 3.10 supported
Unlimited Websites
You can install all our extensions on as many websites as you like.
Wordpress version available
Custom Development
If you encounter any problems with your website that does not cover support we might offer you a custom quote to help you.
Look for these icons for available supported platforms:
Joomla 4.0 supported
Joomla® 5.x support
New Joomla® 5 supported!
Joomla 3.10 supported
Joomla® 3.x support
Joomla® 3.9 / 3.10 supported
Wordpress version available
Wordpress version
Alternative WP version available

Extension list