This is Part 2 of a three part series of tutorials teaching you how to build a website in less than an hour with Divi, WordPress, and Mozaic Platform. Enjoy
Text Version of the Divi WordPress Tutorial
Hey everybody this is Jimi Blevens and welcome to Part Two on: “Building A Site with The Mozaic Platform.”
Alright so now that that’s finished, I’m going to close out of here and then we’re going to go into our “Divi Library” and import the layout for this homepage. So, I’m coming down here to my Divi Library. I’m going to “Import A New Layout.”
I’ve got this JSON file here, home page number one, and this was put together by Elegant Themes. (Some layouts that they had specifically for Divi.) I’ll add a link to that in the comments below so that you guys will be able to get to that and grab these layouts. Okay so it looks like everything imported alright, we’ve got that in there so now let’s go start building our pages.
Let’s click here on, “All Pages”. Of course they always kick us in with a sample page, we’ll just throw that in the trash quick. Click here on “Add A New Page”. I’m just going to call this page “Home”. Then I’m going to click on “Use Divi Builder”. From right here we want to click on “Load From Library”. There’s our homepage one that we’ve got, we want to load that up. There it is, it imported all the images and put in some graphics there too which I’ll show you in a second. I’m going to have to publish this so it’s saved.
Okay so now let’s jump right into the Visual Builder, and then let’s go ahead and set this page up. So, you can see everything that’s loaded in the Visual Builder shows us the page, great template. The first thing that I’m going to do though is, this top section, I’m going to change that out because it’s a full width slider and I don’t need a slider because I’ve only got one screen. I’m just going to go with a regular section instead of a full width section. Just a single row, and then let’s come in and change this. So, that’s the first thing we’re going to do. (I like to have this snapped over to the left so I can see what I’m doing here with the Visual Builder settings and then I can see my changes right here.) The first thing we’re going to do is change our background image. That’s all we need to do there.
Then we’re going to come in here because for some reason I chose two columns, I just wanted one. We’re going to add in our graphic. So first, let’s put our logo in there, so we want to grab our image module. Here’s our logo. I put a little bit of a shadow on it just so it would stand out from the background just a little bit, it was getting lost. I want to do a top to bottom animation with it and I want it centered.
The next thing I’m going to do is, I’m going to add another row right below it, put my buttons. I’ll come back and show you where this URL is going to go. For right now we have “About Us” and I’m going to center it.
I want to come here into the “Design Settings” and we’re going to use some custom styles for this button. What worked out I think was 17px for the button size, text color white, background color we’ve got this blue already set up in the palette. I don’t want a border so I’m just going to set the width to zero, and the radius I had at seven pixels. I don’t need a special icon for this. For the background hover color, I was using this dark blue. Looking good. Looking good.
The last thing I need to do is a little bit of a style cheat and I’ve got that over here in this text cheat. I like my buttons to be a little wider and I also change the padding on them, to make them a little bit bigger. You see I want them to be taller, so I put this padding of 1vm on the top, and then zero on the right and left-hand side. Then I change the width to 100% so the buttons going to stretch out in this column as much as it can.
One last little thing I forgot in the Design Settings, to change that font to bold, and then that’s all I need to do to this button right now. I’m going to go ahead call that good. Then to make it easy, I’m just going to duplicate the button and drag it over to the next column. Another time saving thing so now I don’t have to go in and completely recreate it, it’s already there and already styled for me. This one is “Apply Now.” This button is going to go somewhere else, it’s going to send us off to another website. It’s the link to their commercial energy division and I want to open this in a new tab. I’m going to change the icon as well to this arrow to let people know that they’re being taken off-site when they click on that.
I’m going to duplicate this button again, drag it over, this is going to be our “Contact.” Alright one last little setting, first let’s get rid of this so it’s no longer the top of our homepage, this is the top of our homepage. I want it to fill the whole screen so I’ve got one last little thing I want to change here on the Main Element. I want to change the height to 100 vh. By changing that to 100 vh, I set the height to the vertical height of the browser window.
Now that I’m looking at it, I think I want to add a little more padding to the tops of these. I’m going to come back in here to my “Row Settings.” The top padding I think I set it to 5 vm, maybe a little bit more, let’s bump it up to 7 to spread it out a little bit. Now when somebody comes to the homepage, here’s the first thing they see.
Moving on down to the next section, this section I didn’t really keep anything in it. Didn’t really work for me, so I’m going to go ahead and blow all this out right now. In fact, I’m just going to get rid of these rows, make my life easier. Okay so let’s jump in here to the “Settings,” the only thing I changed on here is I had a black background, then added in a two-column section. First column and image is our introduction to Crenshaw Energy Consultants, then I had some text from the other side which is this text right here. Going to go ahead and add in a “Text Module” and then we’ll paste our text into the text field.Change the color to light so it shows up. Then on these, make them carriage returns. All these I made a heading, there’s a heading tool. Actually, let’s go with Heading 1, this will make my life super easy.
When I come into design, I change the header settings right, and I’m going to bump this down because I don’t need it to be that big. 24 should be good, also want to make it bold. Heading font bold. Make it just a hair smaller. Then I do want to put some custom padding on the top because I’d like it to line up with the logo a little bit better. Let’s try 5 spaces so when it’s on the 10, yeah that looks good. That section’s done. One last thing I want to change about this section though, it’s going to be our “About.” So here in the ID I’m going to type “About” and save that. Then scroll back up here to my button. I’m coming back to this button URL and if I type “About’ into the button URL, what that’s going to do is signal that when I click on this button it jumps to that ID or jumps to that setting or section.
So, this next section, is where we had the little beach image behind so I’m going to go ahead and pop that on there first. This guy is totally just relaxed and in his freedom. I believe I’ll just leave the custom padding wear it is. Okay so next thing we need to do, is get rid of this. We’re going to change the settings on here because I put in a little bit of a white background, just so the text is easier to read. Dropped it down to about forty percent. You can still see the image through it and the text will show up. Coming in here to the “Text Module,” I’ve got some text for this. Let’s see I have one, I believe this was about a heading, heading two. Okay now come into the “Design Settings,” set that back to default. Then the “Header Font Size” make this a lot bigger. 62 is what I ended up going with. Make this easy for yourself. I come in the “Design Settings”, I got a 62-point font for my default. I’m going to set this to the red color, dial it down quite a bit so it’s more of just a subheading. 25 pixels is perfect.
Move into this next section here. I’m putting some text, this is the text I had for this section. Text color I’m going to clear out because I want it to be a little bit darker. Make the text a little bit smaller, about there is perfect. I’m going to divide up these paragraphs a little bit better. It looks like the template gets rid of the padding here at the bottom. (I don’t think that’s in this particular, yeah because we got a top but we don’t have a bottom. I think that that might be in our Row Settings.) There we go. Let’s make that the same on the top and the bottom. One last thing we’re going to throw in here is a button, a big red shiny button.
Go ahead and turn on “Custom Styles” for the button, button background color I picked this red. Just a thing of mine, I really don’t like borders on my buttons so I get rid of that right off the bat. Give it just a little more of a radius, I like it a little bit bigger. Perfect Okay so I’m just going to pop over here and look at what I’ve got set up compared to what I’ve done before. We are just recreating this website. Good, looks good. Looks like I had quite a bit more room above and below this, that looks like I got rid of the margin altogether. So, let’s do that. Coming in here in our section, we’ve got to get rid of our padding. In our row, our row will sometimes have a default margin. You get rid of that as well. Let’s also bump up this, to about 120 pixels. That’s about where we were at before.
Now that’s just going to give us a little bit more space, it is totally okay in a website design to have negative space. With the Divi Visual Builder you’re never going to be able to completely get rid of this while you’re in the “Visual Builder Settings”, but you’ll see once we save it and view it on our live testing site it will look more like this where it lines up with the edges. For right now this is good enough, close enough for us.
Hey this is Jimi Blevins again wanting to say thank you for getting through another tutorial, Part Two: Building A Website with The Mozaic Platform. If you like what you see and you want to learn more information about Mozaic, visit us at mozaictech.com and we’ll see you in the next tutorial.