There are excellent reasons to use a blurb with a button since adding a button with the Divi Blurb Module would be impractical as it is not designed in such a way. Since adding a module inside of another module is not possible, we may do this by adding a straightforward HTML link and some CSS straight to the Blurb module’s text box.
Thus, in this article, you will learn how to add a link to a Divi Blurb module and design it as a button.
Results:
Inserting and Modifying Blurb:
After inserting the Blurb Module, go to Blurb Settings > Design > Title Text and do the following modifications:
- Title Font: Montserrat
- Title Font Weight: Bold
- Title Text Color: #000000
- Title Text Size: 24px
- Title Letter Spacing: 2px
Go to Blurb Settings > Design > Body Text and make the following modifications:
- Body Font: Montserrat
- Body Font Weight: Regular
- Body Text Color: rgba(0,0,0,0.65)
- Body Text Size: 15px
Inserting the Button:
Go to Blurb Settings > Content > Body > Text and add the following code of button there:
<span><a href="#" class="hey-button">Click Here</a></span>
Button Link:
The anchor link, or “a href”, appears first in the span tag. This is the button’s URL link. You must replace the used placeholder “#” with your URL inside the quotation symbols “.”
Button CSS Class:
A custom CSS class makes up the second portion of the span tag. To target the link and design it to resemble a standard button, we added the class “hey-button.”
Button Text:
The button’s text appears in the third section of the span tag. We have included a placeholder that says “Click Here,” but you should certainly modify it. Simply alter the wording between the “.” quotation marks.
Pasting the CSS Code:
Go to Page Settings > Advanced > Custom CSS and add the following Code snippet there:
/* Style the Divi Blurb link as a button */
a.hey-button {
/* Button Text */
color: #ffffff;
font-size: 17px;
/* Button Background and Border */
background: red;
border: 2px solid red;
/* Button Padding and Spacing */
padding: .6em 1.5em;
margin-top: 20px;
/* Button Shape and Text Transformation */
border-radius: 50px;
text-transform: capitalize;
/* Button Display and Transition */
display: inline-block;
transition: all 0.3s ease-in-out;
}
/* Style the Divi Blurb link text as a button on hover */
a.hey-button:hover {
/* Button Background and Text Color on Hover */
background: transparent;
color: red;
/* Button Border on Hover */
border: 2px solid red;
/* Cursor Style on Hover */
cursor: pointer;
/* Button Transition on Hover */
transition: all 0.3s ease-in-out;
}
Results that you were looking for:
Conclusion:
“How to Insert a Button in a Divi Blurb Module” is explained in the following words. If you know how to utilize it, the Blurb Module has a lot of flexibility and versatility. You can insert the Divi Button module anywhere, but it is not recommended in some places like in this case. So Span button can be used for simplicity.