Cloud Sites offers a powerful feature for creating on-click pop-ups, which can be triggered by any clickable element on a page. This functionality is commonly used with buttons, images, or other interactive components.
Setting Up a Pop-Up Trigger
To begin, select a clickable element—such as a button—and open its interaction settings. (In the image below, hovering over "Learn More" allowed the interaction settings to appear.) From the toolbar, choose the link option. A menu will appear with several link types:
- URL
- Block
- Pop-up
- File
Select Pop-up, then click the plus (+) icon to open the Pop-Up Block Manager.
Choosing a Pop-Up Template
The Pop-Up Block Manager provides a variety of pre-made templates organized into categories such as:
- Sales
- Sign-Up Forms
- Notifications
For example, selecting a Sales template like “10% Off” will insert the pop-up into the current screen. To change the template, delete the existing one by clicking the X, then reopen the manager and select a different design, such as one with a countdown timer.
Editing the Pop-Up
Clicking on the pop-up thumbnail opens the Pop-Up Builder, which functions similarly to the main page builder. The layout includes:
- A transparent background overlay
- A central canvas for the pop-up content
Settings for the pop-up are accessed in the top-right corner. These include:
- Alignment (vertical and horizontal)
- Overlay styling (color and transparency)
- Scroll behavior (allowing page scrolling behind the pop-up)
- Global activation (useful for site-wide promotions)
Close Button Settings
The close button (typically an “X”) can be customized:
- Enable or disable click outside to close
- Add a delay before the close button appears
- Toggle the visibility of the close button
- Add a custom close button with styling options
Positioning options allow the close button to be placed inside or outside the pop-up and moved to different corners for optimal accessibility.
Styling the Pop-Up
Styling is done within the canvas area and includes:
- Background settings (color or image)
- Effects and animations
- Button customization (icon, size, position, color)
After editing, return to the main builder using the Go Back option in the top-left corner. It’s essential to check the responsive display settings to ensure the pop-up looks good on tablet and mobile devices.
In our Cloud Websites documentation, you may come across the name "Brizy" or links to articles found on the Brizy website. Brizy is a technology partner that helps us provide an enhanced, user-friendly website editing experience. The Brizy partnership is explicitly designed for ministries, ensuring we offer the best solution to meet your church's website needs.
Updated
