Tips and Tricks for Unbounce Pages

Bullet Color and Size

When you need to change the color or size of bulleted text in a text module, add the following to the CSS Stylesheets tab.

Color Change Only

<style>

#lp-pom-text-267 ul li {

color: #F10D0D;

}

</style>

Size Change Only

<style>

#lp-pom-text-271 ul li {

font-size: 36px;

}

</style>

Color and Size Change 

<style>

#lp-pom-text-269 ul li {

color: #F10D0D;

font-size: 36px;

}

</style>

When you change the size of text in Unbounce and choose the option for bulleted text, the bullet icon does not change in size or color. 

This simple CSS will give you the ability to control both. 

The color F10D0D is red. You will need to select the text color control to find the right hex code for the color you need.

You also need to make note of the lp-pom-text code for your text block and substitute it for my example of lp-pom-text-267. This is at the bottom of the right-side panel (Properties).

If you want all bullets to have the same appearance, use the format .lp-pom-text ul li

Notes

Favorites

Here are a few of my most often used scripts for enhancing Unbouce pages

If you have any questions, let me know.

ed@landingpagefixer.com

Favicon

Smooth Scroll

<link rel="icon" type="image/x-icon" href="https://your-file.ico"; />

Favicons add a professional appearance to your page. Add this script to the Head of your js Javascript tab. 

Replace the "ico" file with a file of your own. It needs to be an ico file type. 

Start with a PNG file with a transparent background. Then, rename the file to an ico.

I usually host my files on an AWS account which has free options. 

Need help creating a custom ico file or hosting it, let me know. 

Notes

Use this script to add a click action that smoothly scrolls to a new place on the page. 

Add the script to the js Javascripts tab. (Before Body End Tag). 

You will also need to have the javascript library installed. Install the following script into the Head.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Notes

<script>
  jQuery(function($) {
 
    // The speed of the scroll in milliseconds
    var speed = 1300;
 
    // Find links that are #anchors and scroll to them
    $('a[href^=#]')
      .not('.lp-pom-form .lp-pom-button')
      .unbind('click.smoothScroll')
      .bind('click.smoothScroll', function(event) {
        event.preventDefault();
        $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
      });
  });
</script>

Gradient Transitions

Sometimes you want a softer transition between sections. This doesn't require any code.

Simply create a section about 20 px high and choose a gradient background. Unlock the padlock symbol so you can designate the exact top and bottom colors.

Make the top color match the section above and make the bottom color match the section below. You can see that effect here - in the transition from white to black.

To be exact, it's from FFFFFF to 0E0F11.  The almost black color was chosen to match the header background - which is a good general rule to follow.  ColorPick Eyedropper is a great Chrome extension that allows you to identify the color of any web page. 

To transition from black to white, you can simply copy the first section, move it to the bottom, and click the icon next to the padlock and this will reverse the top and bottom so you're going from black to white.

I've made the bottom section 80 px high and made a transition from black to red so you can see the possible variations.  

Questions?

Special Offer on New Unbounce Accounts

This is an idea for presenting key messages at the bottom of a section.

This is an example of how to create POP to header or title text. Choose a gradient for the box and add a border on two sides to create a drop shadow effect. 

Logo Bars

In order to get the faded logo appearance, I would often resort to editing the images in Photoshop. This worked well but added time to the project. 

In the example below, the dominant colors of the site are dark and light purple.  I've included the dark purple in this image for illustration purposes. 

 In Photoshop, I would make the logos light gray and place the images on top of the background. 

Getting the same effect within Unbounce isn't difficult and saves time.

  • Place the solid black logo images in a new section.

  • Insert a box on top of the images (make sure the images do not go "inside" the box.

  • Choose a color and opacity for the box that achieves the effect you need.

  • For the section background, choose Solid Color and use the same settings as the box.

  • Preview the result and adjust the opacity as needed.

© Copyright 2020 Landing Page Fixer

ed@landingpagefixer.com

How do you deal with text on a complex hero image such as the one below You can put the main headline and sub-head in the sky - but any additional copy is challenging. That's when a full-width box with text on top is useful.

Full-Width Boxes

Here is the code to make a full-width box.  (Before End of Body Tag)

<script>   

var e = jQuery('#lp-pom-text-120'); //Replace with your element ID 


var a = jQuery('.lp-pom-root'); 


e.css({'left':0, 'width':'100%', 'box-sizing':'border-box'}).prependTo(a); 


  </script>

Next, you need to add some copy on top of the box and that requires some additional steps. This drove me crazy for a long time. On some pages, the text worked fine and on the next page it would not. The text was obscured by the box. It looked like this: 

Builder View

Published View in Mobile

No matter what I tried, the box was layered on top of the text, even if the text element was higher than the box in the properties menu. 

If the text is nested "inside" the box, it does appear on top, but the text will not stay centered when it is viewed on a variety of devices with varying screen sizes. 

I finally got a css expert to look at the problem and it was easily fixed. 

Make the Text Stay on Top

Create a text element but make sure it is not nested inside the box. Use the keyboard arrow keys to position the text on top of the box. (not the mouse). 

Change the Z-Index of the full-width box. This is a css property that determines the stack order of all elements. It needs to be a lower number than the text element. 


The Z-Index is visible in the lower right-hand corner of the Properties menu. Next,  I'll show how to set the value to 1 which will make sure the box is behind the text. 

In this example, I have a blue box that is full width.  First, enter a class name for the blue box. I called this one "blue-bar".

Change the Z-Index with a little CSS added to the Stylesheets tab. 

<style>
  #lp-pom-box-309.blue-bar{
    z-index:1;
  }
  </style> 


This forces a Z-Index of 1 so the blue box will appear behind the text.

Slanted Text Boxes

  • Add a class to your text box. (scroll to the bottom of the properties) Name the class something like "tilt".

  • Add the following script to the style sheet tab. Substitute the text box ID for your own. 

  • Use a negative number if needed to get the slant in the desired direction.

    <style>

  #lp-pom-text-33.tilt{

    transform: rotate(-30deg);

  }

  </style>