This SOP provides a step-by-step guide on how to add an emergency banner to the top of your website using the visual builder. It includes instructions for customizing the banner's appearance, setting display conditions, and ensuring proper visibility on different devices.
Hey everyone, in this video tutorial we're going to show you how to add a banner to the top of your website so that it can show up if you need in case of a sphere weather emergency or anything like that. So to get started you're going to log in, and I would just go to your home page, click on enable visual builder, whenever you're there you'll click on edit header template, and that's going to allow you to edit and put something up in the top here, right underneath your banner. Your menu that's going to show up on every page. So you'll go ahead and click the plus button, you'll click on regular here, uh, once you're there let's just go ahead and do a full width, we'll type in text, and then you'll add that text module, you're going to paste in whatever you want here, uh, now what we like to do is add some color to this, especially, uh, with severe weather, something like that. So you can come in here and select a red color, we can go find a good red, there we go, then, uh, the next thing we're going to do is let's go ahead and take down some of the spacing so it's not quite as big, so we'll go to spacing, and we'll put zero on the padding for top and bottom, and then let's go edit this text. We're gonna go to design and text. Make the text white. And let's go ahead and center it while we're here, and that is all set. Uhm, now, let's see, uh, one of the other things that you might want to do is turn it off at a certain time. So what you can do there is this whole blue section, we're going to go to settings, click on advanced, and we'll go to conditions, and we're going to say we want to add a condition. in. And that condition is going to be down here on date and time, it's underneath interaction, date and time, make sure that it is that, and not, there's another date and time here, somewhere date archive, you don't want date archive, uhm, so you want to be sure that it's date and time that they're interacting with the website. You're going to say display only if current date is before, and that's and then I'm going to say Sunday, and we'll say the time, uh, o'clock, and then we're going to enable conditions, so yeah, we're only going to display this if it's before that time. Uhm, now we'll go ahead and click on the green checkmarks, and then you can go ahead and click on exit visual builder. Now before I do, I'm going to show you one other thing here. So this is going to show up on every single page because it's in the header. Uhm, now I want to go ahead and go ahead and click on edit post content. If you wanted to add it just on the home page, we have a lot of churches that want to do that as well, you would just come down here, click the blue plus button, and you could add it down here. And now if you wanted it at the top on just the home page, you could just drag that up above, uh, the header here, or this normal header, and it would show there only on the home page. And again, that's one way that you could do it, is you can edit the post content and have it just on the home page, or you can have it up in the header. Now, one other thing I would encourage you just to check on while, while we're here, just go ahead and click on the tablet, click on the three dots, look at it on tablet, and then look at it on mobile as well. If you want to change anything as far as the sizing of the text or anything like that, unfortunately, there's, you know, like, scrolling animation or something like that, but let me show you a few other animation options you have if you want to call some attention to it. So as you're editing the text, we can click on design, scroll down to animation, and there's a few things here. So you can do, uh, sort of a bounce type of look as it first comes in, uhm, so maybe you want something like that, or you can do a slide from the center or a slide from the left or something like that, uhm, but it isn't going to, now you can say loop, and it can just keep doing that, but I would say the only one, I would only do it once, and it just slides in, just a normal animation, but it's not going to be like a scrolling effect or anything like that, uhm, which we find, especially for emergency type of banners, you really don't want a scrolling banner, you want everybody to see all the information and for it to really be pretty simple. Pretty big, that it really calls attention to people's focus, so, anyways, let us know if you have any questions on this, uh, that's how you do that, uh, be sure and click on exit visual builder and save and exit, and you're all set. One last thing here, if you'd like it to be sticky and have it stick to the top, what you can do is go to the settings of this new red bar, and go to advanced, and then you'll go to scroll effects, you'll click on sticky position, and change that to stick to top, and then go ahead and click the green checkmark. And that way, as you scroll down, it'll always be at the top. Let us know if you have any further questions, thanks!