I just revised the Flo Coaching website in its staging subdomain, and we’re getting ready to finally launch the new site.

Watch me here (edited down a little) spend less than an hour to revise all the pages of a design, to fine-tune the design after I had a conversation on the phone with the client.

I’m using the Divi Visual Builder, Global Colors, among a few other tricks to unify the design, after discussing it with the client.

Enjoy!

Transcript:

Welcome leverage WP community. I’m here to share with you a tutorial on the flow coaching website, a website that I worked with in the past, if you had purchased the accelerator program, the accelerator course, back in the end of 2021, you’ll recognize this site as a redesign that I was working on with the client. And we’ve gone through and finalized the visual changes that he wants on the website. And we’ve almost got it done. It’s it’s still only live at the staging subdomain. And we’re working with the Divi visual builder.

And so the client and I consulted the other day. And I have some notes that I made during that call as we were looking at the website, from each of our computers and speaking on the phone. And so I’ll just walk you through this process of inputting these visual edits that are needed on the site before we take it live. So let me go ahead and share my screen. And you may recall, this design is actually a little more advanced than what was shown in the accelerator program, that we’ve really revised this into an almost final version.

You can see this is at the staging dot flow coaching.com subdomain. The live site is right here, an old defunct WordPress theme and a really old version, and it just doesn’t have functionality that he needs. In future tutorials, I’ll be showing you how I’m setting up the WooCommerce purchasing of the coaching programs that the client offers, as well as an email opt in and broadcast email setup directly from WordPress. He’s moving away from MailChimp and saving a lot of money per month, building an email list directly on his WordPress site and leveraging Amazon Simple email service. As I’ve talked before, for instance, at leverage wp.com in the master class that you can access for free right now, there’s a little bit about that in there.

And we’re also going to be setting up the signing of contracts for his new clients when they come in to the website. And so you can see here I’ve got six pages, home career coaching, executive coaching, about blog, and contact. And so on each of these six pages, there’s a few changes that you’ll see. So the first thing I’m going to do while I’m logged in here, you can see I’ve got the tool, the admin toolbar up at the top, and I’m gonna go ahead and click Enable visual builder. So that we get the Divi visual builder tools overlaid on top of the website as it looks to the public. And of course, it’s up, it’s not really visible to the public. It’s at the staging subdomain.

But I wanted to show you in Divi, and I’ll just remind you, this bright green means that that that is part of a global template. That is true on several pages or the entire website. And you can choose now in the latest version of Divi to edit the header. Or if you have a global footer, it’ll show you in bright green, that those are editable. But right now we’re just editing this body area of the particular page here. And that’s why these toolbar areas like this module toolbar, and this row toolbar, as well as the blue heading toolbar are showing. And you can’t really see that you know, that header template.

If I clicked here, it would give me tools for these items over here. The other place to edit that if I go to the dashboard, the WordPress dashboard and go down to Divi Theme builder. Now that’s going to show me an interface where I can see what global headers and footers I’m using. And then I have a specific page where I’ve done a different footer on the contact page. And you can see that by bright green, this is a global element. And because this is gray, it shows me that it’s just on this specific page called contact. I’ll show you what I mean. Over here on the website, if I just quickly exit the visual builder, give you a quick tour on home, for example, the footer has the join my coaching newsletter, and it has this contact block with the phone number and the email. And if you go to the contact page, that would have been redundant in the design that we’ve done.

And so the contact page has this blue box with the contact information and a contact form. But at the bottom in the footer, we didn’t really need that redundant blue box here. So we’ve included a map and then so I’ll show you what changes I’ll be making as we go through I’ve got my notebook here with just some ballpoint pen written on paper as I took my notes when we were together on the phone, and so I’ll go back and open the visual builder and make sure that I’m in During the homepage, I am editing this homepage,

I can see that it was home. And I clicked that before I opened up the visual builder. But now let’s see what we have to work with. The first thing is that I’ve already added the about page to the menu. So I can check that off on my list. On the homepage, we’re doing a few things we are, we’ve changed this and and I’ve already done this, we changed it from an ampersand or the and symbol to the word and because the client liked that a little bit more.

And now we’re also going to change the photo, we have a different stock photo that Chris is using, for every page of the website, the homepage is going to have a large full screen version, and subsequent pages are going to have a different one. Oops, I just clicked here by accident. And then I clicked back in the page content here. And so anyway, we’re going to use the same image in the header for all the other pages. And so what I’m going to do is go into the section here, I know that this is this image has a section background. And so I’m in the section, and I hit background. And I can see that there’s a background image in blue here. And so if I click that, you can see here’s the background image, you can tell that it has an overlay color on it, making it a little bit darker. So the wording in white shows up well, but we’re changing that image. So I’m just gonna go ahead and click anywhere on the image or this gear icon and get to the media library.

