Promotion Banner Pro

This popup is designed to capture attention, promote offers, or collect emails in a stylish, responsive way. Every aspect is fully customizable — from size, layout, and fonts, to buttons, spacing, and activation behavior.

Activation & Trigger Settings

  • Activation Method: The popup is triggered after scrolling a percentage of the page.

  • Delay Before Display: 10 seconds Controls the delay before the popup appears after the trigger condition is met.

  • Suppress Banner for Days: 0 Prevents the popup from showing again for a set number of days after it's closed. Set to 0 for testing purposes.

  • Scroll Trigger Percentage: 51% The popup is triggered after the user has scrolled more than halfway down the page.

Popup Container Options

Size & Shape

  • Desktop Width: 64%

  • Mobile Width: 95%

  • Corner Radius: 6px

  • Border Width: 0px

Overlay Styling

  • Overlay Transparency: 50% Controls the darkness of the overlay behind the popup.

Positioning

  • Desktop Horizontal Alignment: Left, Center, or Right

  • Mobile Horizontal Alignment: Left, Center, or Right

  • Desktop Vertical Alignment: Top, Center, or Bottom

  • Mobile Vertical Alignment: Top, Center, or Bottom

  • Image Source: Upload your desired banner image.

  • Desktop Image Width: 42%

  • Mobile Image Width: 100%

  • Disable Image on Mobile/Desktop: Optionally hide the image on specific devices.

  • Desktop Image Ratio: Original

  • Mobile Image Ratio: Square

Logo Section

This section is optional and can be completely disabled. If not using logos, you can skip this section.

Image Lazy Loading

  • Activate Lazy Loading: Delays the loading of popup images until needed — improving performance.

Content Area Padding

Padding Inside the Popup

  • Vertical Padding (Desktop): 100px

  • Vertical Padding (Mobile): 28px

  • Horizontal Padding (Desktop): 88px

  • Horizontal Padding (Mobile): 26px

Headline Configuration

  • Headline Text: GET 10% OFF

  • Custom Font Enabled: Yes

  • Font Family: Josefin Sans

  • Font Size: 30px (Desktop & Mobile)

  • Line Height: 120%

  • Alignment: Adjustable per device

Promotional Text (Body Text)

  • Message: Join our community and get a special discount code sent to your email after signing up.

  • Font Family: Josefin Sans

  • Font Size: 16px (desktop), 14px (mobile)

  • Line Height: 130%

  • Top Margin: 16px

  • Alignment: Adjustable per device

Form Spacing

  • Top Margin for Form: 22px Creates breathing room above the input field.

Email Input Configuration

  • Desktop Width: 70%

  • Mobile Width: 84%

  • Vertical Padding: 12px

  • Horizontal Padding: 16px

  • Border Radius: 4px

  • Border Thickness: 1px

  • Placeholder Text: Email address

Font Options

  • Font Family: Josefin Sans

  • Font Size: 16px

  • Line Height: 130%

Submit Button Configuration

  • Label: Submit

  • Font Family: Josefin Sans

  • Font Size: 18px

  • Line Height: 100%

  • Vertical Padding: 14px

  • Horizontal Padding: 14px

  • Border Radius: 4px

  • Border Thickness: 0px

Placement

  • Place Button on New Line: Optional (Desktop & Mobile)

Additional Copy

  • Text: By signing up I agree with the Terms & Conditions.

  • Font Family: Josefin Sans

  • Font Size: 13px (desktop), 12px (mobile)

  • Line Height: 130%

  • Top Margin: 20px

  • Alignment: Adjustable per device

Popup Color Settings

  • Background Color: #FFFFFF

  • Border Color: #000000

  • Headline Color: #252525

  • Body Text Color: #797979

  • Input Border Color: #BFBFBF

  • Input Text Color: #5D5D5D

  • Placeholder Text Color: #909090

  • Additional Copy Color: #787878

  • Close Icon Color: #CFCFCF

Submit Button Colors

  • Text Color: #FFFFFF

  • Hover Text Color: #1D1D1D

  • Background Color: #1B1B1B

  • Hover Background Color: #EEEEEE

  • Border Color: #898989

  • Hover Border Color: #232323

Section Layout & Styling

Background and Border

  • Section Background Color: #FFFFFF

  • Gradient Overlay: None selected

  • Border Color: #7E4646

  • Border Width: 0px

Spacing

  • Top Margin: 0px

  • Bottom Margin: 0px

  • Top Padding: 0px

  • Bottom Padding: 0px

Full Width

  • Enable Full Width Section: Optional

  • Max Content Width: 400rem

Side Padding

  • Desktop: 5rem

  • Mobile: 2rem

Summary

This promotional popup gives you complete control over:

  • When and how the popup appears

  • Responsive design across all devices

  • Full styling of the message, form, and button

  • Integration of your preferred font

  • Clean user experience with optional imagery, logos, and layout toggles

PreviousImage Banner PopupNextBack To Top Pro

Last updated