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

How To Create Speech Bubbles In Divi

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

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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;
}
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!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

  1. Noyon Biswas

    Great Tutorial Dear Love From Bangladesh

    Reply
  2. Janelle

    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?

    Reply
    • Janelle

      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. 🙂

      Reply
    • Hemant Gaba

      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?

      Reply
  3. Janelle

    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. 🙂

    Reply
    • Hemant Gaba

      Hi Jenelle!

      I’m glad the issue is resolved. Thank you for your feedback!

      Reply
  4. Mathias

    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?

    Reply
    • Hemant Gaba

      Hi Mathias!

      Please change the left value in the code as per your requirement.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart