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!


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, #0098db 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.

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.

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 of your bullet points.

Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply