Hi and welcome Leverage WP! Today I’m going to be working with a client site that you may have seen before the mountain space.com. And my client has requested that I replace the global header with a Hello Bar or what you might call a welcome bar with a current message that he can replace at the very top of every page of the website. Right now we don’t have a global header here on the website that contains a place where inside of Divi here that I can revise this for different pages of the website or turn on and off this global header with different messages depending on changes that I want to make.

And so inside of this Divi site at the mountain space.com, I’m going to be converting this default header in Divi over to the global header system using the Divi Theme builder system. And so let’s get started. This site is hosted at grid pain. And I do have a staging site that is present here where I can make my safe updates as well as changes in a staging environment while the live site does not get interrupted for any users. And then when this is finished, I can just bring the staging back to live with one click. And so I’ve logged into my grid pain hosting here. And, of course, under staging, I’ve done a search for part of the URL name.

And here it is staging dot the mountain space.com. So the first thing I’m going to do is take the current live site that you can see right here, and I’m gonna go ahead and copy that over to staging. Now, I’m not worried about preserving the original staging site that I have in the background. I’m done with that from previous changes that I’ve made. And so I’m checking allow the staging, push without backing up the staging site, I don’t need that site taking up space on my server. And so I’m going to push all files in the complete database.

And now I’m going to click push live to staging. Here’s the message, the staging push will now proceed. And so I can close that. And as you look here, you can follow along as I’m getting these staging notices at gridpane. And let me just pause the recording right here. Because as you may have noticed, my lighting battery just died. And so as this is finishing, I’ll pause the video here and come back when the staging push has completed. Okay, I’m back. Now you can see that in my grid pane account here, the final staging notice, it says is right here, I can close.

But you can see that the second line live push completed is highlighted here inside my grid pane account. And so now I have a staging site, which is a an exact copy of this site right here, the mountain space.com, although it’s at a different URL, and so as not to confuse myself, I’m going to go ahead and just add the word staging dot here at the mountain space.com. And I have this protected behind a force login system so that when I’m working on the staging site, I actually have to be logged in. So the public can’t find this staging, copy, Google in the search engines also can’t find the staging, copy and start to list them in the directories which will be confusing for users, and everything like that. And so let me go back to the staging site, you didn’t see in the background what I was doing there. But you can see now I have staging dot the mountain space.com as the URL here on the website. And I’m going to keep monitoring that that staging URL remains the same.

If I roll over any of the buttons here, you can see down at the bottom left this services, Chrome will show me the URL down there at the bottom left. If I click Services, then this is also live at the staging subdomain slash services. And so this copy is what I’ll be working with. And I can tell that I’m logged in by the admin bar here across the top and so there’s a few things that I can take care of here on the staging site in order to prepare myself for building a new global header here. And now this Join button is an external link. And that just goes to the signup external service that my client has in place in order to book the different offices and day passes and hot desk etc.

So I’ll make sure I don’t go in and log into members dot this is at a different service. I’m just going to hit back right here and home. You can see that on every page of the website. This default Divi header is what’s in place. The clients requested that up here at the top, I add a customizable message to this bar at the very top. Now in Divi this bar is known as the secondary menu. And so now I’m in the back end here, I’m in the WordPress dashboard.

If I go under Appearance Menus, you can see in the menus area, if I click the Locations tab, there’s a primary menu and a secondary menu. Right now we don’t have a menu assigned to the secondary menu area. And so what I could do is look under customize. When I click Customize here, it’s going to open the customizer, which will show me a version, the live site here on the right again, I’m going to verify that my URL is correct. I’m at the staging subdomain you can see here up at the top left.

But if I go in Divi under header and navigation, this part of the customizer will actually disappear if you’re using the theme builder and the global header, which I’ll be building in the next few minutes. And so right now I have just the default Divi header that is included and activated by default in any Divi site when you start out, and I’ve customized the typeface and the logo and everything like that, but this secondary menu area under header and navigation. Here, it’s called the secondary menu bar. You can see right here that there are a few options, I’ve got our our site blue color set as a background color, I’ve got a font style, Montserrat and the bold, the drop down, I don’t have a drop down present right here. But if I did, it would match the color the drop down menu text I’ve tested.

And there’s a couple of options here for dropdowns. They can fade expand, slide or flip. But and I have a text size and a letter spacing option as well. And so I do want to retain the phone number and the email address here in the secondary menu bar. And now of course, the primary menu bar is this whitespace right here. And this is contains the logo logo image. This is not selected to be full width at the moment. But you could see if I do select it, you can see that brings it out to the full width of the website there, you can hide the logo image and have it reappear. Depending on how you want this to work.

You’ve got all these options for the Divi default global header. Now I have this set so that the content scrolls underneath the header is visible at all times on every page of the website. And so this is what I want to duplicate in the theme builder as a global header. And so one thing I can do is I can go over here and I can just navigate to the real website in a different tab to keep myself a reference open to see what the header should really look like when I’m duplicating it over here in the staging site. And so I’m gonna go back. And if I close by hitting that X, I don’t want to save any of my changes in the customizer there.

And actually, I do want to show you one more thing in the customizer in this header section that I didn’t show you which is fixed navigation settings. This in the default is where I do have it fixed. And you can you can see that the fixed menu height is just the same, you can have that actual height go a little bit smaller. If you want to say I have it go to 30 pixels instead of 40 as you roll under it there. And that gives a little bit of animation for the header just in the in the you know in the interest of visual interest. I’m just going to leave it the way that it was and hit publish. And this menu will stay available to me in the background.

If I disable the global header later that I’m going to create now and I can get back to this exact menu that we used to have. And so let me go and close out here and go down into Divi I’ll show you under the Divi menu under theme builder. You can see that what I do have is a global footer. And here what I’ll do is under mountain space, I’ll right click visit site and click open in a new tab. So now I’ve got a few different tabs open for my reference. One is the staging site, and I can see my changes on the front end and I’m the old only one that can see this. Because I’m logged in as an administrator, I can also see what’s happening at the live site over here.

If you look at the URL, that’s not going to change until I push the staging site over to live after I’m done. And so I’m going to continue to work between these two tabs, the WordPress WordPress admin area, and the looking at the live site but only at the staging subdomain. And so the first thing I can do as I’m over here is one of the things that I’m going to take care of is to look at the site updates, and see what needs to be updated before I start to work. Make sure that all of this works very well. Let’s see. First of all, let’s select all the themes and update including Divi. And then make sure that the site works with the Divi updating from 4.12 to 4.174. And as this is updating it looks like it’s delivered a success message, I can go back to the WordPress Updates page and see that the themes are all up to date. Now let’s go back to that site that I just updated. And I’m going to hit reload or refresh and make sure that the Divi site is still working as it should. Yeah, it looks great. Click over to services, co working services. looking very good. The signup now, of course, the links are going to go to that external. Let’s see, I’ve got a frequently asked questions. Accordion drop down right here.

Everything seems to be working well, the contact form is a global footer down here at the very bottom. So there’s a contact form down there. This map is being pulled in from the Google Maps plugin that I’m using. And of course, I am not using the Google Maps at the staging subdomain. I’m using Google Maps at the home, excuse me at the real site. And so you can see that the map is working down here at the very bottom, this global footer, let’s go back into the WordPress site, this global footer is actually from get in touch all the way down through the contact form. And then the map at the very bottom. And so what happens is on any page, if you’re on any page of the website, when you’re on a page, the contact URL is just the page URL with a. If you look at the URL there, it’s just a hashtag contact. And I have that label down here at the bottom. Where right here is the hashtag contact. This section is marked with a custom CSS class. And so I could show you that inside of the Global Footer too.

So if you’re anywhere on the page, and you click contact, it just scrolls you smoothly down to here, you get a phone number, address, email address, and use the form below message. And of course, this is just an included form that sends an email to the client, the site owner. And so let’s go back here to the WordPress dashboard. Before I show you around inside of the Divi Theme builder, let’s go ahead and update all the plugins I’m gonna go ahead and select all and click Update plugins. And then I’ll just kind of click around again at the live site and make sure that that’s all working. Now I’m kind of watching this update, you can see that it’s just kind of a blank screen right here. And as this is happening in the background, of course, what was that seven plugins or something like that, or eight, eight plugins all being updated at the same time. And I could see just came up showing me that the rest of all the plugins have given me this success message, I could scroll down to the bottom. All updates have been completed is showing me down here. Just like before, if I go to the WordPress Updates page now I have the latest version of WordPress. And the plugins and themes are all up to date. So let’s click back over here and going to the again on the staging subdomain. Make sure the site’s working with all plugins working if I wanted to, I could test the contact form. I’m actually using the included Divi contact form. And so that’s not actually powered by a plugin. But other things are working well. This is all Divi stuff. There’s a video here

where we have I’ve got the Vimeo video [email protected] And we have some drone footage here looking and rising up out of the workspace here that looks great. Everything seems to be working well. Let’s just quick check the FAQs, make sure these accordions are working. And now I have an updated site. Now at this point, I could go back into grid pane. And I could click staging to live. And after testing my updates, and this is where I can make site updates in the background, while the live site at the real URL is still up. And then I can go back and go back and click staging to live. But before I do that, I’m actually gonna go ahead and build a new header here. That which is the real request for the client that I’m going to be working on. And so inside of WordPress, let’s look under Divi Theme builder. And I mentioned the global footer. Now this footer is on the website. As I mentioned, the bottom of every single page, it starts here at the get in touch section, you can see that there’s a little dividing line right here, that goes from a white background to a little gray background. And this whole thing is the global footer. Again, the map isn’t working, but only because this is at the staging subdomain. If I go to Home, of course, none of these changes that I’ve made at the staging subdomain have affected the real URL yet. And when I bring it to live, I’ll go and make sure and test that footer. And so let’s look at the global footer, I’m going to look at this edit button right here. I’m editing the Global Footer layout. This is that purple bar telling me what I’m doing here. And I can see that it starts at the get in touch section.

And so if I click, you know, the Section Settings here, you can see that under Advanced and CSS ID and classes, I’ve added a CSS ID called contact. And so that’s a custom ID that I’ve used. And in that way, I can go, you know, let me close this by hitting the X I’m gonna discard and exit because I didn’t make any changes. But if I go to Appearance Menus, I just want to show you that the menu item contact here is a custom link. What I’ve done is create a custom link here, and then click add to menu. And under this custom link, you can see that the URL is just the plain hashtag contact with no spaces after or before. And what that does is you know, that makes the contact roll over to be a the you whatever URL you are on slash hashtag contact, and that scrolls the user right down into that section. And you can mark that section however you like. And so Okay, here we are back in the WordPress admin. And let’s look at Divi Theme builder once again. Now what I want to do is add a global header. Now of course, it would be nice if I could click Add global header. And I could add it you know do something like duplicate the existing header which is the Divi default header.

That’s not something that’s possible in Divi. So I’m going to be building a global header from scratch and showing that now of course, what I have here is just a global header layout area that’s blank, it’s a section with the ability to add a row inside and inside the row, I’ll be able to add my different modules and things like that. And so let’s pause right here, I want to show you one more thing before we proceed with building this global header. You can see that this global header has appeared on every one of these templates. Now, these two with with red are not active templates. What I have is a default website template, and also a website template that only shows on blog posts. This blog posts template has a custom body. And what this enables me to do is allow the client to go in and write blog posts without having to learn Divi. They go in. And they can go ahead and look at the regular post editor using the block editor in order to make blog posts and add blog posts. So the first thing I’m going to do because I know this site isn’t live, I can just play with things I can break the site, and then restore it again without the public seeing any my changes. And so I’m going to save changes. And this global header is now on every page. Let’s take a look at if the user were to go to posts, all posts and you could see that the post title here has just extended on this post.