And I know it’s this climbing image that we want to use for the headers and the background of the homepage here. So I’m gonna go ahead and save that module. And now I haven’t saved this, that my changes here until I go down to the bottom toolbar, and click Save for the entire page. That’s something to remember when working with the Divi visual builder that you know, when you change and save your module, you still didn’t save the whole thing and save the page. So you do need to hit you know, after you’ve made a bunch of changes, remember to go in and hit this save button over here. Now one thing I’m changing is I’m noticing that this with this image, I know that I can just move these, the lettering and buttons over to the right instead of the left just by going to this full width header module and go into design.

And in layout here I’m gonna go text and logo alignment to the right. And you can see that moves it away from the subject matter of the image. It’s a much better look. And so I’m gonna go ahead and do that change and then save. We also have a few global colors present here, the we have, you know, white and gray buttons. But as we go down, the next thing we do is on my list here is to change a few of the button colors. So we have this teal color, which is the main global color, kind of secondary color on the website. So you can see when I roll over the Learn More button, it turns into this purpley blue color instead of the more greenish teal color. So I need the rollover to be a version of this to color. So let’s look at the button module. I just opened the button module under the Design tab. Let me look at button here. And I see that I have button background color as this right.

And now if I do a hover, you can see that it has a hover color. And when you look at the background color, though, let’s go back, you can see this is a global color. And that’s marked in Divi with this little arrow to the bottom right, the global colors I have present on the site are just this one the teal color, but I can add more if I want to. But for now what I’m going to do is for not the the button, background color, but the hover state of the background color, I don’t want it to be this purpley color, but I want to put a little overlay on it. And so what I’d like to do is change this color. Let’s see, do I have it saved here as well I do. So we’ll choose this color for the hover. Alright, so let’s make it the this hover color again. Same colors that was before and I’m going to change the opacity down a little bit about half, maybe about three quarters point seven five or so point seven one.

All right, so now I’ve got the same color but with a transparency for the hover state. So if I look here, if I roll over it, you can see that gives it a little change at great Okay, so for this hover color I want to Make it this color. Yep, that’s how you can choose some other colors by hitting the green hitting the three dots. But if I choose this color, I could add it as a global color. I think I need to close this first that’s the Okay, so I have to go over colors, they look pretty similar here. The one on the right, though, is now that opaque or half opaque, transparent, I should say transparent version of the global colors. And so I know when I go anywhere else, I can have that hover state be the transparent one. And I can see that it has the little checkerboard behind it when I do that. So now if I just hit save, now, this is the right hover state, when I rolled over, it turns a little bit lighter.

Alright, so I made that change. So let’s see, learn more. The next thing I have, let me just check this off of my list. Let’s see I changed the heading the photo, the Learn More button. And you know, we’re going to change it to he wanted me to change it to just more instead of learn more. And so I’ll do that. Next, we want that more to scroll down to the testimonials. And so if we go down here past here, on the homepage, I’ve got two testimonials right here. And it’s a particular section right now here’s a nice quotation. And then two testimonials below this whole section is what we want to scroll to. So if I open the section, and go to Advanced and open CSS ID and classes, I can give this a CSS ID that we can use to scroll the user down to this point by clicking a button. And so I’m going to put this as more just the word more. And remember what that is I saved it there. And so now I can go back to that button.

And to make an anchor link and go into the button. And in Divi just click link, and you use the hashtag, not hashtag top, but hashtag more. And so if I save that, let’s go ahead and save the page here. I don’t know, I don’t know if this will work inside the builder. When I push it Nope. But when you click that, let’s exit the builder quickly here. And I’ll show you once this opens up to the front end to the real website. If someone’s scrolling down, and they want to go to more that scrolls the user down to this section now. Great. All right. So let’s go back into the visual builder and start building once again. Let’s see we made that scrolls to the testimonials. I’m just checking off each thing on my notebook. As I get it done. So change me there’s another hover color problem on the button.

So I’m going to open up this button module. This time, I can just go to Design button. As I go down here, I just need to open up the hover. And since I’ve already created that global transparent color, I know it’s the one on the right. I can see that’s the right color here because it’s an RGBA. And it has the little checkerboard behind. So that makes a transparency. This one is just a hex color. If I were to choose that. Now that one is a hex color, which is defined by a hashtag and letters and numbers. And so I want to change it back to the transparent version. And then just click save for the module. I have the right rollover. All right, great.

Let’s see what else we have the testimonials here this more instead of learn more. Oops. We’re going to change that to more. And we’re also going to send this to the about page because this is about Chris and let’s see how I have it set already to a page link. It’s to the Me page right we want it to go to the About page, there used to be a Me page. That was his About page on the old site. And so I’ll just say that now that’s linked to the correct page that will go to this about page up here. All right, check that off. Now, here’s something he’s showing the latest three blog posts in this section. And you can see that he hasn’t doesn’t have them categorized. And so instead of creating categories, we decided we’re not going to use categories, or at least display them here on the homepage, until he starts using categories. And so for this blog module, let’s look at the meta and see what we’re including here. Now this is designed. And so it might be content, actually, the elements that we’re using, and do we want to show the categories? No, so I just uncheck that. And now we don’t have categories anymore. Okay, easy. I’m just gonna go ahead and save the page while I’m thinking about it.

And I’ll check that off. Remove the categories, right. All right. So let’s see, I think and this is the footer. So now that I’ve saved that, I can exit the visual builder. And let’s go on to the next. Okay, so on the contact page, we decided not to actually put the map that I had used in the original design to replace that redundant, you know, green or teal box that had the contact information. And so instead of a map, however, we’re going to do something else. So let me enable the visual builder on the contact page. And here’s an example of where I’m going to actually edit not the contact page itself. But I went to the contact page to find what I wanted. And I wanted to edit the footer. So I click the green.

And now you can see my toolbars are all available here, modules, rows and sections. And so we want to remove this and then center the newsletter form and put the phone as optional, offer the form, we’re going to remove the Okay, we’re going to use a different form here. So we’re going to basically center this and use a form and include an optional phone number. And so for now, what I’ll do is just change by clicking this little columns icon inside of the row module, instead of two columns, I’m just going to make it one column. Now, of course, I have extra modules here. And so as I go down, I don’t need the Map module. So oftentimes, when I get rid of a module, I use this down arrow to save it to the library in case I want to use it later. Because I already have put a boulder colorado map in here, instead of just throwing it away and having to recreate it later. I’m gonna go ahead and just write Map module, well, you will be able to see that that’s a module.

So I’m just gonna write, actually, I’m gonna write boulder map as a label, so I know what it is. And I’m just going to save it not as any of these other things. But just save it into the Divi Library. And then I can use it later. So now I can safely just delete that. And let’s see, another thing we were going to do here was to put the proper LinkedIn link. That’s the social network LinkedIn. The link doesn’t have anything yet. But we have to find the the correct LinkedIn. link there. So does he have it on his old website? No, I know I have it. Something where you might need to find someone’s LinkedIn profile for their social stuff. Hey, there’s Chris first person in my feed. And if I just click his name, it comes up with his page. And I can get the URL from here Ctrl C to copy. And let’s go ahead and put that in the link for that social icon. Okay. Perfect. I’m going to leave this for now. Because what is this, this is an email opt in by Divi.

And instead of using this, Divi email, opt in, we’re going to be using the fluent forms, opt in form that has, you know, much more power and detail. And we’ll be able to connect that to the autonomic CRM to collect email addresses, et cetera. And so I’m just going to save the module for now. Now, and save my page. And right now I’m not saving the page, really, I’m saving this footer element, which is just present on the contact page. And so I can say, exit visual builder now, it’ll take me back to the front end version of the page I was on, that’s the contact page. So you can see that’s a full page contact form now. But if I go back to another page inside the website, you can see that I didn’t make any changes on that footer. It’s still got the contact information right here. Great. And so let’s see, the next thing is to go. Let’s see, what do I have here? The contact form. Okay, so on the career coaching page, which I have open, that’s the next thing, the header image. Yeah, great. So let’s enable visual builder this one now? There we go. This, again, is a full width header. Do you think it’s part of the background? Or is it part of the full width? module itself? I look under background image. Yep.

And then of course, there’s also a background color present? Oh, no, there isn’t, you could add one. So this background image is not what we want, we want to go with that other image that matches. But we’re going to crop it a little bit differently so that it shows more of the page when someone opens up this page on the website. And so, again, career coaching, yeah, this showing on the left side, I’m gonna just decide that it’s going to be better to put all the headings over on the right hand side and stuff on the left, for each one of these header images. And so let’s go to design, layout. And let’s align it to the right. Much better, right, we’re gonna change that bottom line to the right color to noticing something different, right there. That’s a heading two. So if I go to heading text in this text module, heading two, I want the text color to be this global color.

