Spice up your promotions using ready made effects in the Justuno design canvas.
Sometimes pop-ups need a little extra oomph to turn a good one into a great one. Luckily our design canvas can do that in many ways, one of which is turnkey animation solutions for adding design effects to pop-ups.
Overview
These effects can be used to add plugin animation in the form of snow, fireworks, confetti, rain, falling leaves, money, warp, arrows, and a custom image. These plugin animations can be a great way to add a basic holiday theme to your pop-ups or extra flair for a special campaign. Make sure any animation choices you make are on-brand for your site and aren’t just a gimmick (those tend to backfire….)
Note: To apply any of these plugin animations: add in a layer specifically for this effect. To do so click on the Plugins option on the left side of the design canvas, from here you can pick any of the animations mentioned above and then continue to configure the pop-up to match your site.
If plugin animation isn’t for you, there are display effects you can add to the promotion as a whole for how it will appear on the visitor’s screen.
Note: For the promotion as a whole, they’re called ‘Display Effects’ and are located on the left under ‘Overlay Settings.’
There are several options for these which include: Fade In, Slide In, Zoom In, Zoom Out, H. Flip, V. Flip, H. Flip/Bounce, V. Flip/Bounce, Rotate In, Shake, Bounce, Flash, Swing, and Perspective In.
If you don’t want to apply an effect to the promotion as a whole, you can apply them to just a single layer in your pop-up. These can make the layer elements appear staggered by using a Start Delay. If creating a dynamic pop-up isn’t for you, you can add in more subtle effects like fades or slides to make layer elements appear staggered, resulting in a dynamic pop-up.
Note: for layer animations, they’re just called ‘Effects’ and are located on the right side of the design canvas under a drop-down menu called ‘Effects.’
For single-layer effects, you can choose from the following: Slide in from left, right, top, or bottom, fade in or fade in/out loop, Zoom in or out, Pulsate loop, Rotate left or right, Spin loop, Bounce left & right loop, or Bounce up & down loop.
Animations can also be used in tandem with other plugins, such as a countdown timer to create a hybrid promotion. Blending these can create a promotion that drives urgency and captures attention–the ultimate goal in on-site marketing.
But beware, as with all design elements, you should proceed with caution. Try to be reserved with the number of effects used per promotion, so they don’t appear gimmicky or interfere with a visitor’s ability to engage with the pop-up. Make sure your designs and the animations you pair with them have a purpose.
Details
Let’s look at Plant Bros, an online succulent and plant retailer, who wanted to add some out-of-the-box animation options to a pop-up to boost conversion rates.
Plant Bros already had a standard center pop-up that was a welcome visitor email capture. While they were collecting many email addresses, they felt its design didn’t fully reflect their brand’s fun personality and was lacking in terms of design elements. They decided to redo their pop-up by adding in animation to both the pop-up as a whole (having it slide in) as well as having the CTA button pulsate–to draw attention to the action they wanted visitors to take.
Setup
Here’s how Plant Bros added these animations to their design:
- Plant Bros duplicated their original email opt-in since they wanted to keep the majority of the design elements the same but just add in animation features.
- To duplicate a pop-up, go to the Promotions page in your Justuno account. Each promotion has an ellipse on the right side, click it, and the drop-down menu will have the option to duplicate. Click it and rename the duplicate.
- Next, click into the design canvas on your new promotion. Here you’ll add in the animation features you want. Plant Bros wanted to add two: the slide-in effect on the whole pop-up and then a pulsating element to their CTA.
- To apply the slide-in effect to the whole pop-up, click on the left side of the design canvas on the tab labeled ‘Overlay Settings.’ From here, you’ll see the option of ‘Display Effects.’ Here you’ll select whichever effect you want to use for the promotion to appear on the visitor’s screen; Plant Bros selected for the whole pop-up to slide in.
- Next, we’ll apply an effect to the CTA layer. Select this layer and then on the right side of the design canvas click on the tab labeled ‘Effects.’ From here there will be another drop-down menu labeled ‘Effects’ where you can select the pulsate loop animation for the CTA.
- That’s all it takes to add a little extra flair to your promotions. You can run an A/B test to see if adding these effects have a positive impact on your opt-in rates or run several variations to test even more design tweaks. Happy optimizing!