This is a weird layout inside of the admin, but if you click the title of the post or click the Edit button, it’s welcoming me to the block editor, I can close that right there. And you can see that the client has written a blog post, not in Divi. But inside of just the regular post editor, there’s, you know, they can use a featured image for this blog post. And this, this blog post will now if I go over here, let’s go ahead and let’s, let’s click this permalink. And I’m going to right click the post and view the post in new tab. And now here is a customized layout. So the featured image is used here. And it’s also used in the background with a blue, there’s this nice overlapping area, this is such a long title. And that’s why that title is so long inside the admin area as well. But that’s the post title and the featured image. And then this is the layout that the client has used as a blog post, and then comments below, etc. And then then of course, that footer is a global footer. And so if they’re in the blog post, and they go up here, they can go ahead and get down to that blog post. One thing I’m noticing that I’ll need to fix or that will, will be fixed when I actually add a global header is that there’s no header here. The reason that happened, and if I go to the FAQ, or even just the homepage, here, you can see now my menu is gone. And the reason for that is because back over here in the admin area, under Divi Theme builder, this global header is blank.

There’s there’s nothing in here, you know, and that’s why so here’s where I’ve wanting one wanting to build the global header. And so let’s go into I can go into this blog post and just close that tab. But if I go in here under home, the last thing I want to show you before I really begin and proceed to build this global header is that I want to show you that you can if you enable the visual builder on any page of the website, you can actually edit global areas from the theme builder directly in the editor right here. So here I’m editing the body of this page, you can see that there’s my different editing, Control Panel items for modules, rows and sections coming up. But if I go down to the bottom to this footer, as I roll my mouse over, this bright green tells me that I can edit the footer template directly from this page if I want to. So I’m just going to say exit visual builder. That brings me back to the live page that I was editing. So if I look at the real website, the live website is at the mountain space.com. And this header has this blue color. It has the logo, it’s using the Montserrat font in bold and all caps. And it’s kind of a certain distance. What we’re looking to change here, as I mentioned at the beginning of this video is that we’re going to bring this secondary kind of top bar is larger and big enough to contain a message a message for all users of the website that can see that from every page. And I might add some nice functionality to maybe shrink it down or make it disappear when the user scrolls. And I’ll show you how we’ll kind of mastermind, the way that’s going to work. But so the first thing I’m going to do is actually open up a new tab. Actually, let’s just go ahead and click WP admin WP dash admin after the URL of the real website. Now I’m at the live website.

And I’m going to visit the site in a new tab. And here’s how I’m organizing my my work area and organizing my thoughts. My grid pain hosting tab is in between the live site is on the very far right. And I don’t want to make any changes on this live site, the mountain space.com. What I’m doing is making changes over here at the staging subdomain. And so the staging subdomain. So at in each case, I’ve got the WP admin dashboard and the live site. And I’ve also got the WP admin dashboard of the real site. This is the staging site. Apologize for that. And over here on the right, the far right the real website on the right so this is my reference that I’m trying to duplicate here. So if I go back over to the dashboard of the real site, I could go under Appearance Customize and look at all the settings that I have. Here at the mountain space. You could see that under the customizer, there is a header and navigation visible to me and it gives me all these options now Let’s go back for a second to the staging subdomain. And I’m going to go down here and I all I did was create a section with a single column inside of excuse me a row with a single column inside of this section for my global header.

So I’m going to save it. This is in the staging subdomain. Don’t forget, and when I click the X to get out of there, now I’m in Divi Theme builder, you can see my global header is present on both the default website template and the posts template here. Now, as I demonstrated earlier, the posts template has a custom body. And that custom body is defined. If I hit settings, you can see the template settings for this particular template are going to be visible on all posts. And so of course, you can define a template to be on a lot of different options, whatever you want. And in this way, you can use DVS, global theme builder in order to build global or partially global templates for header, footer, and body areas of the website. So I’m just going to close that I’m not changing the the posts template at all, it still tells me that all changes are saved back here. But here’s what I want to show you under Appearance Customize. As I look at customizing the mountain space. Now, you could see that the heading and navigation visible over here at the real website, header and navigation Under general settings is now not there. And so because I have defined a global header in the Divi Theme Settings, I am not able to get to this default header anymore in the staging site.

So I’m gonna hit the X to get out of the customizer. Of course, the customizer just opens an overlay back on top of where you were working before. And so here we are in the theme builder, again, I’m going to open up the global header, verifying again, I’m in the staging site here. And let’s take a look at what I have happening over here under header and navigation. And so I have kind of a two section area here that are both are not full width. As you saw me demonstrate, you know, under the primary menu, you can make the content go to full width, which would stretch itself out to the edge of the user’s browser window. But this is not full width. And so if I go back over to the theme builder here, here, this is defined as the width of the content of the website. So of course, this is a full width image you’re looking at. But here is the width of the content area that I’m I’m working with on a desktop, the content area is a certain width and leaves the the ability to stretch out to you know, full sized screen if somebody’s using a large screen like I am here.

And of course it’s mobile responsive. And so we’re going to make sure the mobile responsiveness of the header works as well. Actually, let’s take a look at that right here at the homepage. If I go to let’s see, how can I show you that the real website, I can stretch the browser window using my mouse over here, but one thing you could do is just click inspect, I right clicked anywhere on the page. And I clicked inspect in order to get the Chrome browser tools over here. And then you can look at this, you can turn on the responsive editor over here so that you can actually drag the website until it gets to the your cert your certain breakpoints. Okay, you can see moving from a desktop version to a tablet version, what I have is a hamburger menu with a drop down. And that’s where I’ve defined this blue color and the different items right here. And as I go down to a mobile phone view, basically stays the same. So somebody has a really skinny phone screen, they’re going to get the menu that works quite well. And so let’s go back up here, go back, turning off the mobile responsive settings. And I can click this X to get back to where I was. One last thing I should show you under the Chrome Dev Tools. I like to work with Chrome dev tools over here on the right hand side. And you know, Firefox has this ability as well as other browsers. But if I click these three dots, I’m docked on the side right now. So many people like to work with the dock on the bottom. That shows you the website in the top section and it shows you all the information you need in the dev tools here at the bottom. I find that to be a little a little hard to use. And so I like to click the three dots. And I like to dock it on the side.

