Not long ago I added here a function to create buttons to open a modal window without plugins in WordPress. Well, yesterday, GenerateBlocks in its 2.3.0 update of its Pro version, added this option much more flexible and with many more possibilities that can save you some plugin.
These are overlay panels (I don't know if this is the best translation for "overlay panels") with conditions.
GenerateBlocks Pro 2.3's overlay panels allow any content to be added to interactive elements such as popups, sliding windows, modal and non-modal windows, tooltips, off-canvas panels and even mega menus.
While GenerateBlocks and GeneratePress are known for delivering clean, lightweight and optimised code, I have yet to analyse the impact on the DOM of these panels to compare the amount of elements and depth they add to know in which cases it will be better to use this new tool or just HTML and CSS sacrificing its interesting conditional rules options.
GenerateBlocks does not add a new block to its collection of 12. What we will see are these two new options in the admin: Overlay Panels and Conditions.
To start creating the first modal, popup or tooltip we click on Overlay Panels and on the right we will find its configuration options.
You can now test its functions by creating any content inside a GenerateBlocks container (or other element) without having to explore the configuration options of the Conditions yet.
Triggers (actions or circumstances that will execute the thing with the content to be displayed) are available:
- Click. It is activated by clicking on a button, image or link, etc.
- On hover, will be activated when a user hovers over an element.
- Click or hover. Combine click and hover.
- Exit intent: Displayed when a user attempts to leave the page and moves the pointer to the top of the browser.
- Percentage scroll: Display after the user scrolls down to a specified percentage of the page.
- Time delay: Appears after the set time you set.
- Custom events are triggered by specific actions, such as when an item is added to the WooCommerce cart (`wc-blocks_added_to_cart`).
Then you can have a look at the Conditions and try out the possibilities. Although I haven't had time to use all the combinations yet, the little I've been able to try out already seems very useful.
If the triggers offer a good palette of options, the conditions greatly increase their possibilities.
Conditions can be based on a wide range of parameters, giving you granular control:
- Author: Shows overlays on the content of specific authors.
- Cookie: Show or hide overlays depending on the presence or values of cookies.
- Date and time. Scheduling overlays for specific dates, times or recurring events.
- Device - shows or hides overlays based on desktop, tablet or mobile device.
- Language: Segment users according to the language of your page.
- Location: Displays overlays on specific pages, posts or files. Locations can also be configured for the entire site or at a level of detail as high as a 404 page or subpages.
- Custompost fields can be used to trigger overlays (e.g. display an overlay on posts with a specific meta value).
- Query parameter - target URLs with specific query strings (e.g. `?utm_source=newsletter`). This is very useful if you run ads and want to show only offers based on specific query parameters for a specific campaign.
- Referrer: Targets visitors coming from specific domains or URLs.
- Site options - Adjusting the WordPress site settings for the conditions.
- User metadata, personalisation according to user profile data.
- User role: Show content to registered users, administrators, subscribers or guests.
You can find the list of the rest of the options in detail in this post or in this guide for the panels and in this one for the conditions with documentation, examples, tips and screenshots.
And if you'd rather have someone explain graphically how to get started, Kyle from The Admin Bar has already done it in this video.
I still think that, although in their support forum they offer a very good customer service with very helpful answers to any question, the learning curve for the use of the many possibilities of GenerateBlocks is still a bit steep. Even more so for newcomers or those used to builders like Elementor. Still, I wouldn't change GB for any builder or block collection because its evolution, although slow, seems to me to be right.
