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 .