Honestly, the reason I’m changing all of these to a global color, and not to just saved color, even though that’s the same color. What this means is that I’m defining and connecting all of these elements to the global color. Meaning that now if I go in and change this color to something different, I can change everything on the whole website to that color, everything that’s at least defined with that global color, view schedule. I do see how now and this one, the lettering is the wrong color. And so let’s just take a look at this call to action module. In the call to action module. The design of the button needs to be that the button text color is the global color. Oh, no, it’s not.

It’s the hover text color, the text color, we do want to be white. So let’s go to the hover state. And you can see Yep, wrong color. So let’s make that a nice version of the same background color. That looks good. All right, much better. I’m gonna go to the executive coaching page. Again, I want to enable visual builder and of course, change the header again. So what will happen, the user experience here will be that as they go to different pages of the website, the header will remain the same, but the words at the top will change. There’s a few other things I’m just noticing as I come down you know, I had the client, I had Chris come in here and edit his own text by logging into Divi going to the visual builder here. And, you know, putting in exactly what he wanted it to say. And so let’s say this color, I want to be the global color. And so he came in and did some basically editing the text. But you know, he didn’t change the colors or do some other things. That’s where I’m adding that stuff in here.

All right, so there’s some extra extra sections in here. I had him go ahead and remove some of these sections. But it looks like he’s left the row and the rows in here. So I’m gonna go ahead and remove that. It’s just an empty row inside of this above section. That’s what he did. He removed the rows by hitting the trashcan here, but he didn’t remove the section itself. Probably because it was part of this other section above. How’s this view Schedule button? wrong color. Now I’m down to The bottom. And there’s one other thing right here, this is set to be a video. And we don’t have videos ready for this location yet. So what we’re going to do is change it to an image instead of a video. So this module is a video module.

And you can just put the link to a Vimeo or YouTube hosted video in there, do not host videos in your media library and stream them from your own hosting account. That’s definitely not a best practice. And so you wouldn’t want to add the video add, you know, upload it to your media library. Very bad idea. So always just go ahead and use the URL. If it’s a URL, you know, YouTube, or even a Vimeo video or any mp4 file that you have hosted. If you haven’t hosted at Amazon or somewhere else know how to do that, that’s fine, too. But we’re going to take this, actually, we’re going to take this video module and replace it with an image module. So I’m going to hit the plus sign at the bottom and add an image module. Just below, and I’m gonna choose the image. I forget which one it was.

But I’m looking for one that’s more square. I think it might have been this one. Let’s see how big do I want it, I don’t need it full size in that parts, let’s just use large, probably 300 by 300, or 300 by 200 is a little small. Let’s just go ahead and use this one. Well, it was a different image. But that’s okay. As he’s got the one smiling at us down at the bottom there, oops. Whenever I right click, it gives me that contextual menu over there. And so let’s go ahead and save this image module that I just inserted here. And I’m going to go ahead and just save this module to the library. Now, what’s interesting about these video modules is that it’s got an image with a nice play button, that you can choose what the image thumbnail is for the video. So that’s a really nice thing about Divi video modules. So I just hit the little trash can bring that one up here, if I wanted to crop this image in the media library or upload one that is square, it could look more like the other layout did.

And so, you know, I might do that because we are using square images. Let me just show you quickly. If I go back into the media library, I’ve got the WordPress Dashboard open in another tab, as you can see. So if I go down and edit this image. So what do I have here? Here’s two two versions, a 1200 by 800. Oh, no, that’s not the same image. There’s a vertical version. And there’s this one, right? Okay, so those are two different. These are two different images. Obviously, now that I look at him, they are is this one square? Nope. So here’s what I’m gonna do. Let’s see, what’s this one look like that’s the one I liked on there. And so I want to leave these available to me, I’m going to take the one that we were using for that video thumbnail. And I’m just going to copy the URL. And I’m going to open another tab in my browser and paste it. And now I’ve got the full size image. And here’s the URL to it. So if I just save this image somewhere on my computer, I’m going to go ahead and show you how I would do this. In real life. This is real life. So I’m putting this into the place where I save all my client work under the name of the website or client under images, and I’m just going to save it as its own file name. Alright, now that I saved a version of that to my computer, what I can do is go back into the media library and upload it as another version of the same photo and then crop it. So I’m going to select files.

