Implementing angled page sections is is a subtle way to indicate that more content exists below the fold, and subconsciously prompts visitors to scroll down to find it.
This isn’t a native Unbounce feature, but we’ve put together a quick CSS script that will allow you to achieve this effect in Unbounce quickly and easily.
You can see this in action (built in Unbounce) here:
How to Install in Unbounce
Click Here for Instructions
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Get the latest script here: https://gist.github.com/noahub/783cf6bc402bf4cc99cb84aa8927c8f8
Copy the CSS and paste in your Stylesheets
Create a page section and replace the the ID in the script with the target page section ID.
#lp-pom-block-34:after CSS rule-set to give a section an angled bottom and
#lp-pom-block-34:before to give a section an angled top.
Optional: Change the value of
skewY in the CSS to increase or decrease the angle or your top/bottom.
Did you find this tip useful? Show us how you implemented it with a screenshot of your landing page in the comments below!
Want to take your Unbounce landing pages + Convertables™ to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks