Code by Day | Explore By Weekend

How To Create Speech Bubbles In Divi Tutorial by Pee Aye Creative

How To Create Speech Bubbles In Divi

This tutorial will show you how to create fun and creative direction speech bubbles made with CSS in Divi.

Using CSS To Make Pointy Speech Bubbles With Divi Text Modules

This tutorial is quite simple, and involves very few settings in Divi and just snippet of CSS. We actually include four different snippets, one for the point on the top, point on the right, point on the bottom, and point on the left.

We will be using a Divi Text module as the example, but this could actually be used creatively with other modules. You may need to adjust some design settings. In our demo (seen in the video), we added padding and changed the text color.

The first step is to copy the CSS class for each one and place it in your module settings. It’s actually quite simple to find which CSS class to use. Just look in the snippet and use the selector (without the preceding period). So as an example, in the first snippet below the CSS class to copy and paste into the module would be “pa-speech-bubble-top” and that goes into the Text module in the Advanced tab in the CSS ID & Classes toggle in the CSS Class input field.

The second step is to copy the corresponding CSS snippet and add it to your site. 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.

Obviously, you can customize some parts of these snippets. Go ahead and customize the background color or border radius, or even adjust the size of the point. Have fun with this!

Speech Bubble w/ Point On Top
/*speech bubble with point on top*/

.pa-speech-bubble-top {
	position: relative;
	background: #00d263;
	border-radius: .4em;
}

.pa-speech-bubble-top:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: #00d263;
	border-top: 0;
	margin-left: -20px;
	margin-top: -20px;
} 
Divi speech bubble point on top
Speech Bubble w/ Point On The Right
/*speech bubble with point on the right*/

.pa-speech-bubble-right {
	position: relative;
	background: #00d263;
	border-radius: .4em;
}

.pa-speech-bubble-right:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #00d263;
	border-right: 0;
	margin-top: -20px;
	margin-right: -20px;
} 
Divi speech bubble point on right
Speech Bubble w/ Point On The Bottom
/*speech bubble with point on the the bottom*/

.pa-speech-bubble-bottom {
	position: relative;
	background: #00d263;
	border-radius: .4em;
}

.pa-speech-bubble-bottom:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #00d263;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
} 
Divi speech bubble point on bottom
Speech Bubble w/ Point On The Left
/*speech bubble with point on the left*/

.pa-speech-bubble-left {
	position: relative;
	background: #00d263;
	border-radius: .4em;
}

.pa-speech-bubble-left:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #00d263;
	border-left: 0;
	margin-top: -20px;
	margin-left: -20px;
} 
Divi speech bubble point on left

Be sure to watch the video to see each of these in action and to see how simple and fun it is to make these! Let me know in the comments if you enjoyed this!

5
Last updated Mar 30, 2021 @ 2:33 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
Noyon Biswas
12 days ago

Great Tutorial Dear Love From Bangladesh

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,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart