How to Inform Customers Your Business is Closed – Website Bar (Bomb Cyclone, Emergency, Weather Bar)

thank you so much for watching the press Avenue YouTube channel my name is John and today we're gonna talk about how to add a notification bar to the top of your website using beaver builder so here we have the bar across the top here it goes from red to purple to blue this isn't normally on this site usually it looks just like this but due to the recent bomb cyclone or bomb Oh genius or weather bomb or Blizzard that we just had in Colorado yesterday this came up quite a bit how do I tell my customers that were closed for the day yesterday was fairly easy since the entire city was closed but to have this bar set up in advance before you do have a bomb cyclone or any kind of weather event or emergency having this advant in advance is very helpful so we'll walk you through how to build it turn it on and turn it off easily stay tuned alright so let's get started here we are on our website we're already logged in you can see that we have beaver builder enabled by the green dot here but we won't be using beaver builder directly we'll be starting it on the back end of the site with the theme ur so you can go to new and then you can go to theme ur layout additionally you can go to the back end at WordPress go to beaver builder and go to theme ur layouts as well just like a lot of things on the internet there's five ways to do the same thing I'm going to go ahead and click add new now we're gonna at the top we're going to say bad wet let's see closed you can name this whatever you like inclement weather closed for weather catastrophe etc emergency you can have several of them but you would name it up here just so you could easily pull it up without having to mess around with it in the future next under type it says theme or layout that's just what we want if you want to change it to a template etc you probably would have started in the rows or columns and then lastly under layouts we actually want this to be a part so it's gonna be in the header but it's not a header itself and then the rest of these don't make sense we'll come down to parts so we're just making a part of the site that's the best way to put it and then go ahead and click Add theme or layout next it brings us to additional options position is what we want we'll go to position and we'll say before header it's typically that headers right at the top let me come to the front end of the site just to show you an example so we have the wordpress bar at the top the header is this white bar at the top here what we're saying is under position that we want it to be before the header and then you can order them if you have multiple bars you can put them in order and then the location we're gonna do the entire site so this is a notice to all customers no matter where they land they come from Facebook to a blog if they have your contact page saved they search Google and they click a link other than your home page this will show across the top no matter what which is exactly what we want next under category I always categorize these you can say bar emergency different things that you may or may not remember so you can pull these up later and remember what they are originally for so I'll just name it top bar cuz that's what it is now I'll go to launch beaver builder and now you see here gives me this huge sweeping grey area above my header which is down below here to add this bar so I'm gonna go ahead and do two columns and drag it in if you click the wrench and it's the row settings I'm gonna make it full width which makes it edge to edge and I'll go down to content with fixed so lines up with this particular site if you have a full width website then I would change it to full width under this drop-down next we're going to come down to colors text color we'll go with white I don't have any saved let's see white so that's all F's link color I will also do white Mabel do a little gray link hover I'm making a little grayer we're not going to do a heading under background I'll do a gradient I usually leave it on linear I usually change it to 45 degrees and I'll pick a color so let's do will do this blue I'll bring this down a bit and then we'll do it darker blue kind of catch people's attention all right and then border top shape I usually just leave these plain if your kind of header is blue this might not show up so I just keep a high contrast between the top bar and the next bar down so this is blue and this is white if people are used to just seeing the white this will call attention to it if you want to call even more attention to it possibly change it red so we'll do read and we'll turn this up a bit actually I'll do it and set it just right I'll just do red and blue I'll click Save next I'll go to modules and we're gonna pull in a text editing module and put it in here and we'll say our offices are closed due to ink and then I'll go ahead and Center this our offices are closed due to inclement weather just yesterday in Colorado we had the bomb cyclone or they also called it the bomb Oh Genesis the weather bomb etc and lots of offices were closed the whole city was closed there are roads closed and everything so what's nice is you think about this in advance so if you ever think you're gonna close our offices due to weather because you have blizzards etc you would make this you can make this in the summer save it pull it up enable it and you're done you don't have to edit the website you don't have to go through a tutorial video like this you can enable it and just be done with it and then if you have plans for catastrophes special phone numbers etc you can get all of those in advance set them up and then this is just one and done all right so I'm gonna make this a little bigger I'll go with a 20 and I'll hit save and then on this side we're going to put a button so people can contact us in case of emergency and we're going to stylize this I'll make it go to our main site select an icon let's see I'll just do an arrow and then I'll style this up I'm gonna make it full width for the container so you can't quite see the container but it'll fill it up right there and then let's see we'll go to Tech's color white hover I mean I'm white just all F 6 f F F F F F F background color I'm just going to make it transparent and border I'm gonna do it white and then I click one and instead of hitting one in the top one and the right one in the bottom I can click this chain here and it links it across so let me get a little thicker we'll go with two and then maybe we'll put some shadow on it like dark blue oops fade this down a bit maybe I won't do any shadow that's not bad there we go that's a little better black here all right so we've styled it up I'll go ahead and hit save now this bar is still pretty big and you can leave it that way if you want to Center these two together you would hover over one of the columns and click the column settings which is this little window I like to call it go to column settings and then we'll go to equal Heights and we'll say yes and then vertical alignment we'll go to Center and it brings that down a bit next we're gonna want to shrink this down it's a little too big for me so I'll hover over the main row and go to the row settings go to advanced and then the top padding I'll bring down to zero bring this down to zero kind of tightens it on up a bit I'll go ahead and go to save and then let's see off maybe change this zero maybe ten would be the best all right it's got to be perfect right so now that we all we have our offices are closed due to inclement weather and contact us I'll go and hit it done and publish and I want to go back to the home page you see at the top we have that bar what I love about beaver builder is everything can be shrunk down as mobile-friendly right out of the gate so if we take this down a minute I can see the video edit and let's drink this down take this way down so this is what it looked like on your phone it's very clear it's different from what people are seeing so we see this here our office is closed due to inclement weather will reopen tomorrow put a date etc phone number whatever you want and then when they click the button it brings them to the contact page or wherever you told them to go so I just brought them to our press Avenue contact page and then to turn this off if we go back to the back end and I go to beaver builder and this has themer layouts so right now here's our clothes for weather bar I have it in the category top bar so I can have a top bar again for emergencies closings etc this is the type it's on the entire site etc I would go to edit and then under location I'd simply click choose update so choose just means it's not it's not going to show up I'll go back to the front and now it's gone so in future emergencies all I would need to do or all your web designer would need to do is log into the site go to press Avenue just to walk it back beaver builder theme er layouts closed for weather I click that location the entire site update and you can run out the door so I go back and there it is so if you have any questions about how to use beaver builder how to use this bar properly or set it up please let us know in the comments below if this video was helpful in any way go ahead and give it a thumbs up additionally click that red subscribe button in the lower right hand corner of this video to subscribe to more videos just like this one thanks for watching Q so much for watching the press Avenue YouTube channel right below me if you click the square you can click subscribe and a bell will pop up it'll notify you have new WordPress tutorials adjust like this one right next to it a circle will bring you to our website and lastly over here on the right is a playlist of our most recent uploads and the most popular Press Avenue WordPress tutorials.