Let’s go to flow coaching again. You’re looking at me like it’s right there. Okay. And so here it is. I’m going to click open and upload that. To the Media Library Of course it’s right right there. Nice. Okay, now that I’ve opened it up, I can edit image inside the media library. And there’s a number of different things I can do with it. So I know that I want to crop it. But I want the aspect ratio to be one to one that’s a square. And so I’ll select one to one, and then I’ll go to crop. And I’ve got my little little handles here. As soon as I start dragging it, it’ll show me only square. So I’ll go to the full size there, then I’ll drag it over to here. Yeah, I think I’m just gonna crop it like that. And then you hit the crop button. And now that shows me my results. And I can hit Save. Now I have a square version of this image. Let me just close this uploading section. And let’s open it once again.

It says 801 by 800. It’s just not showing me right now. But it is a square image almost. And one thing you can do is if you’ve changed an image and you want to get the original back, you just open it up there it is in the right shape, just open it up and go to restore original image. And it’ll discard your changes. And so I’m not going to do that. But now that that’s in the media library, I can go back here. And let me see, I may have to exit the visual builder and then open it up again. It’s also 800 by 800. So anyway, save that, oh, there it went. Now it’s bigger. And I’m going to save the page finally. Okay. All right. That’s it. So now that I’ve saved that I can exit the visual builder.

Nice. Okay. Next, the about page, let’s go to the About page.

The URL, if you look here is just a random lead generated permalink or URL that WordPress chooses for you if you don’t choose a name for your page before you save it. So Chris created this page and didn’t create a title for it. So what I’m going to go first before opening, the visual builder is go into pages, all pages, and I can change the permalink of this page here under pages. If I look at about see as it’s, it’s created with Divi, it’s got that little Divi mark after the title. But I can still go in here and edit some things about this page, just not about the builder. And one thing you don’t want to ever do is click Return to default editor because that’ll it’ll, you know, erase all of your Divi created content. You can get it back with revisions, but it’s just a pain. Don’t let clients hit that button.

And so I warned Chris about that. But you can see the URL slug under permalink. Here is just a number. And so we want it to be is the word about for SEO, and for good search engine optimization. Let’s do that. So then I hit the W to get back where I was in the WordPress dashboard. But let me also show you here when I am in the visual builder, oh, this page probably doesn’t even exist. Now that I changed the name. Yeah, so let me go back. This page is about that that’ll change. Let me do this. I wonder if I go to back to home. Now that I’ve changed that pages URL, this URL should work right about okay. So it’s flow coaching.com/about. And if I enable the visual builder, which I need to make some changes on this Divi designed page. Alright, great. So what do I have to do here, I changed the URL to about I remove, I need to remove the left border from the quote, right. So it looks like it is part of the module.

It’s a blockquote. That’s why. And so if I turn off blockquote that is a blockquote style that’s built in to the text module. And it’s defined elsewhere like in the Divi Theme Options, and maybe under the customizer, and so I just had to turn off the blockquote setting for this h2 Heading and it removed it there. And so I just hit that to save the module and then save the page. Here’s a couple of extra rows, that wording needs to be changed to. So yeah, here’s a few extra rows. And how big is this section here? It might go down to the bottom. Yeah, down to this next section. So I need to remove this section. There we go. And yeah, is this the right color? Let’s just make sure that it is for an h2, heading text, h2, the heading to text color. Oh, let’s make it the global color. Think just to make sure that if I change everything later, that’s going to be included.

And I would do the same with all these. These should already be the h2 global, but if they’re not, I’ll change it. Yeah, this one’s not either. So that’s something good to, to check. Okay, so the button, is this rollover, correct? Nope. There’s a few more notes for things I need to change. And we’ll get this long video over with. So let’s see the line height. I think he changed the line height. This used to be really squeezed text. And we went in here under design. And I showed Chris How under Text, you could go here and change your text line height, he used 1.9 M. But if you just slide it a little bit, I think what we had was the original. You know, if I hit refresh, yeah, it was down at 1.7. That just doesn’t look as good. And on the site as a whole. We’ve got it up to 1.9. So Chris went ahead and changed that. So I can check that off my list. CTA button. Yep, the button hover. And there’s another video to image change that we need to make here. Awesome. I think that’s my last change on this page. Yep. Cool. The last thing is on the blog page. Oh, let’s exit the visual builder.

Let’s take a look at the blog page. So ah, okay, I see, let’s just enable the visual builder.