And that shows me my website on the left and my Chrome tools on the right hand side. So I’m clicking this x. Now, that’s let’s go away from the real website. And let’s go back into the theme builder. So that we can look here now I’m looking at, there’s some spacing issues that I’m not going to be using. Because this is just my header area. And I want it to be really skinny, you know, I need this header to be quite skinny. To match the other website where the header is just the real small and skinny at the top, I may add some animation so that when the user scrolls, it gets smaller, or that blue top bar might disappear as the user scrolls. But the menu items are still visible, so that from anywhere in the page, they can go ahead and click the menu item that they need to navigate either to the contact at the footer, or to a different page of the website. Well, there’s two ways to go about or actually, there’s three ways to go about duplicating and customizing the header that we’re building right here, the global header. And the first thing that I started to do was to go ahead and build from scratch. And without, you know, some guidance, it can be difficult to figure that out on your own. And of course, I’m providing this tutorial for you. But secondly, you could go to, you know, elegant themes.com. Let me go switch over to the screen capture, again, at elegant themes.com. If you scroll down to any page, you can click blog or recent posts. And what I’ve done here, let me just go back. What I’ve done is I’ve done a search for free global header.

And free global headers are downloadable data, JSON files that you can just import into your website and customize from there. That’s what I’m going to be doing in order to save time, and find one that I really like. And so this one right here, the produce box layout pack, this blog post teaches you how to create it. But at the same time, it also offers you the ability to, to go ahead and download it. If you click get for free today, you can download this global header. And looking at this little animation GIF, you can see what it does, it has the two bars, it changes into one bar and has the website it even has a call to action button over here on the right hand side. And I’m gonna be changing the colors, the font, and bringing in my own menu for the website and testing that on the mountain space to see if that’s exactly what I want to do. Of course, it offers a tablet size, as well as a phone size right here. But let’s go back one more time. And in the Elegant Themes blog.

If you just typed the word header, you can find actually global header is what I had searched for. before. And this blog post is very this doesn’t have a download to duplicate this easily on your own website, like we’re going to do here in a moment. But this blog posts from June 7 2020 to how to build a global header with Divi is full width menu module. And so this one shows that, you know, this is again similar to what I’m looking to do. But instead of having to go through all these steps as we go down here, to create this yourself, you can certainly follow this tutorial on the elegant themes.com blog and figure out all these different things. There is some custom code that the this person has been using, for example, that’s vertically aligned. This is some custom CSS right in the row that says align items center. And that’ll be the main element custom CSS for the row, for example, but I don’t need to do that. What I’m going to do is free global header and I do like this free global header download for the DVS produce box layout pack. Of course this matches. One of the pre designed layout packs that Divi and elegant themes from adds. But from looking at this, if you just click get for free today, as long as you join the email list, and if you’re already on the email list, you’re not going to be duplicated, and get multiple emails from them. But what I’m going to do is place my email address here and then click Download. And this little block will be replaced with the download link. So I’ll pause the video here and do that. And then we’ll bring this as a global header layout into the mountain space staging site.

So I’ll pause the video here, and then we’ll get started. Okay, so now I’ve put my email address in and click the Download button. And if I switch back to the screen capture, I can show you guys that the, the, you know the opt in form here has transformed itself into a button that says download the files. And so this is downloading a zip file into my downloads folder. And let’s go ahead and I’ll reveal, let’s see, just opening my file explorer here. I’m right clicking, and going to also explore the downloads. Bring that over here. And you can see this downloads here. Let’s just go ahead and where am I going to put it, let’s just put it on, on the desktop. Bring this over here, move to desktop. And this is called Divi produce box Header Footer template. If I right click and click Extract All extract, this will make a folder that will be named the same thing. Double click that folder, double click that folder and inside is a dot JSON file. And so this is the header and footer template that we can bring in, I’m going to bring in the header and footer template all together.

And I’m not going to be using the footer, just the header and then customizing it. And so let’s see, let’s go back to my browser. And you know, what I’m going to do is just X out of here and discard and exit this global header. As you saw before, I’m actually going to go ahead and delete the global header from each one of these, this that didn’t really build anything here. And so I’m just going to delete that global header. And hit save. Now this is a good example of if you started to build the global header and you wanted to go back to the default header. If you just delete that outside out of the theme builder here, you could just go ahead and go back to the website, hit refresh. Now my global header is back again. And so this is what we’re going to be duplicating but with a little extra fancy stuff.

And so let’s go back into here. And the way that I’m going to import this is going to be over here in the portability area, the up and down arrows that you can see right here, I’m going to import and I’m gonna find that JSON file. And so let’s go back to desktop. And let’s find that that folder is called Divi produce box Header Footer template. Here’s the JSON file. Now it’s the dot JSON. And I’m going to override the default website template. Yes, I’m going to allow import to overwrite existing assignments. No, because what I want is I don’t want to get rid of the footer, the global footer that I’ve created here. And so allow import to overwrite existing assignments. Let’s import the Divi Theme builder templates. Now, in fact, hold on a second. Before I do this, I know that this global footer and this custom footer here are something that I’ve created. And so what I always do, before I import something new, because that JSON file contains both a global header and a footer, I don’t want to replace this global footer, I want to preserve that and keep on using it on the site.

And so I’m actually going to go ahead and duplicate this default website template so that this global footer remains saved. And so you could see what I did just there, I hit the duplicate icon right here. It created a new template here and it’s asking me what what pages do I want to use it on? If I just X out. This is the default website template copy. So what I’ve done is I’ve made a copy of this down here, and so it calls this cut system footer. And I can make this the Global Footer by, you know, editing it here and putting it on all pages. And so I know that this isn’t being used on any of the website pages right now, because it’s in red, it has the unassigned little, little tooltip, that comes up right there. And now if I save changes, now, this custom footer down here is one that I’m going to save custom footer original, just doing a little bit of labeling, so that I can remember what I’m working with here. And, you know, these two, this one and this one are ones that I had saved in this same way, when I had brought it and created the global footer there. So this one is the custom footer original, I know that it’s sitting there. And I can control the visibility of it, whether it’s on a page or not. And so now I’m ready to bring in and replace it with replace the global header on every page of the website. Okay, back to the portability button. I’m going to import. I’m going to select this file. Here it is again, open. Now I do I’m going to leave the default settings here the override the default website template, yes, because I’m going to add it right here. And I’m also going to allow the import to overwrite existing assignments.

