How Do I Change Bullet Point Color/Shape?

Follow

Editing the color of your list of bullet points in Unbounce can be done so using some nifty CSS!

Keep in mind - custom scripts & CSS will only run in Preview mode, or on a published page. Do Preview your page to test out the color or shapes of your bullet points.


Changing Bullet Point Color

  1. Click the Stylesheets button at the bottom of the edit page. stylesheets.png
  2. Copy and paste the following code:
  3. On line 3, add a color code in hex format (for example, #0033FF is Unbounce blue!). More about color codes can be found at HTML Color Codes.
  4. Within your CSS, be sure to use the pound/hash symbol (#) before your hex code for it to be valid.
  5. Once you're done, save and publish/republish the page.
  6. Preview or visit the URL of your landing page to see the custom color of the bullet points. 

If you notice that the color of the text on your landing page also changes when you've updated the bullet point styling, rest assured, simply update the Default Text Style within the Page Properties tab on the right-hand side of the builder, or use the Inline Text Editor


Changing Bullet Point Shape

  1. Click on the Stylesheets button at the bottom of the edit page.
  2. Copy and paste the following code:
  3. On line 3, you can change the bullet point shape by replacing square with another value, such as disc or circle. For more about bullet point shapes, check out W3 School's HTML Lists.
  4. Once you're done, save and publish/republish the page.