Unbounce: How to Create Angled Page Sections ("False Bottoms")

If you want to try out Unbounce yourself for free for 14 days and then get 20% off for the next 3 months after the 1-month free trial, sign up using my link:

https://unbounce.grsm.io/ivan?sid=u-angledbottoms-1

My Unbounce playlist so you can find every important piece you need:
https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

Link to instruction page: https://community.unbounce.com/t/how-to-create-angled-page-sections-aka-false-bottoms/5836

Link to the code required: https://gist.github.com/noahub/783cf6bc402bf4cc99cb84aa8927c8f8

If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the ‘My Services’ section of my blog: https://amarketingessentials.com/my-services/

Hey all!

In this video, I want to show you how to create angled page sections (AKA false bottoms) in Unbounce.

This is a really cool effect that makes your sections appear longer than they really are, and gives the effect to the user landing on your page that there is more content to see and that they have to scroll to see it.

This is especially useful if you have a fairly short landing page and users might get confused, thinking that there is only one page and nowhere else to scroll.

That being said, the process is pretty simple – you just copy the code provided to you in the links attached above into your CSS section of your Unbounce landing page.

This is the coding part where you “style” your pages and add cool effects to them, like this one.

So let’s go through the steps:

(1) Copy the code from the links provided to the “CSS” or “Stylesheets” part of your Unbounce landing page (to the left of the Javascript code section).

(2) Once you do that, you need to change the element ID’s of the sections in that code with the element ID’s of your own sections.

You can do that by selecting a section, going to the bottom-right hand side in the edit options, and copying & pasting the element ID into the stylesheets.

Depending on how many sections you have that you want to add these angled bottoms to, you might need to add them all in.

You can even just copy the existing styling code for the section that is already up, and just paste it over and over again for every section that you want changed.

Alternatively, as I show in the video, you just paste the section ID’s into the first styling code and that will apply the corresponding code to all the section ID’s that you listed.

(3) Now you just play around with the skew degrees and the transform-origin properties.

If you want to skew the lines to the left, you would need to use a negative skew value, like -3.75deg in this case.

If you want to skew the lines to the right, you would need to use a positive skew value, like +3.75deg, BUT you also would need to adjust the transform-origin from 100% to 0%.

(4) You can play around with the properties listed above, but you can also change the location of the skew to be either top or bottom.

Just remember that you do have to change the transform-origin depending on where you place the angled skew.

I also show you in the video what to do to troubleshoot some issues you might face, such as having a skew that looks super awkward (in which case you just want to increase the height of the section), or the angles not actually showing (in which case you want to play around with the transform-origin property).

But that being said, that should be everything you need to know about creating angled bottoms inside of your Unbounce landing page!

That’s it!

If you want to try out Unbounce yourself for free for 14 days and then get 20% off for the next 3 months after the 1-month free trial, sign up using my link:

https://unbounce.grsm.io/ivan?sid=u-angledbottoms-2

Do you have any ideas or video topics about Unbounce or anything else you would like me to cover?

Write down in the comments below what you would like me to make a video on!

Most of my videos I made were requests/suggestions from subscribers, so don’t hesitate to let me know as well!

Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

Thanks for watching, and I’ll see you in the next video!

source