And that’s going to replace the header and the footer. And then I can go ahead and and continue to use the footer that I created before and saved. So I’m going to import Divi Theme builder templates, it’s given me a progress bar. And that was it. There it is global header and global footer. And so I’m going to save changes. And, you know, I just want to point out again, that this is not overriding the live site. This is only working at the staging subdomain. So as we work here, if I hit home, if I go back to the staging homepage, now I’ve got a very interesting header look. And let’s see what it did to the footer. Yeah, it made this footer. That was it matches the food box layout pack that you can get within your own Divi site. And you can see that it’s, of course, it’s the wrong footer. And so okay, this is great. This is great. I’m really liking this, this design the way that it animates. And it’s going to be very customizable for my client here. And so let’s go back to the theme builder. And let’s see, I’m going to take this global footer, and I’m going to trash it. Because I want to use this custom footer, this actually original custom footer as my global footer. And so I’m going to delete that global footer. I’m going to take and bring this custom footer original back up here to the global footer. And I’m going to save changes. Okay, let’s take a look at what happened. Again, reminding you I’m on the staging site, not on the live site. And so let’s go back down to the footer. There we go. I’ve got my original footer. Of course, as you know, the map isn’t working at the staging subdomain, no big deal. All right, great.

So here’s what I want to do. With this menu right here. I really like that animation. I want this orange to be blue. Yep. I want this tan to be white. I want this font to be Montserrat. I want this logo to be the logo, I want to get rid of these social icons or I might actually replace them. These social icons down here might be redundant or unnecessary. If I have the social icons up here at the top, that’s probably what I’ll do, again, another improvement on the client site here. And then I’m going to leave this call to action button. And I’m going to have it go to the same place as this Join button here the sign up button for customers of my client. This is great. All right. So as we go back here into global header, let me pause the video here and take a sip of my soda. But what I’m going to do is hit the pencil icon under global header. And now I’ve got a working header that I can begin to use. Now of course I can’t scroll up and down and see the animation here, when I’m working on this header, that’s the advantage. If you go back here, if you’re say, working on the homepage, and you click Enable visual builder, you can actually work on this global header in place, like I showed you before, if you hit this green Edit Edit Header template when you’re inside the visual builder, and right now I’m editing the body area, right.

But if I go up here and click Edit Header template, now I can see the animation and work on just the global header template up here. And I can’t work on the body area at the same time when I’m doing this. So let’s pause the video and then I’ll come back and begin editing these colors, fonts, backgrounds, and logo. Okay, I’m back. Let’s take a look. What do I have up here? I have a section and then an additional section below. Excellent. So I’m going to take and I hit the section settings gear icon. I can watch my animation there. Great. Now as far as the design of this section, I’ve got what I have here, content background, orange. Now, is this my color? Or is this? Do I have a global color I do. I’m going to make that blue global color. And I’m going to save the section background. Okay, first step, done. Looking great. All right, now let’s see these, these two tan areas here. I’ve got this section, this lower section, okay, lower section gear icon background. Let’s make it white. Do I have a global white? No, I have a global gray that I had used before. But I’m going to make this background white and safe. Okay. Now if I want to save my work as I go, I want to go down here to the purple.at the bottom and click Save. So now I’m saving the visual edit that I’ve made. Now I’m still working in the global header up here. And so now when this goes up to the top, I don’t want this to go to green. I need this to go and remain white when it’s up here. And so let’s see, that goes to the section edit. One of the things that Okay, so this section, let’s see, let’s just look at the row. There’s a row background doesn’t have a background color. Okay.

This row right here, how about this section? If I move it this way? Yeah, you could see that some of my controls are hidden. There’s a row right here, there’s a module right here. Let’s see there’s a button module, a menu module with a logo on the left. And so if I look at this, you could see if you see my mouse, I’m going to the bottom left here. And I’m going to choose the wireframe view. And now what I’m what I’m here editing here is everything that’s contained within this global header shown as a wireframe view, much easier to see much easier to find what you want to work on. And so for the this section down here, let me see, I’m going to open the gear icon of that lower section. And let’s see the design. Is there a transformation? Nope. Let’s see what else is going on. I wonder if advanced. I’ve got no no custom CSS inside of this header. Are there any conditions? No. Okay. So the section background obviously I have oh, there is it hover? No, it’s sticky. Okay, I think this is what I want. Yes, look at that. So in the Section Settings, the lower section settings, there’s a sticky tab and a desktop tab. So let me get back out. I just found what I was looking for.

So I’m going to go back to the desktop view down here at the bottom left. Again, still editing the just the global header at the top here. And that that when this section goes up, it is sticky, which means that the content is going to slide underneath. And now I want the background of my sticky section to be white. So I’m going to go to this second set section here, that’s the lower section. I’m gonna go to design. Notice, excuse me, I’m going to go to the background. And then right here, there’s my sticky, I want that just to remain white. And there’s no other settings here, there’s not a gradient or color. Of course, you could have a gradient and image of a video, do you want to play a video in that small menu section? Absolutely not. Let’s go ahead and click the Save right there. And I’m going to go over here on the right hand side and continue to save my changes. And now, you can see I have a problem, the menu text color. When it goes up into that what used to be a green background, the text changed over to white. And so I’ve got to fix that. So let’s let’s do that. Next, I’m going to go to this module. That’s a gray module module settings gear icon.

The I’m using the Header Menu. That’s correct. That’s the correct menu I’m looking at the logo is not defined as correct. So I’ll be changing that as well. But if I look at the content is the header menu. That’s correct. And for the design for the menu text. Under the active link now, not the menu text, I want the menu text color. When it’s sticky. There’s my sticky tab, menu text color when it’s sticky. I want to be this gray color. Perfect. So the menu text color when it’s sticky is that gray color. The menu font style, I want it to be all caps, the menu font, I need it to be Montserrat and font weight bold. Okay, awesome. This is looking good. I like that rollover where it does a lighter gray. And again, I just lost my light. So let me just focus my camera. There you go. All right. All right. So great. I’m going to hit save on this. On that module. I’m going to hit Save at the bottom right. And let’s begin to look, we’re really getting somewhere now. Now, this module, background, I want to be white as well. And we’ll see that looks like it’s got a box shadow and rounded corners. I like that I really I’m going to go ahead and edit this module now. And with this min, it’s a menu module, the design of that menu module has a box shadow.

