Reference guide for the Flexible Elements module in DiviAnimator.
Overview #
Flexible Elements shows a group of items (elements) as a stack of blurbs, the same Blurb items you use in the Divi builder. Each element holds its own content. When a visitor hovers over a blurb, the blurbs react: the hovered blurb grows and the others move out of its way.
Settings are split across the three standard Divi tabs:
| Tab | What it controls |
| Content | The elements, how the blurbs are arranged, and how they react to hover |
| Design | Size, spacing, border, shadow, filters, transform |
| Advanced | CSS, device visibility, transitions, position |
Requirements #
- Divi 5, installed and active.
- DiviAnimator, installed and active with a valid license.
- The Flexible Elements module switched on in DiviAnimator > Modules.
How to Enable Flexible Elements #
- In the WordPress dashboard, go to DiviAnimator and open the Modules tab.
- Find the Flexible Elements card.
- Turn on its toggle. The label next to the toggle changes to "enabled".
- Click Save Changes at the top right. The page shows "Unsaved changes" until you save.
- Open a page in the Divi builder, search for "Flexible Elements" in the module picker, and add it to a column.
If Flexible 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 #
- Add the Flexible Elements module to a column.
- In the Content tab, add the elements you need and fill in each one.
- Open Cards Layout and set how tightly the blurbs stack.
- Open Interaction and set how blurbs react on hover.
- Preview the page and adjust.
Content Tab #
Elements #
The list at the top of the tab holds every blurb in the module. Each row has icons to edit, duplicate, or delete that element, plus a menu icon for more actions. The order in the list is the order of the blurbs.
- Edit: opens the element so you can add its content.
- Duplicate: copies an element with all its content. Use it when blurbs share a similar layout.
- Delete: removes the element.
- Add New Element: adds a new blurb at the end of the list.
Cards Layout #
Sets how the blurbs sit next to each other when nobody is interacting with them.
- Rotation: tilts the blurbs. A small value gives a slight tilt. A larger value fans them out.
- Overlap: how far each blurb sits on top of the next. A larger value packs the blurbs into a tighter stack. A smaller value spreads them apart.
Change one at a time and watch the preview to see what each does.
Interaction #
Sets what happens when a visitor interacts with a blurb.
- Activate On: the action that starts the effect, such as hovering over a blurb.
- Hover Gap: the space that opens up between blurbs when one is active. It moves the neighboring blurbs away so the active blurb is easier to see.
- Scale Up: how much the active blurb grows. A value of 1 means no size change. Higher values make the blurb larger.
- Duration: how long the effect takes, in seconds. A short duration makes the blurbs react quickly. A longer one makes the movement slower.
Advanced #
Accessibility and device settings. This group is inside the Content tab and is separate from the Advanced tab.
- Respect Reduced Motion: when on, the module follows the visitor's device setting for reduced motion. Visitors who have turned off animations on their device are not shown moving effects. Keep it on for accessibility.
- Disable On This Breakpoint: turns the effect off for the device size you are editing. Switch the builder to Tablet or Phone, then turn it on to disable the effect on that size only.
Background #
Sets a background for the module container. You can use a color, gradient, image, or video, the same as other Divi modules.
Admin Label #
A name for the module that only you see in the builder. Give each Flexible Elements module a clear name if you use more than one on a page.
Design Tab #
Sizing #
Controls how big the module is.
- Size: quick presets for width behavior, or Custom to set values yourself.
- Width / Max Width: how wide the module is, and the limit it cannot grow past.
- Alignment: places the module left, center, right, or full width inside its column.
- Min Height / Height / Max Height: the smallest, normal, and largest height of the module.
- Column Class: the column width the module uses.
Leave Width and Height on auto unless you need a fixed size. A fixed height can cut off blurbs that grow on hover.
Spacing #
- Margin: empty space outside the module. It pushes other content away.
- Padding: empty space inside the module, between its edge and the blurbs.
Each side (top, bottom, left, right) has its own field. Click the link icon to lock sides together so they change at the same time.
Border #
Adds an outline and rounded corners to the module.
- Border Radius: rounds the corners. Use the link icon to change all four together.
- Border Styles: choose all sides, or pick one side (top, right, bottom, left) to style on its own.
- Border Width: thickness of the line.
- Border Color: color of the line.
- Border Style: line type, such as solid or dashed.
Box Shadow #
Adds a shadow behind the module. Pick one of the eight presets. The first removes the shadow. The others give shadows of different size, direction, and softness.
Filters #
Applies visual effects to the whole module, like photo editing.
- Hue: shifts all colors around the color wheel.
- Saturate: how vivid the colors are.
- Brightness: how light or dark.
- Contrast: the difference between light and dark areas.
- Invert: flips colors toward their opposites.
- Sepia: adds a warm, old-photo tone.
- Opacity: how see-through the module is.
- Blur: softens the module.
- Blend: how the module's colors mix with what is behind it.
Transform #
Changes the shape or position of the module without changing the layout around it. Choose a type from the icons at the top: Scale, Translate, Rotate, Skew, or Origin.
- Scale: makes the module larger or smaller. X is width and Y is height. The link icon keeps both the same so the module does not stretch. Unlink to scale each separately.
- Translate: moves the module sideways or up and down.
- Rotate: turns the module.
- Skew: slants the module.
- Origin: the point the other transforms pivot around.
Advanced Tab #
These are standard Divi settings, shared by most modules.
CSS ID & Classes #
Names you can use to target the module with your own CSS or JavaScript.
- CSS ID: a unique name for this one module.
- CSS Class: a name you can reuse on many modules. Separate several with spaces.
CSS #
Custom CSS for the module. Use it for styles the Design tab does not offer.
Visibility #
Hides the module on chosen devices: desktop, tablet, or phone. Use it to show a different layout on small screens.
Transitions #
Sets how smoothly the module changes between states, such as when it is hovered. You can set how long the change takes, how long it waits before starting, and the speed curve it follows.
Position #
Controls where the module sits in the page layout. You can place it in the normal flow, offset it from its normal spot, or pin it. Z Index sets which element appears in front when two overlap.
Troubleshooting #
Blurbs do not overlap #
Increase Overlap in Cards Layout. Check that Width in the Design tab is not fixed to a value too small for the blurbs.
Hover effect does not run #
Check that Activate On is set to hover. Check that Disable On This Breakpoint is off. If your own device has reduced motion turned on, Respect Reduced Motion will stop the effect. Turn that device setting off to test.
Effect works on desktop but not on phone or tablet #
Touch screens have no hover. Also check Disable On This Breakpoint at that device size.
Blurbs are cut off #
Check Height and Max Height in the Design tab. A fixed height can clip blurbs that grow on hover.
Module is missing on one device #
Check the Visibility toggles in the Advanced tab.
Support #
For help with the Flexible Elements module, contact support@diviexpand.com.
