In this article, you will learn how to set up the Popup on your page. The Popup can be used for 2-step opt-ins, or as an Exit Pop. Every page has one built in and you can set it to trigger by click or by exit.
Open Your Pop Up
First you will need to go into your editor and in the bottom left corner, click the button that says Show Pop Up.
Edit Pop Up Settings
Once your Pop Up is open, below it is a button to edit the settings. Click that to open your Pop Up settings.
Adjust Your Pop Up Settings
This section of the Settings will let you adjust how your Pop Up appears overall, including colors and how wide it is on your page.
Section ID -- Unique id for for custom CSS.
Width -- How wide the popup will appear on your page.
BG Color -- Color of the background of the Pop Up.
BG Image -- Image used to replace the standard background of the Pop Up.
BG Image Position -- Used in the case of repeating backgrounds
Backdrop Color -- The color used to overlay the rest of the page while the Pop Up is active.
Set Padding & Margin
In this section you can adjust how far from the top of the page your Pop Up appears using the Margin Top setting and you can also add extra white space inside your Pop Up using the Padding settings.
Padding Top -- Adjusts the buffer area from top of the Pop Up to where the content starts.
Padding Bottom -- Adjusts the buffer area from bottom of the Pop Up to where the content starts.
Padding Left / Right -- Adjusts the buffer area from the sides of the Pop Up to where the content starts.
Margin Top -- Adjusts how far from the top the Pop Up will be displayed.
Final Display Settings
The final part of your display preferences are how the border around the popup will look, whether it is dotted, solid, how thick, etc.. And FXS (Effects) lets you display a shadow beneath the popup or not.
Radius -- How round or sharp your the corners are for the pop up.
Edges -- Selects which corners are rounded.
Borders -- Sets what sides of the pop up have a border.
Style -- Sets the type of border, be it dotted, dashed or solid.
Size -- Sets how thick the border is.
Color -- Sets what color the border is.
Shadow -- Selects whether or not a shadow will be displayed under the pop up.
The animation settings are very important. The style affects how the popup will appear on the screen. And the Show on Exit setting determines if the popup will only open when someone clicks, or when someone intends to exit the page (also called "Exit Intent").
Style -- How pop up will work it's way onto the screen.
Show On Exit -- Whether the pop up will open only on click or when a visitor goes to exit the page.
Create Link To Open Pop Up
Remember to create a link on your page to open the Pop Up unless you only want to use it as an Exit Pop. To link text, button or image to open the Pop Up, you will use the URL / Action:
Set Up Your Content
The final step in setting up your popup is to edit the actual content. Just like a normal page you can add or remove Sections, Rows, and Elements. Just keep in mind that typically a popup is smaller than the rest of your page so don't put too much content in the popup. If your popup is blank and you want to use it to allow people to opt-in, just add an element for Input Form (usually a Name and Email, or sometimes just an Email). Don't forget to set each one with the appropriate setting so that ClickFunnels knows if it is a Name or an Email.