Divi 4.11 introduce a new set of condition options, which will allow you to apply advanced display logic to any module, row, or section, hiding or displaying elements based on a set of conditions you define, such as user role, date and time, post information, website location, and more. You can, for example, enable floating promotional banners that appear at the start of a sale and disappear at the end.
When users check-in, you can display unique content to them, as well as specialized elements to specific users based on their user role. Divi comes with a plethora of conditions and numerous ways to apply them, so let's dive in and examine the specifics of this powerful new feature.
How to Make the Most of the New Condition Options
In the Advanced tab of the Divi settings pop-up, you'll discover a new Conditions option group. You can add new conditions here to control the visibility of an element. If your criteria are met, the element will be shown to your visitors. Otherwise, it will remain concealed. You can add numerous conditions to create complicated rulesets, and you can choose whether to show the element based on whether all or one of your conditions are met.
Examples of Condition Options
Divi's Condition Options can be used in so many different ways! Here are a few samples of only three of Divi's many criteria.
Create Amazing Websites
With the best free page builder ElementorStart Now
Creating a Recurring Promotional Banner Using a Date and Time
Divi's condition settings allow you to display items based on date and time, as well as build repeating content schedules. In this case, I'm creating a website for a pizzeria. Every Friday, the Pizzeria celebrates "Pizza Fridays" by offering a "buy one Pizza, get one free" special, and they want everyone who visits the website on Fridays to know about it.
To promote the sale, I designed a floating promo bar and used Divi's position options to position it at the top of the browser. Following that, I used Divi's animation capabilities to make it slip in when someone views the page, ensuring that people take notice!
It appears to be perfect, but we don't want this promotional bar to be visible unless it's Friday. This is where Divi's new condition choices come into play. I may add the “Date & Time” condition and specify that this banner only appears on Fridays. Now, website owners can set it and forget it, while their users get thrilled about their weekly free pizza.
Creating A Paid Online Publication While Logged In
The condition options in Divi can be used to show specific content to logged-in users. In this example, I'm creating a website for an ad-free journal that is funded by paying clients who have exclusive access to specific content. Only paying subscribers should be able to see the entire article. Everyone else will receive a sneak peek and the choice to participate. You've probably seen websites like this before, and we can easily replicate it in Divi!
Using a gradient backdrop and Divi's scroll effects, I've created a creative section that hides the article's information when non-subscribers scroll down the page. This section hides the article's content and prompts users to log in or subscribe. I only want this part to appear for users who are not logged in. This is when Divi's condition options come in handy!
I can utilize the “Logged In Status” condition type and specify that this element should be displayed only when the visitor is logged out. I can also use condition options to hide the entire article's content. To summarize, if you are not a paying subscriber and are logged out, the complete article content is hidden and a content masking portion is displayed. When a paid subscriber logs in, the full material is displayed and the content mask is removed.
Cart Contents: Capturing Abandoned WooCommerce Carts
Divi's condition settings also include several unique WooCommerce integrations. In this case, I want to encourage conversions by providing a promo code to clients who depart their cart while it is still full of merchandise.
I made a floating popup to promote a coupon code, and I fixed the section at the bottom of the browser using Divi's position options. This popup looks fantastic, however, I only want it to appear when someone abandons their cart. This is when Divi's condition options come in handy!
I can add the "Cart Contents" condition and set it to appear only when products are in a customer's cart. I also want to make certain that we do not display this coupon code immediately away, but rather only to clients who have abandoned their cart during checkout. I may use the “Page Visit” condition to limit this popup to consumers who have already visited the WooCommerce Checkout page.
Now, if someone adds items to their cart, proceeds to the checkout, but changes their mind before paying, the next time they visit the website, they'll see this 20% off discount code, and I'm sure it will seal the deal!
All Conditions That Are Available
Divi includes a plethora of condition possibilities from which to choose. Furthermore, each condition has multiple sub-options that increase the condition's reach for different scenarios. These conditions can be used to form complex visibility rulesets.
Status of the User
Status conditions allow you to customize your website to your visitors based on whether or not they are logged in, as well as the WordPress user role given to their account.
- Logged In Status — Hide or show components based on whether the current visitor is logged in or out.
- User Role — Hide or show components dependent on the role of the user. Display premium material to certain customers, for example, or private content to specific subscribers.
Interaction conditions enable you to personalize content for your visitors based on how and when they interact with your website.
- Date & Time — Depending on the date and time, hide or show components. Making repeating schedules or displaying material for a set period of time. Display event information for an upcoming event, for example, or display a promotional banner just while a sale is live.
- Page/Post Visit - Hide and display components based on whether or not a visitor has visited specified pages on your website. Retarget visitors to your own website with personalized content based on how they interact with it.
- Product Purchase - Hide or show components to users who have purchased or have not purchased specific products from your WooCommerce store.
- Cart Contents — Depending on whether or not a user has products in their WooCommerce cart, hide or display elements. Target all or a subset of your store's merchandise.
- Number of Views — Hide or show an element based on how many times a visitor has viewed it. Create time-limited content that expires after a set period of time dependent on visitor participation.
Device conditions enable you to customize your website for our users based on the software they are using to browse your website.
- Browser — Depending on the type of browser being used, hide or show content to users. Customize your design for specific browsers to manage the unique ways that different browsers handle CSS, or deliver content that is specific to certain browsers (like browser extensions).
- Operating System - Hide or show features to users based on their operating system. You could, for example, establish download links for your product that direct the user to the correct installation file.
- Cookie - Hide or show components based on the presence or values of specific cookies stored in the visitor's browser. This allows you a lot of flexibility in customizing pages for specific visitors based on how they interacted with your website and its plugins.
Post Information conditions enable you to display items based on the meta-information of the post, such as its category, tag, author, and type. These criteria can be coupled with Theme Builder template assignments to create two levels of conditions and more dynamic layouts.
- Post Type — Hide or show items on specific types of posts.
- Post Category - Hide or show items on posts that belong to particular categories.
- Hide or show components on posts published by specific writers.
- Post Tag — Hide or show items on posts that contain particular tags.
Location of the Website
Website Location conditions enable you to show items based on the location of the page on your website. These criteria can be coupled with Theme Builder template assignments to create two levels of conditions and more dynamic layouts.
- Tag Page - On certain tag pages, you can hide or show components.
- Category Page - Hide or show components on individual category pages.
- Date Archive - Hide or show components on individual date archives pages.
- Search Results - Hide or display components on search result pages based on the visitor's search criteria.
- Post Kinds — Hide or show particular post types' attributes.
- Posts/Pages - Hide or show components on certain posts or pages by selecting them from a list.
Divi Condition Options Are Now Available!
Divi's new condition choices are now available, so download Divi and try them out! Let us know what you think in the comments, and don't forget to come back soon for even more awesome Divi features.