Solved

[How to] Create Angled Page Sections (aka False Bottoms)

Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

tips-scripts-banner

One of our favourite highlights from @Oli_Gardner’s talk at CTAConf 2017 was his tidbit on asymmetrical design - but more specifically, false bottoms.

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:
http://landingpage.noahmatsell.ca/angled-page-section-demo/

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1.

🔗 Get the latest script here: https://gist.github.com/noahub/783cf6bc402bf4cc99cb84aa8927c8f8

Step 2.

Copy the CSS and paste in your Stylesheets

Step 3.

Create a page section and replace the the ID in the script with the target page section ID.

Step 4.

Use the #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.

Step 5.

Optional: Change the value of skewY in the CSS to increase or decrease the angle or your top/bottom.

–

That’s it!

Did you find this tip useful? Show us how you implemented it with a screenshot of your landing page in the comments below! 🙂


Can’t see the instructions? Log in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

icon

Best answer by Laserfocus 12 March 2020, 19:14

View original

37 replies

yosh_pdx

@Tristan_Ramberg
That looks like what mine looked like before changing the background to linear. Feel free to share your code in the thread or dm it to me and I can try and help.

Joe_Savitch

@Noah @Stefano When I apply an angle of more than 7 deg I start to see wierdness. AKA the part of the bg that is angled breaks away from the rest of the background and some white bleeds through. Any way to get around this?

Joe

Wayne_White

Thank you for this, finally have a new unbounce site to actually test this on.

I think it’s going to kill it

A

Hi man,

I am trying the linear code, but it only cancels the angles. How did you solve the repeating situation?

C

Hi Yosh, when I change the code like this, the angle doesn’t work at all. Any idea why?

I’m using an image, as I need a gradient in an angle that Unbounce doesn’t support.

Agencia1x

Thank you @Noah !!!

B

I’m having issues with the overlay in my background not accepting the angled section of the page. Any insight here?
@Noah

M

Anyone know what to change -3.75deg to in for the angle to go right bottom? With -3.75deg, it goes left bottom.

JJJ
Badge +1

@Mark_H

CSS
transform: skewY(-3.75deg); /change to increase/decrease angle/

You should be able to do some drastic tweaks editing the skewY figure

JJJ
Badge +1

When viewing these on ultrawide monitors I am getting these breaks. Is there an easy fix for this one?

Screenshot(27)

sirbobward

This does not work.

Laserfocus
Badge

Hey guys, Ivan here again. 🙂

As always, love the work you are doing - please keep it up, absolutely amazing features!!!

I made a video showing how to set this up live inside of your Unbounce account, including changing the direction of the skew, and other features you might have wanted to implement.

Here is the video on YouTube:

Let me know if you have questions!

Ivan

Reply


Terms & ConditionsCookie settings