Adding a Popup

ClickFunnels pages include a built-in popup feature that allows you to display a popup modal per page. The popup modal can be triggered automatically when a visitor tries to exit, or manually when someone clicks a button, image, or text. This makes it easy to capture leads, promote offers, or share important messages at just the right moment. In this article, you’ll learn how to set up, customize, and control the Popup on your page for maximum engagement.

Requirements

An active ClickFunnels account
A page created in your workspace

What Is a Popup

A popup is a small window that appears on top of your main page content to capture attention and prompt specific actions. Popups are often used to collect leads, promote limited-time offers, or deliver important messages without taking visitors away from the page they’re viewing.

Example:
Imagine you’re running a live webinar registration page. If a visitor moves their mouse to close the tab, a popup modal offers a free checklist download in exchange for their email address, giving you a last chance to engage them before leaving.

Editing Popup Content

Step 1: Access the Popup Editor

Open a page in the editor.
In the editor top toolbar, click on the Popup icon.
In the dropdown menu, select Show Popup to open the Popup editor.

Step 2: Add Contents in the Popup

Depending on the page template you select, the popup may appear either blank or pre-populated with template content. Adding content to your popup works just like editing your main page: use sections, rows, flex, and elements to design and structure your popup. You can drag in headlines, images, forms, buttons, and other elements to create a popup that matches your desired style and functionality.

Add a Section: Click Add new section to create the main area for your popup content.
Add Rows: Click Add Row to insert a row in the section to place individual content elements.
Add Elements: Inside each column of the row, click Add new element to add content such as headlines, images, forms, buttons, and more.

Tips:
For best results, keep your popup focused on a single goal, such as capturing a lead or highlighting an offer. Limit text and visuals to the essentials, avoid adding too many elements, and ensure clear calls to action. Overloading your popup with content can distract users and reduce conversions, especially on mobile devices. Always preview and test your popup on both desktop and mobile to confirm it displays correctly and is easy to interact with.

Customizing Popup

When you hover over the popup menu or the modal is open, click Edit Settings or Edit Popup Settings to access the popup settings.

Margin Top and Bottom

The Margin Top and Bottom setting lets you control the space between the popup modal and the browser edges (top and bottom). You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.

Popup Settings

The Popup Settings allow you to control when and how the popup appears on your page:

Trigger on Exit: Choose whether the popup appears when users try to leave the page.
- Don’t Show On Exit: The popup will not trigger when users attempt to exit.
- Show When User Tries to Exit: The popup will appear when the user’s cursor leaves the edge of the browser (e.g., address bar, bookmarks, or tabs), offering a final chance to engage before they leave the page.
Trigger on Page Load: Set whether the popup appears as soon as the page loads.
- Don’t Show On Load: The popup will not automatically appear when the page loads.
- Show When the Page Load: The popup will display immediately when the page is loaded, which is ideal for high-priority messages.
Open when an element is visible: Select a particular page container (such as section, row, flex, or element) that will trigger the popup when it becomes visible. This feature is useful for popups designed to appear based on user scrolling.
Backdrop Color: The backdrop color is the layer that appears behind the popup modal, helping to visually separate the popup from the rest of your page content. You can choose a solid or semi-transparent color to control how much underlying content remains visible. Select a color from the Style Guide for brand consistency, or pick a custom shade in the Custom tab. Adjust the Opacity slider to fine-tune the transparency of the backdrop for the desired effect.
Left + Right Padding: Adjust the left and right padding from the edges of the browser and the popup modal.

Size & Position

Adjust the width of your popup modal to control how much space it occupies on different devices.

Width: Utilize the slider or input a specific value (percentage % or pixel px) to configure the popup width for desktop users. This ensures that the popup is appropriately sized for desktop viewing.
Width Mobile: Customize the modal width for mobile devices to ensure that the popup is appropriately sized for smaller screens, providing a seamless mobile experience. For instance, if the width is set to 60% on desktop, you may consider setting it to 95% on mobile to prevent content distortion in the mobile view.

Padding

The Padding settings control the spacing around the content within a container. You can adjust the padding for different screen sizes by switching between desktop and mobile views.

Padding Options:

Top: Add space between the top of the element container and its content.
Bottom: Add space between the bottom of the element container and its content.
Left + Right: Adjust the horizontal spacing between the element container and its content.
Gap: In particular elements, such as the Accordion, the gap property is added to establish spacing between the items within the container. For example, it is possible to adjust the gap between each accordion item within the Accordion element without defining padding at the top and bottom.

Desktop & Mobile Customization:

The padding settings allow you to define separate values for desktop and mobile views. Use the device toggle at the top of the padding controls to switch between screen modes and adjust spacing accordingly.

This feature ensures your layout remains optimized for different screen sizes, enhancing the mobile and desktop experience.

Background

The Background property allows you to add and customize background images for various containers, such as sections, rows, columns, flex containers, or individual elements like videos. Turning on the Background option activates the settings, allowing you to configure the background image’s source, style, fit, and color options.

Image URL: Enter the background image URL or upload one directly in the ClickFunnels image gallery.
Image Style: Controls how the background image is displayed within the container.
- None: Displays the background image in its original size and position without additional styling, possibly leaving gaps if the image is smaller than the container.
- Full Center: Centers the image within the container without resizing, which may leave blank spaces if the image is smaller than the container.
- Full Center (Parallax): Centers the image and applies a parallax scrolling effect, creating a layered look as the image moves independently of the main content.
  Note:
  Due to iOS limitations, parallax effects are automatically disabled on Apple mobile devices. iOS devices (Safari and other WebKit browsers) have limited or no support for background-attachment: fixed, which is a core part of how parallax scrolling is implemented in CSS. To maintain layout integrity, the background will default to a static style (e.g., Full Center).
- Fill 100% Width: This option expands the image to cover the container’s full width, maintaining its aspect ratio and possibly cropping vertically.
- Fill 100% Width & Height: This stretches the image to fill both the width and height of the container, cropping parts of the image to maintain the aspect ratio.
- No Repeat: Displays the image once without repeating; any unused space will remain empty.
- Repeat: Tiles the image across the container, covering both width and height.
- Repeat Horizontally: Repeats the image across the container’s width only.
- Repeat Vertically: Stacks the image vertically along the container’s height.
Image Fit: Position the image within the container (e.g., center, top-left, bottom-right) for better alignment. This setting appears when Contain or Scale-down is selected under Image Style.
Color: This option allows you to set a Background and Foreground color:
- Background Color: If you do not wish to use a background image, you can apply a solid or gradient color directly as the background. Choose from the color picker for custom colors, or select a color from your Style Guide for consistency. When a background image is used, the background color generally won’t be visible, but it can appear momentarily during the image load time or serve as a fallback if the image fails to load.
- Foreground Color: Adds an overlay on top of the background image, allowing for opacity adjustments to create a tinted or softened effect over the image. This layering can enhance readability or add a stylistic tint to the image.
Background Video: To use a video as the background, toggle on the option "Background Video." Enter a YouTube or Vimeo video URL to set the video as the background for the container.
Note:
The Background Video option is available only in the Section, Row, and Flex containers.

Tips
For further information on background properties in CSS, refer to the MDN documentation on Background CSS properties.

Border

The Border settings enable you to add and style borders around an element, allowing for enhanced visual definition and separation on the page:

Style Presets (1, 2, 3): Choose from predefined border styles in your Style Guide. These presets provide consistent border styles across your page and can be quickly applied to elements.
Edit Style: To modify the preset border styles in the Style Guide (affecting all elements using that style), select Edit Style to adjust the design in your global settings.
Override: Use the Override option to customize the border settings specifically for this element without impacting the global Style Guide settings.
Borders: Select which sides of the element should display a border. Options include any combination of top, bottom, left, and right borders.
Border Style: To fit your design preferences, choose the border's line style, such as solid, dashed, or dotted.
Color: Use the color picker to select a border color. You can choose a color from the Style Guide or select a custom color, ensuring the border color aligns with your design scheme.
Stroke Size: You can adjust the border's thickness using the Stroke Size slider or by inputting a specific pixel value, creating anything from thin outlines to bold frames.

Shadow

The Shadow settings allow you to add depth and emphasis to elements by applying shadow effects, enhancing the visual appearance. Here’s how to customize shadow properties:

Style: Select one of the predefined shadow styles from your page's style guide. Click on the numbered styles (1, 2, or 3) to apply preset shadow settings defined in your style guide.
Shadow Style: Choose between Inset (shadow within the element) and Outset (shadow outside the element) to achieve the desired shadow effect.
X-direction: Adjusts the horizontal positioning of the shadow. A positive value moves the shadow to the right, while a negative value shifts it to the left.
Y-direction: Controls the vertical placement of the shadow. Positive values push the shadow downward, while negative values pull it upward.
Blur: Controls the softness of the shadow edges. Higher values create a more diffused, softer shadow, while lower values keep the shadow sharp.
Spread: Adjust the size of the shadow. Positive values expand the shadow, while negative values make it narrower.
Color: Use the color picker to choose to set the shadow color.

Corner

The Corner settings let you adjust the roundness (border-radius) of an element's corners, providing flexibility to create either rounded or sharp edges:

Style Presets (1, 2, 3): Choose from predefined corner styles set in your Style Guide. These presets (1, 2, or 3) offer quick styling options that align with your page’s overall design.
Edit Style: To modify a style directly in the Style Guide (affecting all elements using that style), click Edit Style to adjust the preset in your global settings.
Override: To apply custom corner settings without changing the Style Guide, click Override. This allows you to tailor the corner radius for this specific element only.
All Corners: Adjust the slider or enter a specific value in pixels or percentages to set a uniform border radius for all four corners.
Separate Edges: Enable Separate Edges to adjust each corner independently. You can set different values for the Top Left, Top Right, Bottom Left, and Bottom Right corners to achieve unique shapes.

Advanced Settings

To further customize your container (section, row, column, and element), ClickFunnels provides Advanced settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:

Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.
Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.
Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.

How to Trigger the Popup

Here are the most common ways to trigger a popup on your page:

Triggering the Popup on Button Click

Select the button you want to use in the page editor.
In the button settings, locate the Button Action section.
In the On Click dropdown, choose Open pop-up.
Save your changes. Now, when a visitor clicks the button, the popup will appear.

Triggering the Popup on an Image, Link, or Text Click

Select the element you want to use (such as an image, navigation link, or text element).
Set the link action as #open-popup in the settings or hyperlink option.
Save your changes. When visitors click the element, the popup will open.

When User Tries to Leave the Page (Exit Intent)

Enable the Trigger on Exit option in the popup settings to display the popup when the user’s mouse cursor moves toward the top of the browser window (for example, toward the address bar or to close the tab). This “exit intent” popup gives you one last chance to engage visitors who are about to leave your page, perfect for capturing leads or presenting a last-minute offer.

Open the page in the editor.
Go to the Popup menu and click Edit Settings.
Select the Trigger on Exit option as Show When User Tries to Exit.

When the Page Finishes Loading

Use the Trigger on Page Load setting to automatically display the popup as soon as the page finishes loading. This can be ideal for high-priority announcements or time-sensitive offers, ensuring every visitor sees your message immediately.

Open the page in the editor.
Go to the Popup menu and click Edit Settings.
Select the Trigger on Page Load option as Show When the Page Load.
Optionally, you may configure a page load delay in milliseconds. For instance, if you set a delay of 1000ms, the popup will appear 1000ms (1 second) after loading the page.

When a Container Becomes Visible (On Scroll)

With the Open when an element is visible option, you can trigger the popup when a specific section or element (like a headline or featured offer) becomes visible in the user’s viewport as they scroll down the page. This technique is useful for drawing attention at a strategic point in your content, such as after a visitor has read key information or reached a certain part of your sales page.

Open the page in the editor.
Go to the Popup menu and click Edit Settings.
Under the Open When an Element is Visible option, choose a container (section, row, flex, or element). In the container settings, you might consider changing the title of your chosen container for better identification.

Note:
You can use these triggers on multiple elements across your page, but only one popup will appear per page. Make sure to test your triggers on both desktop and mobile devices to ensure a smooth user experience.