Add a CTA Button to a Divi Blurb
The Divi blurb module is one of our most favourite modules in the Divi system but is lacking one simple feature: a CTA button.
Here we will show you how to manually create a Divi blurb with a little custom HTML and CSS in 3 easy steps.
Here is an example of a CTA button on a Divi blurb
STEP 1
Add a blurb to your page and proceed to open the Advanced tab within the settings and add a CSS name to the CSS class section.
STEP 2
Open the content tab and add some button HTML to the Body part of the blurb like below. Whilst you are there you can assign the link to the destination page by editing the href part. If you are SEO or accessibility inclined, try adding a title tag to the link too. Once done, save the blurb.
1 | <a class="et_pb_button" href="#">YOUR BUTTON TEXT</a> |
STEP 3
Now you need to add some custom CSS to the Divi > Theme Options > Custom CSS section.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /******************************/ /*** divi blurb with button ***/ /******************************/ .jucra_blurb_with_button a.et_pb_button { display: block; /*bottom: 10%;*/ width: 100%; transition: 0.5s ease; cursor:pointer; font-size: 17px; background-color: green; border:none; } .jucra_blurb_with_button:hover a.et_pb_button { background-color: red; } |
SUMMARY
You can play about with the CSS to change the colours and positioning. Have fun with it!
Post Written by Craig Edmonds
Craig co-owns JUCRA Digital and brings a rich background in hospitality and finance. Transitioning from finance, he embarked on a sabbatical to Marbella, Spain in 2000 and has since made a significant shift into web design and wordpress development. Residing in Marbella ever since, Craig thrives on the dynamic challenges of the internet, has a strong affinity for WordPress, and is an enthusiast of Cpanel.