Divi Blurb Module Button
There are good reasons to combine a button with a blurb, especially in situations where adding a separate Button module would not be practical due to how the Divi Blurb module is styled. You can’t add a module within another module, so we can accomplish this with a simple HTML link and some CSS directly in the text area of the Blurb module. So this easy tutorial will show you how to add a link to a Divi Blurb module and style it as a button.
▶️ Please watch the video above to get all the exciting details! 👆
Add A Span Tag To The Blurb Content
The first step is to add a span tag to the Body Text area of the Divi Blurb module. So open up the Blurb module settings and go down to the “Body” text area. Make sure you go to the “Text” tab, which is next to the default “Visual” tab. The Text tab means HTML, so this tab is like a code editor area.
Now go ahead and copy the span tag below and paste it into into the Blurb Body text area.
<span><a href= "#" class="pa-blurb-button">Click Here</a></span>It should now look like this:
Be sure to watch the video to see how this all works in a live demonstration. It is very easy to do, and you can repeat this step multiple times for any number of Blurb modules.
This span tag contains three things:
- Button URL
- Custom CSS Class
- Button Text
Button URL
The first part of the span tag is the “a href” which is the anchor link. This is the URL link for the button. The placeholder “#” is used, but you neeed to repalce that with your own link inside the “” quote symbols.
Custom CSS Class
The second part of the span tag is a custom CSS class. We added this class called “pa-blurb-button” in order to target the link and style it to look like a regular button.
Button Text
The third part of the span tag is the text for the button. We have added a placehold of “Click Here” but obviously you would want to change that. Just carefully change the text between the “” quote symbols.
Style The Blurb Button With CSS
Now you have added the links to your Blurb, but most likely you want these too look like buttons. We can do this easily with some CSS. Since we have already added the custom CSS class, we just need to target that in the code and add our values.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*style the Divi Blurb link as a button*/
a.pa-blurb-button {
color: #ffffff;
background: #0071fc;
border: 2px solid #0070fc;
padding: .7em 1.3em;
margin-top: 20px;
border-radius: 50px;
text-transform: capitalize;
display: inline-block;
transition: all 0.3s ease-in-out;
}
/*style the Divi Blurb link text as a button on hover*/
a.pa-blurb-button:hover {
background: transparent;
color: #0070fc;
border: 2px solid #0070fc;
cursor: pointer;
transition: all 0.3s ease-in-out;
}This obviously can be fully customized to your own values to match your website style, but this gives you an example to use as a base.
Keep in mind that if you want to use a different button style on different blurb modules, then you would need to change the CSS both in the span tag and in the CSS to match.
another great and useful tutorial
I’m glad you like it!