Popups play a crucial role in engaging website visitors, collecting contact information, showcasing special offers, and facilitating event registrations.
For WordPress websites, integrating popups is a valuable strategy for sales and marketing.
Spectra, the ultimate page builder, offers an easy-to-use Popup Builder feature to create effective popups.
This document provides step-by-step instructions on how to create popups using Spectra.
A popup, or popup box, is a smaller window that appears on a website to draw attention to specific content.
Examples include email subscription forms or promotional offers.
Spectra enables users to design and implement popups seamlessly.
- Ensure Spectra is activated on your website.
- Navigate to Spectra > Popup Builder.
- Click on “Create Popup” at the top left.
- Choose between Info Bar or Popup and customize the selected option.
- Use the editor to add or remove blocks to tailor the popup according to your preferences.
- Click “Publish” to make the popup live.
Through the popup builder block, these settings control the overall behavior of the popup.
- Popup Width
- Popup Height
- Prevent Background Interaction: Disables background scroll and click events when the popup is visible.
You can configure how the popup can be closed.
- Dismissible: Enable to allow popups to be closed.
- Close on Overlay Click: Close popups when the overlay is clicked.
- Icon: Choose a closing icon.
- Icon Position: Specify where the closing icon appears in the popup (default: Top Right).
(Available in the Pro Version of Spectra)
- Display Settings :Control where the popup appears or doesn’t.
- Trigger Type: Configure when the popup should trigger.
- Load: Appears as soon as the configured page loads.
- Exit Intent: Appears when a user attempts to leave the page.
- Element Trigger Type: Use a provided class to create a clickable element triggering the popup.
You can control the repetitive behavior of the popup.
- Repeat Infinitely: Load the popup as many times as the trigger type is loaded.
- Repetition per Browser: Determine how many times the popup appears in a single browser on each load.
You can customize the appearance of the popup.
- Popup Style: Configure background, overlay color, border, and border radius.
- Close Button: Adjust closing icon size and color.
- Box Shadow: Apply a shadow to the popups.
- Spacing Settings: Control spacing by customizing margin and padding.
We hope this document has been helpful. If you have any queries further, feel free to leave a comment below.