Learn how to properly align the Blurb module Title and Icon, and quickly create bulleted lists.
Vertically Align Blurb Title and Icon
Copy and paste these snippets under your Blurb Settings, as shown in the video, to always keep the Blurb Title and Icon properly aligned, regardless of their size.
Blurb → Advanced → Blurb Image:
margin: 0 -10px 0 0;
(Adjust the margin-right to your liking)
Blurb → Advanced → Blurb Title:
Blurb → Advanced → Blurb Content:
display: flex; align-items: center;
Blurb Align Left/Center
Divi gives the Blurb a default width of 550px, so first change it to 100% and then you can easily align it to the left or center on the screen, whatever the width of the Blurb is.
Blurb → Design → Sizing → Content Width:
Blurb → Advanced → Blurb Content (add/remove the last line):
display: flex; align-items: center; width: max-content; /*remove for left alignment*/
Save them as Divi Presets!
Take advantage of the “Divi Presets” to save different alignments (left or center) so you can quickly select them when you need to turn a Blurb into a list item!
Forget messing around with additional CSS across your website… This way you will only have to edit the Blurb content (Title and Icon) because as soon as you choose the “Divi Preset” your previously saved styles will be applied automatically!