The Popup Builder is a powerful engagement tool designed to capture user attention at the perfect moment. Whether you need a full-screen promotional modal or a subtle notification corner, this block provides the structural logic to trigger high-conversion overlays without writing a single line of code.
Settings⚙
Popup
These core structural settings define how and when your popup appears to the visitor. Note that advanced sizing and trigger content options are specific to the Default popup type.
Popup Type
Default: A high-impact modal that centers on the screen and dims the background.
Notifier: A subtle, “toast-style” alert that appears in the corner without interrupting the user’s flow.
Box Width (Default only): Use the slider to define the horizontal scale of your modal, from a compact alert to a wide, cinematic canvas.
Event Triggers:
On Load: Automatically displays the popup when the page finishes loading. Enable Load on Every Refresh to ensure the message appears every time the user returns, or leave it off to show it only once per session.
On Click: Turns the popup into an on-demand layer that only appears when a user interacts with a specific trigger.
Button Content (On Click only): Choose between a Default text button or a custom Image to serve as your trigger.
Button Label: Customize the call-to-action text (e.g., “Open Gallery”).
Button Justification: Align your trigger button to the Left, Center, or Right to fit your page layout.
Close Icon: Toggle this on to provide a visible “X” for users to easily dismiss the popup, ensuring a smooth and user-friendly experience.
Style ◑
Dimensions
Margin Top & Bottom: Precisely nudge the icon vertically to ensure it aligns perfectly with the baseline of your text or the center of the button.
Modal Styles
Container Padding🔗: Control the internal spacing between the date/time text and the edges of the container. Adding padding ensures your content has enough “breathability” and doesn’t feel cramped against the borders.
Color
Background Color: Set the fill color for the container. This is perfect for creating high-contrast “badges” or subtle tinted areas that draw the user’s eye.
Overlay Color: This controls the backdrop tint that covers the rest of your website when the popup is active.
The Link Tool 🔗: The chain icon connects all four sides to keep your design even. It is on by default; toggle it off to enter different values for each side (e.g., rounding only the top corners).
Icon Styles
Box Width & Height: Use the sliders to define the specific boundary of the icon’s container. Matching these values creates a perfect square or circle, providing a consistent “hit area” for user interactions.
Icon Size: Scale the SVG graphic independently of its bounding box. This allows you to create a “large icon in a tight space” or a “small icon with plenty of breathing room” for a minimalist look.
Border Radius: Soften the corners of the icon’s background. Set the slider to a high value for a classic circular “Social Media” style, or keep it at zero for sharp, modern architectural squares.
Color
Icon & Icon Hover: Define the primary color of the graphic and how it shifts when a user moves their cursor. This provides essential visual feedback.
Background & Background Hover: Control the background fill of the icon’s box. You can create high-contrast “pill” buttons or subtle ghost buttons that fill with color only upon interaction.
Button Styles
The Button Styles panel allows you to customize the trigger for your “On Click” popups. Whether you are using a standard text button or a custom image, these settings ensure your call-to-action is both visually striking and perfectly aligned with your brand.
Padding🔗: Control the internal spacing between the list item block container. Adding padding ensures your content has enough “breathability” and doesn’t feel cramped against the borders.
Border Controls: (Visible when Border Type is set to anything other than “None”)
Border Type: Choose your stroke style (e.g., Solid, Dashed, Dotted).
Border Width: Define the thickness of the container’s frame on hover.
Border Color: Change the stroke color to create a “glow” or a more defined outline.
Typography
Font Family & Size: Select the typeface and scale that best matches your site’s design system.
Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
Border Radius: Use the slider to define the roundness of your text button. A low value creates a sharp, professional look, while a high value results in a modern “pill” shape.
Typography
Font Family & Size: Select the typeface and scale that best matches your site’s design system.
Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
ImageWidth & Height: Precisely scale your trigger image to fit your layout.
Image Radius: Soften the corners of your trigger image or set it to the maximum for a circular profile-style button.
Pulse Effect: Toggle this on to add a subtle, repeating animation to your button. This “heartbeat” effect draws the user’s eye and signals that the element is interactive, making it perfect for limited-time offers or urgent notifications.
Color
Text & Text Hover: Control the color of your button label. Ensure high contrast for readability and a distinct hover color to provide tactile feedback.
Background & Background Hover: Set the fill color of the button container. Changing the background color on hover is a classic way to indicate that an element is clickable.
