This SOP provides a step-by-step guide for using the Dual Heading module in the DiviSupreme plugin. It explains how to create visually distinct headings by customizing text color, size, and font to enhance web page design on Tent Apps.
Hey guys, I'm going to show you how to use another DiviSupreme module. Um, so the one that we're going to use today is called a Dual Heading module. And that is useful for when sometimes we want a heading, maybe a maybe like this right here, maybe we want a heading to be all the same size, everything, but we want to kind of focus on a certain part of the text. So maybe I want this every child part to be in a different color. That's where the Dual Heading comes into play. So I'm going to show you how to do that. First thing we're going to do is, of course, we're already logged in to the back end of our website, so we're going to click this little plus button right here, and then I'm going to type in Dual, And there we go, there's a Supreme Dual heading. And now it adds it underneath, so I'm going to type in a place, or, and then underneath I'm going to say every child. Okay, so when I move this box you can see that it's right there. You can see between a place 4, there's not a space before every child, so that's why we need to go in here and add a space, and there you go. So it's not automatically going to add that space for you. So technically if you want to have one word that's two different colors, like 4, , 4, let's try this again, maybe we want it to be a place for ever, and we want the second half of the word to be that dark green. So we can do that, uhm, but let's change it back. There we go. Now, we have that text the way we want it, uhm, we're going to hit the check button, and we're going to save it, because you know we like to hit that save button a lot. And then, let's go back in, and we want to style it so it looks like this, because I want it to look like the rest of my headings, I just want it to have a little callout text, I don't want it to look like it doesn't belong on my site. So I can go in, the font is already correct, uhm, I'm going to go to the design, and the main text is the same so that's, I'm editing all the text. There's the before text, that's this, whoops, sorry, let's try that again. Okay, so, before text is a place for, there's the middle text, and middle text, that's every child, and we can do after text as well, at our church. And, as you can see, you need to add in that space, there you go. So now, now we have a before text, a middle text, and an after text, and we get one middle text. You can go to design, there's before, middle, after, but there's also the main text. So, when I go in for sizing, I'm typically going to edit the main text, because I want it to all be the same size. Uhm, it doesn't necessarily have to be for you, uhm, but, In this instance, I think I want it to be all the same size. So, I'm going to increase it until I think it's about the same size as the one above it. Yep, that looks good. Uhm, then we're going to scroll down, and now we want to go for the middle text. I want this every child to stick out. So, I want to change the color of the text. Make sure you're paying attention, because I have accidentally changed this background color before, and that's, that's not what we want to change. If you want to highlight it, you can. But, I want to change the text color itself. So, I'm going to scroll down. There's my color. I'm going to go to my global colors, just because these are all of my brand colors. I want to make sure it fits with the rest of my site. But, if you want to go, if you want to choose a different color, that's not your brand color, you can hit these three dots. You can choose a color right here. Uhm, you can always, uhm, like, actually click on the little eyedropper and paste in a hex code. You have options. Uhm, but I'm going to go to global. I want this kind of my accent color for my site. So there's that. I also want this to be centered. Let's go back to the main text and see if we can center it. There we go. That's what I like to see. So now we can, Squish that so we can see what's happening. Um, and let's say maybe you want this to be a different font. Maybe you have kind of a call-out font, um, for your church. And sometimes churches have, like, a script font that they like to use every once in a while. Just to draw attention to things. So you're gonna go to the middle text, and here's the middle font right here. And I'm just gonna type in the script. There you go. That looks fun. There you go. So there's a fun little script. If you want to make it larger, you can. So the other text is 40, so let's change this to 45. There you go. Now it's kind of zoomed in. So I'm gonna make it bigger. I want it to be noticeable here. Let's try 50. There you go. So that's larger. We're drawing attention to it. I've decided I don't like that font. It doesn't fit with the rest of the vibe. There we go. That looks a little bit more childlike. We want it to be childlike on the kids page. Uh, but I'm going to change this font. I want it to be the same size. And then we hit the check button and it looks all pretty. Now I want to kind of rearrange this so just to make my life easier, I'm going to duplicate this field and I'm going to drag it and I'm going to drop it right below. And now I can play around with the spacing and and just delete this. There we go. And I can delete this. Let me go in and change the spacing. There we go. Now that's done. It's looking about the same as how I had it set up before. It's just we have some fancy text in there. Okay. Since that didn't move, that's telling me that the spacing is on this text module. And if I hover over it, you can kind of see that gray box. That's telling me that there's a margin or padding under there. So let me go back to spacing and I'm going I'm to change this to zero. There you go. That's a little close. There you go. Five pixels with the check mark. And now we have a dual heading added to our page. We can save it and we're all good to go. But if you have any questions, please don't hesitate to reach out. But that's how you do a dual heading.