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. 

The color F10D0D is red. You will need to reference 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 reference 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).

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). Make sure to check the box for jQuery 1.4.2.

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>