Using the Divi Typing Effect Module

Using the Divi Typing Effect Module

Summary

This SOP provides a detailed guide on how to utilize the Divi typing effect module for web pages, particularly for children's content. It walks users through setting up the typing effect, customizing text appearance, and ensuring the effect is engaging and visually appealing.

Overview

  1. Log in to your Divi site and navigate to the desired page.
  2. Add a new section and row by clicking the plus button.
  3. Select the 'Typing Effect' module to insert it into your layout.
  4. Customize the text by entering before text and after text as desired.
  5. Adjust the typing effect options: set the loop, typing speed, and whether to align text on its own line.
  6. Modify the text size, color, and shadow options to ensure it is readable and visually appealing, especially on different devices (phone, tablet, desktop).
  7. Add any desired background images or colors for the section.
  8. Review and finalize styling by adjusting spacing between words and other stylistic elements.
  9. Hit the green checkmark to save your changes and review the effects on the live page.

Original Transcript

Hey guys, I'm going to do a very quick overview of the Divi typing effect module. So for this instance I'm going to put it on a children's page and it's going to be kind of a page. Break where I want to add a little bit of movement. So I'm going to hit the plus button, I've already logged in, I've already added my section and my, uh, row. I'm going to put type There we go. This is the one that we want. So you can see the text shows up down here. Uhm, I'm going to make it white for right now. Okay. There we go. So we can go to text. There's before text. So let's make it God. And then we're going to put us. So that's our beginning and our end. Uhm, now, this is the typing effect. You can see it kind of moving. so It says design with Divi sites, with, or design Divi sites with and then there's a line that goes Divi and then it goes Supreme. So, that's what we want. Uhm, I'm going to put Love. I'm going to put a line, and then I'm going to put, here's. And seeds. So maybe this is kind of your, uh, children's slogan, or mission, or whatever. So, I have the spaces in here, as you can see right there. So, if I delete this spacing around Loves, you'll see it kind of looks super close together. So I want that spacing in there, before and after each word. Yep, there we go. That's perfect. What that looks like, and now we can kind of play around with the styling. Do we want it to loop? Maybe we turn that off and it ends on, which, no, that space is there. Uuuuhm. See? It just kind of went away. But, we want it to loop. And then, we can change the typing speed, so maybe I want this to be 200. That kind of slows it down, so that you, they can type read each word. Um, you can also change it so that each one is on its own line. For this instance, I don't know if I want that. You can add a link like all the others. There's the cursor character. You can change that. And you can shuffle it if you want to. Now, I think I'm just going to make all of this text the same. So, I want it to be centered. And I want it to be bigger. There we go. Maybe, maybe a good 85. And don't forget that you can change the sizing on different devices. So, phone, tablet, desktop can all have different text sizes. I recommend you do that. I have another video on that. And we're going to also add the text shadow. There we go. And that's all I really want to do. But maybe, just for this instance, I want to show you that you can make the before text, you can have it as a background color. Uhm, I don't really want that, so I'm going to undo it. Uhm, you can also have the text color different itself. So, there you go. Uhm, then maybe I want the after text to be a fun color. So, we can make it blue. We can make it a red, white, and blue field if that's what we want. If you can't read it all that well, I would recommend doing all white or all dark, but that is entirely up to you. So, that's a little bit easier to read. And And so. That's about it. You can adjust the styling specific to each word. You can change spacing, all of that. I'm going to hit the check mark and I'm just going to go to the settings right here. Actually, I lied. I'm going to go to the style. I'm going to change the background first. Since this is a kid's page, I'll use a kid's image. I'm going to go to design, spacing, and I'm going to have those linked right now. There we go. So there's a cute little, kind of, page break section that you can put your mission or revision or any of that on there, but it's a nice little text effect that will grab people's attention. And we're going to hit the green checkmark, we're going to save it, and we're good to go.

Video Link

    • Related Articles

    • Creating a Divi Supreme Card Carousel

      Summary This SOP details the process for setting up and customizing a Divi Supreme Card Carousel for your website. It guides users through adding sections, editing card content, and applying styling settings appropriately. Overview Log into your ...
    • Creating Filterable Photo Galleries in Divi

      Summary This SOP provides a step-by-step guide on how to set up filterable photo galleries using Divi. It covers creating categories for photos, assigning those categories to images, and adding the gallery module to a webpage for optimal user ...
    • Creating a Timeline Module

      Summary This SOP outlines how to install and utilize the Timeline module in Dibby Supreme for churches. It provides step-by-step instructions for adding timeline items, customizing designs, and ensuring cohesive styling throughout the website. ...
    • Creating an Image Gallery/Slider in Divi

      Summary This SOP details the process for adding and configuring an image gallery on a Tent Apps website. It covers step-by-step instructions on selecting images, resizing them for uniformity, and adjusting gallery settings to enhance user experience. ...
    • Edit webpage without Divi Visual Builder

      Context This video provides a workaround for editing Divi pages when the Visual Builder is not functioning, ensuring continued site maintenance capabilities. Video Overview ...