Design Your Optin

Great! You’re now inside the WowOptin builder. In the left menu, you’ll find the design tab. 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!

Layout Styling

From this section, you can customize layouts by adjusting size-spacing, and backgrounds with colors, images, or videos. You can also add borders, shadows, animations, and overlays for depth and focus.

Size & Spacing

From this first section, you can easily adjust the size and padding of your canvas. You can even choose from three presets small, medium, and large. Here’s how you can add custom value:

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.

Background Style

Here you can customize the background of your optin canvas with colors, images, and videos. See how:

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.

Border Style

In this sction, you can add and adjust the border of your canvas. Options like border style and border radius also available. See how you can do it:

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

This section allows you to add depth to your popup. You can adjust every detail of the shadow effect including blur and spread intensity. Here’s how you can do it:

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

This section is pretty straightforward, you can add the appearance and exist animation for your optin. There are 21 different animation effects for both. Here’s how to add animation effects:

First, choose the entrance effect from 11 different variations
Then, select your exist effectfrom 10 different variatrions.
You can also choose None for both or any of the options.

Overlay Settings

In this section, you have all the options to set an overlay for your popup. Let’s see how you can do it:

First, hit on the Enable Overlay toggle.
Add color for the overlay.
Adjust the transparancy from the opacity field.
Finally, Enable or Disable the page scrolling while the optin is displayed.

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.

Postition Adjustments

You can also further adjust the positioning using the sliders.

Quick Tips for Postitoning

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!