Using images as bullets with correct alignment


#1

I watched Oli’s 11 step lesson and saw how he used images, round dots, really) for bullets. So I have tried in vain to do the same thing, first editing in Safari, then Chrome, then back to Safari again. I create bulleted paragraphs, or use indent, then place round appropriately sized green bullets in place of the, by placing them over, the automatic bullets if I use bulleted paragraphs, OR, I create paragraphs with indents, then install the image bullets next to the paragraph.

These look great in the editor, whether Chrome or Safari, but render either too high or too low in either browser, and with more dis-alignment in mobile versions.

There isn’t even a way to automatically align such images (bullets) with their paragraphs.

I would much rather use images as bullets, but don’t know how to solve this problem. One coach suggested something re CSS, but I am not a programmer and would hate to have to get into that just for bullets.

This is certainly one place where UnBounce could improve its editor with a group/ungroup function. I have now wasted many hours with these bullets and would appreciate any suggestions other than…“just go with UnBounce pre-installed bullets.”

Thanks ahead,
gerry


#2

Really happy to see that Amy was able to help out here, Gerry! Woo-hoo!


#3

Wow, Gerry! You rock! 


#4

Here’s a solution that Amy Wood, Success Coach, and I implemented with CSS styling. I’d never used CSS, so If I can do it, so can anyone else. Following is an excerpt from one of Amy’s emails with my annotations regarding further questions I asked and the clarifications that Amy provided. This solution really works and you can even use different size/color/image bullets on the same page as I discovered, simply by using a different CSS script for each text box - if needed, as I required, you can manage mobile pages separately from desktop as well by managing each text box with a different script:

What does this solution do?

It simply replaces the tiny automatic bullets that UnBounce creates in bulleted text with any bullet you choose.
Here’s how:

Amy:
"Amy here from Unbounce. Great chatting with you just a few moments ago :slight_smile:

I understand you’d like to use images as your bullet points–you can absolutely do this! I’ve included the how-to below:

Change the size of the image.  I noticed the actual size of the bullet is a tad larger than what you would like. You’ll need to re-size the image outside of Unbounce (in Photoshop) and re-save it with the correct dimensions.

Gerry: The image I found online was a round circle 16 pixels (png). I reduced it to 10 px on Mac using Preview, no access to photoshop needed; I think Pixler, a free online app similar to Photoshop would also have worked, but Preview is much easier for just resizing. I saved the image to my desktop.

Host the image.  If you have somewhere you can host your bullet point image this is ideal, but if you don’t you can often host it on a free hosting site (such as http://httpsimage.com/). Simply upload your image to this free SSL-secured hosting site and you’ll be provided a URL which you’ll use in your CSS script.

Gerry: I used the suggested site and it worked perfectly. No cost, no muss, no fuss, just upload and forge about it. I uploaded the bullet image and the site provided a URL for me to insert in the CSS script. I suppose you could host the button anywhere and I may try that later.

Delete the individual bullet images on your page currently.

Gerry: I had previously uploaded the bullets as images to my library in UnBounce and placed them over the the UnBounce bullets or created the text without bullets and then added my images and placed them next to text that I wanted to appear as bulleted. This wasted many hours because from trial to trial, browser to browser, desktop to mobile, these bullets would not remain aligned with the proper text; they’d be too high, too low, had to be adjusted every time I edited text. Really bad solution.

Hence Amy’s instruction to delete the bullet images I had tried to use. I could have omitted this instruction from Amy, but offer it in case you too have expreienced this frustration.

Place the following script in the CSS tab.

Gerry: This is the key! Inserting this CSS script (CSS scripts at bottom of Editor) once per text box (as highlighted) replaces the UnBounce’s automatic bullets (with bulleted text)  with your custom bullet. 

Here is the script Amy gave me.


 #lp-pom-text-854 li {

    padding-left: 30px;

    background-image: url(http://i59.tinypic.com/2rdc2vk.png);

    background-repeat: no-repeat;

    background-position: 0px 07px;

    list-style: none;

  }

Amy: 

Note that you need to replace the following in the script:
-‘http://i59.tinypic.com/2rdc2vk.png’ with the URL of the hosted image

Gerry: I used the link Amy gave me in step 3, but I suppose that if you host the image on your own website (private page), you’d substitute your URL.

and

-’ #lp-pom-text-497 with the proper element ID of the text box containing the bullet

If you need to apply this CSS rule to multiple text boxes (which it appears you will have to), you can do so by simply adding a comma between each text box ID (see below for example).


 #lp-pom-text-497, #lp-pom-text-123, #lp-pom-text-284, #lp-pom-text-854 li {

    padding-left: 30px;

    background-image: url(http://i59.tinypic.com/2rdc2vk.png);

    background-repeat: no-repeat;

    background-position: 0px 07px;

    list-style: none;

  }

Once you've added this, simply save and Preview your page--you should see the image bullets now :)"

____________________End Amy’s note _____________________________

Gerry: I have several text boxes on my desktop and mobile pages and tried to implement Amy’s script as above, but it didn’t work for me. I probably made a mistake, despite several tries. To resolve this, I created a separate script for each text box and made an interesting discovery (new for Amy as well, who made no claim to being a CSS )

If you need different size bullets or even different images, you can simply modify the CSS script to reflect a different host page for the bullet and label the text box correctly in the script. 

Therefore, you could end up with a CSS script for each text box that uses bullets and each text box could have its own bullet image//color/size.

However, the problem of alignment remained: some bullets were still slightly too high, some too low, but Amy gave me the key to understanding the script. For example, here is one of my adjusted scripts:


 #lp-pom-text-854 li {

    padding-left: 20px;

    background-image: url(https://openmerchantaccount.com/img/bullet-dot-green10.original.png);

    background-repeat: no-repeat;

    background-position: 0px 08px;

    list-style: none;

  }

I learned from Amy what some of the values in the script do and made these changes: 

Padding-left is now 20px, not the 30 in the original script. Reducing the padding brings the bullets closer to the bulleted text. This was especially important in managing my mobile view text.

background-position: 0px 08px; background position is now 08px, not 07. Raising the number from 07 to 08px Lowers the bullet, and vice versa.

So now, thanks to Amy Wood’s great help, I can manage bullets anytime, anywhere, using more than one image/size or color/ per page and manage them differently on desktop or mobile. I’m still CSS naive, but I can manage bullets. Whew!

Hope this helps,

gerry