Build a complete 1 page website in less than an hour using WordPress, Divi, and the Mozaic Platform. Jimi Blevins walks you through everything from start to finish covering every step along the way to launching a new, single page website.
Transcript for the Divi WordPress Tutorial
Hey everybody this is Jimi Blevins.
Today I’m going to show you just how easy it is to build a website using the Mozaic platform. This is the website we built for one of our clients. I’m gonna walk you through how I built this starting from scratch. You can see just how quick and just how easy this can be. This is just a simple one-page website. We broke out all the information so everything is displayed on your home page. It works for mobile, works for tablets great. Essentially, if you click on any of the buttons, it just takes you to a different part of the page. You’ll get information about their company, also got a form for people to apply now for employment with them, and then it’s got some contact information at the bottom. This is really all they needed, a really simple, straightforward but still elegant, professional-looking single page website. Let’s dive in and get started. The first thing we’re going to do is come into our dashboard and jump right into our “Theme Options.” So we’ll go to Divi, and then Theme Options, and we’re just going to set up our general options right now.
So we’ve got to put our logo and our Favivon in the website. Just something that’s going to save time down the road, I’m going to go ahead and upload all of the image files I’ve got for this webpage. Okay, so it looks like everything got loaded up, even the color palette, don’t need that we’re going to go ahead and delete it. Then we’re grabbing our logo, got the logo right there, set that up as our logo, got the Favicon in there. Alright, next I want to set up my default color palette.
This is going to save me time putting the website together because I’m gonna define these colors and they’ll be wherever I need them. I can just grab them straight from the palette. So if you saw from the client what I got was this, which kind of laid out a couple different colors, got your white black and I’ve got three colors for the palette, so that’s fine. I’d like a couple more, so i’ve been using this website coolers.co, and this allows me to create and save color palettes for websites. So what I did is, I plugged in you know, the blue, the green, and this yellow orange color and then I wanted to grab like a darker blue and maybe with maroon color. So what you can do on this is, you can lock in the colors that you want to keep and then just hit the spacebar and it gives you kind of a random color that fits that color scheme that you can use. This is a great tool, feel free to play around with it. I just use it because it’s a really quick and easy way to get a color palette together. So I’m going to go ahead and add these in, now my colors are loaded into my palette.
The last thing I want to do while I’m on this page, I’m going to put in a facebook profile URL (which I’ve got a text document here with all my information for my client) so it’s there for me. Then that’s it, I’m going to go and save these changes. That’s all I’ve got to do to take care of the Theme Options for this website.
Now the next thing I want to do,is come in here to the Theme Customizer, this is going to allow me to really dial in some of the settings that I want on this web page. Alright so the first thing we want to do is start with our Header Navigation. I want it, I think I knocked that logo max height down, about 42. Okay, so my text color I picked this green for my links and my header. The background color I’m going to select black, but i’m going to make it about fifty percent. Got my drop-down menu line, which I’ll go with the green again. Drop-down menu is fine, animation is a faint. Okay so that’s all I need to set up for that, I’m going to save that really quick.
The next thing I’m going to do is go into my Header Format, and really all I want to do here is Hide Navigation Until Scroll. What this will do is, when somebody comes to the homepage there will be no navigation bar here until they scroll down. That’s about all I need to do for that. Come in here to the footer, I’ve got a little bit of code here for the footer that I’ve already got from the other website. It’s just some simple HTML with a couple links, nothing too fancy just really simple and easy. What this does is change the text down here so it says, “Powered by Energy Freedom Project, Designed by Mozaic Technology.” That way it doesn’t say, “WordPress,” or “Elegant Themes,” there at the bottom. Let’s save that and that’s everything that I need to do.
Hey everybody, this is Jimi Blevins. You just finished part one of a three-part series on how to build a website with the Mosaic platform. If you like what you’re seeing, or you’d like to learn more about Mozaic go ahead and visit us at mozaic.com and we’ll see you in the next tutorial.