If you prefer full creative control, Porto allows you to create a popup from scratch using Elementor or WPBakery Page Builder.
With the Porto Popup Builder, you can design unique, responsive popups that fit perfectly with your site’s branding — all without touching a single line of code.
Whether you need promotional banners, discount alerts, cookie notices, or newsletter forms, you can build and customize every part of your popup layout visually.
Step 1: Open the Popup Builder
- From your WordPress dashboard, go to Porto > Templates Builder > Popup.
- Click the Add New button at the top of the page.
- In the New Porto Builder modal window:
- Select Popup in the Builder Type field.
- Enter a name for your popup (e.g., Black Friday Offer Popup).
- Click Create Template.
Step 2: Choose a Page Builder
After creating your new popup template, choose your preferred page builder:
- Elementor — recommended for real-time visual editing with advanced styling options.
- WPBakery Page Builder — great for those familiar with Porto’s custom elements and grid system.
Step 3: Build Your Popup Layout
Once inside the builder:
- Start by adding a Section or Row.
- Use Porto’s exclusive elements or widgets such as:
- Heading
- Text Block
- Button
- Image
- Countdown Timer
- Newsletter Form
- Product or Promo Block
- Adjust the popup’s width, height, alignment, and background styling as desired.
- You can also add animations and overlay colors for better user experience.
Step 4: Configure Popup Settings
After designing, click the Settings icon (gear icon) in the top panel to open the Popup Settings window.
Here you can configure:
- Popup Type (Modal, Off-Canvas)
- Popup Width
- Popup Animation (Fade, Zoom In, etc.)
- Overlay Background Color
- Disable Overlay
- Exit Intent Popup
- Horizontal Offset
- Vertical Offset
- Popup Disable Period (e.g., Day, Week)
These settings allow precise control over when and how your popup appears to visitors.
Step 5: Save and Preview
When your popup is ready:
- Click Publish or Save Changes.
- Use the Preview button to test how it appears on desktop, tablet, and mobile views.
- If satisfied, set display conditions to define where the popup will appear (e.g., homepage, shop, or all pages).
Combine multiple elements like countdown timers, CTA buttons, and coupon codes to boost engagement.
You can also reuse the same popup design across different campaigns by duplicating it from the Templates Builder page.
