This video is part 3 of 3 and it shows you how to build your very own website in less than an hour! This is fast and easy to follow when doing it yourself.

Text Version of the Divi WordPress Tutorial

 

Hey, everybody, this is Jimmy Blevins, welcome to part 3 of building a site with the most day platform.

Down in the next section, this where we have the energy freedom project information. This isn’t too much different than what we’ve already got going on. I just changed the background color, to that darker blue. Over here, get rid of this text and add in an image. I’m going to swap out this text over here. We can get a couple blocks, so we get rid of one and only have one to mess with. This is this text right here, and if you’re noticing, a little bit of setup really goes a long way.

pic1

Just need to find, ‘do you make money.’ Highlight this and click the font and make it a little bit bigger. After you do this, then, I actually added another low underneath and then you’re going to move the sliders into it. Looks like I’ve got a serious margin and padding going on here. I want to change that, its 132 pixels on the bottom, change that to 40 pixels. Actually, we can just get rid of that all together. Then we can see what I did with them, ‘passion, ambition and pure adventure.’ In the next one, I think I called that ‘ambition.’ That was 90%. The last thing I want to do here, is to clean up some settings. Seems like whenever I work on these bar counters, the settings get blown out a little bit, so I want to bump this up to 16. It’s not identical to what I have over here, but I can jump in the settings and look, but actually, I kind of like it a little bit bigger and the bars going all the way across. So that section is done.

The next section that we’ve got on this forum is a little application here, and I got this application from the energy freedom project website. Why reinvent the wheel if it’s already been done. So in this, it’s actually part of a multi-site silo. So the easiest way to do this is, is I’m going to bop out of the visual builder real quick because I’ve got the form exported in a JSON file. Then I just need to pull that in. So we’re going to go to forms, import/export. This is how we’re gonna pull the form right here into gravity forms to use on the website. Click here on import form, that’s going to give me the ability to choose a file, and I’ve got it right here, this; gravity forms export JSON file.

pic2

Go ahead and import that in, it takes a couple seconds. It’s only a 6k file, then when I click here on forms, you can see the joint now is in there. I’m not going to get into the settings, I’m going to do another tutorial on how to build gravity forms. But for now, for these websites, that’s how you import it. So now I’ve got a gravity form all set up and ready to go. What I want to do now is jump back into my pages get back into the editor for the homepage.

Let’s get down here to our section where we’re going to be adding this form. I’m going to go ahead and edit this action, grab the text straight from the web page. Just paste it in here. Make this header on here just a little bigger, change to 36pixels and make it bold. It’s a little dark, but I’ve got another text color. Just switch that back to the default setting for the header. Move that out and get rid of this client header. Get rid of this row down here, and then I’m going to come in and I’m going to add another text section. Then you will notice the forms with the ability to add a gravity form isn’t here. So what we’re going to have to do is, I’m going to close out of this really quick, we have to save this, then we’re going to jump back into the back-end builder to add the form in.

pic3

Click here on edit page, scroll down here, you can see here the gravity forms button is there. Grab the form and disable it. It has a description and the title, but I’ve already put that on the page. I’m going to update that and then we can jump back into the visual builder once that reloads. See our form filled in there perfectly. The last thing I want to do is just change and get rid of this background image. Now we just have a white background on this section. Then the forms show up pretty well. This is actually again where we’re going to come in here to the CSS, and then the idea, we’re going to put ‘join’ and save that.

pic4

