GenerateBlocks Pro 2.3 is here, and it’s packed with powerful new features that take WordPress block-based design to the next level. Among the standout additions are Overlay Panels and Conditions, game-changing features that give site owners unprecedented flexibility and control over dynamic content display.
These features make it easier than ever to create engaging, user-focused experiences. Let’s look at what makes Overlay Panels and Conditions in GenerateBlocks Pro 2.3 so exciting and how they can elevate your website.
This video from Kyle Van Deusen at The Admin Bar gives you an overview of how Overlay Panels and Conditions work.
Overlay Panels: Dynamic, Versatile, and Built with GenerateBlocks
Overlay Panels in GenerateBlocks Pro 2.3 are a versatile way to add interactive elements like popups, slide-ins, modal and non-modal windows, tooltips, off-canvas panels, and even mega menus to your site. Built entirely with GenerateBlocks, Overlay Panels integrate seamlessly into your existing workflows, leveraging the plugin’s lightweight and performance-optimized framework. Whether you’re prompting users to subscribe, showcasing a promotion, or expanding your navigation, overlay panels offer endless creative possibilities.
What Can Overlay Panels Do?
Overlay Panels in GenerateBlocks Pro 2.3 are a versatile tool for adding dynamic, interactive elements to your WordPress site. Built with GenerateBlocks’ lightweight framework, they integrate seamlessly into your design workflow using the same blocks you’ve used for building pages in GenerateBlocks.
Here’s how you can use Overlay Panels to enhance your site:
- Popups. Capture attention with newsletter signups, promotions, or announcements that demand immediate user focus.
- Slide-ins. Deliver subtle, non-intrusive messages that slide in from the side, perfect for gentle nudges like subscription prompts or offers.
- Modal Windows. Create traditional modal dialogs that overlay the main content, ideal for forms, alerts, or critical user interactions that require focus.
- Non-Modal Windows. Display floating content that doesn’t block interaction with the underlying page, allowing users to engage with both the panel and the site simultaneously.
- Tooltips. Provide helpful hints or additional information that appear on hover or click, enhancing user experience without cluttering the interface.
- Off-Canvas Panels. Build sleek, slide-out panels for sidebars, menus, or additional content, offering a modern way to maximize screen space.
- Mega Menus. Attach Overlay Panels to a Navigation Block to create expansive, content-rich menus that elevate your site’s navigation experience.
Overlay Panels can be set three ways:
- Standard, free-floating overlay.
- Anchored to a specific block, like a button, link, or any other block.
- Mega menu, anchored to a specific menu item.
This flexibility ensures you can tailor Overlay Panels to fit your site’s design and functionality.
Triggering Overlay Panels
Site owners have numerous options to control how and when overlays appear:
- Click. Trigger on a button or link click.
- Hover. Activate when a user hovers over an element.
- Click or Hover. Combine both for maximum accessibility.
- Exit Intent. Display when a user attempts to leave the page.
- Percentage Scrolled. Show after a user scrolls a specific percentage of the page.
- Time Delay. Appear after a set amount of time.
- Custom Events. Trigger based on specific actions, like adding an item to a WooCommerce cart (`wc-blocks_added_to_cart`).
Animation and Behavior
Overlay Panels in GenerateBlocks Pro 2.3 are visually engaging, and site owners can use a variety of animations to create the right effect. You can animate overlays to:
- Fade In. Smoothly appear on the screen from the top, right, left, or bottom.
- Slide In. Glide in from any direction.
- Scale In. Grow from a smaller size for a dynamic effect.
You can also fine-tune the speed of these animations to match your site’s aesthetic, or stick with default animations ensuring a polished user experience. Plus, to prevent overwhelming repeat visitors, you can choose to hide the overlay panel after the initial appearance for a specified period, giving you control over how often it appears to your users.
Pattern Library Support
To help you hit the ground running, GenerateBlocks Pro 2.3 includes new overlay patterns in the Pattern Library. These pre-designed templates make it easy to create a professional-looking overlay without starting from scratch. Whether you’re a beginner or a seasoned developer, these patterns provide a solid foundation for customization.
Beyond the Pattern Library, you can add any block to GenerateBlocks Overlay Panels, offering you flexibility and freedom to design overlays however you wish.
Conditions: Precision Control Over Overlay Panel Display
The new Conditions feature in GenerateBlocks Pro 2.3 empowers site owners to define exactly when and where overlay panels appear. By creating reusable conditions based on group logic, you can craft highly targeted experiences tailored to specific users, contexts, or behaviors. Conditions are built with an intuitive interface, allowing you to combine multiple criteria for maximum precision.
Available Condition Criteria
Conditions can be based on a wide range of parameters, giving you granular control:
- Location. Show overlays on specific pages, posts, or archives. Locations can also be set for the entire site, or as granular as a 404 page or child pages.
- Query Parameter. Target URLs with specific query strings (e.g., `?utm_source=newsletter`). This is super helpful if you’re running ads and want to only show offers based on specific query parameters for a specific campaign.
- User Role. Display content to logged-in users, admins, subscribers, or guests.
- Date & Time. Schedule overlays for specific dates, times, or recurring events.
- Device. Show or hide overlays based on desktop, tablet, or mobile devices.
- Referrer. Target visitors coming from specific domains or URLs.
- Post Meta. Use custom post fields to trigger overlays (e.g., show a overlay on posts with a specific meta value).
- User Meta. Personalize based on user profile data.
- Cookie. Show or hide overlays based on cookie presence or values.
- Language. Target users based on their site language.
- Site Options. Leverage WordPress site settings for conditions.
- Author. Display overlays on content by specific authors.
Flexible Group Logic
Conditions are built using group logic, meaning you can combine criteria with AND or OR operators to create complex rules. For example:
- Show an overlay panel on the homepage AND when a specific query parameter is present.
- Display a promotional popup on blog posts OR when a user is referred from a social media site.
- Trigger an overlay panel for logged-in subscribers AND on mobile devices OR during a specific date range.
- Running a sale? Use the date & time condition to set the overlay panel to no longer show after the sale ends.
This flexibility ensures you can craft conditions that align perfectly with your site’s goals, whether it’s boosting conversions, personalizing content, or guiding user behavior.
Reusability and Efficiency
Once you define a condition, you can reference it across multiple overlay panels, streamlining your workflow. This reusability reduces repetitive setup and ensures consistency across your site. For instance, you could create a condition for “logged-in users on mobile devices” and apply it to multiple overlays, banners, or other dynamic elements.
Performance Optimized Displays
The combination of Overlay Panels and Conditions in GenerateBlocks Pro 2.3 unlocks a new level of interactivity and personalization for WordPress sites. Here’s why these features are so useful:
- Enhanced User Experience. Deliver the right content to the right users at the right time, improving engagement and conversions.
- Performance-Optimized. Built with GenerateBlocks’ lightweight framework, overlay panels and conditions maintain your site’s speed and efficiency.
- No-Code Flexibility. Create sophisticated, dynamic experiences without writing a single line of code.
- Scalability. Reusable conditions and pattern library templates make it easy to scale your designs across large or complex sites.
- Reduced Plugin Dependence. In the past, site owners had to use large, complex and often performance degrading plugins to create the same effects. Now popups, slide-ins and mega menus can be built with a lighter codebase, directly in GenerateBlocks.
Get Started with GenerateBlocks Pro 2.3
Ready to explore Overlay Panels and Conditions? GenerateBlocks Pro 2.3 is available as an alpha release now in your GeneratePress dashboard. Test these features on a staging site and plan your next release with new capabilities to easily increase your site’s conversion rate.
Whether you’re building a simple blog or a complex eCommerce site, these tools empower you to create dynamic, user-centric experiences with ease.
Just cutting out the need for additional plugins with this mind-boggling update!
I can’t wait to punch away at the keyboard for a few weeks figuring all this out.
We can’t wait to see what you build!
This is awesome. Very excited to see the Generate experience (simple, flexible, and well-engineered) applied to pop-ups.
The last item I need day-to-day that GenerateBlocks doesn’t include is a Slider block. I’m currently using Splide Carousel Block. It has been okay but I’d really love for the Generate team to tackle this at some point. Sliders have usability issues but they do add interactivity and movement to otherwise static pages and, for better or worse, clients love them.
Thanks for the feedback! Clients have loved sliders for years; I feel your pain. I’ll bring that to the team for consideration!
Already in love with this and sporting one global popup on my site for now. Is there a way to add a close button to the popup?
Yes! Take a look at some of the examples in the Overlay Panel Pattern Library that include the “X” in the upper right that use the global style .gbp-overlay-panel__close to see how it’s done.