No, it’s not showing a box shadow. That’s fine. Let’s see what it looks like when I get the background. Is there a background color? No. Okay, so that background, that background colors coming from somewhere else? I’m going to X out of that. And let’s see. This is a menu section. It looks like this background module. does have a beige a beige background. Let’s see. I can look at the row. Maybe it’s the row that has the tan background color. Nope. Adding back on color doesn’t have one. All right. Isn’t this interesting? Let me look again, at the header menu. And let me just make sure there’s no custom CSS that I’m missing. Nope. Design wise. Background is under Content. menu text layout. It’s left aligned. Yes, that’s fine. The content itself the logo. I don’t want shopping cart or anything like that. This is where I thought that I would find the background color. If any of these are blue. That’s where you would see would tell you that that’s a that’s a change that that has content inside of it. It’s an interesting problem that I have right here. Let’s see. I want one thing Okay, here’s what I can see. This module is located here but it extends out to the side I’d I know what this is. This is the background color of the row, column. Here’s the column structure. There’s a column on the left and a column on the far right. And the background of the row itself is not there. So let me see the background of the left column is the beige. There it is. Okay, let’s change that into white. There we go. Here we go. So that and if you hit this little arrow, you’re from within the Column Settings, you go back to the row, that shows that column. Now, this right hand column is this one right here on the right, that one doesn’t have a background color. Okay. So I’m going to hit the green to save that column. And then I’m going to hit the green to save the row itself, really starting to get somewhere now. Okay, so let me hit save.

looking very good. Let’s look at this button. Join. Join is the lettering that I want, because it’s going to be the same place as this join menu item.

So that join, let me go. Let me just go ahead and click Save on that. Save changes down on the bottom right. Don’t forget to save changes often, early and often. And so let’s see if I go join. What do I want this to be? I’m going to go over here to this menu. I know what I can do is add the link up here. Let me see what I have. Here. I went back to the real website, it is not the mountains, members dot the mountain space.com/sign up. I’m going to right click that because this is an external link. This I’m pulling this in to the Appearance menu settings in WordPress. But if I right click that link and click copy link address now I have that link URL on my clipboard. Now let’s go back into the theme builder. Now of course, I’m still editing this global header. And so let’s go into this button module. The link for this button module. I’m going to hit Ctrl V and paste. And I’m going to open it in the same window. Yeah. All right. So before I save that, though, I’ve got the Text Join the link is that URL, let’s look at the design. The design of the text that’s not applicable because you could see that it’s white. I like that roll over with a little arrow too. But the button design button text size. That looks pretty good to be I do need to change the font to Montserrat. But the button text color is defined as white the button background.

Now here’s an interesting issue if I go to global, and I change that into blue, and of course, it doesn’t appear as a button. Do I like that? I do. I do. Okay, join. It looks like it’s a very subtle call to action button when it’s blue. And then it comes in. It makes itself blue. It stays blue and it makes itself in that white background. Okay. I like that it needs to move down just a little bit. For the sticky area. I’m really starting to like this global header. Okay. Okay, custom styles for button. Yes. So okay, Save Changes. Hit the green. Hit the green. Watch the progress. Okay, that’s saved. Let’s see. All right, so let’s put a little bit of space. Oh, yeah, it’s funny. I’ll have to look at this and see if I really need to add the space at the top it looks like it’s actually going to work perfectly. Let me look at this text. Again. I mentioned that I’ve got a not the text. I hopes that I’ve got to use a custom style for the button. The button text color Text Size button font Montserrat. And Hold all caps, use the icon of a right side arrow no text, no box shadow. Okay, save. Save. Getting there. Let’s look at the logo in this menu module. This menu module has a logo. Look when I brought in, it brought in some additional graphics that I can use these two photos that are copyright free and usable for commercial or any kind of project. Of course, I’m not going to do that the mountain space logo with red is what I’m going to bring in. It’s too small. So when you’re looking at it here if you click the blue little paintbrush, depending on what you’re trying to edit, it’ll bring you to the right spot. So if I bring it over here, I’m editing this logo in the menu itself so here’s logo.

Nope. Let’s see why is that logo so small? Let me just save it. Let me save it…

looking pretty good. I still have a spacing issue on this Join button except when I roll over it. So we’ll see how that looks. But this logo certainly certainly needs to be oh I see Well Is this the same menu? Yeah, same menu. Let’s just make sure I don’t have any custom code and under design let’s see under Content logo desktop tablet there it is right there. Phone there it is right there. I’m going to have to change this so that it has just the logo without the words on it for both tablet and mobile. And so let’s go back to desktop for this logo this menu sizing yeah this is for the entire menu itself. There it is. Sizing logo with logo max width let’s look at starting to look better 45% on tablet 40% on mobile on phone 60 pixels on desktop definitely not 100 How about 100% No too big. Let’s bring it down to a nice percentage. Now we’re getting somewhere 23%. Really liking at let’s look at the real website. Okay, active link in the blue color would be better. But I like the logo size and the way it moves up into the side like that. This is the homepage so active logo should be the blue.

All right. Let’s just check size on this logo sizing nothing else that I want to change spacing no changes. Green Arrow to save green Save button to save. Again, I’m just working in the global header This is looking great. Let’s go make this blue for the active. Link. menu design. menu text active link color. Let’s make it the global blue. There we go home is global blue. Save, save, save. All right, now it’s time to go and refresh and exit the visual builder and see if the join call to action button is going to work with its spacing or not. Because as you remember, I was having that spacing issue right now it looks like it’s working. But we’ll just have to see. So I’m going to hit Exit visual builder. If I hadn’t saved my changes, it would then give me an error message. Hey, you didn’t save your changes before. Oh, boy, this is great. This is looking so good. All right. And as I go down, my footer is still working. Of course, the map will work once I bring it to the real URL. All right. Now, the social icons, I’m going to Facebook, Instagram, Facebook, Instagram. All right, enable visual builder, I just clicked the purple enable visual builder. I’m going to edit the header template by hitting the green tab. And now in this top section, here’s where we’re getting down to the nitty gritty. Inside of this section, I have some different modules. Here’s an area where this is an empty, empty column, I could add a module, don’t forget, I need to put the text that my client wants. So right here, though, you could see that this is where the social icons are. Can I get to the gear icon of this module? No, I can’t really get there. What’s my solution? Go down here. Open up the wireframe view.

