Solved

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


Userlevel 7
  • 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

icon

Best answer by Laserfocus 12 March 2020, 19:14

View original

37 replies

Love it @Noah! These scripts are 🔥.

Keep 'em coming!

Userlevel 7
Badge +4

Amazing!

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

Thank you!

Userlevel 7

Awesome @Stefano, happy to hear this will help 🙂

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!

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

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

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)?

Userlevel 7

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!

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

Userlevel 7
Badge +4

Hey!

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

Userlevel 7
Badge +4

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!

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

Thanks!

Userlevel 7
Badge +4

My pleasure!

@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.

Userlevel 7
Badge +4

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>

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

Userlevel 7
Badge +4

Pleasure 🙂

do you have an example of this?

@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

Userlevel 6
Badge +3

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

Userlevel 7

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

Userlevel 7
Badge +4

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.

@noah… brilliant. Simple solution.

Joe

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

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