Intro: In this guide, we’ll walk you through the easy steps of creating an eye-catching popup using Bricks Builder and Max Addons Modal Popup element. With its beginner-friendly interface and powerful features, you’ll be able to design engaging popups in no time.
Whether you’re a fan or not, popups can be powerful tools for converting website visitors into leads or customers. Well-designed popups can encourage users to take the desired action, whether they are signing up for an email newsletter, making a purchase, or downloading a resource.
Popups are everywhere online, so chances are you’ve seen them before. But if you’re new to the term, here’s exactly what popups are.
What is Popup?
Popups, as their name suggests, are interactive graphical elements that appear on your browser window in response to specific actions, such as scrolling, exiting the browser, or spending X amount of time on the site.
These are specifically designed to deliver timely information, notifications, or offers to users in a visually engaging manner. When used thoughtfully, they can enhance user experience by providing relevant content, guiding users through processes, or offering valuable promotions.
Now that you know what a popup is, let’s discuss some of the benefits and drawbacks of adding popups to your website.
Benefits and Drawbacks of Popups
| Benefits of Popups | Drawbacks of Popups |
| Ability to grab visitors’ attention: Popups can catch your eye when you’re browsing online, making sure you notice important stuff like offers or messages. | Negative Impact on User Experience: Popups typically appear without the user’s explicit request and often disrupt the user’s workflow or browsing experience. |
| Encouragement for specific actions like signing up or making a purchase: They can politely nudge you to do something, like signing up for a newsletter or taking advantage of a discount. | Increased Bounce Rates: Too many or poorly timed popups can drive users away from the website, resulting in increasing bounce rates. |
| Effective in capturing leads through incentives or promotions: Popups can offer you something cool, like a freebie or a discount, in exchange for your email. | Mobile Responsiveness Issues: If not designed properly, popups may not display properly on mobile devices. |
| Opportunity to promote new products, services, or offers: Popups can showcase the latest stuff a business has to offer, like a new product or a special sale. | Negative Impact on SEO: Google has stated that intrusive interstitials (including certain types of popups) can negatively impact a website’s search rankings, especially if they obscure the main content or are difficult to dismiss. |
Create a Popup Using Bricks Builder with Max Addons
Now that you know the pros and cons of adding a popup to your website, let’s dive into a step-by-step guide on how to create one using the Modal Popup element from Max Addons on your Bricks website.
1. Install and Activate Max Addons
First things first, ensure you’ve got Max Addons installed and activated on your WordPress website.
2. Create or Edit Your Page
After activating Max Addons, go to the WordPress site dashboard and create a new page or edit an existing one where you want to show the popup.
3. Edit with Bricks Builder
After creating your new page, click the Edit With Bricks button.
4. Add the Modal Popup Element
After you open the page, find the “modal popup” element in the Bricks Builder elements section. Click on it to add it to your page. Make sure to verify that the “Max” tag is displayed in the upper left corner of the icon.
You can place the popup element anywhere on the page, and it will only show up based on the trigger type you select.
5. Design Your Popup
When you add the element to the page, its settings appear on the left panel. For the Modal Popup element, you’ll find the Content and Style tabs.
Before we continue to the settings options, let’s explore the choices you have for designing your popup:
- Heading: You have the option to change the current heading “MODAL POPUP” with your own interactive title.
- Basic Text: Similarly, you can customize the description text to fit your needs.
- Flexibility to drag & drop any element: This is the most flexible option where you can add any element and display it in the popup according to your preference.
- Button: You can add a customized Call to Action (CTA) button to the popup.
6. Choose Popup Trigger Type
In the Content tab, under the TRIGGERS section, you’ll find various trigger types available, including:
- On Page Load: This trigger is useful for drawing immediate attention to important information or promotions as soon as the webpage is loaded.
- On Scroll: By triggering the popup when users scroll to a certain point on the page, you can ensure that it appears when they are actively engaged with your content.
- On Scroll To Element: This trigger is beneficial for providing contextually relevant information or offers based on specific content the user is viewing.
- On Click: By activating the popup when users click on a designated element, you can control when and where it appears, ensuring it doesn’t disrupt the user experience unnecessarily.
- On URL Parameter: This trigger allows for targeted messaging based on parameters appended to the URL, enabling personalized interactions with users.
- On User Inactivity: Useful for re-engaging users who have been inactive for a certain period, prompting them with relevant content or offers to encourage further interaction.
- On Page Exit Intent: By detecting when users are about to leave the page, this trigger enables you to present last-minute offers or prompts to encourage them to stay or take action before exiting.
Activate the Trigger option that you want to use to trigger your popup. For example, I’m enabling the On Page Exit Intent trigger. You can even enable two trigger options simultaneously.
7. Set Re-Trigger (optional)
Next, you get the RE-TRIGGER option. This option prevents site visitors from being repeatedly bombarded with the same popup by specifying a cooldown period before the popup can be triggered again.
8. Define Popup Conditions
Once you choose your trigger type, the other prominent option you get is CONDITIONS.
Conditions play a crucial role in enhancing user experience by ensuring that popups are displayed strategically and respecting user preferences for frequency and timing.
In Max Addons Modal Popup, you’ll find various options for conditions such as:
- Trigger after X page views: By setting a threshold for the number of page views required before the popup appears, you can ensure that it targets engaged users who have already shown interest in your content.
- Trigger up to X times: Limits the frequency with which the popup appears, preventing overexposure and ensuring users aren’t overwhelmed by repetitive messages.
- Reset when re-trigger: Resets the conditions for triggering the popup after it has been displayed again, allowing for continuous engagement without user fatigue.
Choose your preferred condition and then move on to the next step.
9. Customize Popup Close Button
We understand how important it is to design every single element in web page design; with that in mind, we have also added different options to customize the popup close button:
- Hide Close Button: Enable the toggle if you want to remove the popup close button.
Icon:
- ARIA Label: Adding an ARIA label to the icon enhances accessibility by providing screen readers with descriptive information about the icon, ensuring that all users can understand its purpose.
Alignment & Positioning:
- Align, Vertical Position, Horizontal Position, Inner Spacing: These options allow for precise placement and alignment of the popup on the screen, ensuring it integrates seamlessly with your website’s design and layout.
Colors:
- Color, Background Color: Customizing the colors of the popup helps maintain visual consistency with your website’s branding, creating a cohesive and polished appearance.
10. Alter Advanced Options
You further get some more additional options to fine-tune your popup:
- Show Close After (seconds) & Automatically close after (seconds): These options provide control over the duration for which the close button is displayed and the time after which the popup automatically closes.
- Prevent closing on clicking outside & Prevent closing on ESC key press: By preventing accidental closure of the popup, you can ensure that users have sufficient time to interact with the content without interruption.
- Disable page scrolling: Temporarily disabling scrolling prevents distraction and keeps users focused on the popup content.
- Hide for logged in users: Tailoring the visibility of the popup based on user status allows for personalized experiences and targeted messaging.
11. Style Popups
After you’ve finished customizing in the Content Tab, navigate to the Style tab.
The options in the Style tab provide extensive customization capabilities, allowing you to create visually stunning popups that match your website’s design aesthetic and effectively grab users’ attention.
- Layout: Allows you to customize the overall structure and arrangement of your popup. This includes settings for the size, position, and spacing of elements within the popup.
- Typography: Lets you customize font family, size, weight, color, and spacing. This option enables you to ensure that the text is visually appealing, easy to read, and consistent with your website’s typography styles.
- Background: Allow you to customize the background of the popup. You can choose from solid colors, gradients, etc to create visually engaging backgrounds that complement your content and branding.
- Border/Box Shadow: Border and box shadow options enable you to add visual depth and dimension to the popup. You can customize the border style, thickness, color, and radius, as well as apply shadow effects to create a sense of depth and separation from the underlying content.
- Gradient/Overlay: Gradient and overlay settings provide additional options for enhancing the visual appeal of the popup background. You can overlay gradient colors or apply translucent overlays to create subtle texture or contrast, adding visual interest and depth to the design.
- Transform: Transform options allow you to apply transformations such as scaling, rotating, skewing, and translating to elements within the popup.
- CSS: The CSS option provides advanced customization capabilities by allowing you to apply custom CSS styles to the popup elements. This gives you complete control over the appearance and behavior of the popup, enabling you to implement complex design effects and interactions.
- Attributes: Attributes settings allow you to add custom attributes to the popup elements, such as IDs, classes, or data attributes. This can be useful for integrating the popup with third-party scripts or tracking tools, as well as for implementing specific functionality or styling requirements.
- Mask: The Mask option enables you to create masking effects to selectively reveal or conceal parts of the popup content. You can use masks to create visually interesting shapes, patterns, or animations that enhance the overall design and draw users’ attention to specific elements or messages.
Popup: Final Preview
Here, I’ve added a Contact Form to the popup, which appears when users are about to leave the page. Additionally, I’ve customized the heading from the default text to the “Subscribe Now” button.
Tips for Designing Effective Popups
When designing popups, consider the following tips to create engaging and effective popups:
- Keep it Simple: Design your popup with a clean and uncluttered layout. Avoid overwhelming visitors with too much information or too many elements.
- Clear Call-to-Action: Make sure your popup has a clear and compelling call-to-action (CTA) that tells visitors what action you want them to take.
- Eye-catching visuals: Use high-quality images or graphics that grab attention and reinforce your message. Avoid using stock photos that look generic or irrelevant to your content.
- Mobile-Friendly Design: Ensure your popup is optimized for mobile devices with responsive design. Test how it looks and functions on various screen sizes to offer a hassle-free user experience across all devices.
- Timing and Frequency: Be mindful of when and how often your popups appear to avoid irritating or interrupting visitors. Consider using exit-intent triggers or delaying popups until users have spent some time on your site.
I am sure that by following these design tips, you can create popups that are not only attention-grabbing but also drive engagement and conversions effectively.
Wrapping Up…
Including the Modal popup, Max Addons provides over 20 unique elements. These elements can expedite your website-building process, ultimately saving you time and money.
Ready to simplify your website creation journey? Get Max Addons today!
If you found this tutorial useful, feel free to share your thoughts by commenting below!
Learn more:
2 comments