Getting started with Pagecloud Popups

Getting started with Pagecloud Popups 

You can add a popup or banner to your web pages using Pagecloud Popups! Popups are a great way to bring value to your customers, collect leads, and improve conversion rates on your website.

Popups and banners are currently released in Beta. Learn how you can participate in this beta period

What are Popups and Banners?

Popups and banners are lead capture and marketing tools for your website. They can drive email signups, alert important information, and bring your website visitors more value. 

Popups: Pagecloud popups can have many styles, but in general are vertical aligned and have more space for text, forms, images, and more. Popups can be positioned to the right, left, or centre of the page.

Banners: Banners are horizontally aligned and are positioned at the top or the bottom of your web page.

Types of Popups

There are many types of popups you can choose from depending on your needs. Here are a few examples of popups and banners templates that you can include on your website: 

Promotional: Alert your customers about discounts or promotions you are running on your website

New content: Show your customers the latest from your website

Lead capture: Encourage your users to sign up to subscribe or be notified

Help and resources: Offer important information to visitors on your site

There are so many ways you can use popups and banners on your website to enhance your users' experience and increase your conversions. 

Create a new Popup or banner

You can create a new popup or banner for your website in your dashboard. 

  1. From your dashboard, select the site where you would like to add a popup. Or create a new project.
  2. From the left toolbar, click Banners and Popups 
  3. Click Create new and select From template (or you can duplicate an existing popup or banner)

Now you can begin to set up and design your popup or banner.


Under Setup, you can choose when and where you want your popup or banner to display. This includes which pages and what triggers your popup or banner to appear. 

Step 1: Name

Name your popup and give it a description so you are always know which popup or working with you are working with. 

Click Update to save your changes.

Step 2: When to Display

Configure when you want your popup or banner to display. 


When do you want your popup to trigger? 

On page load: If you want your popup or banner to display as soon as your page loads, toggle ON

Time delay: If you want to add a time delay to your popup or banner, toggle ON, and enter the amount of seconds you want your user to be on the page before your popup appears. 

Scroll position: If you want your popup to trigger as the user scrolls down your page, toggle ON, and select the percentage of the page you want the user to scroll to before the popup appears (eg. 50%: once the user is halfway down the page, the popup will trigger)

You can toggle ON both a time delay and a scroll position for your popup or banner. This means the popup will display once the user is on the page for x seconds OR once they have scrolled x percentage down the page. 


Toggle on which devices you want your popup to load on. This can include Desktop, Mobile, and/or Tablet

Beta: For beta release, popups and banners will display on all devices. Device filtering will be released after the beta period.

How often

Define how often you want your popup or banner to appear: 

Once: Popup will appear the first time the user lands on the page

Daily: Popup will appear once in a 24 hour period

Once per week: Popup will appear once in a 7 day period

Always: Popup appears every time the user lands on the page

Click Update to save your triggers

Step 3: Where to Display

You can display your popup on all pages or filter on which pages you want your popup to appear. 

No pages: Select No pages if you don't want to display your popup on any page (yet). This is selected by default. 

All pages: Select All pages if you want your popup to display on every page of your website. 

Exclude pages: Select Exclude pages if you want to exclude your popup from displaying on specific pages of your website. Add pages to your excluded list by clicking the + Add pages button below. Your popup will display on every page of your website that is not on your excluded list. 

Include pages: Select Include pages to create a list of pages where you want your popup to display. Click the + Add pages button to add your pages. Your popup will only display on pages included in this list. 

Click Update to save your changes


The fun starts when you get designing your popup or banner! 

Choosing a template

We have an awesome library of templates to choose from. All popup and banner templates are fully responsive and customizable. You can choose popup and banner templates for a variety of use cases including lead capture, promotion, and resources.

Responsive editing

Popups and banners are created in a responsive editor. This means you only need to design your popup once and it will look great on all screens. 

You can use the responsive preview handle to test how your popup or banner will look at different sizes.

Popup/Banner layout

In your Edit Menu you can adjust the layout of your popup and banner. The popup/banner layout refers to where it will display on your live web page. 

Click on your popup or banner and ensure your Edit Menu says Popup (or Banner) at the top so you know that's what you have selected:


Placement: Use the arrows to customize where you want your popup to appear on your live web page 

Inset: Use the inset slider to add space between the edge of your web page and your popup. You can click Inset per side to customize the space on each side of your popup.

You will need to preview your popup or banner to view changes to the position


Custom width: You can set width of your popup or banner which ensures it won't exceed your desired custom width on any screen size. 

Full width: Set your popup or banner to Full width to ensure your popup extends to the width of every device. 

Auto height: Your popup will adjust to fit the size of your content. Auto height does not exceed the size of the browser

Custom height: Set a custom height for your popup. Content can exceed the height, creating a scroll on your live page.

Styling your Popup

You can style your popup similarly to how you style objects and sections on your Pagecloud website! Click to edit text, replace images, and edit colours. 

Page tint

Adding a page tint in your edit menu will create a page tint on your live page when your popup appears.

Close button

Click the close button on your popup to change the icon or edit the style. 

Replace icon: You can replace the icon with any available icons in Pagecloud.

Vector: Edit the height and width of your close button.

Button style: Add normal and on-hover styles to your close button.

Layout: Position your close button on your popup and choose your button type.

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!