These five modules add movement to a page. Each one is in the Divi Builder module picker once it is switched on under Divi Squad > Modules. The defaults below are what a freshly added module starts with.
Number Counter#
Number Counter counts from a start number up to an end number. It suits statistics such as customers served or projects delivered.
- Start Number and End Number default to 0 and 100.
- Prefix and Suffix wrap the number, for example
$before it or%,+andKafter it. - Thousands Separator offers None, Comma, Dot or Space. The default is Comma, so 1000 reads as 1,000.
- Decimal Places runs from 0 to 4, with 0 as the default, and Decimal Separator is a dot or a comma.
- Animation Duration runs from 100 to 10,000 ms and defaults to 2,000 ms. Easing defaults to Ease Out.
- Title adds a caption, placed above or below the number (below by default). Use Icon / Image adds an icon or an image beside it.
Text Highlighter#
Text Highlighter draws a hand-drawn SVG shape around one word in a line of text. The line is built from Prefix Text, Highlighted Text and Suffix Text.
- Highlight Shape offers Underline, Double Underline, Circle, Box, Strikethrough, Curly Underline, Cross Off and Bracket. Underline is the default.
- Animate on Scroll is on by default, so the stroke draws when the heading scrolls into view. Animation Duration defaults to 1,200 ms, and Loop Animation is off.
- Highlight Color defaults to
#6a33d7. Turn on Use Gradient Stroke to blend two colors at a chosen angle. - Stroke Width runs from 1 to 20 and defaults to 3.
- Heading Tag defaults to H2 and also accepts H1 to H6, Paragraph, Span and Div.
Use it to pull the eye to the one word in a headline that carries the offer.
Floating Images#
Floating Images is a container. Each Floating Image you add inside it drifts on its own loop, which makes a hero section feel less static. The container has one setting of its own, Container Min Height, which defaults to 400px.
Each Floating Image has these settings:
- Float Motion is Up / Down (the default), Left / Right, Diagonal or Rotate / Sway.
- Horizontal Position and Vertical Position place the image inside the container, each from the top left corner. Both default to 0%.
- Float Distance runs from 0 to 200 and defaults to 20px. With Rotate / Sway it is replaced by Rotate Angle, from -90 to 90 degrees.
- Duration defaults to 4,000 ms and Delay to 0 ms. Give each image a different delay so they do not move in step.
- Enable Link turns an image into a link, with an option to open it in a new tab.
Animated Heading#
Animated Heading swaps a word inside a sentence on a timer. Write the fixed text in Prefix Text and Suffix Text, then list one word or phrase per line in Rotating Words. The starting list is Fast, Simple and Powerful.
- Effect is Fade (the default), Slide, Scale or Flip.
- Granularity animates the whole word or each letter. Letter Stagger sets the delay between letters and defaults to 40 ms.
- Transition Duration defaults to 600 ms and Hold Delay, the time each word stays on screen, to 1,500 ms.
- Rotating Word Color colors the changing word so it stands apart from the fixed text.
Image Reveal#
Image Reveal uncovers an image instead of showing it at once.
- Trigger is On Scroll Into View (the default) or On Hover. Viewport Trigger sets how much of the image must be visible before a scroll reveal starts. It defaults to 50%.
- Reveal Style is Color Overlay, a colored layer that slides away, or Clip Wipe. Reveal Color defaults to black and applies only to the overlay.
- Direction is Left to Right, Right to Left, Top to Bottom or Bottom to Top.
- Animation Duration defaults to 600 ms and Start Delay to 0 ms.
- Enable Hover Zoom scales the image up while it is hovered, and Zoom Scale sets by how much. It is off by default.
Set the Image Alt Text field for every module here that shows a picture. Screen readers use it.