Grab visitors' attention by adding striking visual effects to image blocks.

You can add effects to image blocks on your site to give your images a more stylized look. Some effects add an animation so the image is always moving, while others only appear as the visitor scrolls through that section of your site. How you apply these effects depends on whether you added the image in a Fluid engine or classic editor section.

Before you begin

• Image effects add animations to single images. If you're on version 7.1, you can apply animations to your whole site with site-wide animations.
• Animations on individual image blocks override site-wide animations.
• Adding image effects to edited .gif files converts them to static .jpg files.
• Before adding visual effects to your site, you may want to review our accessibility resources. 

Apply effects to image blocks in Fluid Engine

After adding an image to an image block in a Fluid Engine section, double-click the image to open its editor. Then:

1. Click Design, then click Image effect.
2. Choose an effect from the menu. Any changes you make to the effect will appear in your site preview.
3. Click Save to save your changes and keep editing, or click Exit then Save to close the editor.

Image effect styles

You can choose from these image effects:

• None - No effect, aside from overlay opacity setting
• Liquid - Gives image a rippling effect
• Film grain - Adds an animated static overlay to the image
• Parallax - Image moves as visitors scroll
• Refracted lines - Refracts image through a pattern of straight lines
• Refracted circles - Refracts image through a pattern of circles

Customize your effect in the details panel by clicking an image effect, then clicking the settings icon.

Click any category in the details panel to expand the drop-down menu and reveal more options like:

• Customizing the size and shape of the effect
• Editing the speed and direction of effects with motion, like Liquid

Depending on the type of image effect, different settings appear that you can use to change the core components of the effect. To experiment with a random configuration of settings, click the shuffle icon when choosing an effect or click Randomize when in the effect's details panel.

We recommend testing each effect to get a better sense of what it looks like and how it works for your site.

Apply effects to image blocks in the classic editor

After adding an image to an image block in a classic editor section, double-click the image to open its editor. Then:

1. Click Design, then click Animations.
2. Select an effect from the list to apply to the image and any text. As you select an option, a preview appears on the page.

Block animation styles

Choose from the following settings to animate the whole block:

• None - No animation, even if there are site-wide animation settings
• Site default - Block matches the site-wide animation settings
• Fade in - Block fades in
• Slide up - Block slides upward
• Horizontal clip - Block loads in horizontal layers
• Vertical clip - Block loads in vertical layers
• Tilt up - Block zooms in with an upward tilt
• Tilt down - Block zooms in with a downward tilt
• Focus in - Block appears blurry, then comes into focus
• Collide - Image and text slide inward from either side
• Reveal - Image and text slide outward from the center
• Custom - Set animations for image and text independently

Click Custom to animate the image and text independently and choose from the following settings:

• None
• Fade in
• Slide up
• Slide down
• Slide from left
• Slide from right
• Focus in

Here's an example of a collage image block using these settings:

• Animation - Custom
• Image animation - Slide from Right
• Text animation - Slide from Left

Troubleshooting

If image effects aren't appearing on your site, keep in mind:

• ​​If none of your content is animating, ensure you're using a supported browser.
• Image effects only appear on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test if your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background remains static.

Tip: If your site is on version 7.1, your visitors can turn off some animated features through their device settings. This way, they'll encounter less motion when visiting your site. For example, if a Mac user chooses to reduce screen motion on their device, animations you enabled for image blocks or background image effects won't appear animated for that visitor.

Other animations and effects

Depending on your site version and where you're adding effects, you may want to use alternatives like banner images, background videos, or section background images to apply similar effects and animations to your images.

To learn more about each type, visit the linked guides.