Reference guide for the Gravity Falling Elements module in DiviAnimator.

Overview #

Gravity Falling Elements drops a group of items (buttons, text, or other content) into a box and lets them fall and pile up like real objects. The fall starts on a trigger you choose, such as scrolling the module into view or a click.

Tab	What it controls
Content	The elements, what starts the fall, background, admin label
Design	The box the elements fall in, how they move, and module styling
Advanced	Divi interactions, CSS ID and classes, custom CSS, device visibility

Requirements #

• Divi 5, installed and active.
• DiviAnimator, installed and active with a valid license.
• The Gravity Falling Elements module switched on in DiviAnimator > Modules.

How to Enable Gravity Falling Elements #

1. In the WordPress dashboard, go to DiviAnimator and open the Modules tab.
2. Find the Gravity Falling Elements card.
3. Turn on its toggle. The label next to the toggle changes to "enabled".
4. Click Save Changes at the top right. The page shows "Unsaved changes" until you save.
5. Open a page in the Divi builder, search for "Gravity Falling Elements" in the module picker, and add it to a column.

If Gravity Falling Elements is missing from the module picker, go back to DiviAnimator > Modules. Check that its toggle is on and that you saved. A disabled module is hidden from the builder. Enable All and Disable All at the top of the page switch every module at once.

Quick Start #

1. Add the module to a column.
2. In the Content tab, add the elements you want to fall, or click Apply Structure Template for a ready-made set.
3. Open Trigger and choose what starts the fall.
4. In the Design tab, size the play area and adjust Physics.
5. Preview the page.

Content Tab #

Elements #

The list holds every item that falls. Each row has icons to edit, duplicate, or delete the element, plus a menu icon for more actions.

• Edit: change the element's content, such as button text and link.
• Duplicate: copy an element with its content.
• Delete: remove the element.
• Add Element: add a new element to the end of the list.
• Apply Structure Template: apply a ready-made set of elements. Edit each one afterward.

The number of elements in the list is the number of items that fall.

Trigger #

Sets what starts the fall.

• Enable: turns the effect on or off without deleting the module.
• Trigger Type: the event that starts the fall.
  • Scrolled Into View: the module reaches a chosen point as the visitor scrolls.
  • On Page Load: the page finishes loading.
  • On Hover: the visitor moves the mouse over the module.
  • On Click: the visitor clicks the module.
• Trigger Start: the scroll position where the fall begins. Used with Scrolled Into View.
• Debug Markers: shows lines on the page that mark the trigger position. Use them while testing and turn them off before you publish.

How Trigger Start works #

Each option has two words. The first is a point on the module. The second is a point on the browser window. The fall starts when the two meet.

• Top Center: the module's top reaches the middle of the window.
• Top Bottom: the module's top reaches the bottom of the window, so the fall starts as soon as the module appears.
• Center Center: the module's middle reaches the middle of the window.
• Custom: you set your own position.

The other options follow the same pattern: Top, Center, or Bottom of the module, matched to Top, Center, or Bottom of the window.

Background #

Sets the module background. Pick a type from the icons: color, gradient, image, video, pattern, or mask. For a solid color, click Add Background Color or use the color picker.

Admin Label #

A name that only you see in the builder. Use it to tell several Gravity Falling Elements modules apart on one page.

Design Tab #

Play Area #

The play area is the box the elements fall into. They land on its bottom edge and stop at its sides.

• Play Area Width: width of the box.
• Play Area Height: height of the box, in vh (a share of the browser window height). A taller box gives a longer fall.
• Play Area Background: color of the box, with opacity.
• Border Radius: rounds the corners of the box.

Set the play area first. The same physics feel different in a tall box than in a short one.

Physics #

Controls how the elements move. Change one setting at a time and trigger the fall again to see the effect.

• Gravity Strength: how hard the elements are pulled down. Higher falls faster.
• Bounce: how much an element springs back on impact. Low lands and stays. High keeps bouncing.
• Friction: how much elements grip each other and the box edges. High stops sliding quickly.
• Air Resistance: how much the air slows an element. Higher makes the fall slower and softer.
• Density: how heavy an element is for its size. Denser elements push lighter ones around more.
• Chip Rotation: whether elements turn as they fall. Free lets them rotate in any direction.
• Random Start Position: when on, each element starts from a different position. When off, they start in a set arrangement.

For a heavy, quick drop, raise Gravity Strength and Density and lower Bounce. For a light, bouncy drop, lower Density and raise Bounce.

Sizing #

Controls the size of the module itself. The play area has its own width and height.

• Size: presets, or Custom.
• Width / Max Width: module width and the limit it cannot pass.
• Alignment: left, center, right, or full width in the column.
• Min Height / Height / Max Height: smallest, normal, and largest height.
• Column Class: the column width the module uses.

Spacing #

• Margin: space outside the module.
• Padding: space inside the module, around the play area.

Each side has its own field. The link icon locks sides together.

Border #

• Border Radius: rounds the module's corners. The link icon changes all four together.
• Border Styles: style all sides, or pick one side.
• Border Width, Color, and Style: thickness, color, and line type of the border.

Box Shadow #

Eight presets. The first removes the shadow. The others vary in size, direction, and softness.

Filters #

Photo-style effects for the whole module: Hue, Saturate, Brightness, Contrast, Invert, Sepia, Opacity, Blur, and Blend (how colors mix with what is behind the module).

Advanced Tab #

These four groups are standard Divi settings shared by most modules.

Interaction #

Divi's general tool for connecting page events. It is separate from the Trigger group in the Content tab, which controls only what starts the fall.

CSS ID & Classes #

Names for targeting the module with CSS or JavaScript.

• CSS ID: a unique name for this module. Use each ID once per page.
• CSS Class: a reusable name. Separate several with spaces.

CSS #

Custom CSS for the module, with separate fields for its parts. Divi adds the selector, so you only write the properties.

Visibility #

Hides the module on desktop, tablet, or phone. Use it to show the falling effect on large screens only.

Troubleshooting #

The elements do not fall #

Check that Enable is on in Trigger. Check that Trigger Type matches your test: On Click needs a click, and On Hover needs the mouse over the module.

The fall starts too early or too late #

Change Trigger Start. Turn on Debug Markers to see the trigger position, then pick the option that places it where you want.

The fall does not start on a phone #

Touch screens have no hover. Use Scrolled Into View, On Page Load, or On Click.

The elements bunch up or fall out of view #

Check Play Area Width and Height. A small box leaves little room. Also check that Height in Sizing is not smaller than the play area.

The elements bounce too much or never settle #

Lower Bounce. Raise Friction and Air Resistance.

The module is missing on one device #

Check the Visibility toggles in the Advanced tab.

Debug lines show on the page #

Turn off Debug Markers in Trigger.

Support #

For help with the Gravity Falling Elements module, contact support@diviexpand.com.