So now that that’s set up, I can come back here to my ready to start button. You can set this up beforehand, I just wanted to show you guys after the fact, so that you can make the connection. So if I type this (#), pound or number sign- join, that’s going to make the link jump to that section, and then I want to come up here to apply now button and go ahead and make that change really quick. Those are all set up. I’m going to go ahead and save the page. its always a good idea to save often and save early. We’ve got a couple more sections and then we’re done.

pic5

We’re going to pop in a full-width map, and you can see here we still need a Google API key. So really quick, the easiest way to do that is to Google, a Google Maps API key. That will jump you right into where you need to be. Now for setting this up for a client, you may want to actually use their Google account to do so. Since I’m just doing this in the testing website, I’m going to link this to my account, so here we go get a key. it’s pretty simple to grab your key right there and finish it and that’s going to set up your website. So two clicks in, we get our API key. We cannot put the API in here though, so what I’m going to go ahead and do, is we just saved, right? So we’ll go ahead and drop out of the engine builder, go ahead and save and exit. Getting here into the dashboard, and then we want to come to the Divi theme options. This is where we’ll actually put our API key. Google API key, save your changes and then jump back into the page with the visual builder and we’ll finish it up. So we’re back here with our full-width map section, pop back here to the settings and you can see our API key is there. Alright, let’s go ahead and add our item in. Our address, you’ve got right here and in our text document. Just paste that in there and click on find, and then the Google API will find it for you. As you can see, we actually do still need to center the map, so we just put the same address in there, click on find and then it’s going to show up and then it’ll show here so you know what the visitor is going to see. I like to zoom out just a little bit, so people can kind of see general area of where it is. I’m going to disable the zoom and the draggable. I do want to put a title on this, that will set everything up for the map.

pic6

pic7

pic8

Now we have one more section left to go over. It’s a regular section with one column, actually, this is going to be two columns. In our settings we can see that it’s dark blue again. I’m going to go ahead and add that logo image in on the side, and on the other side we’ll go ahead and add in a text module and then we’ll copy and paste the contact information from the document we set up. Just space it out a little bit better. With the text color we want it switched to light. This is actually going to be an h2 tag for each one, then I’m just going to fold these so that they stand out a little bit. And I think I might have actually had the default font, yeah the font size is quite a bit bigger, so we will come into our design settings have the font a little bit bigger, and the text a bit bigger too. I just remember i selected an h2 tag for this, I’m going to jump back into the general settings and switch this to an h1 tag again. Then we can edit all the settings we want.

There’s a little bit more padding over this, so it lines up with the logo. Kinda like we did up at the top of the other one. I’m just going to put custom padding, we’ll go with around seven. Perfect. And on this one there’s a little bit more space above and below, which i think I’m going to leave. You can see I made it a little bit shorter on the other side, but I kind of like the extra space. One of the last things were going to do, and we’ll jump back in here, this actually wants to be our contact link point. We’re going to type contact in the ID field. I’m going to scroll back up here to the top, because remember, we’ve got this button here, ‘contact us’, we need to link that up to contact. Now our button is going to jump right to the contact section when somebody types it on there. I’m gonna go ahead and save that.

That pretty much takes care of everything we need to do, to get the landing page setup. There is one last final step we need to do, and that is, set up the menus and then we’re actually going to redirect it and tell the website where the home page is. But as you can see, the page, it’s done, it’s set up, it looks great. So we’re gonna pop back into the dashboard. go ahead and tweak a couple more of those settings. Let’s drop down here to appearance and menus and we’re going to build the main menu for our site. I usually like to call them ‘MainNav’ or ‘Main Navigation,’ something along those lines. These are all going to be custom links that we’re going to add in. Our first one is, ‘our about,’ just use the hashtag about us (#aboutus), and the second one we want to be, is our ‘apply now’ button, which we had tagged as joy. Our third button is going to go to that other website, EFP now energy, commercial energy is the text, and that’s when you can add contact link.

pic9

There’s one thing that I like to add to the site, especially if they’re going to be viewed on a mobile phone a lot, I like to put the link to the telephone number in. That’s really easy, just need to grab a copy of that telephone number really quick, jump back in here. So how to do a telephone number is to do the URL is TEL and the colon and then the telephone number. You want to get rid of any special characters so it’s just the 10-digit number. What this will do is, if somebody’s on a mobile device, they click this link, it will actually kick them right over to their phone and drop this phone number right in there. So they can just click on the call button and they’ll be able to get in contact with you. It’s a great thing to add to your responsive sites, especially if they’re going to have a lot of mobile traffic. Most people when they go to a website on a mobile device, the first thing that they’re going to want to look at or to get in touch with you is a phone number. To finalize this, we’re just going to click here for display location, this will be our primary menu, and then we’ll save that. And what that’s going to do is replace that top navigation on the website with these links here.

pic10

One last thing that we need to do is come into settings and reading and we need to tell WordPress what our home page is. Because by default WordPress setup to display your latest post. Kinda like put your blog on your homepage. We want to change that to a static page. So we could click here on a static page, select our homepage, save your changes. I think that pretty much covers it. Click here to visit the site in a new tab really quick, and then it should drop right into our homepage. There’s our website and our about us information. Make sure that our buttons are working, yep that one jumped right to the form, got our contact information now and everything is set up and ready to go.

pic11

Well, I hope you enjoyed this tutorial and I hope you learned something. And that’s how easy and simple it can be to set up a website on the mosaic platform. Once again my name is, Jimmy Blevins, and thank you so much.

Let's Get Started!

Enter your email address below to begin setting up your account.

You've completed the first step!

Connect With Us For More Epic Tutorials And Blog Posts

Connect With Us For More Epic Tutorials And Blog Posts

Accompany us on our journey of creation, design, and inspiration worldwide. 

Connection Successful... Welcome To The Wonderful World Of Mozaic Technology!