Adding Animations and Image Overlays to Modules

Using the Legacy Customizer? Legacy Customizer steps: Adding Animations to Your Design Modules in Codeless · Legacy Customizer steps: Overlay management

Each module on your website can have an animation: a movement that brings its content onto the screen. A module with images can also have an overlay: a layer of color over the images that makes the text on them easier to read. You set both in the panel of the module.

Open the module

  1. Select Dashboard in the top menu.
  2. On the site card, select EDIT SITE. Site Edit opens with your homepage.
  3. Open the page with the module, and scroll to the module.
  4. Move the pointer over the module. A small toolbar appears at its top left.

A module with its toolbar

  1. Customize Featured Content: Opens the panel of the module.

The name of the button changes with the type of the module. Select it. The panel of the module opens.

Add an animation

Select the Animations tab of the panel.

The Animations tab of a module

  1. Animations: Holds the animation of this module.
  2. Play all module animations: Plays the animations of the module in the preview.
  3. Animation type: How the content comes onto the screen, for example Fade in. None turns the animation off.
  4. Animation duration: How long the animation takes: Slow, Medium or Fast.

The Animation type list has None, Scale, Pull, Fly, Helix, Fade in, Fade in right, Fade in left, Fade in top, Fade in bottom, Left to right, Right to left, Top to bottom and Bottom to top.

Choose a type, then move the Animation duration slider or select Slow, Medium or Fast. Select Play all module animations to see the result.

Change the image overlay

Select the Design tab of the panel, and scroll to Use different overlay on images for this module.

The image overlay controls of a module

  1. Use different overlay on images for this module: On: this module uses its own overlay color and strength.
  2. Select overlay color: The color laid over the images of the module.
  3. Overlay strength: How strong the overlay is: Low, Medium or High.

Select a color, then move the Overlay strength slider or select Low, Medium or High.

A module with a background image also has an Overlay strength slider in its Media section, lower on the Design tab. It sets the overlay on the background image.

Publish your changes

Each change goes into your draft. The draft bar at the bottom of Site Edit shows your changes with Discard and Publish. Close the panel, then select Publish to show the changes to visitors.

For more about drafts, see Publishing and Discarding Drafts. For more about modules, see Working with Modules.

How did we do?

Switching Your Site Design

Setting Shared Modules and Sidebars for Blog Posts, Areas, Agents and Offices
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support