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.
Hey guys, I am going to do another video on one of the Dibby Supreme features, and as always, if you are on your site and you don't see that you have Dibby Supreme, just let us know. It doesn't cost anything extra for you, we just need to go through the process of installing it on your website. Uhm, so today, I think I'm going to do a, the timeline module. Some churches want this just because it shows their church history and everything, and it shows a little bit about who you are and, you know, what happened in order for you to get where you are now. Uhm, so I'm just going to hit this plus button. I've already logged in to the back end of my site. Uhm, if you don't know how to do that, we have some other more basic videos that I think you should start with first. So, I've logged in. I've enabled my website. I've the visual builder. I've added a new section and a new row. And now I'm going to go to create a module. And I'm going to type in timeline. As you can see, the, uhm, Diddy Supreme modules are this dark purple. The regular modules are this grey. So again, you don't see that dark purple. It's not installed on your site yet. Just let us know. So I'll click this button and I'm going to pull this over to the side. And I'm going to create a timeline item. So you can see that it popped up right here, right in the middle. And now it is very basic, just has a great background, has an image, title, description, et cetera. So as you can see right here, you can toggle it off. So there is no background image. Let's say, Let's do the year. Maybe 1913, that feels right. We're going to keep this as content. And we're going to go down here and say, Our Church, Our, Goodness gracious. Now, it'll probably end up being something a little bit better than that if you were putting this on your site, but there you go. And, you can add a bunch of text and everything. And, maybe we want to do, Where we started. That seems sufficient. And, the content is entirely up to you. Now, we toggled this off, but let's say I wanted an image there. Media Library, and that's a lot. And I can pull up one of these images, which I'm just gonna go to an instant image for right now, and I'm just gonna type in church. Now, if you were doing this. You would upload a picture of your own church, but for right now, I'm just going to use a stock image. Okay, that has been uploaded. I'm gonna have to exit out of this and reopen it so I can see it. All So, you can see that that image is right there. And it's pretty large. So, we can go to settings, design, and like, it is like this with a lot of the DiviSupreme modules. If you can add multiple boxes, which I'm going to duplicate this just for the sake of showing you what I mean. If you have multiple boxes like this, I recommend that and you do as much styling as you possibly can in this design tab. Now let's say I hit the settings button. Now I am only on the settings of this very top box. So, you saw I click the settings on. The top box. So, right now I can only change the settings on this. So, let's say I change the background color and I want that background color to be bright blue across every single one of them. If I change it right here, then I am going to have to manually go through and change it on all of them. Oh or let me undo this particular setting. Let's say I changed the title text size and I want it to be 50, which that's pretty large. But if I want it to be that size on every single one about. If I only change it in this area, then I'm going to have to go through and change it and it's going to be a pain every single time I add something to my timeline and I don't recommend it. So, we're going to delete this and you can see it just goes back. We're going to hit this back button right here. We want to go to design on all of them and if I go to the title text, you'll see, which I'm going to go for 30 for this instance, and you'll see that it changes on all of them. So, I highly, highly recommend you change it for all rather than having to manually go through and update everything because trust me, it is a pain. Now, we're going to play around with a few of these. So now we can go to the content. And let's make this text a little bit bigger. I think about 18 is a pretty safe size for most items like this. Uhm, is a little bit too big. I don't recommend going smaller than 16. But, to each their own. Uhm, Image and Icon. That's what I was talking about originally. This image is huge. Right now it's set to 100%. Let's change it to, I think about 60% and see how that looks. Okay, there we go. That's a little bit better. Let's say maybe I wanted it to be centered. You could do that. Uhm, you could also, maybe you have a bunch of rounded corners on your site, like every other image has rounded corners, then I would recommend rounding these as well. So, there you go. Uhm, but I think I like it left aligned. I like that a little bit better. Now, there are a few other things that I do want to show you, but I'm going to have to add some areas first. So, let's So go to this first card and, I'm going to add a button. So, let's say maybe there is a relevant page for a certain point in our timeline, like maybe in 1990 our kids ministry started. Then I would probably want a button to my kids ministry page. So, I'm just going to make this one pretty generic. And, I'm not going to actually put a link in here, but this is where you would put the link to. I am just going to put a little hashtag right here, just because that's a good placeholder. Um, there's also the opposite text, and that's text that would show opposite of these boxes. So, maybe for right here, it's start, here. Oops. Okay, so, there you go. Now, we can go back over to this area, where we're editing the styles for every single page. And we can go to design and let's play around with the buttons first. So, I'm on this page and I want to see what my other buttons look like. So, I've got that round, round button. Rounded corners, all of that. So, I want the buttons on here to look like the buttons on the rest of my site. That just makes everything seem more cohesive. Uhm, we're going to make the text 18 point, I think the border radius. This is probably 8. Yeah, that looks good. And then, let's see. Let's make our text this primary color and change the background. Maybe, just like on the other buttons, you can add a hover feature so that maybe the background turns grey when you hover over it and the text turns white. There we go. I don't like that border, so I'm gonna turn that off. And then I don't want that icon either. So, there we go, we have our button. It's not really all that visible. So, I don't really like that lack of contrast, so let's change that. Let's change background to black, and then we can just make that text color the same no matter what. There we go. There we go. That contrasts a little bit better. Uhm, so, if I had buttons on these other areas, it would change that on those two, and now I want to change the opposite text, which, I have made a lot of changes, so I'm gonna hit that check button, and I'm gonna hit save because that's just a good practice. Your internet goes out. You don't want to lose all of your hard work. So, we're gonna wait for that to save, but now we can open it back up, go to settings, design, opposite text, and then same as the other stuff, you can change all of these. Let's maybe make it all caps, and make the text so, like, uh, , maybe, because I want people to see it first, like, start here. We can make it bold. There we go. So, you see what I mean? You can play around with all of those styling. We can go to general. Now, there's a few things that you can turn on. Um, you can make them all on one side, for mobile and tablet. So, I think having them all on the right for mobile and tablet would be good. Uh, we can show a card arrow. So, you can see that popped up right here. Now, if I turn it off, you'll see it disappear. I kind of like the arrows. Um, you can also have the animation. So, you can see this kind slide down. As I'm scrolling, which, those colors are a little funky. But, if you want that, you can have the animation. Now, to show you is maybe if we I don't want this image right here, maybe I want the image in the background. And that, that's a pretty easy way to make this look more polished. So, if I go to the settings, I can turn this off and you can see that it shrank it. One thing I can do is I can trash the image and I can just do an icon. So, maybe, there might be a church icon, let's see. There you go. Okay. So, maybe I just want an icon there. And you can go in and go to the design and you can change the icon styles. You can do it right here as well. See, image icon. So, maybe the icon color should be blue. But, whatever. Uhm, but I'm going to go back to this box and then I'm going to go to background and background image. And here's the church picture. I'm going to upload that image. And there we are. Now, it's kind of hard to read our text. So, since we have black text, I want to do kind of a light overlay. So, just trust this process. Don't worry. Uhm, we're going to turn this on. Turn it white. Now, I need to make that gradient transparent. So, I'm going to hit this box, or hit this circle. There you go. Now you can start to see it a little bit better. I'm going to grab this one I'm going to make that Maybe I want this to be Uhm, but, that's one thing you can do. But maybe I want to see a little bit more of this church. So, I can go back and one thing I can do is, I'm not sure if I can change the spacing for each individual card. Let me try. Nope. It's not going to let me do that. So that's one setting that we're going to have to do on each individual one is change the spacing. Which, I might have lied to you. Yay, I did. Okay. I'm going to going to scratch it at the top. You can see it's kind of glitching out on me. But you can see that spacing is changing on every single card as well. There we go. So you can see that image. That looks a little bit better. Uhm, for the sake of contrast, I think this text should be white and that gradient should be dark. So I'm going to switch that real quick. Okay, that looks a little bit better with the contrast. So I can hit the checkmark. And there we go. Now, I want these to look like this. So a quick and easy way, if you do styling like that, we can hit these three dots, Copy Item Styles, Thank for joining us. Paste Item Styles. Here we go. And Paste Item Styles. Now, if I go over here, I can delete this. Let's say, I want my icon. There we go. And maybe, There we go. Then we can go to this tab. Add a new icon. And it can be, whatever. But there you go. That's how you do all of the styling. Maybe let's say I want to move this over to the side. Make it a little bit smaller. I'm going to drag and drop it over here. To the left. Here we go. Make that a little bit smaller. Or, let's do it like this. And then I'm going to copy text from somewhere else on this page. So, let's go up. Yeah, I like this. And this is a good way to keep all of the styling pretty consistent across your site is copying and pasting modules like this. Which, that was white text, so. I can change it to the primary color or I can change it to black. But that way, you can kind of have a blurb about this timeline and then they can scroll down. Or, if maybe I want it all in one row, I can do it like this as well. But that looks a little funky. If I were you, I would center it. There we go. So, that's a fun way to display the timeline, all of your church history. If you have any questions about this, please do not hesitate to reach out. To us, we'll be happy to help. But, that is your quick little crash course. You have a great day!