Logic Hop provides a number of ways to implement conditional logic for content personalization. Conditional CSS is a powerful tool in which CSS is dynamically generated based on an individual user’s actions.
Logic Hop Conditional CSS is generated prior page load and is derived from the condition name using the WordPress slug.
For example, if a condition named Today is Friday was met, a CSS class is added to the body class attribute:
And a CSS stylesheet is generated with the following styles:
Note: Conditional CSS can be used with cache plugins. Conditional CSS rules are generated when the page is loaded and are not cached.
Enabling Conditional CSS
Select a Logic Hop Condition
Copy the CSS class
Check the option Enable Conditional CSS
Click Update to save the condition
Congratulations! Your condition will now be evaluated on page load.
Note: All Conditional CSS enabled conditions are evaluated prior to each page load. While Logic Hop is extremely fast, it is recommended to only enable Conditional CSS for conditions which rely on this functionality.
Using the CSS Body Class
The CSS class name is derived from the condition name using the WordPress slug. For example, if a condition named Today is Friday was met, the slug would be prepended with lh- and added to the class attribute as:
When the condition is met, you can use CSS to style your page. To change the background of all <h1> tags to red on Friday, you could use the following style:
<h1 class="logichop-not-today-is-friday">Sorry it's not Friday.</h1>
Using Conditional Not CSS with the WordPress Page Editor Conditional CSS Example
Note: Conditional Not CSS is automatically enabled when you enable Conditional CSS.
Page Views <body> CSS
By default, Logic Hop tracks users’ page views and outputs the value as a CSS class in the body of each page such as:
These CSS classes can be used with your custom CSS to hide and display content for users based on the number of times they have viewed a specific page. This is perfect for landing pages and messaging first-time or returning visitors.
Using Page Views CSS to show content to a first-time visitor
<div class="first-visit-content">Visible to first-time visitors</div>