I want to remove news. And I want this to be flow coaching blog. You know, you don’t always have to open up the module itself. If you’re just editing the text, you can just click within the text somewhere. And you’ll get a little, you know, a couple tools up here for editing text. And you can also type new texts. So this is going to say flow coaching blog.

Great, and if I just click outside of it, it’ll save that. And of course, if I do open up, you can see it’s changed it here too. So you can change it anywhere. If I go in here, even with that open, if I change this to Greg, you can see that it changes it down here at the same time. So you can change it either place. Alright, let me just save that. And how’s this rollover? Oh, that’s an interesting one, it has a gray, let’s make it the same, same as everywhere. The button hover is going to be a global transparency of the original color. Perfect. I do like that, the way that looks better. And so I’m gonna, let’s see the next thing I want to do.

Alright, what we’re going to do is just add the featured images to these blog posts, so they have a much better look. And so I opened up the blog module, and we’re gonna I think I want to close content and look at elements. Yeah. So I want to show the featured image for each of the blog posts. Much better, much better. Great. I think that’s all I needed to do. Let me open this and click Save and just take a look at my list. Again. He wants a subheading. Right here, you know what I’d like to do. Right here I want to just open another tab with the site and look at what I have for Okay, for sub headings, for instance here. So I just opened the homepage on in a different tab so that I could grab a subheading and have the same design style and everything and so on. What I’m going to do to make it easy on myself is just, you know, open up another page, this homepage in the visual builder. And come on, here we go.

So let me look here at the subtitle designed. subtitle text is lotto bold. In 30 pixels, it’s all I need to know. So I’ll just go back to here. Oops. And I’m going to add a Text Module just for now, and I’m going to make the text you know what, that’s a sub text. So in fact, I want to make this an h2. To use proper semantic organization for a webpage, you want to have an h1 followed by an h2 and then any text or anything as body paragraph text. And so I’m going to go to header text and heading text and H twos are going to be lotto

and bold font weight and 30 pixels. There we go. So then let’s go back to content and he wanted to say don’t miss a blog post.

Nice, I’m gonna get rid of this little bit of space. So below this text module is see how if I roll over, I have a gray highlight and an arrow up and down. If I hold the mouse button, and just drag that up, I can reduce that margin or padding depending on which it is to what I want visually and just leave it that changes the numbers inside the module without me having to do anything. All right, so let’s exit the visual builder. And in the next segment, I’m going to be going through and oh, you know what, I want to put the background image on this too. Lastly, we want to have that background image instead of just a white header here, it’s actually a little bit gray. I don’t know if you can see that. But I’m gonna go ahead and enable the visual builder again, and make this the last change of the video

by making the background of this section the image that we want, okay, it has a gradient. And yeah, it does have a gradient. There’s a Oh, it’s basically like a gray gradient, you know, so I’m going to get rid of the gradient. And I’m going to add a background image. And it’s going to be this climbing image. Nice. Obviously, I need to change the heading and subheading to white text. And so let’s go ahead and save that section module and move it over to the right to. And so I have to do all three of these differently because this is not a full width header module. This is just a regular section that we’ve built a full width header by using a background image. And so what I’ll do is go first, let me see if I can just take the section, it’s a single column. And now I don’t think you know, one thing I could do is make it a two column layout. And just have you know, have the, I probably is the way to go to be honest. I choose a column that looks like this. And then if I move all of these modules into the right column, take and drag this one over to here drag this one below. Drag this one below. All right, now let’s just justify this to the right.

Heading Text in this case, it’s an h1 and let’s just To fire to the right.

Perfect this one is an h2. So it justified that one to the right. And then the button the button design Oh, actually, it’s alignment justified to the right. Okay. While I was in there in these modules, I should have changed the text color.

So the h1 Not only is it justified to the right, you probably saw that I was doing that but I just want to change it to white you know what else is funny? It’s got a all caps. That’s it’s got a another styling of the text. Yeah, it has this not all caps, but we call that initial caps. I think that looks better. Okay. I don’t know if I hit that by accident or if Chris did that. But let’s look at the final thing is this h2 to white? There we go. And this rollover is good. Yeah. Finally. All right.

Well, you had to endure, watching me figure some stuff out on the fly. But now I’ve gone through an entire process that took however long that took 3045 minutes to do all the changes that we had discussed in our phone call a few days back. And so I appreciate you tuning in. If you lasted till the end of the video. Kudos to you. I really appreciate you tuning in and learning with me. And this is flow coaching site. I’m excited to finally take live and have all the backend systems work. And I’ll show you guys that in the next few videos. Thanks for being here.