How to Add Angled Edges to Page Sections

Follow

An angled top or bottom edge on a page section is a subtle cue that there's more content below the fold, which can prompt visitors to keep scrolling. The Classic Builder doesn't include this setting, but you can add it with a short CSS snippet.

Speaker presenting on stage at Unbounce Call to Action Conference, blue background.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it.

Add the angle to a section

  1. Copy the CSS from Angled Page Sections on GitHub and add it to the Stylesheets section.
  2. In the CSS, replace the section ID with the ID of the page section you want to angle.
  3. Use the #lp-pom-block-34:after rule to angle the bottom of a section, and #lp-pom-block-34:before to angle the top.
  4. (Optional) Change the skewY value to make the angle steeper or shallower.
  5. Save and republish the page.