And I know this is the social media follow. So here’s the row layout, and I could see that it’s actually two, two rows. So you know, if you hit the row here, you can see that what I have selected 5050 row, but let’s go to the social media follow. And let’s get rid of Twitter, Facebook, and Instagram. I’m going to go back over here to the real website. I’m going to right click this Facebook link, and copy link address. And we’ll go back into this. Facebook social, the link Ctrl V to paste. There we go. And now Instagram. Right click copy link address from the real website. And now I’m going back to the staging website, Instagram settings icon link, and Ctrl V to paste, save. And I think it looks good color wise, as I’ll click save over here. That was an auto save. Now when I click save, it’ll really save. Didn’t make any changes, but it will give me an error message. So Okay, back to desktop view. I’ll still be in the visual builder here. But now Facebook and Instagram will go to the correct place. Over here on the right on the right. Look at let’s so what do I have right here? A module I have that call to action module. Let me see what is this or button module? Yeah, button modules over here. I can add this module. We’re really what I want is this message to be up here. Okay, let’s look at this wireframe view. I want to change this row to have three columns, I think instead of two. So this button, I think what I have in this button is it since it’s down here. What do I have negative margin.

Let’s just take a look. This button the way it holds itself at the top. Let’s look at the spacing. It’s got some padding. And when it’s sticky, you it’s got a zero margin at the top. Well, I don’t really care. It’s working. It looks great. It puts itself up into here when we’re looking at it, but what I want to do is I won’t change anything. If I change this into three column instead of two, but I want a lot of room for my text. I want a lot of room for the clients You know text to be in the middle of the page. So if, instead of this three column 33% Each, I’m gonna go for 2550 25. And then I’m going to add a text module here. And now, I’ve saved the text that I want this now I can change this for the client anytime I’m copying this text. I’m gonna paste it right in here. So this is paragraph text. Yeah. So for this paragraph text. Not heading text, but paragraph text. I want this to be Montserrat still. And I will still want it to be bold. I still want to be all caps. I want to be in white. I think it’s just going to automatically go away, but I’ll just select white. And then we can take a look at it. We’re in the wireframe view now. But what if I look at the desktop view? I haven’t saved anything yet. Hey, hey, hey, looking pretty good. I’m loving it. I’m loving it. Um, I think I need less, I need less. I either need less line height, or any less text. I would love to keep this to two lines. I want to keep this to two lines. A couple couple of ways of doing that. Let me save it though. Save, Save. If it’s in a desktop size, it looks great. I’ve got a little more room for text. However, if I go to tablet, oh, that’s not bad at all. Tablet looks pretty good. On tablet actually, I need to make this logo a lot smaller on tablet

design sizing logo on tablet that was 45% Now I need logo max height Nope. Still oops, I’m gonna leave that on auto. So I’m gonna refresh it back to none, or none. Yeah, refresh it back to none. I want some spacing in this logo. If I click here actually, it’s not too bad. I just don’t like the way it’s touching at the top here with that logo. Okay, you know what I need is

I need some spacing. I need a little bit of margin. Or padding. Yeah, perfect. Perfect. To have to have pixels of padding. Oh way better way better.

But let’s just make sure on the phone. Let’s bring that back down a little bit. On the phone six pixels. Okay. Green check. Save button at the bottom right. Awesome. I’m looking at the tablet view. I’m looking at the mobile phone view. Holy cow, this is looking real good. Let’s look at the desktop view. All right, Jason, I think this is looking really good. Let me hit save one more time.

And then I’m going to exit visual builder. It takes me back to the page I was working on when I exit the visual builder. I still think maybe line height on that message would look a little bit better. Reducing the line height just a little oh look at this. I have this little problem. The button is too low. Inside of this top two things then buttons too low and reduce the line height here just a little bit. So let me enable the visual builder again. Edit Header templates. Bright green. It gives me text right here for this text module. Design not heading but text text. I want the line height 1.7. Let’s bring it back. 1.4. Great. Now it does go to three lines, if the person has a smaller desktop view like laptop, so I’m okay with that I because I reduced the line height, I think that’s fine. It also gives the client a little more room if he wants to say more things, you know, hey, look, there’s a period right here and then no space. So if I go back to the content, there we go call for details. I wonder if you put a carriage return in there. Now that’s another option, you know. Actually, here, I am going to suggest that we remove call for details. Much better. Now I also need a little bit of spacing change I like I’d love that to be centered inside of that space right there. So what do I have spacing of this text module, I’m going to add a tiny bit of padding. Just five pixels of padding. Let’s make sure mobile responsiveness looks good. It’s going to keep five pixels of padding on tablet. Still looks good. Let’s look at it on the phone. Sure, I can keep five pixels of padding there. That looks great. All right. Awesome. Let me go back, desktop view, save. Now really starting to get there, I want this join I want this little you can see that that there’s just that little overhang right there. How am I gonna solve that

I hit settings on this button. On the design. I’m going to I am using custom styles for this button.

Let’s just hold on a second. Let me see what I have or spacing. There’s the negative pixel. So negative margin I should say negative margin is bringing this Join button way up from down here into the next way up here. And so

if I increase the negative margin, that’s going to bring it up just a little bit more and center it in this area. So I pulled that back this way. Check it out

what I got what looks the best 118 Awesome. And let’s look at the mobile view. Already was looking at the mobile view for tablet it disappears. For phone. The button disappears. Oh no, it goes down. button goes down here.

Where’s it on tablet? Ah look at that. Okay. Okay. So let’s see that in tablet view.

Margin. I’m still going to bring a little bit of negative margin in there

for tablet view as well as a little bit of bottom margin. Okay, let’s look at it for phone. Better negative 18 and 13. Save and Save woohoo I’m done. I’m done. This looks great. All right. Exit visual builder refresh. It actually was already refreshed. Yeah, mountain space. Now. Oh, okay. Last thing. Last thing. Got to remove these duplicate social I icons from the homepage. So it’s only exists on the homepage, let’s look at services real quick

