Great! You’re now inside the WowOptin builder. In the left menu, the first option you’ll encounter is Design. This is the perfect starting point to customize your optin to align with your brand’s aesthetics.

The Design menu offers three main tabs:

• Style – Control colors, fonts, and overall look.
• Position – Choose where your optin appears on the page.
• Close – Set options for closing the optin, like close button design or delay.

Let’s dive into each option!

Style Tab Overview

The Style tab lets you control the visual appearance and behavior of your optin. You can adjust the background, size, borders, shadows, animations, and more to create a unique and engaging design.

Let’s explore what each option has to offer!

Background Style

Customize the background with various options:

Solid and Gradient: Set a solid color or create a gradient transition between colors.

Image: You can use an image as the background with the following options:

• Replace / Delete: Upload or remove the image
• Position: Set Left and Top positioning in percentage
• Repeat: Choose an option for image repetition
• Size: Choose between Contain and Cover to fit the image
• Attachment: Choose Local or Fixed Positioning
• Opacity: Set transparency in percentage
• Fallback Color: Pick a fallback color if the image fails to load.

Video: Set a background video for a dynamic effect.

Size & Spacing

Adjust the size and padding of your option

• Size Presets: Choose Small, Medium, or Large.
• Width: Select Fixed or Full width, and specify a pixel width if fixed.
• Height: Choose Fixed, Auto, or Full height, and set a pixel height if fixed.
• Padding: Set padding for the Top, Right, Bottom, and Left individually, or link them to adjust equally.

Border Style

Define the border around your option

• Width: Set border width per side (Top, Right, Bottom, Left) in pixels.
• Fill: Select a color for the border.
• Type: Choose one from 6 styles (Solid, Dashed, or Dotted).
• Border Radius: Create rounded corners by adjusting the radius in pixels.

Box Shadow

Add a shadow effect for depth

• Horizontal: Adjust the horizontal shadow offset in pixels (positive values move right, negative left).
• Vertical: Adjust the vertical shadow offset in pixels (positive values move down, negative up).
• Blur: Control the blur intensity for a softer or sharper shadow edge.
• Spread: Increase or decrease the shadow spread.
• Fill: Choose the shadow color.
• Opacity: Set shadow transparency in percentage.

Animation Settings

Select Entrance Effect Choose an animation (e.g., Fade In, Slide In, Zoom) for the optin’s appearance.

Select Exit Effect Set an exit animation (e.g., Fade Out, Slide Out, Zoom Out) to control how the optin disappears.

Additional Settings

Use Overlay Enable an overlay behind the optin for added focus:

• Color: Set the overlay color.
• Opacity: Adjust the transparency level.

Disable Page Scrolling When optin is Active: Prevent page scrolling while the optin is displayed to keep the focus on it.

Position Tab Overview

In this tab, you can choose where your optin form will appear on the page. This feature lets you strategically place the opt-in for maximum visibility and impact.

The grid provides a 360-degree view of options which covers almost every area of the screen for placing your optin.

• By default, the center position is selected. This means the optin will appear at the center of the screen.
• But, you can click on any box within the grid to choose your preferred position.

This flexibility allows you to test and find the best spot for your audience.

Quick Tips

• Central placement captures attention quickly and is ideal for urgent calls to action.
• Side or corner placements are less intrusive and work well for subtle optins, especially if you don’t want to interrupt the user’s experience.

Note: The position you select here is only visible on the front end of your site.

Close Tab Overview

This tab lets you customize the close button for your optin. These options give you control over its style, placement, and behavior. You can decide how your audience can dismiss the optin.

Let’s understand each option!

Show Close Button: Turn the close button on or off.

Choose Icon: Select a style for the close button icon.

Icon Customization: Customize the button’s fill color, border color, and icon color.

Icon Size: Change the button size using the slider or entering a pixel value.

Icon Positioning: Decide if the button should be inside or outside the optin, and align it to the left or right.

Position Adjustment: Adjust the button’s position horizontally (Left) and vertically (Top) in pixels.

Display: Set the close button to be visible always or only on hover.

Optin Closing Options

• Close with ESC Key: Allow closing the optin by pressing the ESC key
• Close by Clicking Outside:  Close the optin by clicking outside of it.
• Auto-Close after Delay: Set a time (in seconds)to close automatically.
• Close on Page Scroll: Close the optin when the user scrolls.