Overview
The Spin Wheel module adds an interactive prize wheel to your Divi page. Visitors can spin the wheel to win prizes, coupons, or custom rewards. The module consists of a visual spinning wheel built from individual Wheel Segment child items, paired with a content panel that collects the visitor’s email address before spinning and displays the result afterward. You can fully customise the wheel’s appearance, pointer style, idle animation, spin speed, and the content shown at each step of the experience.
Content Settings
Wheel Segments
Add New Segment (Draggable list)
Each segment on the wheel is a child item. Click ‘Add New Segment’ to add a new slice. Drag and drop to reorder them. Each segment can have its own label, colour, and prize. The segments appear in the list below and are rendered on the wheel in the same order.
Layout Settings
Layout (Dropdown)
Choose how the wheel and the content panel are arranged on the page.
- Available options: Horizontal — the wheel and panel sit side by side, Vertical — the wheel stacks above the panel
- Default: Horizontal
Wheel Settings
Pointer Style (Dropdown)
Choose the shape of the pointer that indicates the winning segment.
- Available options: Triangle, Arrow, Pin
- Default: Triangle
Pointer Position (Dropdown)
Choose where the pointer is placed around the wheel.
- Available options: Top — pointer appears above the wheel, Right — pointer appears to the right of the wheel
- Default: Top
Show Center Circle (Toggle)
Enable to display a decorative circle in the centre of the wheel. When enabled, the Center Text field becomes available.
- Default: Off
Center Text (Text)
Optional text displayed inside the centre circle, such as ‘SPIN’ or a logo alternative.
- Only visible when Show Center Circle is enabled.
Idle Animation (Dropdown)
Select an animation that plays on the wheel while it is waiting to be spun. Use this to draw visitors’ attention.
- Available options: None — no animation, Gentle Pulse — the wheel softly pulses in and out, Slow Rotate — the wheel rotates slowly and continuously, Glow — a glow effect pulses around the wheel, Wobble — the wheel gently wobbles back and forth
- Default: None
Content Panel
Form Title (Text)
The heading displayed at the top of the email capture form, shown before the visitor spins.
- Default: Spin & Win!
Form Description (Text)
A short line of text shown beneath the form title to encourage the visitor to enter their email.
- Default: Enter your email for a chance to win!
Email Placeholder (Text)
The placeholder text shown inside the email input field before the visitor types.
- Default: Enter your email…
Submit Button Text (Text)
The label on the button the visitor clicks to submit their email and spin the wheel.
- Default: Spin Now
Dismiss Link Text (Text)
The text of the optional dismiss link that lets visitors skip the form. This text is set here for when the dismiss link is enabled.
- Default: No, Thank you
Result Panel
Result Title (Text)
The default heading shown in the result panel after the wheel stops spinning. Individual segments can override this with their own Prize Title.
- Default: Congratulations!
Result Description (Text)
The default body text shown in the result panel. Individual segments can override this with their own Prize Description.
- Default: You have won a special prize!
Apply Button Text (Text)
The label on the button that appears in the result panel when the prize is a coupon code, allowing the visitor to apply their discount.
- Default: Apply Discount
Spin Settings
Spin Duration (ms) (Slider)
Controls how long the wheel spins before it stops. A longer duration builds more suspense. The value is in milliseconds (1000 ms = 1 second).
- Range: 1,000 ms to 10,000 ms in steps of 500 ms
- Default: 4000 ms (4 seconds)
Show Confetti (Toggle)
When enabled, a confetti burst animation plays when the visitor wins a prize.
- Default: On
Email Settings
Require Email (Toggle)
When enabled, visitors must enter a valid email address before they can spin the wheel.
- Default: On
Limit Spins Per Email (Toggle)
When enabled, each email address can only spin the wheel once. This prevents the same visitor from spinning multiple times to collect multiple prizes.
- Default: On
Wheel Segment Settings (Child Item)
Segment Label (Text)
The text displayed on this slice of the wheel. Keep it short so it fits neatly inside the segment.
- Default: Prize
Segment Color (Color Picker)
The background fill colour for this segment. Each segment should have a distinct colour to make the wheel visually appealing.
- Default: #ff6384 (pink-red)
Segment Status (Toggle)
Enable or disable this segment. Disabled segments are hidden from the wheel and will not be landed on during a spin. This is useful for temporarily removing a prize without deleting the segment.
- Default: On (enabled)
Prize Type (Dropdown)
Select what type of prize is awarded when the wheel lands on this segment.
- Available options: Coupon Code — reveals a discount code the visitor can copy and apply, Custom Text — displays a custom winner message of your choice, Link / Redirect — redirects the visitor to a specified URL after winning, No Prize (Lose) — this segment awards nothing; useful for adding ‘try again’ or ‘no luck’ slices
- Default: Coupon Code
Prize Title (Text)
An optional heading displayed in the result panel when this specific segment wins. If left empty, the default Result Title set on the parent module is used instead.
- Only visible when Prize Type is not ‘No Prize (Lose)’.
Prize Description (Text)
An optional description displayed in the result panel when this specific segment wins. If left empty, the default Result Description set on the parent module is used instead.
- Only visible when Prize Type is not ‘No Prize (Lose)’.
Coupon Code (Text)
Enter the discount or coupon code that the visitor receives when they land on this segment.
- Only visible when Prize Type is set to ‘Coupon Code’.
Redirect URL (Text)
Enter the full URL the visitor will be redirected to after winning on this segment.
- Only visible when Prize Type is set to ‘Link / Redirect’.
Winner Message (Text)
A custom message displayed to the visitor when they win on this segment.
- Only visible when Prize Type is set to ‘Custom Text’.
Win Probability % (Slider)
The probability weight that determines how likely this segment is to be selected as the winning segment. All weights across all segments are automatically normalised to add up to 100%, so you do not need to calculate exact percentages manually. A higher value means the segment wins more often.
- Range: 0 to 100 in steps of 1
- Default: 10
Max Wins Available (Slider)
The maximum number of times this prize can be awarded across all visitors. Once the limit is reached, this segment will no longer be available as a winning result. Set to 0 for unlimited wins.
- Range: 0 to 1,000 in steps of 1
- Default: 0 (unlimited)
- Only visible when Prize Type is not ‘No Prize (Lose)’.
Link
Standard Divi link options. Optionally wrap the module in a hyperlink.
Background
Standard Divi background options. Set a colour, gradient, or image as the module background.
Admin Label
Enter an internal label for this module. The label is only visible in the Divi Builder and helps you identify the module in the layers panel.
Design Settings
Wheel Visuals
Wheel Size (Slider)
Sets the diameter of the wheel. Increase this for a more prominent, impactful wheel.
- Range: 200 px to 800 px in steps of 10 px
- Default: 400 px
Border Width (Slider)
The thickness of the outer ring border drawn around the wheel.
- Range: 0 px to 20 px in steps of 1 px
- Default: 8 px
Border Color (Color Picker)
The colour of the outer border ring surrounding the wheel.
- Default: #333333 (dark grey)
Pointer
Pointer Color (Color Picker)
The fill colour of the pointer graphic that indicates the winning segment.
- Default: #ff4136 (red)
Pointer Size (Slider)
Controls how large the pointer graphic is rendered.
- Range: 20 px to 100 px in steps of 2 px
- Default: 40 px
Center Circle
Center Size (Slider)
The diameter of the centre circle overlay placed in the middle of the wheel.
- Range: 30 px to 200 px in steps of 5 px
- Default: 80 px
Center Color (Color Picker)
The background fill colour of the centre circle.
- Default: #ffffff (white)
Title Text
Font styling options for the module title and result title text — family, weight, size, colour, letter spacing, and line height.
Description Text
Font styling options for the module description and result description text — family, weight, size, colour, letter spacing, and line height.
Button Text
Font styling options for the Spin button, Apply Discount button, and Try Again button — family, weight, size, and colour.
Form Title Text
Font styling for the form title heading shown in the content panel before spinning.
Form Description Text
Font styling for the description text shown beneath the form title.
Email Input Text
Font styling for the text typed inside the email input field.
Submit Button Text
Font styling for the submit / spin button label.
Content Panel Background
Background colour, gradient, or image for the content panel area (the panel containing the form or result).
Content Panel Border
Border style, width, colour, and radius for the content panel.
Content Panel Spacing
Padding and margin controls for the content panel.
Submit Button Background
Background colour or gradient for the submit button.
Submit Button Border
Border style, width, colour, and radius for the submit button.
Submit Button Spacing
Padding and margin controls for the submit button.
Email Input Background
Background colour or gradient for the email input field.
Email Input Border
Border style, width, colour, and radius for the email input field.
Email Input Spacing
Padding and margin controls for the email input field.
Sizing
Standard Divi sizing controls — width, max-width, height, and alignment of the module.
Spacing
Standard Divi spacing controls — margin and padding around the entire module.
Border
Standard Divi border controls for the outer module wrapper — style, width, colour, and corner radius.
Box Shadow
Add a drop shadow around the entire module.
Filters
CSS filter effects for the module — blur, brightness, contrast, saturation, hue rotation, and opacity.
Transform
CSS transform options — scale, rotate, translate, and skew the module.
Animation
Divi entrance animation applied when the module scrolls into view.
Advanced Settings
- CSS ID & Classes — add custom HTML ID and CSS class names to the module wrapper for custom styling or JavaScript targeting.
- Custom CSS — write custom CSS rules targeted directly at individual parts of the module: the wheel, the spin button, the content panel, the email input, the submit button, the coupon box, and the apply button.
- HTML Attributes — add arbitrary HTML attributes to the module wrapper element.
- Conditions — show or hide the module based on specific conditions such as logged-in status, date/time, or other criteria.
- Interactions — configure hover and click interaction effects.
- Visibility — control which device sizes (desktop, tablet, phone) the module is displayed on.
- Transitions — set the CSS transition speed and easing applied to hover state changes.
- Position — override the default document flow positioning and place the module at an absolute or fixed position.
- Scroll Effects — apply parallax or motion effects as the visitor scrolls the page.
Tips & Best Practices
- Add at least 4 to 8 segments to make the wheel look balanced and visually interesting. Too few segments create very large slices that may look unintentional.
- Alternate segment colours so adjacent slices are always different. This makes labels easier to read and the wheel more attractive.
- Use the Win Probability setting to weight segments so common ‘try again’ or smaller prizes appear more frequently, while high-value prizes appear rarely.
- Set Max Wins to a low number on your highest-value prizes to prevent over-redemption. Leave lower-value prizes at 0 (unlimited).
- Keep Segment Labels short — ideally one or two words — so they fit cleanly inside the slice without overflow.
- Enable Limit Spins Per Email to prevent visitors from refreshing the page and spinning multiple times to game the wheel.
- Use the Idle Animation (such as Gentle Pulse or Glow) to draw attention to the wheel on pages where it is below the fold.
- The Spin Duration slider controls the total spin time. Values between 3,000 ms and 6,000 ms (3–6 seconds) generally feel satisfying without being frustrating.
- Use Prize Title and Prize Description on each segment to display segment-specific winning messages instead of relying on the global Result Panel defaults.
- Disable a segment (using Segment Status) rather than deleting it when you want to temporarily remove a prize. This preserves all its settings for easy re-activation later.