back to home, I just need to remove these two. Now this time, I’m not going to click the bright green global header, because I’m editing the actual body of the homepage itself, only. So look at that. Okay, inside of this section, if this is a, what is this, this is a this full width section, I didn’t choose a full width section, this is just a big section. And it’s got a background image. But here’s my module with the title and the site title and the tagline. And here is the module that I’m really just going to save to the library and then delete. Social Icons save to library. The reason I did that is if I want to bring these back, it’s easy. So I’m just going to hit the trashcan there. And I think I’m done. Better hit Save. Now, if that does that for you. It’s auto saving. So make sure you hit save. Exit visual builder, loving it, loving it. All right. Totally awesome. So anything else? I don’t think so. Let’s just take a look at the mobile responsiveness. If you want to, you can bring this and dock it at the bottom to look at your mobile responsive settings right here. So you could do you know, kind of whatever you want, you could choose a particular device, you can choose. Just have responsive and drag.

What says 100%? There you go. Looking good. Okay. Turn that off. Bring my Chrome Inspector back to the dock on the right. Loving it. All right. So it says all changes saved. Why is that? That’s because when I was using the Enable visual builder, and I was editing here so that I could see the animation was scroll, I was saving this. And then when I exited the visual builder, it goes back here and it’s saved. However, I’m just gonna hit that Save button anyway. And so I’ve got a global header. That’s here on the default website template. I need this global header to also be present over here on posts. And so what I’m going to do is add a custom header, use the global header, save changes, think that’s the very last thing that I needed to do. Refresh the page. Awesome. Now I don’t actually have a link to the blog posts because the client is just starting to work on blog posts. There’s only one blog post. And we don’t have that linked yet. Here’s join, here’s join the links are correct. smooth scroll down to the contact form at cetera. And the last thing Okay, let’s, last thing. I’m done. Let’s go back into the staging area for staging dot the mountain space.com. I’m going to click staging to live. This is the last thing. And so now if here’s the real site, I’m looking at the real site here. It’s got this global default header that was the previous header. Oh, he needs his phone number and email address, doesn’t he? Yeah, you know what? I’m going to talk to the client about remaining having the social icons remain here. And having the phone and email just visible on every page of the website in the contact area have the footer. That’s perfect. And of course the join call to action is going to be great. So that’s great. Lastly, saying I think I’m going to add No, I’m just gonna leave that as a period.

We could arrange this however we like. Suppose he wanted to I suppose he wanted to change this just a little bit, we could go in and anniversary special. And does that dedicated desk now I think it’s going to look best with the dash right here, I was thinking about bringing this to a second line, let’s just take a look nananana nanananana that no, that’s not the way to do this space dash space that looks the best this is about as small as a person’s laptop screen would be. Yeah, and so I’m exiting out of that, I’m going to go ahead and hit X right here, I have unsaved changes, and I’m going to discard an exit from those changes, because that’s not a change that I wanted to make all changes are saved. But I can verify that. Now I think we are really ready to go. Client is going to love this. Okay, good pain, staging, staging, to live, copy the staging site to the live site. Absolutely. I’m going to select the staging, push type all files, push staging to live, and here’s my test pop up. It’s gonna give me green check boxes down the right hand side to make sure that my environment is the same in my staging site. And in the real site. The last thing I verify is that I’m actually working in the right URL. If I push a staging to live in the wrong URL, I could overwrite a real live site with the wrong with a, you know, an empty staging site or something like that. So make sure everything is all good. It’s time to change to PHP 7.4. But I’ll do that. When I do some updates later. I’m not going to need to test anything after that. So push staging to live

here we go. We’re getting a little notice. It does some backups first, you know, so the backup is beginning of the live site. So if I make a mistake, and I pushed the staging site to live, and I realized that I wasn’t correct, I did it wrong. I shouldn’t have pushed to live right then I can go back and restore that backup. Grid pain is so excellent for that. I’m getting a whole bunch of success messages that you can see here 75% staging to live. And it’s still taking just a few minutes. Staging, push completed successfully, everything cleaned up. Staging notice so I can close these notification. This is the first one that came up. This is the last one staging to live success. Staging push completed. I’m so happy. Okay. The magical moment go to the real website. hit reload and refresh.

taken a look awesome, something’s wrong. Look at that. Let’s refresh one more time. Nope. All right. Don’t panic. Work still okay. So now I need to make a quick change. Let’s come back out. Say okay, out of the customizer, let me log in

let’s purge the cache at the server level and hit refresh. No, that didn’t work exactly right. Purge initiated that could take a little bit of time.

Let’s just take a look at the theme builder. Let me just click Save right here. Refresh the live site still not quite. And join is not looking exactly right either. Also a little bit of spacing problem here at the mountain space. Before I go changing things inside With the global header here, I’m gonna go back into Divi Options. Under general performance. I’m going to save changes. Let’s just take a look, refresh. That was it. That was it. So inside of Divi Theme Options under general performance, all I did was I went down to the bottom or even you could do it at the top and I click save changes. This cleared out the Divi static cache, there’s another place that you might be able to find under builder advanced, if you have static CSS file generation enabled, then you might be you might clear that cache.

And then save changes again, that will help you now I’m looking great. All right, I’m loving it, I’m loving it, it’s time to text the client and say, hey, check out your, your new header. Let’s scroll down to the bottom to contact. And let’s make sure the map is working. Working great. All right. Super cool. Well, that was a pretty extensive and, you know, pretty time consuming process to go through and to make that change, to customize a pre designed global header, get it in at staging, and then bring staging back now, I’m gonna build a client at about $100 An hour tracking my time on that. That’s one of the you know, one of the things that I may include, as far as my $100 a month hosting and website care plans. Those cover, you know, very small content changes, it covers my monitoring, my site updating, and, you know, backups, backup restoration, if needed. But I just spent a certain amount of time I’ll look back and see how many hours down to the 15 Minute increment and charge the client for that accordingly. I appreciate you guys tuning in and following along, as I work on an existing Divi powered website, using grid paid hosting, using the staging system, using, you know, global, the global theme builder, the global template templating system where I was able to create and use some free design Elegant Themes resources, and we’ll see you next time. Thanks for being here.