If you have been around our site much at all, you may have noticed we use speech bubbles on every blog post and some pages. You can literally see the one above which dynamically shows the post excerpt for each blog post. In this tutorial, I am going to show you how to create this kind of speech bubble with CSS in Divi. Have fun with this one!
▶️ Please watch the video above to get all the exciting details! 👆
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. 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!
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.
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;
}
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;
}
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;
}
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;
}
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!
A really good guide
If I would like the little flare a little longer and a little swing to the left. Is it possible to get this?
Hi Mathias!
Please change the left value in the code as per your requirement.
Hi! I solved it… I needed to make my horizontal and vertical overflows “visible”. Feel free to delete my comments, but maybe mention this in the original post in case others run into the same issue. 🙂
Hi Jenelle!
I’m glad the issue is resolved. Thank you for your feedback!
Hi, I am so happy I found this! However, I am having some issues. In visual builder mode, if I am hovering over the text, I can see that the triangle part exists, but otherwise it is not showing. I’ve tried to adjust the spacing and sizing of the text module, row, and section thinking there might be a strange overlap, but nothing seems to work. Any ideas what has gone wrong?
Hi Janelle!
The triangle part works fine in builder and live site. However, on your end, it could be a z-index or overflowing issue. Go to Module settings > Advanced > position and set the z-index to 99. Then go to Visibility tab in Advanced and change the horizontal an vertical overflow to visible. If the options won’t work in Module settings, then try it in the Column, row or even section.
If the issue still persists, could you please share the URL of the page?
Hi! I solved it… I needed to make my horizontal and vertical overflows “visible”. Feel free to delete my comment, but maybe mention this in the original post in case others run into the same issue. 🙂
Great Tutorial Dear Love From Bangladesh
Thank you!
Welcome Dear