Skip to main content
Solved

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


Noah
  • Former Unbouncer
  • 126 replies

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

Best answer by Laserfocus

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

View original
Did this topic help you find an answer to your question?

37 replies

  • Former Unbouncer
  • 1556 replies
  • July 25, 2017

Love it @Noah! These scripts are 🔥.

Keep 'em coming!


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • July 25, 2017

Amazing!

We were replicating this effect using background images, but this will be so much neater & easier to manage!

Thank you!


Noah
  • Author
  • Former Unbouncer
  • 126 replies
  • July 25, 2017

Awesome @Stefano, happy to hear this will help 🙂


Jon_Schnake

That’s really awesome (and super lightweight - it’ll keep that quality score intact! 😃 ). I’m excited to see what kind of neat stuff is about to start happening thanks to CSS4, if this is any indicator of what we can expect. Thanks, @Noah!


  • Former Unbouncer
  • 1556 replies
  • July 25, 2017

Agreed on CSS4! These guys are going to have a field day with that framework. 😃


Jon_Schnake

HNNNNNNNGH It’s a great time to be an Unbounce power user. 😃


Michelle
  • 3 replies
  • July 27, 2017

This is an awesome script, by the way! 👍

Question: How can you make it so that it angles the other way (aka angles up to the left)?


Noah
  • Author
  • Former Unbouncer
  • 126 replies
  • July 27, 2017

Good question @Michelle. To change the angle of a bottom, you need to change the skewY value from a negative to a positive and change the transform-origin value from 100% to 0% (and do the opposite for a top). Give it a try and let me know how it goes!


hellojules

This is awesome! However, I’m running into a bit of a snag with this. My sections are showing up choppy when I add an image as a background. Any suggestions?

http://d.pr/i/WEeFNC


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • August 16, 2017

Hey!

I am actually experiencing the exact same thing. If I come up with a solution before @Noah does, I will post it here 🙌


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • August 28, 2017

Hey @hellojules

So we worked around this by setting both sections above and below the panel with the image background to have angles, so that the background image does not break.

Let me know if you need a hand getting this to work!


hellojules

Thanks for the workaround, @Stefano. This makes sense.

Thanks!


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • August 31, 2017

My pleasure!


Jon_Schnake

@Stefano - Can you give me an example of how you did it? I tried something similar and still had the angles not able to sit overtop of the image without the white break. Instead, there was just a white space where the angles climbed/dropped on the bottom of the top section and the top of the bottom section.


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • August 31, 2017

Sure! Here is my code.

#lp-pom-block-31 is the section above the section I want angled, which is why it is set to “:after” and #lp-pom-block-13 is the section directly below which is why it is set to “:before”. I am not setting anything to my section w/ the background.

Let me know if this helps!

<style>
/*This ensures diagonal bg doesn't block page content*/
.lp-positioned-content{
  z-index: 100;  
}
/*Replace #lp-pom-block-34 with your section ID to create an angled bottom*/
#lp-pom-block-31:after{
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-2.00deg); /*change to increase/decrease angle*/
  transform-origin: 100%;
  z-index: 1; 
}
/*Replace #lp-pom-block-34 with your section ID to create an angled top*/  
#lp-pom-block-13:after{
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(2.00deg); /*change to increase/decrease angle*/
  transform-origin: 0;
  z-index: 1; 
}

#lp-pom-block-13:before{
  background: inherit;
  top: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-2.00deg); /*change to increase/decrease angle*/
  transform-origin: 0;
  z-index: 1;   
}
  
</style>

Jon_Schnake

@Stefano AH! I see where my mistake was. Awesome, thanks Stefano!


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • August 31, 2017

Pleasure 🙂


do you have an example of this?


Joe_Savitch

@noah or @Stefano have you tried using this with an image? Up until now I had only used solid color backgrounds and it has worked smooth as silk… but I just tried it with an image and it is no bueno 😦

The image repeats half way through the section. Is there a way to have this work with full width background images? Or is this really only for solid color backgrounds?

Joe


Zoe_Tattersall
Forum|alt.badge.img+3

I had the same issue with images – couldn’t get it to work 😦


Noah
  • Author
  • Former Unbouncer
  • 126 replies
  • September 29, 2017

Hey @Joe_Savitch, I’d recommend applying the angled top/bottom to the sections before and after your section with the background image.


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • September 29, 2017

Hey Joe!

My workaround was the same as Noah’s below… let me know if that works for you? I was having the same issues when having photos in the bg.


Joe_Savitch

@noah… brilliant. Simple solution.

Joe


yosh_pdx
  • 4 replies
  • March 21, 2018

Angled Hero Images & Gradients

For brand imagery and gradients in the hero/top section of a landing page, I adjusted @Noah original code and changed the “after” background element from inherit to “linear”.

Below is the adjusted code for the “after” section of code.

}
#lp-pom-block-8:after{
background: linear;
bottom: 0;
content: ‘’;
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-5deg);
transform-origin: 100%;
z-index: 1;
}

// Yosh


Tristan_Ramberg

Like others, I’m having issues with background images repeating and also skewing the image itself and am having difficulty trouble-shooting the cause.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings