Content personalization is so much more than showing the right message. It’s about customizing your website to give each visitor a unique experience that fits their individual needs.
The foundation of your website’s layout and visual appearance are HTML and CSS. Cascading Style Sheets, also know as CSS, is a powerful language that can use classes and properties to specify the visual styling of your website.
Enter Logic Hop Conditional CSS!
Logic Hop features Conditional CSS which adds CSS classes to the <body> class attribute when specific conditions are met. WHAT? To put it simply, your website appearance can change based on conditions using CSS.
Imagine a link from a newsletter or display ad with a utm_campaign query string value set to summer. Your corresponding Logic Hop condition detects the value and adds to your page.
Now the fun begins!
Using CSS, you can customize any element on your page by using the Conditional CSS Body class in your theme style.css file or even inline in your page.
Want to change the font color for every <h1> header on your page?
.lh-summer-campaign h1 {
color: orange;
}
How about changing the background image for your entire page”
body.lh-summer-campaign {
background-image: url('summer_beach.jpg');
}
Check out our video tutorial above to see how it’s done and be sure to have a look at our Conditional CSS documentation to get the full details.
