How To Make A WordPress Website 2019 | Divi Theme Tutorial
Articles,  Blog

How To Make A WordPress Website 2019 | Divi Theme Tutorial


All right.
Welcome back everybody. My name is Darrel,
and today I’m going to show you all how to make this amazing
and beautiful WordPress website, step-by-step,
using the DIVI theme. For those of you who
are brand new to WordPress and you really want to learn
how to make a website, this is the tutorial for you. Now, let me give you all
a quick tour of this website and show you what
we’re going to be building today. Right off the bat, you guys
have noticed these colors are vibrant. They’re beautiful.
It really gets your attention, right? So, this is the website
we’re going to be making today. As you guys have noticed right here, we’ve kept these colors
a little consistent. It’s a really clean website,
really professional, and it’s a very modern style website. You guys have seen my past tutorials, so you guys know
that I focus more on design. Design is everything,
guys. People truly buy images,
content, and position rather than
your actual product and services, right? It’s really true. So, let me give you guys
a quick example of how this page works, in case you have never
used the DIVI theme. So, this is the current website. Let’s just say you’re brand new
and you want to go ahead and say, “I want to take this image
and put it over here. Then, take this image
and put it over here.” Maybe right here, you want
to change the text to something like; Study Paper,
right? It’s that easy to make changes
to your website. Right here,
for example, I’ll go ahead and say,
“I want more space here.” So, I can just drag that down. Then, right here, maybe I can just put
that down a little bit. There you go. So, this is how you make changes
with the DIVI theme. It is super easy.
Anybody can do it. In this tutorial,
I’ll show you how to master the DIVI theme,
and also master WordPress itself. So, let me give you all
a quick example of the other pages. This was the homepage,
but in this tutorial I’ve stepped up a notch. I realize that YouTube is competitive,
and I really want to provide the best. So, I’m going to do the Home,
the About, the Services,
the Portfolio, and the Contact page. So, let me show you all the About Us page. As you guys have noticed,
I’ve kept the colors and the scheme very similar. It looks really professional,
really clean because I want you guys to walk away with a very good looking
and professional website. So, this was the About Us page.
It looks pretty good. Now, let’s check out the Services page. So, this is our Services page.
It’s just a very modern design. You guys can see by yourself.
I don’t really need to say anymore. You guys can just look at it and say,
“This does look pretty good.” It’s so easy to make these websites
with the DIVI theme. That’s why it’s the number one
rated theme on the market. It’s so easy. So, this is the Services page. Then, here we’re going to do
our Portfolio section. Right here people can check out your work, they can go ahead and click on it. If there’s something here,
they can say, “Okay, cool.
Look, all these pictures.” All this stuff right here,
they can go ahead and look at this stuff. Also, you can talk about your project. Now, this can be anything.
It can be a blog. I mean,
it’s limitless, guys. You can, virtually,
think of anything to put there. So, that was the Portfolio section. Now, let me show you all the Contact page. So, this is the last section.
It’s a Contact page. It’s a very simple Contact page. We have a full-width menu right here, where you can go ahead
and put in your address. We have some text right here. Feel free to say,
“Don’t be shy.” The contact form is there
and we’ve kept the colors. It looks really clean,
really professional. This right here is a universal footer. So, instead of actually redesigning
the footer and doing it all over again, with this theme we can save it
and just load it on different parts of the website,
guys. So, you’re going to save
tons of time using this theme. I’m going to show you how
to master the premade layouts, and also how to upload your own. It’s very simple. So, going back over here,
we’re going to go to our homepage again. I want to show you guys the basic website, kind of just scroll down
and give you an example of how this looks as a new visitor. It looks really clean,
really professional. It’s super mobile responsive,
SEO friendly. Here is the footer again. So, guys,
this isn’t a standard footer. Now, we’ve actually taken a step further and kind of created our own footer
with the DIVI theme. I’ll teach you all about
this in this tutorial. I’m actually one of the highest rated
instructors on Udemy. I’m known for teaching DIVI because I feel
that it’s just an amazing WordPress theme. Everybody out there
should learn how to use it because it is so easy, okay? So, if you guys have liked
what you’ve seen so far, go ahead and give me
a like and a subscribe. Now, let’s go ahead and start to create this amazing WordPress website,
step-by-step. So, I’m going to get out my Notepad, and we are going to follow
these simple steps in order. So, first we’re going to get
our domain and hosting. You will also receive a free domain and the largest discount available
TMDHosting has to offer. Next, we’re going to install WordPress,
then we’re going to get the DIVI theme, then we’re going to create
this amazing WordPress website. The best on YouTube.
That’s a self-brag, but that’s just what I think.
I don’t know. So, go ahead and click on
the link in the description, guys. It will take you to tmdhosting.com. It should take you to a page
that looks just like this, right here. So once you’re here,
go ahead and click on Get Started. TMDHosting provides SSD hosting, which is currently the fastest
hosting available. They also give you a free domain
and a 60-day money back guarantee, in case you chase your mind. So, they are a very reputable
and trusted company. Here we have three options. Guys, just do business. I’m just going to tell you to do Business, because with a business plan
you get unlimited domains, rather than just a single domain. It is a very large difference
for a very small price. So, right here I’m going
to click on Sign Up. Go ahead and put in your domain. I’m going to put in
my infamous one I always put in here; ilovekyloren. I think he’s going to be a good guy. I think Kylo Ren is going to turn
into a good guy later in the series. I don’t know.
That’s just what I think. All right, cool.
It’s available. So, right here go ahead
and put in your information. Go ahead and put in your first name,
your last name, your social security…
I’m just kidding. Not your social.
They don’t ask for your social. Everything else right here,
go ahead and put that in. Right here,
you can pay with credit card. If you have a PayPal account,
you can pay with PayPal. I pay with PayPal a lot. Right here we have the data center. So, they actually chose the center
closest to you automatically. We have a period right here. So, we have one months or 12 months. Then, right here we have
the domain privacy protection. So, what that is, that actually hides your
personal information if somebody tries to search you. Now, I have a coupon code that will save
you a large amount compared to one month. So, the coupon on the code I have
is actually 7% off your entire plan, rather than 5%.
They’ve actually upgraded it. If you do 12 months,
you’re going to save more money. So, let’s just say you don’t want this,
we enter the code DARREL626. I live in the 626 area code.
That’s kind of where I got it from. So, right here I’m going to
click on apply. You’re going to see the price drop
from $82 to around $76. This will give you 7% off
your entire purchase. So, if you just do one month,
you’re not going to save much. For a year of hosting and a domain, that is probably the most competitive
price you will find on the market. So, go ahead and fill out
all this information. Once you’re done,
click on I Agree. I’m sure you’re going to read
their terms of service. Right here,
go ahead and click on Checkout. I will actually meet you on the portal
because I have an account with these guys. So, I’m going to go over here,
I’m going to log into my account. There we go.
I’m going to go ahead and log in. That’s like a BETA thing. They’re trying to do some
new portal BETA thing. I think a lot of companies are starting
to follow the same exact style. I know HostGator has. So, this is your dashboard. Once you’ve done all your information,
it will bring you to this page. Now, I should probably pay this invoice
because they’ve been nagging me. So, once you’re here,
you’re going to go ahead and scroll down and you’re going
to go down to your cPanel. Right here,
you’re going to click on this, which was your account that you made, and simply click on Log In. This is the cPanel.
They’ve actually changed a little bit. They’ve made it very modern,
very hip, very friendly,
very easy to use. Before,
it was not the best. Now, it’s a little bit more user friendly. So, all we need to do
is go ahead and scroll down. We’re going to use the App installer. So, scrolling down here,
we’re going to go down to WordPress. WordPress powers one third
of the internet as of right now. So, it is a super popular platform
that everybody uses. So, I’m going to click on WordPress. Then, go ahead
and just click on Install Now. So, right here is your protocol.
That should be standard. Right here, you’re going to go ahead
and select the domain that you purchased. Now, if you only have one,
then only one will appear. Right here,
under the Directory, make sure nothing is there. Make sure nothing is there, okay? Right here,
your site name. You can give your site a name,
but remember, you can always change this
later in the settings. So, it’s not that big of a deal. Right here,
you’re going to put your username. So, whatever you want your username to be. Right here,
you’re going to put your password. Here, you’re going to put your email. Also, if you chose a different language, these guys,
they’ve got you. They can translate it
for all these different languages. I still think that it’s Mandarin,
not Chinese. I don’t know. If someone out there has a disagreement,
you can let me know in the comments. I was assuming that Mandarin is Chinese,
but I don’t know. They don’t have Mandarin.
It’s just Chinese. So, any ways,
go ahead and put your language. Keep scrolling down. Once you’re done,
all you’ve got to do is click on this Install button. So, now WordPress
is installing onto your domain. This is what you’re going
to use to install the DIVI theme and all sorts of goodies.
It’s super easy. Now, they say 5 minutes,
but it’s like a minute. That’s it.
That was really fast, right? Really super-fast, okay? So, WordPress has installed successfully. Everything’s good to go. Now, if you want to go ahead and log in, all you need to do is click
on this administrative URL button and it will take you
to your WordPress dashboard. There you go.
Voila. Done.
That was fast. So, we’ve got hosting,
we’ve got a domain, we’ve installed WordPress,
et cetera. So, right here:
done. Simple.
Easy. Install WordPress: done.
That’s it. Now we are going to get the DIVI theme, but really quickly,
before we leave this, I want to go ahead
and introduce you to a few options, in case you want to change your password
or if you want to make some changes. So, right here,
under Users, click on All Users. Right here is Admin. So, we’re going to click on Admin. This is just some basic settings, guys. Like, if you want to change the color, I know some chicks like it
red or bright colors, the guys might want it
a little bit darker. This is more like a Barney color,
it’s a bizarre color. If you ever want to change your email, this is where you’re going to put it in. If you want to change your picture, you’re going to go to Gravatar
and put in a picture. If you want to change your password;
click on Generate Password, go ahead and put in
a password right there, okay? Then you click on Update Profile. So, these are some settings
that you need to mess with before you venture off into WordPress. One more thing I want to change
is the permalinks. So, right here,
under Settings, we’re going to go down to Permalinks. Now, I’ll explain why we change this. People ask me in the comments,
“Why do we change this?” You know when you go
to Amazon or something, it says amazon.com/shop, or amazon.com/about us,
right? So, that is the post name.
This is good for SEO. It helps your site rank better. Now, if you have something like this,
right here; 1234 dot,
that is not practical. No, that’s not going to happen. So, make sure it is under Post Name, okay? Once you’re done,
click on Save Changes. Right here, if you want
to take a look at your website, you can go to your blog right here,
in this section, and just click on Visit Site. This is it.
This is your actual site right now. It’s using a different theme called 27. It doesn’t look too good. Not to worry guys.
We are going to make it look amazing. So, the next thing we’re going to do
is purchase the DIVI theme. There is a link in the description
to Elegant Themes. That link will actually give you
a small discount as of right now. They do currently have a sale going on, where you will receive
10% off the Developer. So, there’s three plans,
guys, but I always recommend,
at least the Developer; because the Developer actually gives you
access to the Bloom plugin, which I do have a tutorial on. It’s like an email capture. It can capture anything and it’s just
really modern and professional looking. Also, the lifetime access. Now, guys, I have lifetime access,
I use the DIVI theme. I would never recommend
a product that I didn’t use. I know there’s affiliates out there
on those blogs and they’re like, “Yeah, buy this.
Buy this. Buy this.” And they don’t even use it. My website,
if you go to darrellwilson.com, this is an example of what
you can make with the DIVI theme. This is from DIVI.
So, I personally use it on my website because it’s just super easy,
super amazing, and I love it. So, this is an example
of what you can make with DIVI. Going back over here,
go ahead and create a username, a password,
confirm your password, put in your email address,
put in your first name, your last name,
your social, I’m just kidding again,
no social, your country,
et cetera. Click on Next Step. The next step is going
to ask you for money. So, just pay them money.
It’s business. It’s how it goes. Once you’ve done that,
I’ll meet you on the account page, because I have an account with these guys. Like I said,
I’m not those people who are like, “Yeah, buy this, buy this,
buy that,” and they don’t even have it.
No. I use it. I have a lifetime plan with these guys. So, that means,
guys, you will always get access to support. So, whenever you need help
with your websites, whenever there’s problems
with your website, these guys will help you
in their support forum. So, you can actually buy with confidence, knowing that these guys have your back. You’re not on your own. Let’s just say this tutorial sucks
and you don’t like it; at least you’ve got these guys
to help you out. Also, you actually receive other themes. You receive a lot of their other plugins
with this purchase, guys. So, keep that in mind. They’re an amazing company. They are the number 1 rated
WordPress company on the market. So, once you’re here,
go ahead and click on DIVI right here, click on Download,
and click on Theme Package. All right, so right here
it says DIVI and it is installing. So, let me go check my support. What’s going on over here?
I don’t know. Also, look guys,
if you ever need help, right here,
you’re going to scroll down to DIVI. There are an overwhelming amount
of people getting support right here. So, like I said,
you can always buy with confidence. You’re not on your own. These guys will help you out
with your websites. Totally cool they do that. So, once you’ve actually
downloaded that file, we’re going to go over here now and we’re going to install
this on our WordPress website. So, you’re going to go to Appearance
and go to Themes. This is where we are
going to install DIVI. Now, there are a lot of themes. In fact, there are thousands
of themes on the market. People make themes all the time. I’ve just found that DIVI
is just the best one. So, right here,
you’re going to click on Upload Theme. Then, right here,
click on Choose the File. All you need to do is go ahead and simply install the file that you downloaded. So, DIVI 3,
I’m going to click on Open, and then once you’ve done that, you’re going to click on Install Now. Now, my theme is installing. So, I’m going to go ahead and close this. Also, guys,
about the website, we’re going to make
this same exact website. I felt that this
was a really cool website. I will provide you all with the images, I will provide you all with everything
that you need to get this started, because I know it’s very difficult
to start a website by your own. Trust me,
I was in web design for a few years and it’s really hard. I mean, it looks easy
but it’s hard to think of stuff to kind of get your mind going. There’s a lot of directions you can go,
there’s a lot of things you think of. Maybe somebody wants a construction
website and you’re kind of like, “Where should I even start?” We will talk all about that
with the premade layouts. My website has tons
of free layouts for you. So, even after this tutorial,
you guys can go to my website and just simply download a free theme,
slap it on your site. Good to go.
It’s really simple. So, going back over here.
This is actually installing. Guys, it takes time to install. So, if it does take time,
just be patient and let it load.
Let it install. Don’t refresh anything.
Don’t do anything crazy, because then it’s going
to give you errors, and you’re going to leave me comments. So, right here,
you’re going to click on activate. Guys, I really don’t mind your comments. I swear. All right.
I activated it. So, that’s it.
We have successfully installed DIVI. Congratulations, guys.
We have made it a very long way. We have actually done all the hard stuff. I mean, that was all the technical jargon. Now, we’re going
to actually do the fun stuff. So, right here,
got DIVI theme: done.
Congratulations. Now, we’re going to learn
to make this same exact website, step-by-step. If you want to look at the website now,
you can go over here, go to Visit Site,
and there it is. The site is not looking good.
That is not what we want. Don’t worry.
We are going to make it look amazing. So, let’s go ahead
and close all these other tabs. We don’t need any of these tabs open. I’m going to go and close
all these tabs we’ve got right here. Now, let’s go ahead and create some pages. So, over here,
you can go to + New and go to Page. Let’s just go ahead and create our pages. We’re going to create the Home,
the About, the Services,
the Portfolio, and the Contact section. So, right here,
Add New Page, simply go to home. Right here,
you’re going to click on Publish. Then again,
Add New. Now,
we’re going to make our Services page. Click on Publish. Right here, we’re going to do,
About us. then Add New again. It’s pretty fast.
I mean, that makes the page really fast. Right here,
go ahead and put, Portfolio. Right here,
click on Publish. Up here,
once again, we’re going to add the Contact section. So,
“Contact us.” Click on Publish. Once you’ve done that,
let’s go ahead and make a menu. So, we’re going to go down to Appearance and go down to Menus. So, now we’re going
to create a menu for our website. Over here,
just give it a name, maybe like Menu 1 or something like that. I always name it name it
Menu 1 in all my tutorials. Simply go to Create a Menu. So, now we’re going to create
a menu for our pages. So, right here,
under pages, you can see View All. So, we’re going to do the About Us,
the Contact. We want to do the homepage
that we actually created just now, the Portfolio and the services. Then, simply click on Add to Menu. You can simply drag these
to where you want them to be. So, maybe the Contact Us at the end, the Portfolio right here, the Services.
Yeah. That looks good. Then, go ahead and make this
a primary menu right here and click on Save Menu. Now, let’s go ahead
and take a look at our website. All right.
So, now we have the Home, the About Us,
the Services, the Portfolio and the Contact Us. Now, there’s a lot of changes
that we can do to the menu, but let’s just go ahead
and dive into the homepage. Let’s just go ahead now
and just start using the visual editor. So, go ahead and click on the homepage, then you’ll see Enabled Visual Builder
at the top. Now, if you do not see this, it’s probably
because you have the other homepage, which is a custom link. So, you need make sure
that when you create the page, that you are selecting
the right page for it, okay? Now, one more thing I’m going to do
before I start this tutorial; I’m going to reduce
the resolution on my monitor. Okay, so I’ve basically made it
easier for you guys to see it. I zoomed in a little bit
because I want you guys to see everything close up and clearly. So, I do have images for you guys. There is a link for the Dropbox, where I have stored all the images
for you guys as well. Before we do that,
if we go up here to our domain, you’ll notice that is has dash,
home. Now, we want to, basically,
just have it as our regular name. So, we want to go ahead
and change this. We’re going to go over here
and go to Dashboard. Right here, we’re going
to click on Customize Your Site. This is the theme customizer. This is where you can change the menu, you can change a lot of options, but I will talk a little bit more about all these sections a little
bit later in the tutorial. For now,
we just need to go to Static Front Page, click on A Static Front Page. We want to select the homepage,
which is the front page, as home.
Just like that. Then, click on Save & Publish. Right here,
you can click on exit now. We don’t really need that. So, now if we go back to our website, you’re going to see that
it just says our website.net, whatever your domain is,
instead of dash, home. So, now I want you guys
to go to my Dropbox. There is a link in the description. It will take you to my Dropbox,
where you can download all those images for your website. Now, just again guys, they are just for tutorial purposes. You don’t have to use them. You can use them just
to follow along in this tutorial. I found out that it’s very helpful. If you do want to go check out
other websites for images, I recommend going to unsplash.com. This website has free images
that you can download. They are just gorgeous,
4 to 8k images. They are really good. Most people recommend them
because they’re free, and they’re just amazing looking images. They’re just a bunch of photographers
who upload them. Let’s say,
for example, you’re looking
for something like night sky. They just have amazing and beautiful shots for landing pages,
for sections. Whatever you’re trying to accomplish, these guys have it. So, unsplash.com. I will also put this in the description
if you decide to use this website. So, now let’s go ahead
and do the fun stuff. Let’s go ahead and create our website. Right here,
you’re going to enable the visual builder. This is basically what we use
to design the website with. This is the front editor, okay? So, we have this section right here. Now, all we want to do
is go ahead and add a section. So, we have this box right here. We have this blue box
and we have this teal box right here. So, I’m just going
to give you a little overview. The blue box basically controls
this whole section right here. The green box controls what’s in it.
Do you see that? So, that’s the difference
between both of them. We actually want to trash this. We’re going to click on this plus section, and we’re going to add
a full width section. We’re going to add the full width slider. Then, right here,
click on Add New Item. We’re just going to go ahead
and add a new slider. Just go ahead and give it a name.
I want to put DIVI Theme. This is our slider right here. It’s not up here,
don’t worry about it. We will change that in a second. Right here is the button text. So, what do you want the button to say? Maybe like,
“Learn more.” Then, whatever URL you want them to go, this is where you’re going to take them. Now, a background image. I actually have all the images ready. So, I’m going to upload
all the images up at once. Right here, I’m going to click on Upload, and I’m going to Select Files. Now, this might take some times guys, because I’m just going to go ahead
and download all of them at once. So, I have a ton of images right here. I’m just going to go ahead
and select all of these right here, and simply just use all of them. Hey guys,
another little pop up tutorial. During this tutorial,
you’re going to see some images. Now, these images right here
I got from freepic.com. So, in the tutorial,
you might see me use different images. Those images are from websites I paid for. These are some free images
that you guys can use. Also, check out freepic.com. They have some really nice pictures
that you guys can use. So, let me just type in mock up. Right here,
I’ve added this one in. You can add something
that looks like this, like this,
or these business cards. They have some really nice pictures
that you guys can use. So, for the rest of this tutorial, you’re going to see me
use different images. Just make sure to use
the free ones right here, or use the ones that
I have in the folder for you guys, if you guys need help. So, that’s all I wanted to say. Let’s go ahead
and go back to the tutorial. I’m just going to go ahead
and pause the video while these upload. There are several ones and I would
advise you to do the same exact thing. It is actually going really fast. I mean, this why I recommend SSD hosting, because this is just stupid fast.
This is too fast. Wow, I don’t have to pause the video.
Never mind. With the other server company,
I had to pause it, but not with these guys. So, it’s almost done.
It is done. That is ridiculously fast. So, once I’ve done that,
I’m going to go ahead and uncheck these. Actually, I’m going to go ahead
and close this box, and just redo it again;
because I have all of them checked. So, I want this to be my landing page. I love this look.
I made it. It looks great.
So, I’m going to click on Upload an Image. Voila.
There you go. We have this,
but I want it up here. I’m going to click on check right here,
and click on check. Now, I want it up here.
I don’t want it down here. So, this blue section,
I want to go ahead and say, “You’ve got to get out of here.
We’re going to delete you.” So, now we have this section right here, it looks really good,
really professional. It just looks good. So, let’s just say that
you want to center it. Let’s just say that you
want to put it up there. It actually leaves this little white area,
as you guys can tell. So, later on in the tutorial,
guys, I’m going to give you something that will actually stretch
it out automatically. It is some custom CSS, but we will talk about that
a little bit later, okay? So, let’s just go ahead and go back
to the actual picture and the settings, and talk more about it. So, click on the gear icon, click on this gear icon right here. So, I put DIVI THEME; and right here I put,
“Learn more.” I included a button URL. Here, you can put something else. You can put an image, you can change
background image position, and also the background image size
as well if you want to change that. I think default is probably standard. Instead of having the image,
you can add a background color to that. Here, you can have a slide image. This will actually add in another image
right next to the slide image right here. You can add in a background overlay. So, if you want a certain color,
see how it’s darker now, you can add in a background overlay
of whatever color you chose. In order to reduce the transparency,
simply just drag this down like that So, now we’ve added this green tint to it,
which looks pretty cool. No, that’s ugly.
I’m not going to do that. I’m not even going to add an overlay.
I think that looks beautiful like that. Let’s just say you want
to change the text color. This is just a quick way to do it. So, now we have it dark but we’re going
to change that in the advanced settings. Now, if you want
those beautiful video backgrounds, you can do that with DIVI. So, right here,
under the Background Video MP4, you’re simply just going
to click on upload and then simply select a video. Now, if you need help with videos,
I do have a link in the description to videvo.net. They have some free
video backgrounds that you can use. Scrolling down here. Let’s just say you want
to add some text right here. So, I’m going to go to my secret website.
This is the secret website. I’m just going to grab some dummy text,
guys; because I don’t know what to put.
I really don’t. So, this website will just give me
dummy text that I’m just going to put. It looks like it’s going pretty slow,
but now we’ve got it. So, I’m going to simply take this
and just go ahead and paste it in there. So, once I have that in there,
I’ve added the dummy text, and it looks pretty cool. So, I’m going to click on the checkbox. Now, you see that the dummy text
appears right there. So, we have a full slider,
we have text right here, we have a title;
but let’s just say you want to change
the font and the color, right? I mean, it doesn’t look that good. So, over here,
under the checkbox right here, click on Design. Here, you can change
all sorts of settings. You can change the custom arrow colors, you can change the dot navigations, you can change all sorts
of really cool options, okay? This section right here,
it’s the header font. So, what header font do we want to use? Guys, I recommend keeping the same header
font for a majority of your websites, because it kind of corresponds
to your website. I want to leave it as default. Here, you can change it
to something like Arvo. Now, you can see the text change. Something like that.
We change it to Bree Serif. I think Roboto is a really good one. Roboto is a pretty good font. Here, you can decide
if you want to underline, you can have it italicized,
bold, whatever you would like. Now, the header font size,
how big do you want it? We can have it 80. Also, the DIVI theme allows you
to specifically change things; how they look on the mobile device. So, let’s say you want
to change how it looks on mobile. You would simply click on this phone,
go to Smartphone. Now, this is how it looks on the mobile. Obviously, this might be too big. So, we want to go ahead
and reduce it just for the phone. So, now this is how it’s going
to look on the phone, and this is how it’s going
to look on the desktop. So, it is fully mobile responsive,
guys. You can make any sort of change you want. Now, also,
the tablet. They have not forgotten about the tablet. Now, this actually looks
pretty good for the tablet. So, I might want to go
ahead and just leave it like this right here for the tablet. We can go ahead and change the header
text color to something, whatever you would like. I think white looks good. Letter spacing. You see how it stretches out
the spacing right there? I think those photography websites have
those really stretched out type looks. You can go ahead and go through that
and change the letter spacing. The letter line height will basically say; how might height do you want
from this section to this section? It’s increasing
the line height right there. I’ll just go ahead
and leave this as standard. The body font. We’re changing
the section for this right now. Now, let’s say you want
to change the body font, which is this section right here. Maybe you want
to go ahead and increase it. Maybe you want to go ahead and say,
“I want the Bitter font.” We can add the Bitter font to that. Scrolling down here,
the same exact option, guys. The body letter spacing,
which is this section. We can go ahead and stretch it out. We can make it smaller. Also, the body line height. So, this,
the height between the lines; do you want to make that bigger
or do you want to make it smaller? So, right here,
you can see that the more I go, it gets bigger and then it gets smaller. So, it’s all about creativity, guys.
It truly is. I’ll just go ahead
and leave that as regular. Scrolling down right here.
Now, I want to talk about the button. So, this button we can change,
to make it look like anything. Now, in my other tutorial
that you guys have seen, I made it have a red background. So, I’m going to go
to Use Custom Styles for Button. Now, the Button Text Size. So, how big do you want this text? See how big it is now?
It’s huge. We can make it as big as we want it. I like the default style. The button text color. Maybe you want to have it
as something like black. So, now we have it as black. You can also reduce
the transparency of the black. You can make it different colors.
You can do whatever you would want. There is no limitations with DIVI. So, here is the button background color. Maybe you want to have something like red, just like that.
Now, on my website, it was only when you hovered over it,
it would turn red. Don’t worry,
I’m going to show you the option next. So, let’s say you want it as white, or you want it whatever color, you can do that right here. The border width,
this will make it have a big border, but I think it looks
a little silly like that, so I’m not going to mess with that. Now, the button font,
same thing, guys. You can change the font for the button. Add Button Icon,
you can say yes, and simply just grab a button right there. So, if they scroll over it, now you see the button
appears right there. You can chose a button,
if you would like. I think I used the Facebook like box. I think I used this one right here. Yeah, like this. See, now there’s a little
like thing right there. So, that’s pretty cool. The button icon color. You can change the icon color
of the actual button itself. So, I choose red
and now the icon is red. Scrolling down here.
We have the hover text color. So, what this is saying is; when somebody hovers over it,
what do you want it to do? What command do you want it to do? So, let’s say,
for example, I want the text to be purple. I scroll over it.
It is purple only when I hover over it. See that? Now, here is the background color. So, I had red earlier. Right here,
I’m going to put black. So, now if I hover over it, it’s going to have
a red background with black text. See that?
Red background with black text. See?
Pretty simple. Okay? Also, we have
the border radius right here. So, we can change this to make it look however you want to have
the button hover radius. So, if I hover over it,
it’s going to have that circular style. See how the button is circular now? Circular.
Circular. Okay?
Only when I hover over it though. You can do the same thing
for the hover letter spacing. So, for example,
I’m going to put something really big. Now if I hover over it, the letters are going to
be really spaced out. So, it’s all about creativity guys. I’m going to go ahead
and just leave that back. I’m going to go ahead
and add in a second slide. So, I added one slide. Now, let’s say you want
to add in a second slide. So, I’m going to go to Add a New Item. Then I’ll put,
“Creative Studio.” Right here I’ll put something like,
“Imagine.” You know,
something inspirational. Right here,
I’ll add in a background image. So, I’ll put the bird. Upload the image. Same options, guys. I can actually decide to put
whatever I would want right here. So, the same exact option guys.
We can go ahead and go through that. Change whatever you would like. You can add in a background overlay. You can do the same exact settings, guys. Don’t worry,
I will show you how to make this full width
a little bit later, okay? I know people are probably like,
“I want that full width, beautiful picture.”
Don’t worry about it. I will show you how to do that. So, I’m going to click on this check. That’s basically it, guys.
Now, we can actually have like controls, like for the automation,
animation. How many seconds do you want it to, basically,
transition? They have a 7 second transition, but you can have it 3 seconds. See how it’s much faster there? So, it basically counts to three seconds and then it just transfers,
et cetera. So, going back over here. We can choose Use Parallax effect, which basically has that illusion
that the object is not moving. That’s up to you.
It’s a very cool Parallax effect, but as of right now,
I’m not going to add it in just yet. I want to create more page to give you
a better example of the Parallax effect, because it is a beautiful effect. The background image position. Generally,
you might want to leave that the same. If you have a full width image,
you wouldn’t need to adjust it to something like the top right
or the bottom left, et cetera. It just, basically,
moves the image around, but default is pretty standard. Like I said, there are some cases
where you would want to change that. Now, this says Disable On. So, have you ever to wix.com,
or something, where you go to
their website on your phone and it looks different than
when it does on their website. So, if I go to disable on phone,
this section will not appear on the phone. We can make a different section
just for the phone. So, if you chose to do that option,
you might want to make another part, but this is a little bit more advanced. You might want to leave it for the phone. So, I’m going to go and leave that checked
and then I’m going to click on check. So, that’s it, guys,
for this section right here. We just created our landing page. It’s very simple,
yet it looks really good. So, let’s go ahead
and continue making stuff. Right here, under this plus sign,
click on this. Now, we want to go and click on Regular. Right here we’re just going
to add in a one single row, because we’re going to add in a little
section to introduce the next section. So, right here just go ahead
and put a call to action. Right here I’m going to put
“Who we are.” Now, I’m not going to put in
a button URL or a button text, but if you want to add
a little button right here, you can go ahead
and put in the URL right here. So, for example,
yourwebsite.com. Then, right here you can put like,
“Learn more.” So, if they click on that,
it will take them to whatever URL
that you put right there. I’m actually not going to do this,
and I’ll explain a little bit, why I’m not going to do that. I don’t want a background color. For the text color,
I want it as dark. Now, for the orientation,
I want in the center but you can put it to the left.
You can put it to the right. Right now, I want to go ahead
and leave it as center. Right here,
you can add in some content. So, I’m going to put in
a little space right here, and go ahead and throw in
some content right there. Also, guys, if you want to make
some additional settings to this, the same thing,
guys. Now, these settings are almost universal. For every module, you’re basically going to
have the same options. So, for the header font,
you can change the header font. Now, you see how it says,
“Who we are.” So, you can go ahead and do that
and put whatever you would like. I don’t want to go through
the options all the time, guys. They are a little repetitive
but they’re necessary. Like I said, if you want to
change this content right here, you’re going to scroll down
to the body font. The body font corresponds
to this section, okay? So, like I said,
it’s very repetitive. These options are all,
basically, the same. Once I’m done with that,
I’m going to click on this little check. Now, the reason why I did call to action
rather than just a text module is because, first off,
it creates the header for us and it creates a small text. If we used the text module,
we’d have to make two of them. Also, the header module
is mobile responsive. The text modules by themselves are not,
until you make them mobile responsive. So, that’s a little shortcut. The next thing is:
I want to add in some images. I want to add in
the three images below that. So, right here, I’m going to click on
this little plus section. I want three images. So, right here,
I’m going to add the three columns. I’m going to find on the image. All right.
So, there’s one image. Go ahead and upload it. Also, if there is a URL for my Google,
or wherever you want to use the image, you can just go ahead
and put in the URL right there. You don’t have to upload it. If that image ever disappears,
if that person changes it or something, then your image will,
obviously, disappear. So, you might want
to upload it to your server. Right here,
I’m going to click on upload. I’m going to grab this one right here
and then click on Upload an Image. Same thing right here.
I’m going to click on this little plus. I’ll go ahead and add in an image. Here, we’ll add in
this cute little thing right there. Then, over here,
I will add in one more. Put in this image.
Go ahead and upload it. I will use this one right here. Guys, look at this. The website is already
starting to come along. It’s already starting
to kind of look good. It’s so easy to do this.
It’s really not difficult. Now, I want to create
a section below that. I want to go ahead and put in something
that talks about these three images. So, right here,
under this plus section, we’re going to add in three more. We’re going to use this section
to talk about whatever images. We’re going to use the blurb. So, go ahead and give it a title. Right here, I’m going to put,
“Style Guides.” You can also have a URL,
if you want to take them to another part of the website
but it’s kind of unnecessary. You don’t need to put in
so many URLs on your website. Yes, I want to use an icon. So, we have all these icons right here,
that we can add. I’m actually going to click on no,
because I want to add in my own image. So, right here under Upload,
I’m going to select this cute little box right here,
this radio box, and click on Upload an Image. So, now we’re starting to add in
the color scheme for the website. We’re starting to give it decor. We’re starting to set
the tone for the website. Like, how do you want
people to think about it; a professional website,
a cute website, or whatever. Right here, I’m going to add in
my secret favorite dummy text. So, there is my dummy text. I’m going to click on that check,
and there you go. Now, you can make some changes to this. Maybe you want to go ahead
and add in some spacing between this. So, right here,
I’m going to click on this and go to the design. You can move this around too. You can also put it on the sidebar,
right here, if it’s easier for you to sort of
help give you an idea. I don’t like to do that because sometimes, it doesn’t give you
a picture perfect of the website. I’d rather do it something like that. That’s good. So, right now we are editing this section. The header font size:
maybe 20. The header letter spacing. So, we can choose
the letter spacing right there and the line height. Here, I actually kind of
want to change the line height. I want it to separate a little bit, to give it that little clarity. So, now people can actually
see what we’re changing, so it does look a little bit better. Then, scrolling down here,
you can go ahead and change the body font. Like I said,
for the rest of your website, you guys should be using,
maybe, one to two fonts max. Don’t use a bunch of them,
because then your website will clash-y. It will look tacky. So, I’m going to change it to black. You can change the body
line height as well, something like this. Or you can change the spacing. That’s really ugly.
What did I do? We’re going to change that back. Okay, that looks fine. Also, you can add in a background image
to this specific section. You can add in a small
background color to it, but it looks good like that. It looks clear.
It looks pretty good. So, going over here. We don’t really need to use the margin. Now, for the top margin,
guys; let’s say, for example,
you want to make a space. So, what this is,
is basically saying; “I want it 15 pixels away.” So, if you want to make it 0,
it will be 0. Let’s say you want
to have it 50 pixels away. Do you see how it’s creating
this space right here? Now, you can do this
to basically any sort of direction. Remember, it’s only going to stay
within those little green bars. So, if you want to add
a custom padding as well. The padding is basically a space. So, the margin is basically saying, “We want to create a margin,” but the padding is basically saying, “We want to create padding.
We want to create a permanent effect, that nothing will be there.” So, basically,
that’s the custom margin and the padding. We’ll probably use
this a little bit more later, but this is just a very small example. Now, I’m going to click on check. Instead, guys,
of redoing that whole section three times, we can just duplicate
this section and simply just drag it over instead of manually doing it,
like other themes. I’m just going to go ahead
and drag it over there. Now, let’s say you want
to get a little bit more cockier and kind of just duplicate this whole row. We can go ahead
and just duplicate the whole row. I mean, it’s so much easier
than to do it all by scratch. I’m going to go ahead and just trash this.
I think three is good. We do need to change the text. We can’t have it all duplicate. I’m going to do,
“Brand creation,” and,
“Graphic design.” Here, I’m going to add in
a camera instead. So, we don’t want to use the same images. Using the same images,
it makes your site look a little strange. So, I’m going to add in this camera. Right here,
I’m going to add in this little painting thing. It looks kind of cute. So, let’s go ahead,
now, and look at our site. Let’s go ahead and see what we’ve done. So, it’s starting to come together,
guys. It’s already starting to look really well. It’s really starting to look pretty good. So, let’s continue.
Let’s keep going. We’re on a roll. Let’s go ahead now
and create the next section, which we’re going to start
adding in some bars. So, right here, I’m going to click
on this little Add New section, and I’m going to go to Regular. Now, I’m actually just going to
go ahead and just choose one row for now. We’re going to use
the call to action again. Then, right here,
we can put something like, “Who we are.” Then, right here,
for the background image, I don’t want anything there. So, I’m just going to go ahead
and probably just leave that like that. Now, remember,
once you do that, you will need to add
your color to the font, or else it’s going to disappear. So, I’m going to add in dark. I’m just going to go ahead
and click on check. Now, I want to add in some more sections. So, the website we had earlier,
it had two different sections. So, let me go ahead
and go to that website. I’ll use this to sort of compare
and contrast to help you get ideas. So, right here we have the call to action. Now, we want to go ahead
and add in two sections. So, we’re going to add in
a call to action here and we’re going to add in
bar counters here. Just by looking at this,
this is a two column row already. One column.
Two columns. So, let’s go ahead and create it. Right here,
I’m going to click on this plus icon and click on the two column row now. For this section,
we’re going to add in a call to action. Right here, I’ll put something like,
“Strategy Planning.” I will not add in a URL. I will not add button text. Right here, I’m going to go ahead
and shoot in some text right there. Now, I do not want to add in
a background color. So, I will actually need
to go ahead and say, “I want this dark.” Here, maybe you want to go ahead
and add in some more text. I’ll put a little bit more
text right here. Yeah, that’s good. Now, let’s just say that
you want to center this text, or you would like to make it more
around to however you would like it. Right here,
you have these little icons. So, this will actually change it
to however you want it to look. So, we want it to the left right there.
Now the text is facing the left side. Do you see that? Let’s just say that you want
to go ahead and move it around. You can actually click on that,
and this will actually move it around to however you want it. You can have justified.
You can have the dots. You can do virtually anything with this. So, I’m going back over here. I’m going to click on this. I don’t want to add in the number, so I’m just going to go ahead
and click on the number again. There we go.
Okay. So, right here,
I want it in the center. Right here, I want to add in
some more text. Let’s see if that worked. Maybe I copied something on accident.
That happens quite a bit. So, here I’ll go ahead and paste it in.
There we go. All right. So, I’ve got a little bit
more text right there. Now, over here,
I want to go ahead and add in a section. Yeah, let’s do that first.
Then, we’ll add in a background. That will basically make
it look very different than what it looks like right now. So, right here,
click on this plus, and we are going to add in
some bar counters. Let’s go ahead and add in some items. So, right here,
I’m going add one. I’m going to put,
“Creativity.” Let’s give that 88%. Now, for the design,
guys. So, for the design, I want this to look
a little bit different. So, the background color. What kind of background
color do you want it to be? Well, I kind of like it
to have that reddish color. I like that reddish color
that we had earlier. So, going over here…
Tell you what, let’s go ahead and steal
that same exact number. I think it’s this right here. Is that right?
Oh, duh. I had caps lock on. So, let’s go ahead and give you
that same exact color, just because I like to make
it look kind of like the demo. I’m going to enable this visual builder and I’m going to find
out that exact color. So, scrolling down here. I’m going to click on this,
go to the bar counter, design,
background color. Here we go.
All right. So, I’m actually going
to take this right here, I’m going to put this
as our background color, and I’ll paste it in there. So, now we have that
background color that applies. For the background color, we can have something
like this right here, where we have a black. Now, you want to choose
two color schemes, guys. You want to choose something
that corresponds to each other. I kind of like it like that. We can choose the label color as well. So, that would correspond
to this section right here. You can actually change
the percent color right here, but I’m going to leave it as white. I think white looks good. So, I’m going to go ahead
and checkbox this. Right here, you can go ahead
and change the same settings, guys; the title fonts,
you can change the font. So, I’m going to leave it as default. I’m going to increase
the size a little bit, make it 20,
and give it some letter spacing. That looks good. So, I think that’s,
basically, all I want to do. You can actually change
the percent font as well. See how it’s like a fat 88? You can change that too.
Whatever you’d like to do. I’m going to go ahead and take that. Now, guys,
instead of making more, just copy them. Just duplicate them like that.
Make it easier on yourself. So, right here we have two bars, but let’s say you want to edit this. Actually, you know what?
That’s a bad example because we want to keep them together. So, I’m going to go ahead
and trash these right here. We’re just going to have to go ahead
and create one more right here. See how they’re a little bit closer? So, that might be
a bad example of duplicating. I want them much closer together. So, right here I’ll put something like,
“Marketing.” The percent,
we will add in 88. Actually, no.
We’ll say we’re bad at marketing. We’re not good at marketing.
We suck at it. So, the background color, we’ll go ahead and put
that color right there. The bar background color,
maybe you want it as black. The label color,
I want it as black. I think that’s it.
Of course, the font. You know, guys,
you can just tell right here, it looks a little strange. We have this right here
and this right here. So, we want to always keep it
at the same font, all right? I’m not going to do that because I’m lazy,
and I’m not going to go through that. So, I’m just going to go ahead
and checkbox that. I want to add one more. So, right here,
I’m going to add one more and I’m going to put,
“Skills.” I have no skills at all. So, I’m going to put 25. We’re adding 25% there. Right here, same thing,
guys; Design. The background color, go ahead and paste this. The bar color, the label color:
black. Percent:
white. So, I’m going to click on that. I think that’s about it for this section. Also, guys,
remember those little red icons? We will add these a little bit later, once we talk about custom CSS. This does add a lot to your website. These little red bars,
they truly do add direction. We will add that
a little bit later in the tutorial. Do not worry. Now, let’s go ahead
and add in a background image. So, right here we have this blue section. Remember, this blue section controls
everything about this section right here. If we want to make these changes to it,
the blue section does that. The teal section controls everything
within this section right here. Do you see the difference? So, let’s go ahead and add in an image. Right here,
under the gear icon, go and click on that. I’m going to click on Upload an Image. Now, I want to add in
this image right here. I want this to be my background. So, I’m going to click on Upload an Image and check.
There you go. Guys, just that image alone
has added a lot of décor to our website. I mean,
it really is images and content that people truly buy. That’s basically what they want. Let’s just say that you want
to make this row a little bigger. So, right here,
under this gear icon, we click on that. Now, we can actually make this bigger. So, let’s just say you
want make this row full width. Now you see the row is full width. Let’s say you want
to make it a custom width. So, right here I’m going
to put custom width. We can choose if we want this really small or we want it really big. So, now it’s stretching
across the entire page. What is gutter width? Well, it basically brings these together. It reduces the space
in between the modules. Now, there is a reason
to use gutter width. Gutter width is very important,
but we’re not going to use it here. We’re going to use it
when we talk about images. So, I’m going to go ahead and just check. This, basically,
looks pretty good. The text,
maybe, we want to go ahead
and add it to the left. Then, this section right here, we can go ahead and add
that to the left as well. So, that looks a little bit more
cleaner with something like that. Here, you might want
to make the text dark. I’m just going to go ahead
and do that myself. I am a perfectionist,
as you guys can tell. So, right here,
I’m going to go to the color on the body font and I’m going to change
the text color to black. There you go.
So, the text is now black. We have successfully created this section. Very simple.
Very easy. You might want to make
this a little bit bigger; the, “Who we are,”
because it is a little small. You can probably make it
a little bit bigger, something that looks like that,
to sort of bring a more of a title. We will add in the little line
a little bit later. So, now let’s go ahead
and add in our team. I’m going to click on this plus section, go to Regular. Now, we’re basically going
to do the same thing. We’re going to click on this. I’m going to add in a call to action and I’m going to add in,
“Our team.” I don’t want to use a background color. Now, for the design,
let’s just all keep it 40. We’re keeping the text at 40. I think 40 is good for the title. We want to make sure that it is black. Guys, just like here, you guys can, basically,
start getting the idea. This is a three column row. We are going to be using profiles. We are going to be making profiles
for each person. There is a person module for this. So, going over here, I’m going to click on
this little plus section, and click on this plus icon. Now, we’re going to add in
the person module. The person module
will give them their Facebook, it will give them a brief
synopsis about the person. It is a very useful module. So, I’m going to click on person. Go ahead and give this person a name. Is it Bob or…? I’m going to put Darrel Wilson. You can add in a position for this person. I’ll just put,
“WordPress Guy.” Now, the image URL,
we can go ahead and click on this, and select this guy right here. So, we have Darrel Wilson,
WordPress guy. Right here, you can go ahead
and put in your favorite icons; your LinkedIn,
whatever you would like. Of course, you’re not going
to put these little number signs. You’re going to put whatever
you would like right there. Then, here you can give
a brief description about the person. I’m going to give some
dummy text right here. Simply just go ahead
and put in some dummy text. Check it. There you go. Like I said,
design is everything. So, if you want it centered, we can go ahead and just
click on this gear icon. Right here,
under the setting right here, you can put this in the center. Also, you can go ahead and say,
“I want animation.” So, do you want this to fade in? Do you want it to go from left to right? Or from right to left? Now, a good idea would be: have this go left to right,
maybe this one coming from the top, and then this one over here
coming right to left. So, that is an idea
of something that you can do. Also, design,
you can change the icon colors here. You can change the icon hover colors. Now, I recommend doing it with that
red color that we had color going on. So, if somebody hovers over it,
now it turns red. See that? So, right here you can change
the header font, you can change the font size
if you want the font a little bit bigger, et cetera. Also for the body font. The body font controls
this section right here. So, you can go through these
and add in whatever you would like. You can add in a border. The border, of course,
is white here. If you change the color, it’s going to add this
blue border around it. So, you can add that as well, but I don’t like borders. I really don’t like borders. Going back over here. That is basically the settings for this. Maybe I want to go ahead
and change this section right here to make it look a little
bit more stretched out; something like that.
That’s a little bit better. That’s basically the most
we can do with the title for that. So, maybe I’ll go over here
and I’ll go ahead and change this to left. Also, guys, remember you can
duplicate this whole entire module and ship it over to here. Once again,
ship it over to here. Voila.
There we go. Of course,
we’re going to change for all of these. We can’t have the same pictures. So, you want to click on the gear icon, the image URL. We’ll go ahead and change
that to something like this girl. We’ll name her Alicia Wilson. In this tutorial,
she’s my wife. So, we’ll click on this check. Then, over here,
I’ll go ahead and change this again. We’ll name this something like Anne, Anne Casino. I don’t know where I thought of that.
I just threw it out there. Then, we’ll change the image right there. Maybe, the animation
we want from right to left. So, she’s coming in from right to left. Then, we’ll change
her from something like: animation from top to bottom. Yeah, like that. So, if I scroll down like this, this guy is going to come from the left, she’s going to come from the top, and then she’s going
to come from the left side. So, that is basically our team. It’s a very simple section to use. The modules, like I said,
it’s super easy to use. Now, let’s go ahead
and create this section right here. We want to create these images
and we want to, basically, make sure there’s no space
in between them. So, this is where we’re going
to introduce the margin and the padding. Over here, I’m going
to click on this plus section, go to Regular,
and click on these four little icons. So, let’s go ahead and add
an image for each of these. Let’s go ahead and put in the same
images that we had for the tutorial. Over here,
I’m going to go to image, select an image.
I’m going to select this one right here. This one right here,
I’m going to go to images, and we’re going to use this image as well. Same thing right here. I’m going to select an image. Let’s go ahead and select
that little book that we had. I think we had a book.
This little book right here. Then, over here we’re going
to add in that beautiful cloth, that red and blue cloth. So, we have these icons
but they don’t look good like that. This looks like 1990.
This does not look good. So, let’s go ahead now
and reduce the space between the row, and this section. So, going over here,
click on this gear icon. We want to make this row full width. Now, for the custom gutter,
we don’t want any space. So, make it 1. Now you guys see that
we have this space right here. So, this looks pretty good. It’s already starting to look better
but there’s still this space up here. So, up here,
under this blue icon, we’re going to actually scroll down, and we want to make
the padding 0 on everything. What that means is basically saying, “I don’t want any space on the top,
to the right, to the bottom, the left.”
There you go. So, now we have, virtually,
no space in between the modules. A really quick shortcut,
if you want to duplicate this row, we can go ahead
and duplicate this entire row. Now, here we might want
to reduce this and reduce that. We can go ahead
and shift it up a little bit. Then, this section up here, we can go ahead and put that. Another way to do that,
guys, is just to click on this, and just add in 0 padding
on the bottom right here. So, here let’s add in 0 and 0. That is another way
instead of grabbing it. That is another way of how you can
just reduce the padding on this icon. Just go ahead and put 0 for all. I have 27 pixels on the bottom right here,
but I’m just going to put it to 0. Now there’s nothing. So, that is a quick shortcut. We can actually go ahead
and put some different icons right here. So, module settings,
I want to go ahead and add in something like the book. Then, right here,
I want to add in those little letters. Now, you don’t have to follow me guys. I’m just venturing off now. Now, I’m doing my own thing. I’m ignoring my audience, almost. I’m kidding.
It’s good to diversify. It’s good to have
different images everywhere. You don’t want to have
the same images everywhere, because then your website
looks very tacky. Now we add in these images right here. So, this section right here,
the images are added and it looks really good. That is an example,
guys, of how you can add in those images to your website. Also, let’s go ahead and say you want
to add some design to it. Right here,
I’m just going to click on one. I’m just going to teach you how to do one. This section right here,
I’m going to go to module settings I want to go ahead
and open this in the Lightbox. Now, you can add in an image
overlay and an overlay icon. So, maybe you want
to go ahead and add in an icon. Do you see that icon now?
There’s a little icon. So, if somebody hovers over it, then you can go ahead and add in an icon. So, maybe this little check box. Now, the same thing,
guys, with the persons,
you can add in animation. You can make it go right to left,
top to bottom, bottom to top,
fade in. Or we could have no animation whatsoever. The image alignment.
We don’t need to mess with this because we have already done the padding. We don’t really need to move this over. Now, for the design, we don’t really need
to mess with that too much. So, basically, right here,
we are all set, ready to go. Let’s just say that you want
to change the color of that. Right here, let’s go ahead
and change it to that red color we have. We want to keep it consistent. Also, we have the hover overlay color. So, we can add in a hover overlay color. Only if they hover over it,
it will turn, like this blue section right here. So, that’s a pretty cool effect
that you can have as well, for your images. If you want to go ahead
and add this effect, that would be a good idea for you to add. Going back over here.
I’m going to click on this little check. We’ve done a lot so far,
guys. Congratulations. Our homepage is nearly complete,
guys. Congratulations. This is probably the hardest part. Your landing page,
guys, you have about 5 to 10 seconds to convince
somebody to stay on your website. So, your landing page is the most
important part of your website. I cannot stress that enough. So, now let’s go ahead
and create latest posts. We’re actually going to create a sub-blog. I’ll introduce you to why
we’re doing that. Right here,
under Add New Section, we’re going to go to regular. I’m going to add
in this section right here. Right here,
I’m just going to add in call to action, just like we’ve been doing before. Right here I’ll put,
“Our posts.” We can go ahead and take out this. Add this to dark. Right here,
we’re going to put nothing. So, we have this section right here,
we have our posts. Now, I actually want
to create a custom blog. I don’t want to use
the same one that DIVI gives me. Now, the one that DIVI
gives you is actually good, but I’m just trying to expand
your imagination a little bit. Let’s see if we can grab something. Going back over here,
maybe we can duplicate this row. I want to go ahead
and just drag these down over here. I want to steal these images now. So, I’ve actually taken this right here.
I’ve grabbed these images. Now, let’s just say I want
to add in some text below that. I’m kind of lazy here,
guys, so I’m just going to duplicate this, and we’re just going
to drag that down below. Here, I might want to
go ahead and delete the icons. I don’t want to use the images right here. So, right here I’m just
going to delete these. I’m going to go ahead and backspace these. I’m going backspace these as well. Now, right here,
I want to change the images. I don’t want to use the same
images that we were using before. We’ll click on Upload
and we’ll put this right here. Then, I’ll go ahead
and maybe change this text to like, “Our studio.” Then, right here, I’m going to change this
to this little guy. Well, he’s not little.
Then, “Our photographer.” Then,
right here, I’m going to change this
to something like, “Best research.” So, right here I’m going
to go ahead and change this picture. Then, I’ll go ahead and click on check. We’ll do something like,
“Best research,” right here. Now, when somebody clicks on these images, you can control where you want them to go. So, right here,
under this gear icon, we have the URL, but we have the Link URL right here. So, later on in the tutorial,
guys, we’re going to make a blog page. We can actually design our own blog. We can, basically,
get a little bit more creative than what DIVI allows us to be. So, for example,
we can add a background here, we can add in all sorts
of really cool stuff. We will create the blog a little later, but this is just an example
of a creative style blog. We’re not using the default
standard blog that DIVI gives us. We can make anything. So, these pictures will
later take us to the blog. This is an example of
a little bit more creativity, as far as designing your own blog. Remember, you can link them to anywhere. So, you can just say,
“This is our blog,” and then have these go to your blog post instead of using the default
blog that DIVI gives you. So, let’s go ahead now,
and create the next section. We’re going to create
this section right here. It’s a very simple section.
It’s just a two column row. This is a call to action with no button, but we can add a button this time. This right here is just an image. So, right here I’m going
to click on this plus new, click on Regular,
and click on these two buttons right here. So, this button right here, simple, guys;
add an image. You guys already know how to do this. So, add an image. I’m just going to select the image,
upload the image. Voila. Over here,
I’m going to add in a call to action. I’ll put something like,
“Strategy planning.” Then, I’ll actually put in a button URL. Then,
“Contact us.” For the background color,
I don’t want anything. Nothing.
For the text color, we’re going to make this
a little bit dark. So, we’re going to have this
a little bit darker, okay? The text orientation,
you might want it to the left, so that it looks like that. Right here, we’ll go ahead
and add in some dummy text. I’ll add in a lot of text. Copy and simply just go ahead and paste whatever you would like to be in there. So, now we have this right here. Now, we want to go ahead
and change the button. So, over here, we’re going to click on
this little button icon, and just like how we had up here,
guys, way at the top,
the first time, it’s the same exact
settings for the button. So, go on over to design, go ahead and go through this right here. If you want to change
the font size for the header. Just remember,
the header controls this section. Below that,
the body, this controls this section. Now, if we keep scrolling down, you’re going to see that it says:
use customs styles for button. So, if I click on Yes, now we can actually change the button. We can actually change
this specific section right here. So, for the button text color, I want to go ahead and change it as black. That’s it.
I just want to leave it as black. I don’t want to change anything else. I don’t want to add in a background color, because I’m going to add in
our own background. Going over here,
on this gear icon, I want to add in a background to this now. I want to, basically,
start distinguish the sections, so the user knows different
sections of our website. Over here,
under Background Image, I’m going to click on this and simply
add in a background image. Guys, it has drastically changed
because we added the background section. Right here,
you can link them to your contact page. So, right here,
under the gear icon, the button URL is when
they click on this button, where do you want to take them? So, I’m just going to go and say,
“You know what? Right now,
you’re not going anywhere.” So, if they click on it,
it’s not going to take them anywhere. You would want to put
something that takes them somewhere on a different
part of your website. Now, let’s just say you want
to expand this section. Over here,
on this gear icon, I’m going to click on this and say, “I want this row full width.” So, now you see,
the text is starting to, basically,
get bigger. Also, the image got bigger. Now, let’s just say,
for example, this text over here is too long. I don’t like it.
I want it a little bit shorter, but I like the width of this image. I want to keep that
but I want to reduce this section and maybe,
stretch it out. So, over here,
under this icon, I’m going to go to Design. Now, max width, let’s just say that we want
to give it a max width of something like 500 pixels. So, now,
if I enter in 500 pixels, it’s basically saying,
“This text will only go to 500 pixels, and then go back.” So, let’s say,
300 pixels. It’s going to get smaller. The text will only go
as far as 300 pixels. So, I’m going to do 400.
I think 400 is good. So, 400 is a pretty good size.
I think that looks pretty well. Now, for the body font,
maybe you want to change the line height. Maybe you want to go ahead and say, “I want it like this,
right there.” Now, let’s just say,
for example, I want to push this down right there,
this strategy planning. I want it a little bit down more.
There’s too much space right here. So, I’m going to click on this right here, and I want to create a margin. We talked about margins earlier. I’m going to go to Design, and I’m going to scroll down to Margin. Now, I want to add
in something like 30 pixels. So, now you can see that the box is moving because we’re creating a margin. So, if I created 50, you’re going to see that
now it looks pretty good. Actually,
40 looks good. So, it’s creating a space right here. That is what the margin is for. You can use it for the right,
the left or the bottom. You can basically control
where you want it to be. Now, let me just show
you something a little strange that you can do this,
but that actually works for pictures. So, the custom margin,
let’s say I want to do negative. I’m going to add -300. Now, the text over here is sort of overlapping the picture itself. So, you can,
basically, get really creative and maybe
have a text over the image, if you would like to add décor
or something like that. I’m just introducing you to the negative.
You don’t have to use it. I just want to make sure that
you understand what you can do with this. I mean, you can make
that text go anywhere you want. You can bring it way up here
if you would like. You can have these images
overlapping each other, et cetera. So, that is a little tutorial
on the margin. It’s really good.
It’s really easy to use. It’s very powerful. It can really control anything
about your website, guys. So, right here,
I’m going to click on this check. The next thing we’re going
to do is our customers. So, we’re basically just going
to create a section, which is,
“Our customers,” then add in four little icons right here and, of course,
a call to action. You guys have probably already seen this. Don’t worry about this section right here. We will add this a little bit later, okay? So, don’t worry about the red. We are going to add that.
It’s going to look really good. For now, let’s just go ahead
and add this in. So, over here,
I’m going to click on this. We’re going to do regular. I’m adding this section right here. We’re going to add in a call to action. Right here,
I’ll put something like, “Our customers.” Now, we do not want to put a button URL. I do not want a background image. I kind of want this black. Right here,
let’s add in some text. So, I’m going to steal
this dummy text right here. We are going to just go ahead
and paste this text in there. Then, we’re going to click on check. Now, remember, guys, we’re going to add
in the bar divider a little bit later, because I know it does look
a little different than right here. That’s only because we have space. That is the only difference, guys.
It is just space. It does look drastically different, but it’s only because there’s just
a little space between that. We can actually fix that right here. Just go ahead and put in enter. So, you can basically create
as much as space as you would like. Now, let’s go ahead
and add in four images. So, right here,
I’m going to click on Add New Row and add four images. Now, I don’t want it like this. This was a row all the way. I want to increase the size, but I don’t want to make it full screen. I don’t want that look for this. So, over here,
I’m going to go to image, upload image,
and simply just select these four images. So, culpa. Right here,
I’ll add the labore. Here, we’ll add the ipsum. Then, here we will add the culpa. I mean, that looks good enough, guys. It looks pretty standard. It looks, actually, almost identical
to what we have right here. The only difference is that we want to,
basically, create some more space. We want to go ahead
and add a little bit more space to this. So, over here,
we can actually click on this little icon right here. We can actually add a custom width. So, for example,
right here I want to go to Custom Width. We can actually determine
how far we want this to look. So, you see how,
now, the custom width is much smaller? If we want it to be bigger,
we can increase the width. Now, if we want these images
scrunched together, we can make the custom gutter width at 1 and these will be as close as possible. Now, the reason why there’s still a gap is because these images
actually have a white space around it. So, going over here. Now, I’m going to go ahead
and leave this section. I think this section is good. Let’s go ahead now
and do the footer, which is the last part of the page. Now, we’re actually going
to create a custom footer. The reason why
is because we can actually create a very elegant style contact section, rather than just the default settings
that the theme comes with. So, going over here,
let’s go ahead now and make a customer footer. So, add a new section, regular,
click on this right here, and I’m going to do something
like call to action. I’ll just put,
“Contact us.” Button URL;
I’ll put nothing. Background color:
nothing. Text orientation:
I want it dark. Now, I’m going to go to Design
and maybe make this a little bit bigger. So, the font size,
maybe I want it around 40. Now, I want to actually go ahead
and create the three sections below. I want to add in three more sections. So, right here click on add a new row. Add these three sections. I’m actually going to
use blurbs this time. Now, guys,
you can use call to actions. You can use a text module. You can use whatever you would like
to use for this specific section. Right here, I’m just going
to go ahead and add in a blurb. I’m going to give it a title. So, right here,
I’m going to put something like, “About the studio.” I’m not going to put an icon.
I’m not going to put anything else. All I’m going to do is go over here and add in some dummy text to it. There you go.
I’m going to click on check. Now, maybe that’s a little bit too much. I’ll take out some of that text. There’s a little too much
for the bottom parts. You don’t want to include
too much text on the bottom. It’s kind of like a going away section. You don’t want to throw content at them. Something like that,
right there. Then, over here
I’ll put in something like, “Address.” Then, we can go ahead
and scroll down right here. I’ll put in some more text right here and add this in right there. Then, over here we’ll add in
something like, “Newsletter.” Then, I will scroll down and we will go ahead
and put in some text right here. Now, of course,
for this section right here you might want to put in
your actual address. Let’s go ahead and do that.
We’ll center this. We’ll put something like, “Agency West.” Something that sort of gives them
an idea of your location. Go over the text over here.
I’m probably going to put like, “Design Hill, New York.” Then phone. Then we’ll do cell phone. Guys, you can add the plus sign. I think the plus sign
is international, right? So, over here,
we’ll do something like; +123. Here, maybe you want
to put [email protected] Then, same thing right here; [email protected] Okay?
So, something that looks like that, but maybe we want to go ahead
and space it out accordingly, because it doesn’t look proper like this. It looks a little strange. For the visual, we might want
to make some changes to that. So, we can actually make it as justified. The justified section will make it so each specific line is its own section. Now, the reason why the top one doesn’t is because we actually added
this style right here. So, right here I’ll just go ahead
and add in agency. Then, maybe,
“West, New York.” I don’t know.
Whatever address you’ve got right there. So, then here, again,
I’ll go ahead and click on this and we
will justify these settings to make it look something
a little bit more like that. Maybe we want to center this. Let’s see here.
We can probably put this to the right. Maybe that will work. Or we can just leave this
to the center like that. Yeah, so we want
to leave it at the center. So, that looks good. Now, we want to go ahead
and maybe push some space right here. We don’t want too much space. So, let’s add in some space right here. Also, right here. I’m going to push this
down a little bit more. Now, let’s go ahead
and just add in a background image. So, I know it looks
a little strange right here, but once you add in
the background image, guys, it does a lot to your websites.
It truly does. So, I’m going to add in
the background image. Now, we have a fully functional
bottom section contact page. Maybe make it look a little bit different. So, you drag it up. Something that looks like that. Also, guys, remember,
we’re going to add in that red line right here,
below each of these call to actions. It’s really going to add a lot
of décor to our website. Believe it or not, that red line
will actually add a lot to our website. So, guys,
we’ve actually made the homepage. Congratulations. We are on our way to amazing things. Right here I’m going to click on
the purple icons and click on save. We want to go ahead
and save this whole section. Now, another thing
I wanted to introduce to you all is to the menu. Now, we have this menu right here, but that wasn’t the menu
I used in my tutorial. We used this elegant style. We’re going to use
this really nice looking style. So, let’s go ahead
and use that menu instead. The first thing we’re going to do
is exit the visual builder. We’re actually going to change the menu. So, over here,
under this blog, we can go to Theme Customizer. Okay, this is where we can actually make the menu look
a lot of different ways. There is a lot of navigation
and decoration that we can add to the menu. So, going over here
to the Header & Navigation. We’re going to go to the Primary Menu Bar. Right here,
we can make it full width. You can actually just get rid
of the whole menu if you want. If you don’t want this white space, you can actually change that as well. So, right here,
do you want to hide the logo image? Don’t worry, I will actually discuss
where you can get a logo and also,
where you should put it, near the end of the tutorial. So, over here is the text color. Right here corresponds to the text color. Now, the active link color
is basically saying; when someone clicks on one
of these pages right here, the link is going
to turn that specific color. So, now it turns blue. If I go to the home,
the home is going to turn blue. Now, over here is the background color. If you want to make this transparent,
if you want to have nothing here, all you need to do is just reduce
the transparency of the menu. So, now there is nothing
there except just the text. Also, if you have a dropdown menu, you can actually change the color
of the dropdown menu as well. Right here, you can change
the dropdown menu, et cetera, if you have a drop down menu. I’ll show you guys how to make
a dropdown menu in just a second. It’s really simple. So, that is the settings
on how to do that. Let’s just say that we want to change
this to have a vertical or full screen, or get really customizable with the menu. I’m going to go back over here
and go to Header Format. Now, we have this header style right here. So, click on this and click on centered. Now, we have this section right here, the logo on the top
with the menu right here. Or, we can have center,
in line with logo. So, now we have the logo
in the middle of our pages. Or, we can have a slide in, which is basically what we had before. So, now if they click on this,
it’s going to push the menu out and we’re going to see the menu
from that perspective. Now, there’s another way to do it,
which was the way I originally had it; full screen. So, right here,
if I click on this, it’s going to turn this section
right here to our menu. So, I actually changed
this section to white and I just changed this to a red color. So, right here I’m going
to click on Save & Publish, and we’re going to make
it look like I had it. Going back over here. Slide In & Fullscreen Header Settings. So, the background color. I want to basically say,
“I want this transparent.” Or we can,
“I want this purple.” “I want it white.”
Et cetera. Whatever color you want to add it as. So, this is where you would add the color. I think I added a dark color. Now, that is actually
a pretty cool looking color. The menu link color. So, earlier before,
when somebody clicks on it and it has that specific link color, what color do you want it to look like? I’m sorry.
That was for the active link color. Now, for the menu link color, you can go ahead and change this as well. So, this is basically saying; the ones that are not clicked on,
that is how it’s going to look. Now, if you want them all
to look a specific color, just simply change them all to red. So, now you have all of them as red. That is an example of how
you can decorate this specific section. Maybe, right here,
you want to go ahead and add these as something… Maybe teal?
Teal actually works. That’s kind of a cool transition effect
that it has right there. Something like that.
We’ll leave it like that. So, that is an example,
guys, of how you can decorate the menu, how you can get decorative. There’s a lot of different options. You can have it as a vertical menu. So, I put it as default, but right here, I’m going
to do Enable Vertical Navigation. So, now the menu
is on the side right here. You can change the side to the left. Or you can change it to the right. Now, the vertical navigation
has actually increased in popularity because it’s a modern look. It’s a modern,
hip look. For this tutorial,
I’m just going to do full screen. I’m just letting you guys know,
the options are limitless. You can change the menu
to whatever you would like. So, I’m going to click on
Save & Publish here, and I’m going to click on this,
right here. So, now I want to actually show you
the backend editor, guys. We haven’t talked anything
about the backend editor. So, going to Edit Page. This is basically a brief synopsis
of what we’ve done. So, a full screen header, a call to action, an image,
et cetera. Now, you can make changes to the backend, just like the front end. So, right here,
for example, I want to go ahead and add a row, a three column row,
just like earlier. I can click on a module
and add in a blurb module. I have the same exact options, guys, as we had as the frontend editor. This was the old style
of making it with DIVI, because before they didn’t have
a frontend editor. Now, since DIVI 3.0 came out,
they do. So, I don’t really use this too much. However, sometimes if there’s a module,
where I don’t know where it’s at, I will go on to the backend editor,
saying, “Okay, where is this?
What did I do?” Et cetera.
So, this is the backend editor, guys. Like I said,
it’s so simple. Call to action.
Person. Person.
Person. Four images. Image.
Image. Image.
Image. Then, right here,
of course, you reduce the padding to zero. So, going over here,
custom padding is 0, 0,
0, and 0 right there as well. So, that’s basically a quick synopsis
of the backend editor. There isn’t much use for it anymore, because people tend to use
the frontend editor. I’m just still introducing you all
to the backend editor, because it is very helpful. So, I’m going to go
to Visit Site right here. Now, guys,
we are going to a step further. We are going to actually create
the About Us page. Guys, actually,
before we do this, I think you guys are ready. I’m going to introduce you
all to the custom CSS where you can get that little line. So, over here,
I’m going to go back to our homepage. Now, there is some custom CSS
in the description, okay? I’m going to go back to my homepage. Now, right here we have who we are, right? So, let’s go ahead
and enable the visual builder. I’m going to give you the script that you need to,
basically, put this in. Hey guys.
So, before we enter this section, I actually made a little revision. I want you guys to enter in some custom
CSS into the theme really quick. So, before you put this in right here, which we are going to do right now, I want you guys to go to dashboard. We’re going to enter some custom CSS, which will basically make it automatic
to put those in the middle. So, going over to DIVI
and go to Theme Options. Now, this code, guys,
is in the description. So, just go ahead
and scroll down right here. This is the code you will need. It says something like: separator.small,
et cetera. So, just go ahead
and press enter somewhere. Just paste this code in there. So, it’s going to say:
display: block; position relative; this margin,
et cetera. Click on save changes. This will actually make sure
that these little dashes are below the title on every single
call to action or blurb that you have. So, I’m just letting you know this
before you guys go ahead and put in, because if you don’t,
it’s going to actually put this over here. So, let me just give you an example
of what happens if you take it out. I’m going to go ahead
and delete all this right here. Go to save changes. So, now if you go back to the website, you’re going to see that
this is now over here. Before you guys do that,
make sure to enter that code in. That’s it guys.
Back to the tutorial. So, I’m going to click on Edit, and we are going to edit this module. Now, I’m going to scroll down right here. Do you see how there’s a visual
and there’s a text tab? You want to make sure
you’re under the text tab. Simply,
press enter right there. Now, there is some text in the CSS. So, all you need to do is paste
that script in there, all right? Now, this creates that line right there. So, basically,
we’re creating some margin. We’re creating 18 pixels of top margin, we’re creating bottom margin, background color. This is the color that I selected. Now, remember,
you can get this color just by going to any one of those modules and simply finding that code,
the same exact way we found it for the bar counters. This is the height. Of course, you can make
it more, et cetera. I’m just going to click on check. Now, you’re going to see
that there is this divider. Now, guys,
these little dividers, they really do add décor and they really add
the flavor to your website. I know it doesn’t look like much,
but to a person’s first impression, they really do get a good
impression on your website. So, going back over here to who we are. Same exact thing.
I’m going to click on this. I’m going to scroll down. See, there’s a visual and there’s a text? I’m just going to paste this right here,
under the who we are, just like that. So, this is basically creating
that little bar right there. Same thing right here for our team. You guys are using code now. It’s so easy.
It’s that simple. You’re learning how to use WordPress. You’re learning how to use DIVI. Now, you’re entering
custom CSS in the modules. It’s not that hard. It’s really,
truly not that hard. So, right here,
same thing for our posts. I’m going to scroll down right here. This is, basically, why I chose
to use the call to actions as well. It’s just responsive. It looks better.
It looks cleaner. For the strategy planning,
I’m not going to put anything. For the our customers:
yes. Yes, I will put something here. I’m going to go ahead and put enter. Now, remember,
it must be in the text tab. You’re going to enter
that code in the text tab. We’ll go ahead and paste it.
Now the height. Let’s say I want to make
the height a little bit bigger. Let’s say,
4 pixels. So, now you can see
the bar is a little bit thicker, because I made it 4 pixels. So, if you want that effect,
that is how you would do it. Same thing here for the contact section. I’m going to go ahead
and scroll down right here. I’m just going to go ahead
and paste this right there. There you go.
So, now we have that beautiful line. It really adds décor
to all of our websites. So, that is basically
how you enter the line. I didn’t want to do it too much
but I think you guys are ready for it. I don’t think it’s that difficult. Some people get scared. They see custom CSS,
they get freaked out. It’s easy.
It’s really, truly easy. So, let’s go ahead
and go back to our about us page. Now, we’re going to do
the about us page. Now that I’ve shown
you guys the code right there, we can continue to use that
for the rest of our website without fear of saying,
“I don’t want to do coding.” It’s really not coding. It’s just entering a piece
of custom CSS onto a module. So, let’s go ahead
and enable the visual builder. Now, we’re going to decorate this page. So, here’s were going to
go ahead and enter in a module. We’re going to click
on this little blue icon. We’re going to do full width. We’re going to use a fill width header. Now, guys,
you can use different modules. You can add in a call to action,
you can add in a text module. I just want to, basically,
create this section right here on the about us section. Like I said,
there’s different ways you can do it. You can add a call to action, a regular text module, a blurb module. It’s limitless, guys. I’m just going to pick your brain and we’re just going to use
different modules, just to get a little bit more comfortable
with all the different types of modules. So, I want this text
right here in the center. You can actually make this full screen. So, let’s say,
for example, you want that big landing page. This is how you can do it. So, the full width header
would be an example of that. I’m not going to use it for that. I’m actually just going
to make it as an about. Now, I’m actually going
to ignore all these options, as far as adding in a button, adding in a background image URL,
et cetera. Actually, no.
I will add in a background image. So, right here,
I’m going to click on upload. Now, I’m actually going
to use this background right here. I’m going to use this one right here, and I’m going to click on Upload an Image. Then, scrolling down right here. You know,
we can actually add the Parallax effect. So, if you guys want
that effect of the image not moving, you can add in the Parallax effect. I’m actually not going to add it in,
but that’s just an option. I know a lot of people use
the Parallax effect. I do have other tutorials on the Parallax, but not this one. So, right here under the text,
guys, we’re just going to simply
enter in that piece of code. So, now we have
that section all ready for us. This is blue section,
let’s go ahead and delete it. There you go.
Now we have this section ready to go. Now, I’m actually got to save this. So, there is an issue right here;
the menu. This section is white. It doesn’t look good because we want
to make that transparency effect. So, let’s go ahead and do that before
we continue with making the website. So, I showed you earlier
about the menu style options, but we want to go ahead
and reduce the transparency on the white. Right here, I’m going to
go to Theme Customizer. Now, we’re going to change
the section where it is white. Header & Navigation. There is the Primary Menu Bar. I want to go ahead and reduce
the transparency of the background color. So, now we have the full image, as you can see,
showing. That is, basically, how you would create
that transparency effect for the menu. So, I’m going to click on Save & Publish. Don’t worry about the logo. There is actually a link
in the description to Fiverr.com, which I will talk about how to get
a really premium logo for a few bucks. It’s like $5. So, I’ve basically made the change there. Now, I want to add in some blurbs. I want to create it like this right here. If you guys have remembered, this is basically blurb,
blurb, blurb,
blurb. It’s just a three column row. So, let me just go ahead and show you. Right here,
I’m going to click on this plus icon. We’re going to click on regular. Also, guys,
in this page, I’m going to introduce you
to the DIVI library. I don’t want you guys to work too hard. I don’t want you guys
to recreate everything. We want to use the theme
and the ease of use as much as possible. So, right here,
I’m going to click on three icons. I’m going to use
the blurb icon right here. Then, right here we’re going to
go ahead and give it a title. I’m just going to put something like,
“Photo equipment.” No URL. Right here,
I’m going to go ahead and ignore the icon. Right here,
under image, I’m going to select an image. Actually, let’s go ahead
and use the blurbs instead. Tell you what,
we’ll use the icons right here. We will use the specific icons. So, go ahead and just select an icon. What should we use here?
This right here? Is that, right there, good?
We’ll go ahead and use that. Now, for the icon color. I want to change that to something
like that red color we were using. I don’t want to venture off. I want to use that same specific color. I think it was D something. Let’s see if I can find it. It’s something like that. I think that’s as close
as we’re going to get. I just guessed too. We can actually change
the image icon placement. So, we can have it to the left instead. If you want something like that, you can add that in as well. Now, right here,
I’m going to enter in some dummy text. Say, we’ll just go ahead
and paste this in the visual section. Like that,
but maybe that’s too much text. It looks a little too messy for my book. So, I’m going to reduce this
to something like this. There you go. So, you can have
this effect if you would like, or you can put the image on the top. Let me show you
the other way you can do it. So, right here,
I’m going to put the image to the top. I’m going to go
to Design and Use Icon Font Size. Right here,
we can actually change the size of the actual icon. Here, we can change the header font, which is this section right here. We can change the header size, which is this section right here. Then, of course,
the body font is referring to this section
right here as well. Scrolling down,
we can add in a border, if you want a border
for this specific section. I don’t think the borders look good, but there are a lot of uses for it. I have them on parts of my websites, but for this section,
I wouldn’t use it. I think it looks good. So, basically,
I’m going to say that’s good. Now, let’s go ahead and duplicate this. We’ll drag this up here. We’re going to duplicate this again. Simply,
drag it up here. Now, instead of actually
duplicating this whole section, we can just duplicate this row and have it as a three
specific section column. So, this looks pretty good right here. We probably would want
to change something. A Thousand Words. Simply Stunning. Go ahead and just talk about your company. You can use the different icons as well. You do not want to use
the same icons all over again, because it just looks bad. It doesn’t look good. Design is Key. Right here we’ll put something like:
Full Package. Then right here I’ll put:
Get Social. Then, maybe for get social,
you can add in the icon right here. For the full package you might want use
something like a mail letter or something. Something like that. I think they have an icon
of a key right here. I think we can find it.
Oh, there it is. Design is key.
Perfect. Simply stunning.
I’m not even going to look. Then, for a thousand words, we’ll put something
like this one right here. Let’s just say we want to go ahead
and expand these rows, we want to make it a little bit bigger. So, we can just make this row full width. The same thing goes
for this section right here. I want this row to be full width. So, now this looks much cleaner,
much more professional. The website is really
starting to come along. It looks really well. So, now that we’ve done that section, let’s go ahead and do the next section. By now, I hope you guys
are starting to remember this. This right here is simply just an image. A background image that we’ve placed. This is a call to action. Going over here.
We’re going to make a new row. We’re just going to make a two column row. Row.
Regular. Two columns. On this section,
we’re going to add in an image. Image.
Upload image. We’re going to use
this section right here. I think that’s the right image.
Is that the right one? Yeah, it’s this one right here,
guys. Sorry. I chose the wrong one.
This is a PNG file. So, the PNG file has no background. Over here,
we’re going to add in a call to action. We’ll put in a title.
We’ll put something like: Digital Solutions. Then, we’re not going to put a button. We’re not going to put anything. I don’t want background text. I want the text to be dark.
Dark looks good. Right here, I’ll just go ahead
and throw in some more dummy text. So, guys,
really the website is truly just images and position.
That is it. That’s how you’re going
to get phone calls. That’s how you’re going to get business. I’m telling you,
people truly buy the position and content. It’s just the way the human brain works. So, keep that in mind,
guys. It’s not all about you being the best. You might be the best.
You might be the best in your industry. If you have something
that just doesn’t look good, people aren’t going to call you. So, right here,
under this section, we’ve basically created an image
and a little synopsis of your company. Over here,
under this blue icon, let’s go ahead and add in
a background image. We’re going to add in this image
and then upload an image. Guys, the site is already
starting to come along, just by position of color,
position of images, and just position of text. So, I want to stress
that design is everything, guys. It truly is everything. Also in this section, guys, we’re going to talk more
about the pre-made layouts. I’m actually going to give you guys
a free pre-made layout that I have charged for on my website, but I’m only giving you one page. I’m only giving you one,
which is the services, but you will actually receive
a free premade layout in this tutorial. Let’s go ahead and do the next section.
We’re going to do discover more. Right here,
I’m going to click on plus, click on regular, and just simply click
on this one right here. I’m going to add in a call to action. I don’t know why it automatically
adds the background color. That is so ugly, right? It is so ugly. I’ll put something like;
Discover. Then, I don’t want a background image. I want the text dark. Remember, guys,
if you want to change this, this is the area to change the font size,
to change the color, the font,
everything. Now, under the text, I want to grab this stuff right here.
I want to grab that line. I want to keep the website consistent. So, going back over here. I’m going to grab the text again. I’m just going to copy it
from this section. I want to go ahead
and put this below the discover. So, text,
paste. Boom.
There we go. Now we have that continuous red look. It looks really good,
really professional. Now, I want to add
three more sections right here. So, in this section,
I want to add in a three column row. We’re going to add images. We’re going to add in three images, and then we’re going
to talk about those exact images. This could be anything, guys.
It can be our services. They can be our portfolio.
It can be a bunch of different things. Remember, we’re going to make a blog page and it’s going to connect
to the front page. I want to be creative. I want to expand the theme
as much as possible. Click on image.
Upload image. We can upload this image right here. Then, I’m going to click on check. Now, we’re actually going to
manipulate the section a little bit more. We’re going to expand it
and make it look a little bit bigger. I think it looks
a little too small like this. It just doesn’t look too professional, but we can make it
look a little bit bigger. I’m going to show you how to do that. So, right here,
another image. I’m going to upload this. So, now I want this a little bit
tighter and I want it a little bit longer. Under the row settings right here, I want to actually use the gutter width
and I want to reduce it. Maybe 2. Do you see how we have spacing there now? I want to make this custom width. So, now you see that we have 80%. We can reduce it or we can make it bigger,
et cetera. I think something around 80% is good. So, now the images are a little bit bigger and they have that small gap. I don’t want that
clustered effect just yet. It’s not good for this specific section. Over here,
I’m going to click on this plus. Now, we’re going to talk
about these three images. So, right here,
under the blurb section, I’m going to put something like: Rebranding Strategies. Go down here and go to visual. I’m just going to paste this text in here. I’m sorry.
This is the wrong text. No.
I don’t want to do that one. That would actually create the separator. So, if I click on that,
it will actually click the separator. I don’t want to do that. So, also remember,
this is a good example, if you pasted individual sections,
guys, it will look like this, okay? So, remember,
you must put it in the text section, because then it will
actually have the little bar. So, remember,
the coding in the script is where you put in the text section
for anything on WordPress. Going back over here. I’m just going to go ahead
and take my stuff. No, guys.
Actually, that kind of looks good. Maybe, we can continue to do this. So, you know what?
I’ll go ahead and just go down over here. The text,
I’ll just paste it below. It looks like that,
but that is a little bit too much text. So, maybe just a little bit less. That’s a cool look.
We can just duplicate this section. Drag it over here. Duplicate this section. Now, guys,
when I do these tutorials, I think you can tell,
I am not scripted. I don’t have a book that I read from. I just do it.
I just know how to use the theme. I just get on my computer and I say, “All right. Let’s just do this.
Let’s create it.” Beauty and the Beast looks good. So, this section right here
looks very professional. Guys, like I said,
it looks great and we didn’t really add too much, just a three column row,
this section right here. These actually really add to décor and they really add
a feature to our website. So, now let’s go ahead and create this
little section right here, this crow. We’re actually going to introduce
you to the slider module, but we’re going to use it
more as a testimonial. It’s not supposed to be used for that, but it actually works better
than the actual reason why it’s created. So, we’re going back over here. We’re going to create a new section. We’re going to do Regular, one section,
and we’re going to make a call to action. Right here,
I’m going to put something like; Our Customers. Then, I’m going to
go ahead and scroll down. I don’t want a background color. I want to change this text to dark. We can center it. Then, right here,
under the text, maybe you want to go ahead
and add in that code that we had. You know, we can actually,
probably, just take this and just drag it down
to make that section. Do you guys want to do that?
Let’s just go ahead and do that. I’m going to go ahead and delete this. We’re just going to duplicate this and I’m just going to
drag this to the next row like that. Basically,
I was lazy but it doesn’t matter, because I’ve actually created
what I wanted with this module right here. I’m actually going to delete this text.
I don’t want any text here. So, I used a blurb module here
instead of a call to action, but you guys can see that it still works. There is no right or wrong
with what you can use. So, over here in the design,
I want to change the header font. I want to let people know
that it is a new section. Then, we can go ahead
and scroll this down a little bit more. Over here,
I want to add in a slider. So, we’re actually going
to use the slider module. Actually, we can click on this right here. Instead of creating a new row, we’re creating a new
module within this row. So, that’s what this plus icon means. Right here,
I’m going to go to plus. We’re going to add in
the slider module now. Let’s go ahead and scroll down
until we find the slider module. Now, let’s add a new item. So, I’m going to put something here. We’re not going to put
a heading here actually. We’re not going to put a text. We’re not going to put
anything here at all. I’ll explain why. If we put a title here,
guys, it’s going to,
basically, create this title right here. Now, I don’t want that. I think that would not be
a good introduction for the slider module. I’m actually going
to delete this right here. We’re going to scroll down. The background color,
I want it full transparent. I don’t want any
background color whatsoever. Going over here,
I’m just going to keep scrolling down. Now, the visual section. So, over here,
I want to add in some dummy text. Actually, no.
We’ll put like; “This is the most amazing company ever. We think these guys can make anything they put their minds to. Simply stunning!” Then, right here I’ll put,
“Darrel Wilson.” Now, right here,
I might want to change this text. So, right here,
under this little color section here. I think it’s A section. We’re going to click on this
and we’ll just change the color to something like that. So, now we’ll click on this little check. We have this little section right here,
but as you guys can see, I do want to reduce the padding here. I want to make this slider
as small as possible, and I kind of want
to change the text color. So, we’re going back over here.
I’m going to go to design. Now, the top padding
and the bottom padding, we’ll get that in a little bit. Let’s go back over here.
I want to go to design. So, if you guys want to change the color,
we’re going to have to go to something like the body text. Right here,
we’re going to change this to black. Just like that.
So, you see, now we actually have
the slider right here. So, let’s remove this box
and let’s bring this up a little bit more. Right here,
click on this gear icon. Simply just scroll down right here. We want to remove
this inner shadow right here. So, this option right here,
I want to remove that inner shadow. Now it’s gone. We’re going to go back to Design. Do you see where it says Top Padding? This is padding right here.
This is space. I don’t want any space there. So, I’m going to put 0. For the bottom padding,
we can put something like 10 pixels. Then, click on check. So, now let’s say
you want to add in another slide. We want to have these rotate with different people
talking about our website, saying like,
“Yeah, this looks great.” I’m going to click
on the module setting again, and add a new one. The same exact thing
we did right here guys, just do it all over again. Except I am lazy and I’m just
going to duplicate the module. So, I’m going to duplicate it. I’m going to click on
this little gear icon and simply just change
the text and everything, because we’ve already
done the settings for it. So, I’ll put here,
“Danny Gomez.” Then, we’ll put something like; “Great work.
Superb!” I’ll click on check. There is our first slide. Then, it’s going to change
onto our second slide, where it’s going to say that it is superb. Right here, I’m going
to click on this little blue icon. Now, let’s go ahead and add in
a background image to this. We kind of want to add in
a little bit of flavor to it. There’s no background image.
It doesn’t really look good. So, right here,
click on Background Image. I’m going to add in the crow. I’m going to click on the crow
and click on Upload an Image. So, now this section
is basically complete, except we should put “Our Customers”
there instead, right? Then, click on check.
Now, the slide isn’t rotating fast enough. So, right here,
if we click on it, it will change that. We want to make it automatic. So, you click on this,
we can go ahead and scroll down, and we can do automatic animation. We can change the seconds to 3000. Now, for every 3000ms,
it’s going to change. So, for every 3 seconds,
it’s going to change. We’ve basically,
really manipulated these modules to do whatever we want. If you want to make
further changes to the slider, guys, like I said,
there’s options right here. Like, showing the controls, remove the inner shadow,
like we just did, et cetera. You can actually take off the controls,
so now there is no controls. By doing that,
we’ve actually gotten rid of those little bubbles that were in the way.
Do you see that? I would probably do that for this section, but I’m just trying to introduce you
to the creativeness of the theme. It’s all about your imagination. Now, let’s go ahead and add in
the next section, which is simple. This right here is a simple section. Then, I’m going to talk about
how to save this section and export it, because we’ve already made this section. We don’t want to do it
all over again, right? So, going over here. I’m going to click on this plus icon,
Regular, and go to four. Right here,
this is just practice at this point. You guys have probably already done this. We’re just going to add in
four images right here. So, image. Then right here,
we’ll add in another image. Oops, I passed it.
Let’s see where it went. It’s late, guys.
It’s like 03:00 in the morning. It’s super late. My dog is looking at me like,
“Let’s go to bed already! What are you doing up still?” She’s giving me that eye from the couch.
I can see her. Right here, image.
Upload. This one. Then, right here,
I’ll do the same exact thing and I’ll do image. Then, I’m just going to
go ahead and upload this, and do that like that. Now, let’s go ahead and save this. I want to basically steal
that other section, and drag it onto this page. So, let’s go ahead and do that. Let’s go back to our homepage. Don’t worry about the full width, guys. We will get to that. We will get to that a little bit later,
towards the end of the tutorial. We’re going to enable a visual builder. Guys, the website
already looks really good. It looks amazing and it looks really nice. So, I’m going to scroll down right here. I want to borrow this section.
I want to steal it. I don’t want to recreate it,
because I’ve already made it. Why do it all over again? So, right here,
under this little gear icon, we can go to this section right here, the little add to library. So, right here we’ll put;
footer. Then, we’ll go ahead
and save this to the library. So, now it basically saved
this to our library. I’m going to click
on this and click on save. We’ll get to the premade layouts
in the next section, guys. I kind of want to reward
you guys for being here, so I’m going to give you the layouts
on my website that I make people pay for. Kind of hook you up,
you know? So, right here I’m going to go back
to the about us section. We are going to simply
export that section onto the bottom right here. So, I’m going to go
to Edit Visual Builder. I’m going to scroll down.
Just keep scrolling. I’m going to click on
this section right here. From this section,
I want to add from library. You see how we have footer?
Just click on footer. That’s it.
It’s already made for us. We don’t need to do any hard work. So, this is a perfect example
of why you would want to save certain parts of your website, especially parts you’re
going to do all over again. So, now I’m going to click on
this and click on save. Guys, if you look at our website now; I mean,
it just looks super professional. It looks elegant.
It looks simply amazing. It’s not a lot of hard work.
It’s just doing it. It’s just watching the tutorial. Guys, please watch the tutorial
all the way towards the end, because there’s going
to be a lot of stuff that I’m going to introduce,
that you’re going to be like, “Oh, yeah!
I should’ve had that!” Or, “Oh, yeah!
We can add that too!” So, I’m going to go
and click on services now. I’m going to close these right here. Now, let’s go ahead
and get started with the services section. So, for this section, we’re actually going to use
a premade layout. Instead of doing all the hard work,
I want to introduce you all to the potential of DIVI
and what you can do. So, in this section,
we’re not going to do anything. We’re just going to upload a layout and all the hard work
is going to be done for us. So, right here, I want to
go ahead to Enable Visual Builder. Now, in the Dropbox that I had earlier,
there is a layout for you. If you don’t want
to use that layout, guys, you can actually go to my website,
darrelwilson.com. I have tons of free layouts
that you guys can use. So, this is the DIVI section. There are premium layouts. All these,
right here, are free layouts that you can use. So, let me show you how to use these, so you can use this
in the future without any mistakes. We’re going to go over here. I’m going to click on
this little purple icon. I’m going to click on
this little Import/Export. Right here,
I’m going to click on import. Now, right here
I’m going to click on Choose File and I’m going to select the layout, I believe it is called,
“Services for Tutorial.” I’m going to click on open. Then, right here,
I’m going to click on import. Now, guys,
if this does not work, there are other ways to upload it. The DIVI layouts are a little strange. Sometimes it works one way
or the other way, but I’ll show you another way after this. So, this is the page,
guys, the services page. As you guys can see,
everything is already done for you. You can make any changes
you want to the website just like that. You have a fully functional website. Now, DIVI is known for premade layouts. So, this is a huge plus. Instead of actually doing
all the hard work, you can just go ahead and upload a layout. It is all done for you. So, this is the services page,
guys. This is done.
We are done with that section. By now, you probably know
how to make changes. You can go ahead, have fun,
and mess around with these settings. Let’s just say that section
did not work for you, where you go to Import/Export. I know for Bluehost and Amazon servers,
it does not work like this. So, this is another way you can do it. I’m going to go to my dashboard. We’re going to go to DIVI library. Right here,
we click on Import and Export. Then, right here we’ll click on import.
choose the file. Then, simply go ahead
and just choose that file again. So, services for tutorial.
Click on open. Then, import. So, this is another way you can import it. As you guys can see, for this
server, it does have issues. So, it just depends on your server,
guys. Some servers are just a little bit
strange with the layouts. Some work just like perfect. So, for this specific domain,
it probably did not work correctly. That’s just the way it works. I’m kind of glad that happened,
because it is a problem with the layouts. Nonetheless,
they do work and it is amazing. Now, there is one more way
to upload these layouts. So, right here,
under Pages. I’m just going to create
a dummy page right now. So, I’m going to go to Add New and just type in something like;
test. Now, right here,
you click on Use The DIVI Builder. You can also upload it right here as well. So, right here we’ll click
on Import and Export. We can use the backend editor. So, I’m going to click on import,
choose the file, and then go ahead
and simply find the file. Now, guys,
if none of these work for you- I know there was one guy
who I was helping in Australia, where it just didn’t work for any method. So, it doesn’t work
for any of the methods, then you might want to contact
your hosting company to say, “Hey, it’s not working. Can you please let me
know what’s going on?” So, this is the test page that we did. Now, I’m going to click on
preview right here. As you guys can see,
it works like a charm. So, it works perfect for this server,
but there are some servers that it does work a little strange with. So, I am just going to
go ahead and inform you that it just works
a little strange sometimes. Nonetheless, it still works. So, now I’ve shown
you guys how to do the layouts. Let’s go ahead, now,
and create a blog. Now, in the beginning of the tutorial,
I didn’t really mention the blog but we are going to create a blog. I kind of want to link
the front images to our blog. So, right here I’m just going to
click on Add New. I’m not even going to save this page,
because rest in peace. Right here,
we’ll click on blog. There’s a lot of different ways
we can do this, guys. We can actually use the DIVI builder
and decorate the blog, or we can just go ahead
and use the modules. For right now,
I want to click on Use Visual Builder. There are premade layouts,
guys, for the blog that DIVI comes with,
standard. So, let’s go ahead and use those ones. Right here, I’m going
to click on this little plus icon. I know they have some premade layouts. I think it’s right here,
under the plus. Yeah, these ones right here. So, these are also premade layouts
that DIVI comes with standard. You can use these,
if you choose to. They’re not the best,
but they’re a great starting point on something that
you’re starting from scratch. It helps you get ideas,
et cetera. So, we have the Blog Standard right here, the Blog Missionary,
et cetera. So, I’m just going
to click on one of these. This is, basically,
the Blog Missionary. We don’t have any blog posts right now. So, right here, it just says,
“Welcome to my blog.” You can decorate this. I’m just going to click on publish here. Now, I’m going to show you guys
how to actually make a post. Now, I actually do have premade blog
layouts as well, on my website. Right here, I’m going to click
on plus new and click on post. Now, again, you can use the DIVI builder or you can go ahead
and make your custom post. I’m going to do one regular one
and then the next one, we’re going to use
an enhanced version of the layouts by using the DIVI builder. So, right here I’ll put;
Blog Post 1. Then, right here,
I’m going to go to my famous website and get some dummy text. So, I’m going to grab
some dummy text right here, I’m going to copy this
and paste this over here. Maybe you want to add in
an image right here, something like an add media. You can go ahead and just slap on
a picture of whatever you would like. Let’s say you want it centered,
click on center. Then, space.
Maybe add in some more text; whatever you want to talk about. Now, we need to set
a featured image, guys. You always want
a featured image in all of your posts. So, right here,
under the featured image, we want to go ahead and select an image. So, what is a featured image? Well, you’re about to see it right now. A featured image is
basically the first thing they see when they see the blog post. You can also make these into categories. So, right here I’m going
to do blog testing. I’m going to click on publish here. So, we have our post. Now, let’s go ahead and preview this post. This is what our blog post looks like. This right here is our featured image. This right here is some text that we have. This right here is the image
that we put inside of it. This right here is some additional text. These right here are widgets and plugins. I will get to that in just a little bit, after we talk about the premium
blog post that we can make. So, let’s go ahead now,
and make a premium blog post. Right here,
I’m going to go to plus and go to post. Now, right here I’m going to put;
blog post 2. Instead, we’re going
to actually use the DIVI builder. Instead of using the text and everything, we can actually design a page. Just like we created a page, we can do the same exact
thing for our blog post. I’m going to go ahead
and click on Load from Library. Let’s use one of DIVI’s
basic predefined layouts. Now, there are some more
on my website that you can download. My website is in the description. Let’s just add a text
or something like that. Something simple and easy.
Let’s go right here. We’ll do Page Full Width. Now, let’s click on Preview Changes. So, now we have a blog post
and everything’s already done for us. All we can do is,
basically, go through some of these,
add in some images, change the text a little bit. They’ve basically given us
something to work with. So, if you just can’t really think
of anything and you’re kind of like, “I don’t know what to put.” Go ahead and use some
of the predefined layouts as well. You guys can decorate this,
just like we did earlier. We can go ahead and add in
an image right here. We can insert a module. We can do whatever
we would like for our blog post. So, that is another way
you can design the blog post as well. Now, I’m going to go
to Set Featured Image. I’m just going to go ahead
and select some random one right here. So, I’m going to do this girl and click on publish. Now, I’m actually going
to make this a category for blog testing, and click on publish. So, we have these blog posts. Now, let’s go ahead and maybe add
the blog page to our actual menu. Right here,
under appearance, we’re going to go to menus. Now, right here under blog, let’s go ahead and add this to the menu. I’m just going to put that right there
and save the menu. Now, let’s go ahead and see our website, and also click on the blog post, to basically see what has happened. So, right here,
I’m going to go to blog. There you go.
So, this right here was our test post. So, this is a sample post that
is created with WordPress, in general. Here are our posts. So, these are our
featured posts right here, and this is the Missionary style. So, this is a pretty cool
layout for a blog. If they click on it,
they can go ahead and read all about it. Now, let’s go ahead
and talk about the widgets and also this sidebar right here. So, let’s say you want
to add something there. Let’s say you want
to delete something there. How do you do that? Well, I’m going
to introduce you all to widgets. So, right here,
under the dashboard, we’re going to go down to appearance,
and widgets. You see right here how it says sidebar? This is, basically,
where everything is. Let’s say I want
to get rid of all this stuff. Delete this right here.
Delete this right here. Delete this right here.
Delete all this stuff. Guys, you can add anything here. You can add a Facebook like box, you can add an Instagram feed, you can add Google AdSense. I actually have a separate tutorial
on how to add Google AdSense. So, be sure to check that out. We’ll add in pages right here. So, we’ll just go ahead and drag pages. Click on save. Now, let’s go ahead and take a look. Mange with Live Preview.
That’s a new option. Let me see what that is. Oh, that’s nothing.
Never mind. That was a new option for WordPress. I thought it would be something cool. Now, let’s go ahead and go
to our sidebar on our blog page and see what has changed. So, I’m going to go over here to our blog. If I click on one of these,
you’re going to see that Our Pages only shows up now. So, you can add tons of stuff here,
guys. That is where you’re going to use plugins. Let’s go ahead and go over here,
to our dashboard. I’m going to go to plugins
and go to add new. Now, guys, plugins
are basically added features. Think of your website like a smartphone. These are apps for your website. Right here,
I’m going to go to popular. Each of these do a different thing. So, Yoast SEO,
I have a tutorial on that. It helps SEO.
It helps boost your ranking. This right here,
basically, let’s you sell on your websites. This right here is a page builder.
This right here backs your website up. This is an XML sitemap. The list goes on and on, guys.
It goes forever. So, there are millions
of apps out there, okay? Let’s just say you want to do
a Facebook like box. They have tons of them. There are a lot of people out there
who make these plugins right here, but this one, I actually find,
works the best. I’m just going to do
this for tutorial purposes, just to show you what a plugin
is and how to use it. So, I’m going to click on activate. These are our current plugins. Right here, you can see
the Widget Facebook Like box is activated. Now, I’m going to go back to our widgets. So, Appearance, and go to Widgets. Now, we see that
we have this new box right here that says,
“Widget Facebook Like box.” So, let’s take this
and simply drag it up there. We’ll give it a title; like us!
Page ID. Now, guys,
this must be a Facebook fan page. Remember, if it is your personal profile,
it will not work because it’s private. So, if they click on it,
it’s going to take them to a private page. So, this right here is my fan page. I’m going to take the link right here and I’m just going to go ahead
and post this right here, into the Page ID. Right here,
you can use a small header. Do you want to hide the cover photo? Yes.
I kind of do. Do you want to show your friends faces? Yes.
I do. I’m going to click on save. Right here, you can change the width. Remember,
these are pixels. So, it’s 180 pixels.
The height is 300 pixels. You might want to make this 250 width. Make it a little bit thicker. I’m going to click on save. Now, let’s go ahead
and check out the blog post. So, I’m going to click
on this and go to blog. Now, I’m just going
to click on blog post 1. You see right here how it says,
“Like us!” Here is the Facebook like box. So, this is basically
what widgets and plugins are. Guys, the list of plugins goes on and on. I actually have,
in a separate tutorial, the 10 best plugins you can get. So, be sure to check that out. This is an example of widgets and plugins. That being said,
let’s move onto the next page, which we are going to do;
the portfolio. The portfolio, guys,
is a little different. The portfolio section, we must,
basically, add a project. So, let’s go ahead and do that. One more thing I actually wanted
to talk about before we do that. I’m sorry.
I do that a lot. I know you guys are probably like,
“This is a bad tutorial.” I want to show you how to link
your blog post onto your front page. Do you remember earlier,
how we had those blog posts and we actually had the front page? So, right here,
under posts, we’re going to go to All Posts. I’m simply just going to
go ahead and grab blog post 2. Do you see this permalink right here? So, this is the permalink
to this specific blog post. So, let’s go to our front page. Don’t worry about the slider,
guys, we’re going to change that
towards the end of the tutorial. Over here,
if we scroll down, we have these posts right here. Guys, I actually made these specifically because I want to add creativity. So, I’m going to go
to Enable Visual Builder. You guys might have noticed
that I changed the images. I tend to do that on my breaks. So, I’m going to go ahead
and scroll down right here. Right here,
I’m going to click on Module Settings. I’m just going to scroll down. Do you see where it says link URL? I’m going to go ahead
and paste that in there. Then, we click on check.
Now, if somebody clicks on this picture, they will actually
be taken to that blog post. So, I’ve created my own page for posts because I don’t like the way
it comes standard with DIVI. I’m going to go to exit visual builder,
scroll down right here. I’m just going
to click on this right here. If you’ve noticed,
right now, you can see that my cursor
has that symbol of being linked. I’m going to click on this.
There you go. Now we are being directed
to that specific blog post. That is a good example of how you
can be little bit more creative with DIVI and use some of the features.
Guys, it’s limitless. Whatever you can possibly think of,
you can do it. It’s just about your imagination. Now let’s go ahead
and actually create a portfolio. I’m going to go to dashboard right here. Right here,
under projects, we’re going to add a project. I’m going to go ahead
and just put in something like; adventures. I’m going to use the DIVI builder. I actually want to decorate this page. So, what I did before,
when we created pages, I want to do that same thing right here. So, I’m going to go
to Use the Visual Builder. We’re just going to create
a small page for this specific project. Right here,
I’m just going to click on the plus sign. I want to go to full width. I’m basically going to do what
we did on the other pages, guys. I’m just going to go ahead
and make a section right here, just like we did for the other ones. I’m going to put
the name of the post right here, so put adventures. I’m going to make this centered. Then, I’m going to click on this. Now, I want to delete this blue section. Right here, I want to go ahead
and add in a background image. We are creating a customizable
section that is a little different than what it’s supposed to be. So, I know this might look a little off. You’re kind of like,
“I’m not really sure what he’s doing.” Just follow along and then
you’ll see what I’m talking about. So, right here we have Adventures. Now, let’s go ahead
and add in some images. Right here,
I’m just going to click on regular. I’m just going to select right here. I’m just going to go ahead
and grab in some images. So, what images
do you want for your portfolio? Let’s go ahead and just grab some images. Upload image. We’ll grab this one here. Upload an image. So, we have the image right here. We can do whatever
we would like with this. We can open to the like box. We can add the animation right here,
from right to left. For the end of the alignment,
I want it centered. So, now let’s go ahead and make one more. Plus.
I’ll add in another image. Add in something
that looks like this right here. This one,
I kind of want to center it. Maybe, the animation from right to left.
so it has that zigzag as they scroll. Actually, from left to right. For image alignment,
I want it in the center. When somebody comes to this page, they’re going to see our
portfolio like this. It’s going to be clean.
It’s going to look really good. Now, let’s go ahead and just add one more. I’m going to go ahead and go to image. Upload the image. I’ll grab the DIVI one right here. Now, right here we can go ahead
and put in some text on the bottom. Maybe you want to go ahead
and talk about the author, or add in something about the author. So, let’s go ahead
and just use a basic text module. Find the text module here. There are a lot of modules,
guys. I’m very aware of that.
I think it’s right here. So, right here we’ll put something
like centered, dark, and then we’ll put;
About the Author. Then, we’ll put;
“Darrel does this kind of stuff sometimes. He goes hiking, and enjoys eating pho and ramen.” I love Asian food.
I really do. It’s delicious.
I can eat it all day. It’s bad. It has a lot of salt
but it’s just so delicious. So, right here we have about the author. Then, here you can add something else. Now, this is basically
the end of the project. Let’s go ahead and add in
that premade layout that we did earlier. Add from library and do a footer. So, now, right here,
we have this contact us. This is a really clean portfolio section. It all matches up.
The color schemes look good. Right here,
you can add in something you would like. I’m going to click on
this and click on publish. So, we’ve basically created a project. Now, we actually need
to create the portfolio page, so that we can put this project inside. Right here,
let’s go to Portfolio. Now, let’s go ahead
and just do the same exact thing. Let’s create the page. It’s very similar to how we did it. I’m going to go to Enable Visual Builder. Right here,
I’m going to click on this. Full width. I’m going to use the full width header.
Guys, remember, you can use any module. You can use a call to action,
a text module. I just prefer to use this. Then, right here we’ll put portfolio. I can’t even spell.
It’s bad. So, right here I’m going to do centered. Something like this.
I’m going to delete this top section. Here, I’m going to add
in that background image, the one that we had earlier. We can do something
like this one right here. Then, right here,
I’m going to click on this. We can go ahead
and add in the portfolio section. So, over here,
under regular, I’m going to click on this big one. We’re just going
to simply add in portfolios. So, there’s a filterable portfolio, but I want to add in the basic portfolio. So, we have the layout here as well. We can have as many posts. So, how many posts do you want to show? Do you want it to show the title? Do you want it to show the category? Pagination?
Et cetera. Also, for the design,
you can change the design of it. If somebody decides to put in the color icon, you can add in an overlay to the picture. Whatever you would like. So, I’m going to click on check. Now, the reason
why it doesn’t show up, guys, is because we actually didn’t
put a featured image for that picture. Right here, I’m going to click
on this and click on save. Now, we need to actually add
in a featured image to our portfolio. So, let’s go ahead and go back over here. Let’s go back to our projects. Adventures. I’m going to give it a category. Let’s just say that this
is your photography one. Add a new category. Right here,
under featured image, I’m going to go ahead
and select one of these right here. We’ll grab one of these ones right here. I’m going to click on update. Now, let’s go ahead and visit the site. Right here,
let’s go ahead and go to portfolio. So, now we have one
of our portfolios showing up. Guys, remember,
you can do this a bunch of different ways. Now, in this specific section,
I have this section I have this section. So, if you click on it, it’s going
to take us to that same blog post. That is another way
to design the portfolio section. If you want to get creative and you want to add in
a lot more of design, you can actually do
the same thing that we did earlier. We can have a grid effect. We can have different styles. It’s virtually limitless,
guys, on how you can design
your portfolio section. Let me show you how
we achieve that grid look before, on the other website. Right here,
I’m going to click on this gear icon. Now, we have this option right here. We have Layouts;
I want to do Grid. Do you see where
it says include categories? You can basically say look, “I only want the categories that involve
photography in this specific section.” If you want to categorize
your layouts to say, “I only want this section to show
something that deals with photography,” you can do that. How many posts do you want on this page? Let’s say you create 20. So, you can say, “Look, I don’t want
to show all the old stuff. I only want to show the new stuff.” So, I’m going to say I only
want 10 of these posts right here. How did I achieve that look
earlier on that other website? Right here, I did the same exact thing,
guys, for the photos. Do you remember photos?
How we made the padding 0 on everything? So, right here,
on this gear icon, I’ll make this full width. I’m going to use the custom gutter. Then, I’m going to change this to 1. Here, I’m going to go ahead and say, “You know what? I want
to reduce the padding right here. I don’t want all this space right here.” So, right here in the custom padding, I’m going to put 0 at the top right there. Now, I’m going to go ahead
and reduce that space. There you go. So, let’s say we add in
a second project right here. It’s going to show up
right next to this one. Let me show you what I’m talking about. I’m going to go over here.
I’m going to click on save. Now, I’m just going to do one more,
guys, just for tutorial purposes, to show you how you can achieve
that grid look that I had earlier. Right here,
I’m going to go to project. Now, you don’t have to follow me, guys. I’m just doing this to show you how to add
in multiple projects and add design to it. So, we’re going to put;
Cool Stuff. I’m just going to go ahead and put test and set the featured image. We’ll add something
like this picture right here. Set that as a featured image.
Put that as photography. Click on publish. Now, let’s go ahead
and view our portfolio section. Portfolio.
There you go. So, now you guys can see
that every single post that you make will have that grid effect. Remember, if they click on this,
it’s going to look bad. We haven’t decorated this specific page. So, if you want to make it look good,
you know what to do. So, earlier,
just like we did right here. We have this really clean portfolio
section and it looks really professional. It looks really good. I would strongly advise
you guys to decorate, even the portfolio page, because your website is on the internet
24 hours a day, guys. You don’t want to be lazy and say,
“Oh, that’s a lot of work.” Let me just show you guys one more time. I’m going to go ahead and upload one more. Actually, I should just do two, huh? Just to show you
the whole effect right there. So, I’m going to do:
Darrel Wilson. Then put: Test.
Add this in. You guys, you don’t have
to follow me right here. I’m just showing you
for tutorial purposes, just to give you an idea
of what you can do. So, I’m going to add this one
right here and click on publish. I’m going to make one more. Add one more project. I’m going to set this
as Pattywack, my dog. I’ve got to walk her too,
you know? She peed on the couch the other day.
It was not good. I’ll use this picture right here. Actually, I’ll use this one right here. Then, I’ll click on publish. Now, let’s go to Visit Site
and go over here. Go to Portfolio.
Viola. Beautiful.
Clean. It looks really professional.
It looks really good. So, this is a very good idea on how
to decorate your portfolio section. Guys, don’t forget, you must add the footer. We have it in the library. Add from Library.
Footer. Now, we have this section right here. You want to include this
on every single page, because that’s why we added it earlier, so it’s easier for us. It’s super simple.
We just click on a button. That is now our portfolio page. Let’s go ahead now and move on. I’ve shown you guys
how to do the portfolio section. Guys, this can be anything. This can be business partners.
It can be anything. You just have to use your imagination to think about what
you can possibly put here. I can put this for any website.
For a church website. For a cellphone.
For a dog. You can have before and after.
Testimonials. You can have all sorts of stuff. You just have to really think
about what you want to put there. So, over here,
I’m going to go to the last page. We’re going to go to do
the Contact Us page. First, we’re going to enable
the Visual Builder. Let’s go ahead and basically do
what we were doing before. On our contact map right here, I’m going to go ahead
and open up that website; divistudiolayout.com. If you guys have noticed,
basically, we have this full width map right here. So, this is a module right here. We have a full width map. We have a call to action
where we added that code. We have a contact form that we put in. We have a call to action with a text. Here, we have a footer. So, I hope by now,
you guys can sort of see a page and just basically know
which modules to put in there. It’s like a gift. Once you learn how to do that,
you can make anything. You can make any single website
you put your mind to. Let’s go ahead and add in
the full width the section, so the full width map. Right here, I’m going to go
to add a new item. Guys, this will not show up yet because
we need to actually get a Google API key. You know,
I really wish they didn’t make us do that, because before that was not the case. Right here, I’ll just put; home base. This is a base. Then, Pasadena. If you click on Find,
it might not show up because we need to enter
the Google API key. So, we need this right here. Go on over to Google.
It’s free to get it. Type in Google API key. You’re going to get
the first link right here, that says developers,
et cetera. So, click on Get a Key/Authentication. Right here,
you click on get a key. Just go ahead and create
a new project by going right here; Create and Enable API. I have tons of them.
I have like 50 keys. So, I have a lot of other
websites that I manage. I use keys for all sorts
of different ones. You’re just going to get a key,
guys, and that’s it. You’re just going to take this
and you’re going to paste it in there. Now, there’s two places
you can paste this key. So, this is the API key that you need.
Go ahead and copy this. Also, guys,
you must have a Gmail account to do this. So, if you do not have a Gmail account,
you have to make one. It’s free.
Don’t worry. This is where you get the API key. We actually need to go ahead
and go to our customizer to put this in. So, right now
I’m just going to click on save. We’re going to save this empty page. I know it’s an empty page,
but why not? We’re going to go to our dashboard. We need to put that API key
inside of the theme. So, right now,
as you guys can see, it just says,
“Oops! Something went wrong.” It’s funny because I actually had
a tutorial a few months ago. I was like, “Oh, something’s wrong
with the plugin, guys. Just ignore it.” It was me.
I didn’t know. It was actually funny because it updated
that specific day, from Google. So, it was just
a really big coincidence. Go ahead and scroll down right here. You’re going to see Google API Key. Go ahead and just paste
that key that you have in there. Then, click on Save Changes. So, I’m going to go to Visit Site. We’re going to go back over here,
and go to Contact Us. So, now we need to go ahead
and put in an address right here, because now you can see that it’s grey. It’s like, “I want to work but I just
don’t have anything to put in there.” So, go ahead
and enable the visual builder. Now, this section,
I’m going to delete it. We’re going to click on the module icon. Under home base I have something
like Pasadena, California. We should put Rose Bowl. Let’s see if we can find the Rose Bowl.
Nope. No Rose Bowl.
Okay. So, I’m going to put something like… Oops, that did not save. So, this is the map right here. I’m going to click on little check. Now, the map center address. Where do you want this map center address? So, something in Chatsworth,
California. Click on Find. So, now it is centering
in this specific section. Now, the little dot right there
is going to show up right here, but remember,
this section for the map center address is basically saying,
“Where do you want us to focus on?” So, you probably want
to put in the same address twice. There is our little dot right there. That is basically how you guys
use this specific section. You guys can actually add in something on the home base. I put “Home Base”
but you could put anything. So, scrolling down here,
we’ll put in something like, “This is the home base 9-5.” Then, click on check.
Now, there is some options right here. Mouse wheel zoom. So, if I go over this,
I can zoom in, I can do this,
et cetera. Now, if you do not want this,
you can click on this right here. This will actually disable that. I’m going to go ahead
and leave that on and click on check. You guys can see
that the map is right there. Then, right here,
home base. “This is the home base of operations 9-5.” So, let’s keep going. We’re going to just go ahead
right here and click on this. We’re going to add in a call to action. So, same thing right here guys,
call to action. “Feel Free to Contact Us.” A good tip of advice,
always make the first letter capital. It’s just what you do. It’s just, basically,
what you do in web design. I’m going to make this dark. Now, over here,
I want to make this a little bit bigger. So, the header font,
which is this section, I want to make it bigger. Remember to add in that
little piece of code right there earlier. Do you remember how
we added that code earlier? I’m sure, by now,
you know how to do that. Right here,
I’m going to scroll down, go to my favorite website, and we’re going to use this dummy text
to put in this section right here. So, now let’s add in the other part. We’re going to add in our contact form
and also some additional information. So, right here I’m going
to click on add a new row, two rows. Over here,
I want a call to action. I’m also going to show you guys
how to space these apart. Now, this maybe a little bit too close. So, I want to show you guys
how to space this apart. Here we’re going to put like;
Our Offices. No background color.
Dark. What should we put right here?
We’ll put something like; 198 west 21st street, New York. Actually, we use the text part right here. We’ll go right here and we’ll do; New York, NY. Then,
email. Hello.com Then, a phone number. Then, I’ll click on check right here. Right here, we want to make
this a little bit more cleaner. So, we can go to our visual
and we can make this align to the left. Something that looks just like that. So, that looks a little bit more cleaner. The lines correspond
and there’s no spacing. That’s why we use the text section. Right here, I’m going to go ahead
and add in a contact form. Right here,
I’m going to click on this. We’re going to go down to contact form. It basically predesigns it for you guys. You know, the name,
the email, the address. You can decorate this. You can change name to something else. Do you want to make this a required field? You can say yes,
you must put your name in there. Do you want to make this full width? You can make it look full width
to look something like that. Same thing for the email.
We want to make that full width too. The email right here under full width.
There you go. This right here is a CAPTCHA guys. So, basically saying we don’t want
any bots to harass us and bother us. If you want to enable the CAPTCHA,
it’s automatic. If you don’t want to enable the CAPTCHA,
you can click on disable CAPTCHA. That will take it off. Guys, you can go to design
and decorate the background form. You can make it whatever color you like. The box right there,
you can make it circular. These settings, guys,
are basically a little bit repetitive. It’s just like,
what’s the text color, the spacing,
the height. All this stuff right here is stuff
that we have talked about. Also, you can decorate
the button right here. So, there are a lot of different styles on how you can make this form guys. It’s virtually limitless. Remember, I would keep it with the color
scheme that you have for your website. You don’t want to get all tacky. You don’t want to jump all over the place, kind of like I am in this tutorial. You don’t want to do that. Also, right here, we want to go ahead
and add in that beautiful footer. So, right I’m going to go to
Add from Library and click on Footer. Voila.
We have a beautiful contact us page. One more thing, guys,
on this section. You want to put in your email. So, right here I’m going to put my email and I’m going to click on check. So, now I’m basically telling them that
I want it to go to that specific email. That email you just saw,
don’t email it because I’m just going to mark it as spam.
I’m just kidding. You guys can email me
if you guys need help. That is basically, guys,
a quick rundown of the Contact Us page. It’s a very simple contact page.
There wasn’t a lot to it. We don’t need to get crazy
with the contact us form. So, now let’s go ahead
and do some custom CSS. Let’s talk about different
ways you can use to design this specific section. Now, in the description,
there is some custom CSS. You will need the CSS to sort of
control this letter right here, and also the size of the slider. Now, I’m going to show you guys how to
move this text wherever you want it to be, along with making this
as big as you want it. So, let’s go ahead and go
to our dashboard right here. We’re going to go to our DIVI section and we’re going to click on Theme Options. So, let’s go ahead
and scroll down right here. Just keep scrolling.
Just keep scrolling. All the way down to the bottom right here. This was something I entered in earlier. Just go ahead and ignore that. I’m going to save the changes. Now, the section that
I need right here is in the notes. So, I’m going to grab this
section right here. You guys can see it in your description. I’m going to paste this.
So, it’s going to be… I’m going to go to save changes. Now, I’m going to go to Visit Site. I’m actually going
to enable the visual builder. So, after you have entered
that in right there, I’m going to go ahead
and go back over here to my notes. This thing right here, this height,
et cetera, you’re going to put this
in the main elements of the CSS. So, click on this icon,
click on the DIVI theme, or whatever slide that you want it to be. Under the CSS,
paste this in the main element. Now you guys can see
that the page is full width. So, I didn’t really do anything.
Everything’s automatic. It looks really good. That is basically how
you change the section of the slide. Now let’s go ahead and enter the code to
move this text wherever you want it to be. Right here,
I’m going to click on the gear icon. Now, I’m going to select
the crow right here. So, under the creative studio right here, I’m going to go to the CSS. I’m going to scroll down
a little bit more to slide title. Now, this code,
guys, you can adjust it
to whatever you would like. So, I’m going to paste this code in here. Do you see how the code went way up there? So, you can change it. I basically said that
the margin top is -200 pixels. Really quickly guys,
I’m going to stop that automatic animation.
That’s going to bother me so much. Right here,
I’m going to do automatic animation. Stop that and go back over here. Let’s go back to the crow,
go to Creative Studio, and CSS. So, margin top. Let’s just say you want it at 100 pixels. Let’s say you want it at 20 pixels. So, you see how
I’m moving this little section right here? You can basically adjust it
to wherever you want it to be. Now, let’s just say,
for example, that you wanted to move it
to the right or to the left. Maybe you want that really big,
beautiful landing page where the text is over here
and you have buttons over here. Guys, it’s all about imagination.
There’s a use for everything. I’ll just put 100 pixels right there. Now, you can actually take this,
where it says margin top, and maybe add this to the right. So, now you see
how it’s moving to the right? Or you can say,
“You know what? Move to the left.” So, now it’s moving to the left. For now,
I’m just going to say margin top. We can also go ahead
and add in a secondary code right here. This will basically say, “Look, I want to
give it a little bit more customization.” So, instead of margin to the top, I want to add margin to the right. So, now it’s basically
adjusting the top padding and it’s also saying, look,
I want it to the top 100 and then right -200.
Or we can just do +200. Or right here we can put left,
et cetera. So, we can basically change
anything we want on this page. If you want to make this bigger,
guys, just remember,
you can go into your settings and make it bigger So, there is virtually
no limitation with DIVI, guys. A little custom CSS can go a long way. That is basically a quick rundown of this. Now, I’m going to click on check
right here and click on check. There is also another link
in the description. It will take you to a website
called fiverr.com. That is basically where
we’re going to get our logo. So, right here I’m going
to go to fiverr.com. Guys, you don’t want
to try to get a free logo. Don’t do that.
Just trust me. Do this.
Do it the right way. Don’t say,
“I don’t want to spend anything.” Just type in logo right here. These guys will make
a beautiful logo for you, for like $5-$10. These guys make some really logos. My website was made from this website. So, just go ahead and click on
one of these authors right here. Like I said, they really
make some really cool logos. I don’t sponsor anybody
in particular on this website. So, this is where you venture off
and do your own thing. If they screw you,
I’m sorry. A majority of these people
are really good. You can also check by their ratings. Like, this guy right here has over
four thousand positive ratings. There’s new guys. So, this is basically
where you can get it. Now, let’s just say once you get it. Remember, once you get it,
guys, you want it as a PNG file. Right here you can see PNG file. You do not want it as a JPEG. The reason why you don’t want it as JPEG is because the JPEG actually
saves the background. If there’s no background,
it will create a white background and that will look really tacky
on your website. So, going over here,
we’re going to go to theme customizer. I’ll save and exit.
Why not. We’ll save that little
change that we did earlier. Actually, we’re not going to go here.
Close that. We’re going to go to our dashboard. Over here,
we’re going to go down to DIVI and we’ll go down to theme options. So, right here is your logo. All you need to do is go ahead
and upload it right here. Then, this will be your logo. Now, I’m just going to go ahead
and grab something. I’ll grab this little box right here. Also, the Favicon. Do you see on the top left side right here
where it says Fiverr, the FI,
this is the favicon. So, when someone visits your website, what do you want to appear up there? I’m just going to grab
this one right here. I’m going to go to Save Changes. Now, guys,
this is not the right size. It’s going to look absolutely terrible. So, I’m just letting you know,
for tutorial purposes, that this is the logo right there. Do you see that?
So it’s showing up. Since it’s a PNG file,
it’s transparent. So, you might want
to make it a little bigger. This is 30 by 50.
It’s tiny. Also, the favicon. So, see at the top right here,
how this appears? That is basically how you add
the favicon and also the icon as well. Now, let’s go ahead and go through
some of these options, guys, to make sure I did not miss anything. So, congratulations,
we’ve basically done everything. General settings. Background.
Layout settings. We’ve basically done all that.
The footer. You know, guys,
I am not on a script. So, you guys can tell,
I just do this. I just start. I have no plan.
I’m totally unorganized. I kind of just do it.
That’s basically how it goes down. So, we’re going over here. That is basically, guys,
how you do it. Now, also,
if this happens to you guys, I’m actually really glad this happened, I will actually include
a custom CSS for this as well. So, if this does happen to you, you will need to enter in
another piece of code. You can do that by going
to your theme customizer. So, going to dashboard,
going to DIVI, and going to Theme Options. Now, going right here,
there’s actually another piece of code in case that happens to you guys,
where you can just enter it right there. That will work like a charm. I actually added it in earlier.
In fact, it’s over here in my notes. I believe it is this right here.
Let me see right here. It is this right here. You will need this code,
guys, in case that happens to you. So, I’m actually kind
of glad that happened. Right here I’m going to go ahead
and paste that code in there. I’m going to save the changes. I think that is correct.
Let me see here. Yeah.
I think that will work. So, we’ll go to visit site,
we’re going to scroll down. There we go.
So, it is there. I should’ve mentioned that earlier. I will probably put that earlier
in the tutorial, guys. So, congratulations on your website. I think that covered
just about everything. Other than that, guys,
thanks for this tutorial. I do have a second tutorial
on my Udemy website, where I have put a second course. That includes a lot of custom CSS. We get extremely customizable with DIVI
and we get a little bit more advanced. So, I’m sure after this tutorial
you guys are probably comfortable, saying,
“Yeah, I can do it.” You know guys, really,
thank you for watching. Good luck on your website. It’s a journey.
It really, truly is a journey. It’s not easy. You’re going to do a lot
of trial and error. You’re going to mess up. You’re going to throw cups
of coffee everywhere. I’ve been there.
Trust me. It’s hard, but baby steps
and you will get there. So, congratulations.
Thanks for watching my tutorial and I’ll see you all later.

100 Comments

  • Katarina Gage

    Hello, i am having issues with the map showing up even after i have entered in my Google API code. the message i am getting is this
    "See the Javascript console for technical details"
    Could you please assist or enlighten me?? thanks sooooo much.

  • James Ace

    Did you use custom CSS for the slider size on the about us section? Every time I try and add the slider it comes out really big even after I have adjusted the padding and the testimonials are really far down below the Our Customers heading. Bit stuck!

  • Ramesh Mehay

    Can you add a code for a plugin into a DIVI page? For instance: I need to insert the following [mdts: list.files.folders] for a plug in that lists filenames in afolder.

  • Deniz Kilic

    Darrel thanks for this amazing one!

    Since you can do 'anything' with this theme, and can costumise complately with Elementor,
    what is the difference between themes?

    I mean what does the other one do that this one doesnt offer?

  • Z Leddy

    Hi Darrel, love the videos and I purchased the divi theme due to the amazing websites you are able to put together. I do have a question though, it was my understanding that the background videos and all content in the websites were responsive. However, the background videos fail to load and show up on my phone and tablet. Could you please advise?

  • Muhammad Ahmad

    Hello Darrel, Your tutorials are really awesome. Indeed you are a good teacher. I want to know that is it possible that i change only height of background of header section only. And after that below i want to add full width slider but with small height.

  • Eric Strickland

    wow Darrel that is the first time i saw someone use the project section! can you do more tuts on the project section. i always wondered about that section.

  • neolithic24

    Unfortunately I can't get the image slider to display full width, it only displays a smaller picture next to the name of the slider that I have chosen, and I followed the exactly same steps. So I stopped literally at the first step. But thank you for the tutorial. Very professional example.

  • LaunchIt

    Darrel – thank you (TONS) for this. Your new DarrelWilson.com has "Learn How To Create A Beautiful Website Like This Step By Step". But your "beatiful" is spelled wrong! Sorry – didn't know how to let you know, except publicly

  • CrazyCow

    02:39:30 You may probably already know it. But there is simpler way to avoid a new paragraph (with line spacing) than going to the "Text" tab: you just have to use Shift+Enter instead of Enter key. This will create a simple line break and not a new paragraph.
    (Thanks a lot for this great video!)

  • Aurelia Lambrechts

    You are SUCH a rock star!!! Thank you for being so thorough, yet human at the same time! Took me the whole day to work through this tutorial and build my site – so glad it took just one day!! The Divi tutorials on elegantthemes.com are quite boring… yours is SO easy to follow and entertaining! You are approachable and it saved the day!

  • Tonny Milfiger

    dareel whats up? my website lol i didnt even change the main picture yet lol it's load in 2 second . only thing bother me is i dont know how to define my search. i want when i'm just laying the mouse arrow on the image to switch to the other picture gallery even if i'm in category page … or any page i mean like page that have displayed several item together. i just think it's look more pro. so … hope you can direct me thanks.
    this is my m.f site www.swagfashionista.com

  • Singing For A Living

    at about 39 minutes you mention you can customize the fonts in each text module, but if you customize the header and body font inside the Divi theme customizer section it is site wide. saves all that redo.

  • Singing For A Living

    by the way, just for general semantics so if people go back and forth from your tutorial to EG, at about 41 minutes you added a row and called it a section, And Divi a section is really the whole shebang inside the blue box. Section, row, module.

  • Amit Midha

    Divi Theme Tutorial Timeline

    **Home**

    5:12 – SSD Hosting
    9:29 – WordPress setup , Like choosing language of site, Site Settings
    10:00 – Installing WordPress
    10:41 – WordPress Dashboard
    11:01 – Change admin password via dashboard, Change colour scheme, Change email, Change picture
    11:52 – Permalink, This is for postname URL – so it shows website properly
    16:00 – Divi theme installation tutorial
    18:10 – How to create pages, Like ( Home , About us , Services, Blog etc)
    19:20 – Create Menus and reorganise them
    20:28 – Enable Visual Builder
    21:06 – Change URL – so instead, training.com-home, it will show training.com
    22:12 – unsplash.com , freepik.com, Gorgeous free 4k to 8k images
    23:06 – Create a main section on homepage (Hero Image or Video)
    26:22 – How to centre the hero image
    27:10 – Hero image background colour modification
    28:00 – URL to free video for your website
    28:55 – Header Font and colour of text in hero image
    30:00 – Change the font on mobile
    30:30 – Header letter spacing and Height
    32:00 – How to amend the button text colour and other settings
    33:03 – Button Font and Icon
    34:54 – Add second slide for hero image
    36:00 – Animation of hero slider image
    38:00 – WHO WE ARE SECTION 1, Creating Feature/Benefits header
    39:50 – Adding 3X feature and benefits Images
    41:20 – Blurb, This is to talk about images in feature/benefits
    44:30 – Feature and Benefits padding and Margins
    46:49 – WHO WE ARE SECTION 2
    56:30 – OUR TEAM SECTION
    1:00:00 – IMAGE COLLAGE SECTION
    1:06:00 – OUR POST SECTION
    1:10:00 – STRATEGY PLANNING SECTION
    1:17:00 – OUR CUSTOMERS SECTION
    1:19:50 – CUSTOM FOOTER

    **MENU**
    1:25:00 – CHANGE THE NAVIGATION MENU
    1:31:00 – Custom CSS to get Underlines

    **About**

    1:40:13 – Blurb Section
    1:45:00 – DIGITAL SOLUTION SECTION
    1:47:00 – DISCOVER SECTION
    1:51:00 – TESTIMONIALS / CREATIVE WEBSITES SECTION
    2:01:00 – FOOTER MOVED ONTO ABOUT

    **SERVICES**
    2:04:00 – UPLOAD LAYOUT

    **BLOG**
    2:07:00 – BLOG BEGINNING
    2:10:00 – DIVI BLOG CREATION
    2:13:00 – BLOG WIDGETS
    2:15:00 – FACEBOOK LIKE BOX PLUGINS
    2:18:00 – LINK BLOGPOST TO FRONT PAGE

    **PORTFOLIO**
    2:19:00 – CREATING PORTFOLIO

    **CONTACT**
    2:30:00 – CONTACT US SECTION
    2:33:00 – GOOGLE API KEY
    2:40:00 – CONTACT FORM

    **CUSTOM CSS**

    1:31:00 – Custom CSS to get Underlines
    2:43:00 – Changing the hero image to size you need
    2:45:00 – Slide settings to move text on font back and forth
    2:50:00 – CUSTOM CSS TO SORT OUT YOUR UNDERLINES IF THEY MESS UP

    **LOGO**
    2:47:00 – GO TO FIVERR LOGO
    2:48:00 – GET YOUR LOGO AS PNG FILE
    2:48:43 – LOGO PLACEMENT

  • Incloud Design

    Hey Darrel, I'd like to ask if you mind me using a portion of your video in a display? With a full credit put out to you of course.

    Bobby C.
    Incloud Design
    http://inclouddesign.com

    Video Link:
    https://www.youtube.com/watch?v=rWKLRy_XOFs&feature=youtu.be

    Thanks in advance for your time and consideration!

  • Erin Van Hoogen

    At the very end you explain how to change the logo where the "divi" theme logo use to be. What if I didn't want that top section at all? How do I get rid of that?

  • Melinda Wennerberg

    Thanks for the awesome tutorial Darrel!

    I have one question. When I'm trying to create the slider for "Our customers" at 1:55:19 the slider is HUGE, and I can't find a way to fix this. I've tried setting margin to -500px but then the navigation arrows/dots are located at the footer. Is there a way to make the height smaller? Thanks!

  • Earl J *Maui_Boy*

    * * *
    I am not sure IF this questions has been asked and answered before… I could not find a search function… (sigh)
    * * *
    Is there a way to transfer my current domains over to TMD?
    * * *
    Interesting that you would use YouTube to introduce a brand new and all-encompassing program…?
    I guess even "Masterpiece" means getting help from outside my own canvas… (wink)

    Until that time. . .

  • Shahzad Raza

    Hey Mate, i have created dozens of sites using Divi 3.0, this theme is amazing to work with, one of the best point using divi is that, we can use premade layout to expedite the web design process, one of the layout you can download it from www.divihat.com

  • scarab13designs

    you should use DIVI theme. Super modern, frontend visual builder, use it as you'd use powerpoint or word to build wordpress sites. fully responsive, pick fonts on the fly, move things just by dragging. no coding, nothing. Also it's the most future-proof theme like ever built and there are free site template layouts coming every week or so (if you like that). You can use it on unlimited number of sites for you and your clients. Backend updates are happening almost daily. Just saying, have your options open – check it out here – http://scarab13.com/et_main

  • Michelle Loftus

    At tmd hosting, where it says the difference between business and professional is 2x and 3x, is that a speed loading indicator? what is it – it doesn't say.. 🙂

  • Gail Seignious Thompson

    WOW! This was so helpful, Darrel. I just started using Divi and it has been very challenging! Your video helped me tremendously. Thank you so much!

  • Ralph Arjay Rojo

    Hi Darrel Wilson,

    This tutorial is nice, its very clear the explanation, all etc. But i have a question if your using Divi builder, is it required to use Divi theme or i can use any kind of theme in creating a website like this? Because I am bit confuse.

    Thanks.

  • Carolyn Lawrence

    Hi Darrell, I am new at wordpress, as the website I have had for a number of years sufficed, but my business is out growing my website. I have downloaded WordPress and want to know I have heard a few people recommend different Themes/Templates. My question is this can I down load a few Themes and can I use them interchangeably on my WordPress Website? Such as Divi 3.0, Highend, Creativo, etc. Or am I limited to only using one Theme/ WP website, please clarify for me, at your earliest convenience. Thanking you in-advance.

  • Shade' De Klerk

    Hi Darrel, I am stuck at 26:00 my image doesn't show in my full width slider at all, even when I try your image it still only shows a white background.

  • Yvonne M Feltman

    I keep coming back to this video over and over (built a couple new websites in the past year). This video is so easy and helpful. I don't know who you are Darrel, but thanks for this clear and helpful tool! A lifesaver! Thank YOU!

  • Santiago Umaña

    Hello Darrel, I think your tutorials are great, I've followed several of them and used everything you've tought to create some awesome websites. I would like to know if maybe you can do something on crating a social network type website with buddypress and hopefully Divi or maybe Kleo, I've been trying to create something but the experience has been nothing but frustration all the way.

  • VarusmanTv

    What if on the image i want to add a form to add a form to get info of how many people are looking to do a travel and from where they want to travel

  • Aleksandr K

    Hello Darrel!
    How to add a new color to the theme customized –> color scheme. I can see only dodgy colors like orange, pink etc. and no white or black. I really want to change my button menu ( 3 horizontal lines ) to white color, but I cannot find how.
    Can you explain how to do that, please?
    Thank you!

  • Igor Mysen

    Very cheeky not to tell how to scale the background image in the fullwidth slider. Could someone tell at what minute he goes over that? Thank you in advance xx

  • perfumes HK

    In woocommerce, when I click add to cart button. A message appears " ( A product ) has been added to your cart " how can I change this message Text ?.

    thank you

  • SportyGermanGuy

    You can simply use the divider module Divi offers instead of the custom CSS. Position directly under the call-to-action using the "spacing" attribute using negative margin and adjust its width. Save it in the Divi library as a global module and simply insert it wherever you like.

    Nothing against CSS, tough. You should definitely be aware of it if you are doing anything related to webdesign!

  • Mireille Dubreuil

    Hello! My "bar" under the titles keeps sticking to the left. Here is the CSS I put in the theme :
    .et_pb_slide {
    height: 100vh;}
    .separator.small {
    position: relative;
    display: block;
    margin: 10px auto 20px auto;

    and here is the HTML in the module :
    (open bracket)div class="separator small center " style="margin-top: 18px; margin-bottom: 24px; background-color: #d21151; height: 1px; width: 50px;"></div>
    &nbsp;
    <span>Nemo enim ipsam voluptatem quia voluptas sit…</span>

    What am I doing wrong ? (see site www.mireilledubreuil.com)

    Thank you!

  • Mireille Dubreuil

    Hi Mister Wilson … How do I know which version of DIVI I am using, and which one YOU are using in this tutorial ? And… I am up to the "SERVICES" part and would like the free layout for that page (SERVICES FOR TUTORIAL.json) I could not find it on your site or in the text below the wonderful tutorial… Are all free layouts "adapting" to my DIVI theme ? Thank you so much !

  • paulamagnuson

    Hey Darrel,

    I'm also following your Divi Udemy course and learning tons! If you get a couple minutes to skim the following two contrasting articles about Divi sabotaging SEO efforts, I"d sure be interested in your opinion…

    1. "Are Divi Themes Bad for SEO?"

    Oct 26, 2016

    https://online-sales-marketing.com/divi-themes-and-seo/).

    2. "The Ultimate SEO Dream Team: WordPress, DIVI and Yoast"

    Oct 12, 2016

    http://blog.whitesharkmedia.com/seo-wordpress-divi-yoast/

    Now that I have the hang of building with Divi (thanks to your tutorials!), I set out this morning to start learning if there's anything specific I should be aware of when it comes to SEO and Divi, and I ended up finding article #1 above which, if true, completely throws a huge wrench into my Divi plans.

    Would love to know your thoughts on this if you have time.

    Thanks a lot 🙂

  • Ina Stridde

    Hey Darrel, thank you so much. About to finish my website thanks to your tutorial.
    Only, I can't get the bar for underneath the call-to-action header, though following all your steps. Any idea what I could be missing?

  • Smart Pavers

    Hi Darrel,
    How comes the "Slide Settings" of my website are different? My Web says "CONTENT" "DESIGN" "ADVANCED" on your tutorial says "GENERAL" "DESIGN" "CSS"? Did I do something wrong?
    I am beginner and I kind of finding difficult to follow if something different from your Tutorial.
    Many Thanks
    Smart

  • Tricky Internet

    Sub me, I sub you back… 24/7 ACTIVE!
    I check the comment everyday!
    remember i will never unsubscribe you .and same you don't do that

  • Kent Jensen

    This vieo is great. But I am confused; is not installing the plugin Divi Builder a requirement for using the Divi theme?

  • HOWit'sMADE

    Fantastic course, thanks Darrel, you're a great teacher. After each stage I was excited to see what came next. Very good sir, thanks for a great tutorial. PS I don't think I've ever finished a 3 hour tutorial before – superb.

  • Anil Patil

    Hi, Thanks for simple and effective tutorial. I have intalled Divi and when i am creating website with visual builder, I am facing a problem with Section setting window. I am not able to scroll down. Pls help me.

  • Juan Manuel García

    I have a question, once I have developed the page to a client, what I do when the client wants to manage the page after it’s done… Do I have to teach him how to use Divi and WordPress or what do you recommend doing in those cases Thanks

  • Yesi Gebre

    Darrel Could you upload all the files on your site because I don't know the password to get the themes I will give you 10 thumbs up

  • Paweł Wójcik

    Hello, I have a question! How can I add blog posts to the main page? Not by slider. Only one module is one post. I am waiting for a response, thank you!

  • omid noory

    Here you go again Darrel! I look forward to your videos. And THIS ONE IN PARTICULAR I've been waiting for! Such a Great teacher.

  • Samuel A.0

    Do i have to have the business service of wordpress in order to use divi??

    If anyone knows please answer em, because im in a real hurry!!!

    Thanks

  • Rana Hamza

    Hi, Very Helpful tutorial.You are amazing .
    Bro , can you tell me that how can we make divi full width slider responsive?

  • Cédric Ly

    For anyone having trouble with the CSS Code at 1:34:50 in the video, it's: <div class="separator small center "
    style="margin-top: 18px; margin-bottom: 24px; background-color: #d21151; height: 1px; width: 50px;"></div>

  • Cédric Ly

    Thanks for the great tutorial Darrel! I was wondering, since we're using a custom CSS for the separator, should we use a child theme or not?

  • Chrissy Aldridge

    Great tutorial Darrell! I think I found the crow you used in the Unsplash database. I love your use of it. Did you modify the photo in photoshop to make the crow look that way?

  • Robert Rucker

    Hello Darrel,Great job! We really enjoy your videos. A few quick questions: At the beginning with the light show type automation that goes right into your logo…How is that done?. Is it something that we can purchase, have done or do ourselves? Thanks

  • Jawed Ahmed Khakhrani

    Amazing… ! I have completed this video tutorial, I learned full control of divi theme builder.
    Thanks for sharing…. 🙂 (y)

  • KL

    Hi Darrel thanks for the tutorial. I have subscribed.
    You have unchecked the Domain Privacy therefore will end up with lot of calls etc. How do you handle that? Is there any work around for that? Please advice.

  • marybeth bochel

    It would be helpful to have a video with the 2018 updates included. The tutorials you show are no longer available for Summer 2018. Anything current I can watch?? This is marketed as and EASY way to "create a masterpiece" and I must say it is FAR from it. Spending way too much time trying t follow tutorials that are outdated and do not match what I'm seeing on my screen… Any info would be helpful (2018 info that is).

  • Dividend Dreamer

    Darrel,

    How do you handle the attributes for the videos and the pictures from the websites that you used? I did not see where that was addressed and how you did it if it was neccessary.

  • Mallory Musallam

    Thanks so much for such a helpful video. You make it look so seamless but it truly is a valuable asset.

  • James James

    Darrel Wilson:

    A/. when you say 'brackets' … you meant '<' and ' >' ie the less-than and greater-than symbols?

    B/. You forgot the closing Curly / Squiggly Bracket — of the Braces { and } — when giving the CSS code, both here on YouTube, and on your website.

    C/. The names that you typed, do not match
    ie '.separator.small' is not the same as 'separator small center' — although, everything worked after I changed them both to 'separator_small'

    BTW, is there any chance that you might repurpose your DIVI tutorials, so that each design element / section can be accessed – downloaded as a JSON files, in order to allow people to build a website by choosing the design elements that they like. Which they can then edit by following your tutorial(s)?

    To clarify, this will be similar to what Tyler Moore did for people that use Elementor – How To Make a WordPress Website – 2018 – In 24 Easy Steps & http://www.tyler.com

    Either way, many thanks for this tutorial : )

Leave a Reply

Your email address will not be published. Required fields are marked *