Code by Day | Explore By Weekend

How To Add A Button To A Divi Blurb Module Tutorial by Pee Aye Creative

How To Add A Button To A Divi Blurb Module

This tutorial will show you how to add a link to a Divi Blurb module and style it as an attractive and functional button.

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.

adding a button to a Divi Blurb module in HTML tab

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:

adding a button link to a Divi Blurb module with a span tag

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. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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.

12
Last updated May 4, 2021 @ 10:48 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Adham Elias Botrous
Adham Elias Botrous
4 days ago

Great,
Is there anyway to apply a preset on that button (by adding a specific class or id)? 
The Situation: I already have few presets for buttons. Can I apply one of them on that button? So if the preset changed then also the button will be change.

Thanks

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,900 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart