Design Your Wheel

Designing Your Wheel in Ultimate Spin Wheel

A well-designed wheel feels like a native part of your brand rather than a generic plugin, which makes visitors more comfortable sharing their email address. The Design tab of every campaign gives you a live editor with a real-time preview, so you can style the wheel, popup, and lead-capture form without writing any code. This guide walks through every section that actually exists in the Design tab and notes which controls require Ultimate Spin Wheel Pro.

The Design tab is organized into these sections, from top to bottom:

1. Wheel Design Presets — one-click starting themes.
2. Wheel Styling — ring layers, center button, and segment typography.
3. Popup Appearance — size, background, and close button.
4. Win Screen & Celebration — confetti and celebration sound (Pro).
5. Form Styling — typography, input fields, and the submit button.

1. Wheel Design Presets: The Quick Start

At the top of the Design tab is a gallery of ready-made presets. Each card shows a live wheel that spins when you hover over it, so you can see the style in motion before committing.

• One-click application: Hover a card, then click Apply Design. Applying a preset updates the ring (block) layers, the center button, the segment font style, and re-colors your prize slices to match the preset’s palette.
• Free presets: Several presets are available in the free version, including Default, Classic Gold, and Neon Night. Start with the one closest to your vision, then fine-tune the details in the manual sections below.
• Premium themes (Pro): Additional premium presets — such as Midnight Royalty and Candy Carnival — are marked with a PRO badge and unlock with Ultimate Spin Wheel Pro.

Applying a preset is a solid foundation even for a fully custom look — you can override any part of it afterward.

2. Wheel Styling

The Wheel Styling section includes a live designer preview that syncs with your real prize data, so every change is reflected immediately.

Ring Layers (Blocks)

The wheel is built from concentric rings called “blocks,” ordered from the outside in (Outer Ring, Middle Ring, Inner Ring). For each ring you can:

• Thickness (Padding): Adjust how thick each ring appears. (Free)
• Fill Background (Pro): Set the solid color of a ring.
• Pattern Overlay (Pro): Upload a graphic or pattern image for a ring, with a Pattern Rotation toggle that controls whether those images spin with the wheel.
• Add Ring (Pro): Stack additional rings for more depth (for example, a thick gold outer border, a black middle ring, and a white inner ring). Removing a ring is available once you have more than one.

Segment Colors (The Slices)

Each slice’s background color is set per prize on the Coupons tab, not in the Design tab. Applying a preset re-colors the slices automatically, but you can enter your brand’s exact hex codes (for example #FF5733) on each coupon so the wheel matches your site. An alternating color pattern helps visually separate the prizes.

Center Button

The center button is the call-to-action that starts the spin. It has two modes:

• Text Mode: Type the button label (such as “SPIN”) and control its color, size, weight, style, and vertical position.
• Graphic Mode: Choose one of the built-in button graphics or upload your own image (for example, a logo or a custom shape). You can then adjust its offset, width, and height.
• Show Pointer: A toggle that displays a small arrow pointer on the center button to indicate the winning slice.

Segment Typography

Instead of styling every slice separately, use the global Segment Typography controls to set the font color and font size for all prize labels at once. Keep the size legible on small screens; the wheel scales responsively to fit the visitor’s viewport.

3. Popup Appearance

When the layout is set to Popup, the wheel appears inside a modal. This section controls the container itself:

• Layout & Size: Set the popup’s maximum width, internal padding, and corner radius.
• Background Style: Choose a solid Background Color, enable a Gradient (with preset gradients like Ocean Blue or Sunset), or upload a Background Image. When more than one is set, the priority is Image > Gradient > Color.
• Close Button Style: Customize the close (“X”) button’s icon color and background color, and optionally give it a background gradient.

4. Win Screen & Celebration (Pro)

The celebration effects that play when a visitor wins are a Pro feature. With Ultimate Spin Wheel Pro you can:

• Enable Confetti: Trigger a confetti burst on a win, and control its intensity (number of particles) and style (squares, stars, circles, or party emoji).
• Celebration Sound: Play a sound when a prize is won. Pick a file from the media library or paste a URL to your own mp3/ogg.

The wording of the win and lose messages themselves is configured separately — see Win Screen Customization.

5. Form Styling

The lead-capture form is where visitors enter their details before spinning. The Form Styling section lets you match it to your brand:

• Form Header: Color and font size for the title, description, and field labels.
• Input Fields: Text color, placeholder color, background color, border color, and border radius — plus a focus state (focus border and focus background colors) for clear feedback while typing.
• Submit Button: Text color, solid background or gradient, vertical padding, and corner radius, with separate hover-state background and gradient options.

Mobile Responsiveness

The wheel automatically scales to fit smaller screens, so your design stays usable on phones. If a design is too complex for mobile, you can control where it appears using device targeting on the Visibility tab, which offers All Devices, Desktop Only, Mobile Only, and Tablet Only. Keep the spin button and input fields large enough to tap comfortably with a thumb.

Design Tips

• Use the live preview constantly — a palette that looks great on a bright monitor may be hard to read on a dim phone.
• Keep segment text in a high-contrast color against the slice backgrounds so prizes stay readable while the wheel spins.
• Match the input, popup, and submit-button corner radii for a cohesive, polished look.

Related Documentation

• Prize & Coupon Configuration: Set slice colors, labels, codes, and prize types.
• Win Probabilities: Control how often each slice wins.
• Win Screen Customization: Style the message a winner sees.

Conclusion

The Design tab gives you real, code-free control over the wheel, popup, celebration effects, and lead form, all with a live preview. Start from a preset, adjust the rings, center button, and typography to match your brand, then style the popup and form to feel premium and trustworthy. If you need help, visit the wowDevs support center.