By default, Divi's Blurb module lacks an option to include a button. In many cases, you may want to place a button after the blurb description without adding a separate button module.
Step-by-Step Guide: Adding a Button to the Blurb Module
Create a Blurb Modul.
Go to the Content Tab -> Body -> Text tab and insert the following code:
<span><a href="#" class="et_pb_button et-blurb-button">Click Here</a></span>
Customize the Button:
Modify the button's URL by replacing the "#" symbol in the code with your desired link.
Note that the "et_pb_button" class provides the default Divi button style, while the "et-blurb-button" class allows for custom design specific to this button.
Change the "Click Here" text within the HTML to set your preferred button label.
Style Your Blurb Button with Custom CSS:
For further customization, apply custom CSS to style your Blurb button, you can add the code below in Divi > Theme Options > Custom CSS:
/* Blurb Button Style CSS */
.et_pb_button.et-blurb-button {
/* Define your button styles here */
background-color: #3498db; /* Change the background color */
color: #fff; /* Change the text color */
padding: 10px 20px; /* Adjust padding for spacing */
border-radius: 5px; /* Add rounded corners */
text-decoration: none; /* Remove underline from links */
transition: background-color 0.3s, color 0.3s; /* Smooth transition on hover */
}
/* Blurb Button Hover effect */
.et_pb_button.et-blurb-button:hover {
background-color: #ff5733; /* Change background color on hover */
color: #fff; /* Change text color on hover */
}
Feel free to modify the CSS and button text to align with your design preferences and website needs.
The end result can be seen in the screenshot below:
