This tutorial explains and demonstrates how to customize the blurb module with the Divi Visual Builder. This module is a great way to feature testimonials and blockquotes on your website.
Take A Test Drive
Text Version of this Divi Tutorial
Hello, this is Jimi Blevins.
Today I’ll be going over the “Blurb” module with the Divi Visual Builder.
I’ve already got the Visual Builder loaded up, so I’m going to add (+) a “Blurb” module by selecting the gray plus (+) sign and searching “Blurb.”
These “General” settings are pretty straightforward.
You start out with your “Title,” and just to make it clickable I’m going to go and put in a hashtag (#) in for the “URL.”
You can use an “Icon” to kind of dress up your blurb. (Which I like to do, I think it makes it look a lot cooler.)
You can change the “Color” of the icon. (I’m gonna go with something kind of light because you can also put a circle around it.)
One last thing to dress it up, you can put a border around it as well with the “Show Circle Border” selection.
So you’ve got lots of “General” design elements to play with to make that icon really pop and draw attention.
You can place it on the “Top,” or to the “Left” of the blurb, (kind of more like a bullet), with the “Image/Icon Placement” selection.
“Image/Icon Animation” allows you to change what animation is going to show when this blurb loads.
You can change your “Text Orientation.” (I believe this is for the “Header.”)
Then, of course, we can add some text in the “Content” section.
So, that goes over all the “General” settings.
Next, we want to get into the “Design” settings.
We can set an “Image Max Width” if we’ve added an image through the “Add Media” function on the the text editor over in the “General” settings tab.
We can also change the “Icon Font Size,” which I think is a really great option.
You can change the “Header Font,” and of course, the”Header Font Size” as well.
Again, a great thing about the Visual Builder is, I’m seeing all these changes in real-time.
(Most of the other options are all really straightforward.)
You can change the “Header Text Color.”
“Header Letter spacing, Header Line-Height.”
You can also change the “Body Font” and the “Body Font Color.”
You can add a “Background Color.” (This is something to keep in mind when you’re doing blurbs, if you’re going to have a background color or a background image, it’s going to fill the entire column. Even though your text might not fill the entire column, your background is going to.)
Let me show you what I’m talking about. I’m just going to use a light gray, and you can see below, if I were to use an image it would also cover that entire area.
I can also “Use Border” around it, which I want to do because I want to show you one last thing with this.
You can see that the icon is brushing up against the border, and there’s really not much space between the text and the border.
So, in this module, in the “Design” settings, you can do a “Custom Margin,” and “Custom Padding.” (Remember when you’re doing any style sheet work, margin is outside of your element, padding is inside!)
So, if I want to add a little space on the inside of my element, (I’ll say like 20 pixels) you can see that spaces it out really well.
If you’re going for more of a responsive design, you can also do like a 1EM, or a setting like that which will adjust to whatever the line height of your style sheet is for your mobile devices and your tablets as well.
So, that pretty much covers everything about the “Blurb” module for the Divi Visual Builder.
Once again, I’m Jimi Blevins and thank you so much for watching.