This SOP provides a detailed guide on adding and configuring the FAQ module using Divi Supreme on a church website. It covers section creation, styling, content input, and design settings to enhance SEO and user engagement.
Hey guys, I am going to teach you how to use another Divi Supreme module. Uhm, for this video, we're going to go over the FAQ module, so FAQs, or Frequently Asked Questions, are a good thing to have on your church website, because it helps with SEO, which is Search Engine Optimization, uhm, and the more things you can do to optimize your website, uhm, for search engines, the, uhm, higher it'll show on the list. So, we all want that, we all want our church to show first when somebody Googles churches in my area. Uhm, so, that being said, I'll teach you how to add a FAQ module. Uhm, I don't have a spot for it right now, so I'm going to add a new section and you can just watch me do that. Uhm, but I'm going to click this blue plus button, I'm going to add in a regular module, or not a regular module, a regular Another section, I'm going to add in a row. And then let me style this section a little bit. I'm just going to do one of my brand colors. So for this instance, I'll do this green. And then I'm going to add in some text over here to the left. Actually, I'm like, for this instance, I'll just add an image. And I'm just going to grab some random image from my library. You know, we always have some generic images in here. So, let's do this guy. This guy looks good. Okay, we can upload an image. And now we can go over here, we can add in some text. So, we kind of have a title for this area, and I want this text to be white. So, I'm going to title this FAQs. And a heading there. Heading three will probably be good. Whoops, not heading three. There we go. Okay. So, now I have just the basic things set up. If you don't know how to do any of the things that I just did, we have other videos on that. I recommend you watching those first before you head into the Divi Supreme module. So, now we can add in a FAQ module. And there you go. You just type in FAQ and you'll see the Supreme FAQ pop up. Now we can add in our FAQ questions. So, we'll hit this plus button. We're going to add in a few just so you see what they look like. Uhm, let's make this, That's one of our top questions that everybody has, which I'm not going to do this one in title case. Okay, that's good. And then I'm just going to put, There we go. So, if I move this to the side and I hit this plus button, you'll see that that's the content. And if I, I'll add in a few more lines, just so you can see how much it can expand or compress. I hit that. Minimize button, and it gets smaller. So, we'll hit the check mark. And then, just to make my life easier, I'm gonna duplicate that, um, little FAQ. And then I can go in and I can add in a new question, like. Which it looks like I forgot a question mark on the first one, so I'll hit that green check mark again. I can go back, and then I can add in my question mark. Oops, it's in the wrong spot. There we go, and now I'll add in one more, just for good measure. Uhm, okay, here's another pretty popular question. What is your worship style? And, you, you fill in your FAQs as you see fit. You, you know what FAQs people have. You're in control of that content. I'm just showing you how to style this particular module. So, I'll hit that check button. Now, one thing I want you to notice is when I hit the settings button, at the top it says Supreme FAQ Settings. Now, if I make a change when this is at the top. Like, if I go to design and I make a change in any of these fields, it is going to change across all three of these. Now, if you go to content and then you hit the little settings cog on one of them, you can see that that title at the top changed. And if I expand it, you can see that it's the child settings. So, this, this little box is the child of the FAQ module itself. Now, if I go to the design tab on the child settings and I make a change in any of these, to change that FAQ box that I am currently in the settings of. So, keep that in mind when you're making these changes because if you're going to make a change that you want to go across the entire board, you want to do it in the this area because I don't want to have to go to each and every FAQ that I have and change the font to 32 when it was at . And so, just keep that in mind. Make sure you're in the correct area. And as always, we want to save multiple times. And that way you can see what settings, uhm, you've maybe accidentally done to one FAQ rather than all of them. Alright. So, that being said, we can scroll down and we can look at a few different things. So, right now, if I hit this plus button, it can expand all of them. That is what we call a toggle. So, toggle means all of them can be expanded at the same time, or they can all be compressed at the same time. Now, if I turn this on, that says make an accordion, that makes it so that if I hit the plus button on this, that one expands, but if I hit the plus button on this guy, then only one will expand at a time. Uhm, that accordion is helpful just so, uhm, I'll turn this off so you can see, that accordion is helpful because it keeps it pretty much the same size, of course, depending on your, how long your answer is, but you can see when I expand all of them, it expands my entire section. So, that's just one little thing that you can do if you want people to read every single one of your FAQs at once, that's fine, keep this off. Uhm, I'm gonna keep it on just for my purposes. Uhm, there's also the gap, which is the spacing in between each of these, so we can increase it. And that gets bigger, we can change it to zero, and they're gonna be on top of each other. But, I'll leave it at ten, just because that looks good in my opinion. Uhm, open the first item, it's just saying, expand that box automatically. Uh, we don't need any of this, use image, we can add in an image if we want, I don't typically do that. Uhm, and then there's animate the icons, you can see they kind of like rotate, which, that's up to you. If you want to do that, now we can go down to the toggle icon, and that, and here we can change what these show as, so it can be the plus button, it can be the minus button, or we can change it to something else. Uhm, another thing you can change is where you want they are. So I like them to be on the right, just so they're not kind of hidden in the title. So I like them over here, so I'm going to put them on the right. And then the open icon, and I always forget which is which, so I'm just going to, Okay, so the open icon is the icon that shows when it is open. So what I want is, I want an arrow. So I can do this guy, and then there's the close icon. Which, if I scroll up, I can make it that. So, there you go. And so, these little icons don't really matter all that much when you have it in the accordion mode. Let's go back so I can show you. So, if I turn that off, then you can kind of control, but if the accordion's on, it doesn't really do much. Ah, so, there you go. You can change the icons. You can change all that. Um, I'm not gonna change the backgrounds, but this would be the background of the entire box itself. Um, if I wanted to change the background of each of these, then I'll get to that in a minute. So, there let's go to Design. Now we have all of these fun things. So, there's the OpenState, the ClosedState, OpenState, ClosedState, blah, blah, blah, blah, blah. Now, I'm gonna go to the OpenState title. Then, I'm gonna change the text size to . There you go. And you can see, I'm in the OpenState title, but it changed on all of them. I can tell it to have a different text size. I can text size in the ClosedState versus the OpenState. But I would have to manually go in and change that. If I don't touch this, it's going to stay the same. And I want it to stay the same, just for this instance. But it's also going as you don't touch that ClosedState, then it'll be the same no matter what. Now, let's say I did change it, and I was like, oh no, I don't like this. So let's make this one 20. Okay, so now we have our OpenState, it is manually closed. It's massive, and then the ClosedState is like this. Let's say I didn't like it like that. And you can see that when I changed that text, this little undo arrow showed up for me. And you might not see it immediately, but if you hover over the title of each of these settings, which this one I haven't changed yet, anything, so it's not there, but if you hover over it, it's there. So I'm going to click the undo button, and that just resets it to its default settings. So it's not the end of the world if you do touch it. You can undo it. But that 30, little big, okay, we made 25. That looks fine. Um, so same idea. You have, like, the toggles. Um, you can change background colors. Uh, let's make, oops, not what I meant to do. This is the background color of the entire section. I said I was going to get to that later, but I do need not like that, so I'm going to undo it. Um, so the toggle is the box itself. Then change a whole lot of settings. I'm not going to, but you can. Um, then if we had an image in there. We can, change those settings, and then there's the icon. I am going to change the icon background color. You can see it made a box around it. That's okay. And then the icon color. I'm going to change it to white. Then we're going to go in here and we're going to change this to 50 and see what that looks like. There we go. Okay, you could see that when I was, um, changing the background color, it looked a little off-centered. Um, so you can just go in and play around with the padding. That's what I was just going doing. I just kind of increased, decreased, just to make it look kind of even. So there you go. Now that looks good. Um, another thing that we can do is if we hit these three dots, let's try that. Let's do Okay, copy icon open state styles. Let's see if we can paste it over. Let's go to the closed state. And we paste. Nope, that didn't work. Worth a shot. Okay, so now we can just go in and I want it to be, let's say I want it to be the funky green color. And then we can make it white. Uhm, I just kind of remember what these were. Change this to zero. And then I can go right here and change this to 50. So there you go. We can make those little changes. Uhm, that's about it. Uh, the content would be this text font, er, sizing. So I can increase it, I can change the colors. If you know how to edit text, you know how to do all of these changes. Let me undo this. Um, last little thing I want to change is, those, that text is a little close together. So I can go to the content and I can increase the margin a little bit. That way the title and the information is not on top of each other. I think 15 is normally good. Good spacing. So, there we go. Now, I'm going to hit that check button and I'm going to save. I probably should have saved it a few more times. I don't want to lose any of my work. Um, but now I want to make sure that this looks good on my mobile view. And so, right here, you can see all these different icons. Um, if you don't see it, it's probably because this is not expanded. It's these little three dots in the purple circle. So, if I click on that and expand it, then I can see the different devices. So, I'm going to go to the mobile view. If I click on that, it's going to squish this. And I can scroll down. Keep going. Okay, so that looks pretty good. On a phone. I think I want that title to be a little bit smaller. So, I'll go to the settings. I'm going to move this out of my way. So, I'm going to go to design. And, I'm going go in here. And, now I can hit this device icon. And, I want the title text, let's say I want it to be 22 on a phone. There you go. That's a little bit smaller. I can also do the same thing for the content. If I scroll down, hit the device. I can make it 16 on devices, and there we go. Now I hit the check mark. Uhm, usually if it looks good on a computer, it'll probably be the right size on a tablet, so that's, this is fine with me. Uhm, last little thing I'll show you, what I was talking about before, if I go to the settings, and I go to design, I can start changing specific things, like if I go to the open state title, and make it blue, it only changes this one. So you can see that this one was, ok, let's change the cross the board. So this is open or closed, it's blue. Let's say I want the close date title to be yellow. There you go. So now for only this one, that title is blue when it's open and yellow when it's closed. Ok. Now, let's say I made a bunch of changes, and, and I'm going, oh my goodness, I did not mean to do that. I need these changes to be across all three of these. To undo these changes, it's super easy, and so don't, don't panic, just make sure you copy everything over before you go changing it. Or make note of it in your notebook, whatever you want to do. Um, but if you go to filter, and then go to modify styles on that particular area where you are, you can see these are the two changes that I made from the original settings. And if I click undo, it'll undo it. And now we're right back where we started. So we hit the check mark, hit the check mark again, and then save. So that is your overview of an FAQ module. If you have any questions, or if you want us to add one of these to your website, just figure out what your FAQ questions and answers would be, reach out to us, and we will be happy to help. But you guys have a great day.