Styling Bullet Points in a Beaver Builder Module
Video demo with examples below. To try these yourself login on the HomePage to get your copy of this site and return here.
EXAMPLE ONE
- Bullet points are the same colour as the text by default
- But we can hide the bullet points with CSS
- Then add the CSS pseudo element ::before
- with content: "•";
- We have a new bullet points we can color.
This Text Module has the class selector of "color-bullets-one" added under the advanced tab.
See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS
EXAMPLE TWO
- Bullet points are the same colour as the text by default
- But we can hide the bullet points with CSS
- Then add the CSS pseudo element ::before
- with content: "★";
- We have a new bullet points we can color.
This Text Module has the class selector of "color-bullets-two" added under the advanced tab.
See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS
USING FONT AWESOME
You can copy and paste the icon's unicode (looks like f111) directly from the Font Awesome libraries here.
Works on themes with Font Awesome loaded (Beaver Builder theme, GeneratePress and Dynamik if turned on in design settings).
EXAMPLE THREE
- Bullet points are the same colour as the text by default
- But we can hide the bullet points with CSS
- Then add the CSS pseudo element ::before
- With content: "f111"; and font-family: FontAwesome; (BB theme)
- We have a new bullet points we can style.
This Text Module has the class selector of "icon-bullets-one" added under the advanced tab.
See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS
EXAMPLE FOUR
- Bullet points are the same colour as the text by default
- But we can hide the bullet points with CSS
- Then add the CSS pseudo element :before
- A font awesome icon like "f111" (BB theme)
- We have a new bullet points we can style.
This Text Module has the class selector of "icon-bullets-two" added under the advanced tab.
See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS
EXAMPLE FIVE
- Bullet points are the same colour as the text by default
- But we can hide the bullet points with CSS
- Then add the CSS pseudo element ::before
- With content: "f111"; and font-family: FontAwesome; (BB theme)
- We have a new bullet points we can style.
This Text Module has the class selector of "icon-bullets-three" added under the advanced tab.
See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS
EXAMPLE SIX
- Bullet points are the same colour as the text by default
- But we can hide the bullet points with CSS
- Then add the CSS pseudo element ::before
- With content: "f111"; and font-family: FontAwesome; (BB theme)
- We have a new bullet points we can style.
This Text Module has the class selector of "icon-bullets-four" added under the advanced tab.
See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS
...and a few affiliate links (well you never know)
