How To Make A WordPress Website 2017 | Divi Tutorial

How To Make A WordPress Website 2017 | Divi Tutorial


Hi there, my name is Ferdy Kopershoek for
wordpressking.com and in this video I will show you from scratch, how to create a beautiful
and professional website, using the amazing Divi theme 3.0.
The website we are going to make you can find it at divi4.com and this is what we are going
to make, we’re going to make use of free images, beautiful image over here from New York, Manhattan
and this is what we’re saying, ‘we are creative’. it is a website about a web design company
and this is what we are going to make, I’m going to show you exactly how to do this and
what I like about the Divi theme is that you can edit the website with the front end editors,
I enable the visual builder and now I can change the text here.
So that’s really nice and if I think, I need some more space over here, I can give it more
space so here it’s dragging, dropping and you can see what you’re doing, change the
title over here if I want to, I can change this color so If I want the screen color to
be different color, I click over here and then I get a panel, the panel can be at the
left but it can also be floating, wherever I want it to be, I like it at the left and
then I can change the title here, we are also gonna change the color so I go to the second
step, design, and here’s assume, I can color, I can it change too, something like that,
but I can change the icon to see it’s not what I can go to play button and in that way
you can change things really easy. If I want to change this color of this border,
I can change it over here like that, it’s very intuitive and really easy to work with,
right here is a video playing, I can increase the size like this, I can click on this icon
and change the background color of the message, everything you want to do you can do it right
here in the front end editor so actually the visual builder, I don’t save the changes and
I go to service page, here you see video it’s playing in the background smoothly, nice animations,
a video, I’m going to show you how to change everything so for instance, if I want to change
this, I click on enable visual builder and maybe I want this color to be different color
and I want this to be at the left and this to be at right, what I can do, I direct this
over here and I drag this area to the right like that, then I click on the module settings
and I’m going to make it a little bit rounder over here.
So the border radius, increase it, see changing over here, I can go to the percentage, the
line height, it’s get bigger, I can change the color, for instance to purple and in the
same, it’s OK, that’s how easy it works. I go to latest work and this is one of the ways
you can display your portfolio or your projects, you can select them by films, photography,
web design so you can select them by category and it’s really nice to see.
If I go to photography, for instance to this corporate shoot, you can see all the pictures
really clear, very nice, here below we have the widget area about us, like us on Facebook,
most recent posts, I go to the about page and maybe I want to change this in to a video
background. I enable the visual builder, I click over here on this icon, go to divi4and
I go for a background video, I upload it, upload the files, select a file Sky Lapse
and Divi is handling this amazingly well and here, it is looking really nice.
There are some icons you can change, the color, also here you can change everything then we
go to the blog page and here you can select a certain few of the block I like this one
the grid-view and if I click on a blog post, you can play around with images with Header’s,
with paragraphs, I’m going to explain to you, how to make this and how to be found better
in Google, here at the right you see a sidebar with the most recent post and a like us on
Facebook widget and then the contact us page, we’re going to create us from scratch and
by now you will have all the knowledge that will help you to make a page like this, if
you go to elegantthemes.com/preview/Divi you see what the theme is capable off so if you
are searching for a page, for inspiration you can go to home and maybe homepage corporate
and you see something like this, maybe you like this and you want to implement this in
your website, what you can do, you go to home, check homepage corporate, to contact us and
you can go to enable the visual builder. I click on the icon over here and then on
the plus and I’m searching for corporate, I click where you see, you’ll get the exact
same layout as here, only without pictures, so you can add your own pictures and videos
and you can work very efficiently and again if you want to change some things, it’s really
easy, you can increase stuff, decrease it at the general settings of Divi, you can change
a lot of things. For instance, you can say I want a vertical menu like this or you can
have different header like this, the logo up and below the menu or logo in the middle,
slide in so you have to click over here and then you see the menu, of course you can change
these colors and a full screen like that with a different background of course, there are
a lot of possibilities and if I go to general settings, layout settings, I can change the
size of the website, I can make it a box layout so if I press command minus a few times, you
see there’s a box around it like this, the website width, the color width
So if I go over here, the gutter shows how much space there will be between elements
and modules like this and if you don’t like it you can reset it over here or the height
and the width of a row, you can change everything really quickly and last but not least the
website is really responsive so if I decrease it, everything will be displayed really nice
so I love this theme and I’m going to show you how to create a beautiful WordPress website
with the Divi theme. if you like what you’re seeing so far please
give this video, a like. It would help me out a lot and if you want to you can subscribe
for more upcoming videos, so let’s get started, so the first thing we need is web hosting,
web hosting is nothing more, nothing less than a really fast computer somewhere in the
world that stores your website and though my name is like an address so there’s two
things we need our domain name and web hosting, so let’s go to Hostgatordc.com. I really like
hostgator, it is a great service 24/7 and you can call them but you can also chat with
them and you can get your money back if you’re not happy with the web hosting service, I
never had any big problems with them and if I had a question they were always very fast
to reply, so in order to get a domain in web hosting, click on web hosting over here and
you can choose for three plans, I never use this one you don’t need this one, we’re going
to choose between the hatchling plan and the baby plan, if you want to host only one website
then the hatchling plan is the way to go, if you’re planning to have more websites then
this is the way to go, you see this one is for a single domain and this one is for unlimited
domains, you can always upgrade so I choose for the hatchling plan and I sign up now.
I want to register a new domain name so I would like to go over divi3 if I press enter
it says it’s not available, well divi4 is coming out sooner or later so I’m going for
divi4 that come and it says it’s available for twelve dollar ninety-five, I scroll down
and I remove the protection you don’t need at the domain in such a way that nobody can
see who the owner is of the domain. I don’t need it so I leave it as this, packets type,
it’s hatchling, the billing cycle can be one month and hostgator can give you this month
for free or at a certain coupon code but I like to go for three months, then I can get
some more discount and the longer the billing cycle, the more discount you get, so I like
to start with three or six months, my username will be ferdivi security pin 1 2 3 4 5 and
there I fill in my details, you need to have access to this email address because they’re
you get all your information in order to get access to your website. You can use PayPal
or credit card, I use credit cards so here my credit card details, I scroll down and
there are some additional service, I actually don’t need those, I can protect myself with
plugins, so it’s okay like this. Right now we pay $45.80 for 3 months but if
you change this to wordpressking25 and validate it, and you scroll up, remove protection again
and scroll down. Now it’s 37.59 and this is for the long run better discount, so right
now the amount due is 37.59 dollars and I agree with all these terms and I check out
now. So right now it says payment completed get ready we’re setting up your account, now
we need to go to the email address, you filled in. So I go to mine and here it says thank
you for Hostgator and hostgator your account information, this is an important email, I
open it and I can go to my control panel, I click over here and I need my username ferdivi
and my password over here copy and paste it, I login and now I want to install WordPress
so over here it says WordPress installer so I’ll click over here and if you can’t find
it, you can search it in the search bar and now I need to select my domain, its divi4.com,
you can select the directory like Divi.com/newwebsites, you can fill that in over here but I want
to install it on divi4.com So I click on next, the blog title will be
divi4 web design, my username, my first name and my last name and my email address. I scroll
down, I agree to the Terms of Service and I say install now, WordPress is installing.
Installation is complete, if I click here on divi4.com, it can be that it’s not online
yet because it takes some time for Hostgator to register the domain and set up the hosting
so I click on it, it’s not working yet so I have to wait for a minute so I’ll be right
back. I’m going to try it again so I refresh the
page, yes its working, the website is online so I go back to the c-panel, get my username,
copy it and paste it over here and grab the password and paste it over here, remember
me and I want to login and now we go to the back end of our WordPress website in my case
on divi4.com, actually I don’t like what I see and I want to clean things up because
a lot of stuff hostgator gives us, we don’t need so I go to plugins over here and I’m
going to deactivate some plugins so I’m going to deactivate them all, except for one, this
one and I say broke action, deactivate, apply so I the deactivate all these plugins, we
don’t need I’m going to select everything again except for Akismet, bulk actions delete
and apply OK, there it go, if I refresh there’s only one plugin. 
I go to the dashboards and this looks a little bit cleaner already, I’m going to dismiss
this over here I’m going to post, there’s a sample post, I want to delete it, I say
trash and again I go to trash and I click here on delete permanently or empty the trash
and the same goes for sample page, 1 page, sample page trash, go to the trash and delete
it permanently, I go back to the dashboard, I collapse everything and this is looking
clean in my opinion. I’m going to change a few things, I’m going
to user, your profile you can change the look a few of your back-end, I like it the way
it is, I’m going to add my name over here, right here it says howdy Ferdy Korp and I
want to display my name as Freddie Kopershoek, I scroll down I’m going to generate new passwords
over here, I confirm the use of the weak password and I update my profile so if I log out and
I can log in with my username and my new home made passwords, like that, I go to change
a few things, I go to the settings, to general the side titles Divi web design, ‘our passion
is to make great websites’, something like that, it’s a tagline, you don’t see it in
the website, that’s Google can see this, so I save it and the next thing I do, I go to
permalinks and what you’ll see here, you can select the URL settings over here, the permalink
settings and google wants everything to be clean, if I say this and I create a page called
home or about me, it’s what we called divi4.com/something like this, google doesn’t get this, google
likes this divi4.com/blog or/ about me or/shop so I select post name, I save the changes
and if I take a look at my dashboard right now, it’s really clean, now it’s time to get
the Divi theme so in order to do that, go to wordpressking.com, go to themes and here
it is it that Divi theme, I click on it and I go for more details.
This is my affiliate link and it gives you some discount sometimes twenty percent sometimes
ten percent, I hope it’s 20 for you and it gives me also a small commission so we get
twenty percent off normally its $89, now it’s seventy dollars for one year and what I like
about this theme it’s not only one theme, there are 87 beautiful themes and it also
comes with a few really good plugins, if you take a look, this is a really nice plugin
for updating emails, I will give you tour also you can find it over here and you can
find here at the tutorial about mill chimp, so you can start sending emails to the people
who opt-in on your website and the nice thing is you can use the themes unlimited times.
I like the [unclear: 17:59] theme and the [unclear: 18:00] theme but you have to pay
per license and in this case you can use it unlimited. So I go for the developer plan,
so I have all the plugins also and I sign up today, I have to create an account, I subscribe
to updates and I understand, follow the terms. Next step, my payment method is credit card,
yes seventy dollar for 365 days and I proceed to the payment, I fill in the details, this
is optional, I save it, your payment has been received and let’s take a look at our email,
elegant themes, I can login to my account, remember login so I’m here at themes, I scroll
down, I see Divi builder, I don’t need it yet so I scroll down more and I go to Divi
over here, downloads theme package and save the file, so I downloaded it over here, I’m
going to close a few steps like this and then I go to appearance themes and I’m going to
add a new theme, I’m going to upload a theme, I click on browse, I go to my downloads and
here it is Divi, I open it and I click on install now, right now this is how our website’s
looking, I don’t like it. I can close this also, here it is I activate
the theme and here it is. If I click here holding command or control, I go to the website
in the new tab and this is how it looks like and we are going to work from here, I like
to keep things organized so I go to theme details and I delete it because I’m not going
to use it anymore, I’m deleting second one and I’m deleting the third one.
so this is the front end and this is the backend so let’s create some pages, you can do it
over here at new page or you go to pages at new and of course the first page I want is
the homepage and I publish it, I want to add a new one about
I want to show my latest work so a new page, latest work, I publish it, I would like to
have a blog so I click on add new blog, I want to offer my services so I say services
and on people to have the option to contact me so contact us, publish.
if we take a look at our website you see them over here but they are not organized so I
go to the back end to appearance, menus and here I can create a menu I call this one main
underscore menu, you can give it your own name and I say create menu then I select all
the pages over here I just created and I say, add to menu and then they will be added so
I can select that thing and then say add to the menu and it will be added to the menu
over here, what I can do, I can save this menu and nothing happens, it’s still about
blog, contact us. What I have to do, I go over here, I scroll
down, I go to menu settings and say theme locations, primary menu. I save the menu and
now if I refresh the page, you see contact us services blog, latest work, about and home.
I can bring change in the structure by dragging and dropping so I could say home, I want to
be the first one, latest work our services maybe that’s one over here blog maybe about
over here and contact us latest. I save the menu, I refresh the page and this
is how it looks like, if I go to latest work you see the permalink is really nice, latest
work and if I click on the logo which will change then I will go to the divi4.com so
actually I don’t need the home because if you click over here you go to the homepage,
so I remove home like this, I can also change more things in the menu, I click on this arrow
down and I could change the navigation label like this and if I save it, it says over here
like this, if I click on like this, I go to the page services, so I change it back, you
also can use capitals services, I would like to do that latest work about blog and contact
us, save the menu and this is how it looks like then I go back to the backend and I go
back to settings and for this time I go to reading because we have made a few pages right
now, our front page, our home page displays, shows our latest post, I don’t want it, I
want to make it a static page, a page we just created, in my case the homepage and the post
page, the blog page is blog like this, I save the changes
and this is our website so far. I’m going to do one more thing at the settings,
I go back to settings and I go to media we are going to upload quite a few files and
what you can do, you can organize your uploads into month and year based folders, I don’t
want that I want to keep them all in one folder. Sometimes I want to look back at pictures
I’ve uploaded and then I have to find out in what [Unclear: 25:43] upload it and in
which month, so I save these changes, let’s go to Divi over here and click on theme options,
if you want, you can download all the pictures I’m going to use in this course, go to wordpressking.com,
go to tutorials, Divi theme tutorial, scroll down, I download the images I use in this
tutorial OK, I bring them to my desktop unpack it and here’s a video, I can share this because
I bought it so I’ve only one license for this but you can use another video in the tutorial
and here is a nice overview with all the pictures I am going to use in my course so you can
follow along if you want to or you use your own images, so I go back to the general options
and I go to the logo, I upload new one, select files, go to my desktop, Divi, home, miscellaneous
and here it is divi4, I want to optimize it for Google, so I copy this title and I paste
it in all text and I said it as logo as I can over here, right now you see hostgator,
I want to see our 2own logo so I upload the file again, right here, open copy/paste, scroll
down. If you have a Facebook page then copy the
link, I’ll use mine and I paste it here, I also have Twitter, I copy this and I paste
it here and I’ll leave this like it is, save the changes and refresh the page what we see
here is my logo services latest work about blog and contacts, if you want to have a drop-down
menu or a sub-menu, there can do that following, I go to appearance menus, I’m going to create
a custom link with no URL and I say ‘photography’, add it to the menu, another one film and another
one web design, I can drag them over here, then if I go to the right a little bit you
see a tab like this, I release it of course I change this to photography, film and web
design. I save it over here, refresh the page and
now we have a drop-down menu, it’s really nice OK, let’s build our homepage from scratch
so I say enable visual builder and we have three layers, the first layer is a section
we can choose and a section is like container, you can contain rows in it, they call it rows,
so here it says row settings and in those rows we have modules, so Accordion, audio
block, a lot of different things and with that we can create the content on our website
I’ll show you how it works so three layers, the container the rows and the modules and
they all three work together, what I’m going to do I click on the blue + and I can choose
a few different sections, regular specialty and full width, if I choose regular, I can
set the rows like with one column, two column, three columns or four or different combination
or I go for a specialty like this or I go for a full white and in this case, I go for
full width because I want to have a full white slider, so actually this is a slider container
and it needs a slider and slider I can create by clicking here, at a new item.
This is a title, we are creative, the button text is latest work and if I click on command
or control on this link I get the Link latest work and I paste it at that button URL, we
are going to create a heading text, a button text and in between a normal text, I want
to have a dark background of the bridge so I upload a picture upload files, select files,
I go to home and I’m searching for this bridge, from pixels.com, it is for free, a really
nice picture. I optimize it for Google, copy it, paste it in the all text and upload the
image, you’ll see it is changing immediately, right now I press over here and again and
then I remove this over here and now this is our only section, I click again over here
to edit the settings and what I can do, I can drag this to the right, to left, up low,
I can also make it bigger or I can bring it to the side and if I have a big screen, this
is not a big screen, but this works okay for me, I can drag it over here to the right to
the left and what I love about this theme, if I changed something, you will see it immediately
Right now I’m in the section settings, I want to go to this settings, full width slider
so the full width slider is a module and I click on the slider and continue, we are creative,
latest work, the link of the URL, the background, we can edit the background image position
so if I click on center, when you watch them on iPhone or an iPad, you’ll still see the
middle of the picture, I scroll down, I want to have a background overlay like this and
now I can select a color, not only that, I could select green but I can make it transparent
and that’s a really nice option over here, like this, so I want to make it a little bit
more purple like this and then let’s play with it, I like this.
So I click here again so I close it and then I scroll down, text color is light, if I make
it dark, it will become dark, nice that is putting one option to make everything light
or dark, I scroll down more and here’s the text we can type that will be between the
header and the button and I will say, ‘watch this blow your mind, with our web design capabilities,
it’s already centered, that’s good. So what I can do in the general tab is create a text
at the background and some other stuff but if it comes to colors and bedding then we
need to go to the design tab over here now we can edit the design and you will see a
real life update so the header font size is 46, I can change it to 100 and you see it’s
updating real time, so I changed it to 100 and I want to have the font Boogaloo, like
this maybe a little bit smaller. Probably the text is in two lines now because
the screen is very small. But if I would save it, save it again then it’s like this. So
I go back to the settings of this elements, the full width slider. Click on the slider
itself. Go to design and when you do this more often, it becomes so normal. Right now
you’re maybe like what is going on but if you keep on doing what you’re doing then everything
will be alright and I will help you make a beautiful website and show you how everything
works. So I want to change the color. This yellow one. We can change the header spacing
or the line height. We don’t need it because it’s one line. I scroll down the body fonts,
it’s this text. The text color is already white and we can change the size. I want to
make it a little bit bigger. Make sure it is one line ye.
Normal fonts and for me it’s okay right now. So I can click on this three dots and I can
save it or if I say exit visual builder it will ask me if I want to save it, it’s when
safe and exit and now I will see the website as everybody else will see it right now. We
are creative, watches blow your mind with our web design capabilities. Latest work.
If I click on latest work, I go to latest work. So we have nice backgrounds, really
nice menu with a sub menu and beautiful picture or fake company is located in New York. It’s
a web design company and we are creative web design company watch us blow your mind. We’re
representing capabilities and I want to remove these dots. Instead of going and clicking
to everything. Again I just say enable visual builder and instead of clicking here and then
scrolling and stuff, I just click over here and I remove it. I click somewhere else and
everything is fine. I’m going to create a new section. A regular section with three
parts like that and now I can insert a module. You can scroll like this or you can search
for something. In this case, I’m going to search for a blur. I scroll down. It’s taking
place over here right now and I call the title ‘Photography ‘ and you see it appearing over
here. The URL will be should be photography but I will link it to the services because
there I will show what we offer with photography. URL is this one in the same window. I can
use an icon and I will not do this for now but later in the video I will.
I want to use an image so I upload file and homepage we are ‘Divi photography’. I open
it, I optimize it and there it is. I scroll down. It can be an animation I want to animate
it from the left to the right. The text color is dark because the background is light. The
text is centered and here I can add some other text about photography. I will type something
like this. I go to design, I can make the font size bigger maybe 30 letter spacing is
not necessary and the font size is 14 which is fine with me. That’s okay photography like
this. What I can do now. I want to do almost the same thing here and here. So I can duplicate
the whole section by clicking this icon in the blue area and then I have a whole new
section remove this. If I replicate the green section, I will get three rows again with
only one module in one of the three rows I don’t want that. In this case I want to duplicate
this module. This blurb and I click here. Now I have to drag it over here. You saw it
becoming great so I duplicate it again and I track it to this place like this. Now I
only need to click on this icon of here through the settings. I call this films or film. It
also needs to be linked to services and everything is almost the same except for the text okay.
And the third one is web design. So I change the title ‘Web design’. I go to the text.
Ok so it’s looking quite nice. I only have to change the picture. So I click here again
I forgot it and then I click on uploads and I upload two other files, web design and film.
Alt, shift, go up, select them both and open them. Remove the dash, copy and paste. Click
on the other one. Do the same. They’re still both selected as you see. I only need to have
one selected which is the film one so upload an image and then ok. And here again the third
image which is already uploaded and optimize for google like this. Ok if you want to, you
can change the backgrounds. You can change the background often individual item or module
by the gray area. For instance let me see a design. I can change the background’s color
to red and you see this area becomes red. I don’t want that. If I say I want the rows,
columns have to have a background. I go to design here, background’s image or color.
If I would say red, it will have this area I clear this and if I go to the blue area
which is the section area and I might take a background which is red then everything
is red. So those are three layers you have to deal with. The modules, the rows or columns
and the section and those work all three with each other.
So let’s try an image in the backgrounds. Upload an image. We go to this one ‘Backgrounds’
and I open it. I don’t need to optimize this. I upload it. You see it looks quite nice but
the text is very dark. I also want to give the parallax effect over here and that’s ok.
Now I could say over here I want this background to be white. I go to design, backgrounds and
I make it white. We can do to all three. It would look quite nice so yeah let’s do that.
Over here to the second one. Design, background color, white and third one design, white like
this. Let me save it. Save. It’s not outlined perfectly so I could add a text over here
so let’s do that and with the page builder, the physical page builder you can see that
immediately so that is great. Another great text writer so I’m going to make something
up. ‘Few absolutely, totally and very free to contact us’ Okay very bad but now it’s
aligned really nice. What we could do, we could go back to backgrounds
of the section and not an image but a video so I can upload it. Again you need to find
your own file. Maybe can download something from YouTube temporarily to test it or use
your own video. Upload a file, time-lapse video and I upload the video which we’ll see
now. You see it not completely to the site but probably if you save it and you will exit
visual builder, it will be full white. So that’s how it looks. I think I forgot to save
something here and this is how it looks like. Looks quite nice. Well it was just a test
and just to show you what is possible. For now I will not use a video in the background
over here. I don’t think it fits with this and in this case is not necessary. So I enable
the visual builder and what I can do is just make it white again. I can clear it over here.
We still have the background. So this is an option or I can just make it white like it
was already like that. I’m going to create a new area. It’s a regular
area with three Columns, three rows and it’s a counter ‘a circle counter’ and what you
can do over here you can see. You can show somebody, how much percent you are with a
project or how many websites you have made and in my case I’m going to show how many
photography projects I have had and there are 173. So I removed the percentage sign.
I go for the dark and here I can change the color and the two colors I want to use on
my website are yellow and purple. In this case I want to use yellow and again I can
go to design. You can change the circle color. Change the opacity. You can change the title
fonts. I think it can be a little bit bigger ’30’, text colors ok.  Rest is also ok. The
number here, it can be bigger and can be the Bigelow like that. Photography projects I’m
satisfied. I’m going to duplicate it and duplicate it again
and change some things over here. I use film, projects 121 and here I have web design projects
and that’s 64. You see if it’s not reaching the hundred, you’ll see it’s kind of a percentage
bar. I like it. Design, it’s all fine with me.
Okay now I want to add a new element to it but if I click on the ‘+’ over here I’ll
show you. I can say I want to go to text and click on it and now I can select some text
and say a few statistics. I go to design, to the text. The text went a little bit bigger
and I want to bring it to the center. I can do that in general, over here I select it
like this. But what you will see the module is inside of this column. The three columns
over here. It’s inside one of these columns. I want to have it above so if I drag it above
like this, it is above. But then this will be pushed down. So I want to have a new row
over here. How to do that. I click on the ‘Green button’ and I want to say one row full
white. I want that row to be above this row but inside of the same section. Now I can
direct this module to this new row like this. I added this title to make it a little bit
bigger text font size. If I want to have a title and text, I can
do that over here. Then this will be the title and this would be the text and that should
be two different Linnaeus but right now they’re both very big. So I go to design, full-size
is normal 14. I go back to general and I select a few statistics and I say this is to be the
title heading 1 or heading 2 or heading 3 which one of this, it is a heading. So it
becomes a title if you select it. It’s a little bit bigger now and if I go back to design
now I can change the header font size. So I can make this bigger and I can separately
adjust this. So it’s great if you work with the text settings to work with the heading
1 and the normal paragraph. That way you can design those two independent of each other
and actually in this case I don’t need a subtext so I can remove this. What I want to have
is a divider. So I click on ‘+’ over here, the divider module and if I type in ‘Div’
it’s over here. You can see it so it’s a little bit tricky. Where is it now and if I really
could not find it, I can save it and I say edit the page and now I go to the back end.
You see different structure but it’s the same thing. So you see the full white slider we
have made. The three blurbs with photography, film and web design and right now over here
it sees two dividers. Remove one. I click on this icon which means module settings and
I can select it. What I want to do I want to change the visibility to show divider so
I can see where it is. And well I’m here I can change the color to gray. Change the
height or I go to advanced design settings and I can change divider. Still, solid or
dotted. Divider position, the height and the pencil so how thick is it. The difference
between the front end editor and the back end editor is that in the back end editor,
you can see what is happening in real time. So I update it and I continue to edit this
when I see it. This is what we have done so I go to enable
the visual builder and I want to edit this. I click here on the ‘Divider design’. Now
I can see what is happening and that is how it is done. I want to add a new section over
here. So I click here on the ‘blue’ ‘+’ I go to full white and then I want to have
a full white portfolio. The title is our latest work. It’s a carouse which mean you can slide
from left to the right. The only thing is I don’t have any latest work yet. We have
to add some new projects to the website in order to be shown here. So that comes later
but for now I go to design, I scroll down and I go to the background’s color and this
has to be dark purple and also here we can change the transparency. That only used when
there’s a picture below. Go to ‘General’, scroll down and the text color is light. So
when we have added some projects. In my case photos, films and websites then
this will be filled. I like to work with dark backgrounds, the light background and dark
background. Light backgrounds, whatever suit yourself. Ok I click on the ‘+’ and I’m
going to add a contact form so I go for regular full white or 1 column, 1 row and search for
‘Contact form’. There it is, it looks ok. ‘Design’, ‘Backgrounds’. That’s the background
of this place over here. I’m down for this, it’s a little tricky maybe but I like it.
I scroll down, no text color but the form filled font and the form filled color I want
to change to white. So that’s this over here. It becomes white and here also you can do
the same thing and see directly the results. At general you can display captcha or don’t
display it. I like it so that robots can’t send an email. You have to fill in this answer.
Okay I want to create a parallax image over here so I click over here. It’s a regular
full white and we let me go to the blue one and maybe we can use video over here. Let’s
just try something. Upload it and I want to add some padding so I say ten percent lower
or 20 so we can see more of the city and I want twenty percent padding in the bottom.
So we have quite a big place over here, that’s ok. We have no modules yet. I click on it
and we could say a text, click on it. ‘We love our job’, either one colors are very
early right now. Color can be light and in the center. Go to design, it’s our header
so the header found is to be Bigelow.  This can be 100 and that’s you see the size is
also determining how much padding there will be. So I can decrease the padding. Text color
is going to be yellow and I scroll down for that padding again. Here this too but I go
to ‘general’ but I don’t want to change it here. I want to change it here in the blue
area or even better maybe we can change it here. Oh now it’s gone I think maybe because
it can’t handle percentage. So let’s write again and now no percent but pixels. Ok and
now we can say let’s make it a bit less or more. Actually I want to see more of the city.
I save it, exit visual builder and if we take a look at our homepage. What we’ve done already,
we’ve nice logo, nice menu with a sub menu, nice animation. Our latest work is not yet
visible, few statistics, ‘we love our job’ and a contact form with a captcha. That’s
quite nice. We’re getting started. I want to change a
few things here. Only the animation actually. This one will come from the button and search
for ‘animation’. In the beginning I was searching like crazy and right now I’m finding everything
quite fast. So give yourself some time and this is from the right to the left. Again
save it and here it is. Great that looks nice. We made it yourself. You can be proud of yourself.
Let’s go to the page services. We just build our own first page, the homepage. Now we are
here at services but what we also can do is save a lot of time.
If you go to wordpressking.com, we’re going to demo side of the Davey. So I go tutorials
again defeating tutorial, I scroll down go to elegant thing Divi example pages and this
is a Divi website. You see everything that is possible. It looks amazing and the great
thing is all those pages over here are templates. So if I go to portfolio and go to portfolio
grid that means that I can load this page to my website.
So what we can do we can go through this website and think about what we want on our page and
what is being shown over here. If we see a page that is looking like the page we have
in mind for our website then we can load it in and it saves us a lot of time in building
the website. So for instance, I want to have a services page so I want to show my viewers
what I’m capable of. Making videos, making photos and making websites and I want to have
a nice header also nice slider maybe a bar counter. So in order to do that I go to portfolio
or page layout and something like about us let’s see what happens. Nice. Slide over here
that looks great. Crew that’s where something else maybe for a different page. Ok it was
nice. Homepage basic, not what I have in mind. In my case I would like to go for the page
layout and case study. Nice header is what I like. I like this one, I want to use it.
So what I can do then, I go to the services page, enable visual builder that will remove
the sidebar over here and there it is and now I go to those three dots and I click on
the ‘+’ and I search for case. So right here you find all example pages we are seeing
here. Probably not with the images but we can add our own images.
So I searched for case and be careful it says it’s replacing existing content. So if you
made a whole page and you load this one then everything will be deleted so be careful for
that. There’s an empty page so I can do it. I click on case study and this is where the
magic happens. Really nice, just with a few clicks. Okay I’m going to remove what I
don’t like. I don’t want this image, I don’t want this area, I scroll down. I don’t want
this section, I don’t want this section, I don’t want this section, I do want this section
and is also what I like. Related case studies yeah why not. So I’m going to work with
this. First I’m going to change the title, the title is ‘we offer a three-in-one solution’
really nice to save it. I want to add a video in the background so I click here on the ‘Section
settings’, ‘Background image’ or ‘background video’. Here it is and I can’t upload it now
because this is in the way. So I can save it, I can close it and then I can upload it
and this is looking good. Maybe I want to have some padding, 200 pixels and 200 pixels
so we see the city really nice and what we’ve seen on the homepage I want to edit this and
make it a different font. So I go to ‘design’ header font is Bigelow and the color again
is yellow and then the size of course is to be as big as possible header font size. Why
is nothing happening. Ok right now it’s heading. Heading one and that’s okay. Yeah let’s take
a look further. I want you to see, you see an area over here and here you see something
and that is a divider. So if I remove this, this goes up like that. I liked it and I’m
going to change this text. ‘We offer photography, film and web design in one package’ I click
here, this is a blurb again. I edit it and I say ‘Photography’. It comes back a lot of
photography, film or web design but you can do whatever you want to maybe you have something
else on your mind is just to illustrate to you how it works.
You can have your LI don’t use it. Use an icon, I use it and photography. I’m searching
for the camera. Here it is. Ok you can make it circle icon. You don’t see that’s good
but it’s screened in. There it is, those are icon for me. Animation from left-to-right,
text color is light that’s great and here’s the text and you can change it if you want
to. I leave it as it is. I go to ‘design’, use ‘icon font size’ if I click this I can
make it bigger or smaller maybe something like this. That’s just the second row, the
bottom of the second row. But actually I want photography to be bigger also so they had
a font size needs to be bigger and bolder maybe on the line. I think this is okay and
yeah it’s fine. I can do the same thing over here and over here but it does more time when
I just duplicate this one. So I removed those two and I duplicate this one and again I added
the second one. I go for film over here. ‘Film’, I leave the text and the third one is web
design. Searching for an icon, that’s fitting this one. Okay that’s how it works and I want
to change this image so I upload a one. I upload one with a transparent background.
So I go to the ‘Divi three services web design .PNG’. Open it and by the way I always give
my images a name which is relevant because if I search for photography and Dutch a slice
and I go to images. This is mine, this is mine, this is mine, this is mine, this is
mine, this is mine. I can go on and on because you know fairy corpse would come, it is good
for the search results. So always give your photos a relevant name. 
So what design, maybe I should be more specific because there are millions of people that
use web designing and they are claiming to have better websites. So maybe I could say
web design New York, web design Manhattan something like that. Use like this and if
I save it, it looks nice but I want this to be more in the middle so I click over here.
I go to ‘design’ because the margin top and maybe ten percent or twenty percent and now
it’s lower. Maybe I should do 15 or maybe in pixels. 150 pixels like that or I can remove
this at a different module and see what we have. A contact form divider, gallery or a
video and this time another video we have uploaded ourselves but this time we’re going
to search for ‘YouTube video’. Let me take a video of myself. ‘Hi there my name is Frank
Archer from WordPress king’. I entered the URL and there it is but also can do maybe
I don’t want the video on my smartphone then I can say disable on phone. You can do this
with almost everything. What do we have here? Again empty space and empty space. We can
do the same by clicking on the ‘section settings’ and increase this little bit or you know what
with 200 pixels same here and then we can record it manually but I don’t need it so.
I leave it zero. Maybe a little bit. You know what I changed it over here 75 is nice text.
It’s a call-to-action probably. The longer you work with this thing the more you recognize
things. It’s a call-to-action. A call to action as always the title, text and a button. Really
nice I use it a lot and then this one is the row. It’s two parts and this is the module.
The bar counter settings. I will show you what you can change. The text
color is dark right now and it’s not necessary so I make it light. So it is will be white,
you can see better. The background color is the color you see over here. Here you see
on how much percent you are and you see this is 100. But I like to remove this so I’m
going to make this fully transparent. So you don’t see it. Not really love that you see
results immediately. That is one of the best things I’ve seen in a thing so far. I change
the color to yellow like this and if I go to design, I can design even more. Padding
underneath I can say radius. So it’s now round. The title over here I can change it like that.
Make it a little bit bigger, make it align with this part. This is too big, make it a
little bit smaller. But if I make this smaller, I can make this bigger. It’s a little bit
too bigger I think like this and I go back to the radius I can decrease it like this.
And maybe just for fun let’s go over here. Go to design, scroll down over here and scroll
down. Use custom styles for button. You almost don’t see that if you click here, you get
a lot of options, button size. You can make it bigger or smaller.
The text color. Right now it says nothing because it has the general settings applied
with but if I want to change it, I can make this yellow also like that. Background color,
OK that’s really bad. I clear it, leave it as it is. The better border color, I can change
that. I can make it thicker border-radius. I can add an icon or only with hover and the
color right or left in the button so a lot of options. So I can do a button who for border-radius.
So when you hover over it then, it becomes a round button.
A lot of options I really like it. There are few things I really like but then I need to
change the colors in a certain place in the website only that place because of a dark
background or something like that. And then I need to do something with the CSS style
and stuff and here you can just individually style every button. I really like it. Related
case studies is the same as on the homepage where projects. I want you see here. If I
click on this you see how it will look like. A smart phone or in this case a tablet. So
and if I change things right now, they won’t be applied to the full screen which is a big
pro because then I can change everything individually. So if you change something here, you’re happy
and then this is also still like you want it. So there are a lot of great things about
this thing. Let’s save it. And now I want to show you some other settings.
We’ve been to the general settings of the Divi but there are a lot more. I’m going
to exit the visual builder and I go over here to thing ‘Customizer’. I can also go to the
dashboard, the back end of the website and I could Divi thing customizer. You can choose
a page you want to use in the thing customizer. I use the home page and there are a lot of
things we can change. You see that the menu right now is not the same as it was before.
It has everything to do with the white of this page because I have this over here. This
screen is smaller than a tablet which makes Divi thinks that this isn’t happening. In
the same goes for this one and this one, you can take a look at everything over here. Smartphone,
tablet or computer screen. If I press command minus, you see that menu comes back. When
I work in the customizer on the screen like this, I make it a little bit smaller. If I
wanted to be more organized, I press command of ‘control 0’ but for now the command is
‘-’ one time. General settings, site identity Divi 4 web
design I will call the title ‘A three-in-one solution for your business. Our passion is
to make great websites’. Yes that is true. Side icon, no image selected, select image,
it’s still this one. Select ‘skip cropping’, save and publish over here and it will be
saved and published. I can go back over here and go to the second one ‘layout settings’.
I can have a box layout as you see over here and that is in the box now. ‘Colon -‘, then
we have box around. If I uncheck this, is over to full white I say ‘colon 0’, ‘colon
-’ I don’t label it. Label box layout, we tried, I don’t want that so we can change
the content white. If I scroll down you see here a sudden space between the elements.
It has to do with the website color white if I make the smaller, everything comes closer
and if I make it wider there’s more space. I like things to be quite close to each other
not to close, something like this and the same I can do to the height. So if I say zero,
it comes too close to each other. If I say ten, everything is really far away from each
other and I think this is ok. So in the section blue area and the row which is the green area
and I leave it as  it is and the thing ‘accent color’, I wanted to be yellow so I change
it to yellow and save it and publish it, go back to type ‘photography’ but its text size
is 15. If I make this bigger, you will see immediate results, it will be line height.
I love this thing, you know, it’s amazing. You see immediately what’s going on so right
now I can make it exactly how I wanted to be. Other size can be bigger but that’s okay
with me, actually everything is Okay. The body link color, if there’s a link on your
website which color doesn’t need to be. I go for the dark purple so I select this color
over here, body text color, it can be a little bit darker I think. ‘44444’ and the same goes
for Header text color. Save it and publish it. Scroll up, go back to the background.
I don’t use it, you can use it if you enable a box layout and then you go to the background
and if I would save and the background is black thing with seeds, black hair. So I press
‘-‘ again. You can upload an image so if you want to do it, you can do it, and I don’t
use it so I leave it as it is. Colon ‘0’, colon ‘-‘ and we’re back again. So those were
the general settings. Header and navigation, header format are there,
a lot of formats. We can have a vertical navigation like this. It looks quite nice I think and
I can put it to the right, I don’t want to use it, I can say hide navigation until scroll
so this is what the visitor sees and we scroll down, it comes there. It’s nice, we can
have the logo centered like this and also here it’s amazing that you can see immediately
what’s going on, it’s a big Pro about this theme. Centered in line logo with some logos
it’s nice, in my case I don’t like it and if I scroll down it look like this. Slides
in, so I click here and then it slides in or full screen so if I click here, you will
see the menu. A lot of options, I leave it as default and we go to the primary menu bar.
I can make it full white so if I click here, the logo goes totally to the left and the
menu to the right depending on the resolution of your computer. So if I press ‘Colon -‘ it
still will be at the left here and at the right. I don’t use it, you can hide the logo
image. I want to show it, if you hide it and you scroll down, it’s there when you scroll
down. Menu height, you can make it a very high. Logo you can make it bigger maybe a
little bit like that. Text size, the menu not too big, letter spacing.  The font size
can be bold like this and aligned. Text color I don’t see the reason why it should be transparent.
So let’s make it ‘444444’, active link color. Let’s save and published and if I go to services
right now, it’s yellow probably, you see the yellow. I almost can’t read it so the active
link color I wanted to be purple like that, so you see a difference between the other
links not good but you see it and it’s the same color. That color back in the website
more often. So I scroll down, background color, you can say nothing but then it doesn’t look
nice. There must be an option to have it like this and then everything is white until you
scroll and backwards, I have not figured it out yet I’m searching for it.
So for now I like the white active link color. This one background’s color, line color, this
line maybe purple, this. And the animation of menu you can be expand, fade, slide or
flip. Flip is funny like this, I like to keep things clean, I like expand like this. I save
it and publish it and go back to the homepage and I go back to fix navigation settings.
So if I scroll down, it’s now fixed I can say logo should be hidden, a new height is
perfect for me, I don’t touch it, primary menu background color. Again you can make
it disappear. It’s perfect for me like this, I want to keep it that way, it’s all fine
by me. Header elements show social icons, you see a search icon over here and you can
say ‘show social icons’, ‘phone numbers’. If I start typing here and my email address
and I save it and publish it and probably you will see something up here, I don’t see
anything yet so let me take a look again and there it is. ‘Phone number’, ’email address’
and social media icons. You can use it, I don’t use it so I’m going to remove it again,
No I mean yes, that’s the footer is below over here and I go to the layout, is for later
so don’t use it right now. We just later do footer elements. I’m going for that button
bar, that’s this bar over here. Background’s color is all great for me, maybe
text color little bit brighter and this is the text. I do ‘Alt + G’, it copyright sign
2016 and Divi 4. All rights reserved. Social icon size at the right, I decreased it a bit,
I saved it and I publish it and it’s looking quite nice. Going back, going back
and this is ok for now. So we’ve seen what’s possible with Header. We changed the distance
between all kinds of things and the footer. So we have logo really nice, homepage, services
page. Now let’s go to our latest work, I close this and again I go to latest work and we
are going to enable the visual builder. If I go to the website with all the examples
and I go to portfolio, you can see a project basic, it looks like this. Let me take a look
somewhere else, ‘portfolio grid’ OK this is for now what I like. So portfolio grid, I
go to latest work, let’s press ‘Colon 0’ to get everything in a normal resolution and
I go again to the dots over here. ‘+’ and I search for ‘portfolio grid’ over here. My
work and there’s no work yet because we have no project. I change the backgrounds, uploads
to just one upload, not to make it the parallax and yes and click here. My work, our work,
no subtitle, line is OK, can be centered and you know what let’s purple it. Let’s make
it yellow and give it the Bigelow title. Bring it up our work and as you see it’s not
aligned properly, horizontally so let’s see what I can do. Okay now it is. Contact me,
I can change these colors, scroll down, custom styles and color will be purple. Like what
you see that color can be also purple. I go back to general, click on command, contact
us, get the link copy it and bring it here. So everybody who clicks here goes to contact
us page. Now I want to change the text to contact us.
Okay it’s time to add some projects so I exit the visual builder, I save it and I exit it
and I go to new projects or I go to the back end of the website to projects and say ‘add
new’. Well let me start with a few business pictures so I say ‘corporate shoot’ and I
can use the Divi builder so I will do so. I have to select the column first, one column
and now the module. I could say slider or a gallery or just text. I need to text right
now to illustrate something. Text is dark, orientation is center and here I can add media.
I will add media, I will upload files, select files, go to Divi three, latest work and this
one is it. Corporate and photography, insert into post, that’s okay, I save and exit and
I scroll down or you know what let me save it, I will publish it and if I go over here
to our latest work, you’ll see there’s a corporate suits but there’s no picture. If I click on
it, you’ll see the picture quite small but I want to see the picture in the portfolio
or better at the latest work. So I go to featured image at the right below and there I select
the same picture and I set it as featured image.
Now if I update it and I go to latest work, you’ll see this over here. If you want to
edit the text, let me take a look over here, it’s a little bit small. I want to be the
full-size, update and then I put at some other pictures over here. Enter shift, shift enter
the same linear like this and then at media. For instance I grabbed all these pictures,
I insert them into the post what you’ll see, they’re all small so what did I do wrong.
I do that again, at media select them all, scroll down and here it says alignment. I
want it to be in the center, link to nothing and size it was medium but I wanted to be
the full size. Insert into post. You have to select per photo so right now full-size,
update, save and exit, update, let’s see what happens. The picture and the other pictures,
you see I did save full white, this is smaller than for white but what you see is that it’s
aligning perfectly with side of the website and that is what I like. That’s why I use
the text editor to create an overview of the pictures I made for a certain project.
There are different ways to show things so I go edit this project again. I remove the
text, I insert module and by the way you can now, you can also update this. I view post
and then enable the visual builder and you can edit from the front. ‘+’ and then I can
say gallery, update gallery. Again I grab some images, add to the gallery, I can change
the order, I can add new photos to the gallery, I can say random order, update gallery. This
is how it looks like. I don’t liked it, I like the grids. I could say grid, three per
page, no title, no caption, show no pagination. But what I like more is the slider, so it’s
OK with me like this. I save it. I exit the visual builder. And I think something went
wrong so I go to other projects in the background. I click on the gallery settings. Update it,
you see they’re all there, so what’s going wrong? I like automatic animation. Quite fast,
every second. Let’s see what happens. Update. Refresh. You see every second it’s changing.
You can also change by yourself. So let’s take a look at the settings, and change this
to 4000 and save and exit I want to add a category. There are three
categories again. Photography, and this one is the photography category. So I add a new
category, I update it, and right now if you take a look at latest work you’ll see it here
at the photography, corporate shoot photography. I click on it, I see the slider, and I can
slide myself. So that’s how it works. I’m going to add a few more, for instance a new
project, but this time it’s a video. So let me go to the pictures first. featured image,
upload file, select files, latest work, let me see, this one of photography workshop,
I optimize the picture, copy, paste, set featured image, Apple photography workshop film, use
the Divi builder, yes. Insert, for instance I can say two times a half, and I can insert
the video over here. Scroll down, the video. So I can paste a URL or upload a video and
again I can disable it for a phone tablet or desktop. Advanced, no, it’s fine by me
like this. And here I could say something about it. So text, ‘it was a big privilege
to meet Ralph from Apple photography’, and I can make a beautiful text here and that’s
going to do it, save and exit. I wonder if I can do it, I’m not a text writer.
The category is no photography but videography or films, so I add a new category called films.
Publish, it’s no parent, and here’s the picture. What I can do, I can say, I want
to publish it immediately or tomorrow. So I say, schedule and if I take a look now,
add latest work, you only see this one. But if I change this and say publish it immediately,
13, publish and I refresh the page, you will see a video. And if I select photography,
you see all the photography projects, and if I select film you’ll see all the film projects.
If I go to Ferdy Kopershoek, but come, the company in the Netherlands. If I go to portfolio,
my latest projects, you see quite some stuff, and if I say, I only want to see films, you
see all the films I make, our photography or web design. So that’s how it’s going to
look like if you have more stuff. I’m going to add a website, and then I’m going to
fast forward a little bit. So I say new project, again I go to the featured image, upload a
file, select the file, Bible year, no problem. Bible year, copy it, paste it, set featured
image, and this one is new category, web design. No publishing yet, Bible, here it will come.
Use the Divi theme builder, or I just say add media and insert it into the post, and
I have to add the new category. Publish immediately, publish, and now I go back to latest post,
or latest work, our work, and here you see three of them films, photography, web design.
I’m going to add 7 more projects, but I will fast-forward, I added some projects and here
we see add the latest work, or work, then projects and if I select film, you will only
see the films and if I click on that, you have the video over here. I can select photography,
I see the photos for instance over here, you see all the pictures.
Same goes for web design, if I click on fits perfect, you’ll see the picture fitting, you
can have a text over here, and now I made it with a backend editor but I still can enable
the visual builder and change this text or bring it to the center. Let’s try something
new, I could even go to load and let’s load. Case study, even though it’s a project, I
still can make a very big project like this. So if I save this, I exit the visual builder
and I go to latest work and I go to, fitsperfect.com, you see this whole page. So you can be as
creative as you want to be, but I like to keep it simple so if I click on the picture
of the project, you see the picture and that’s it. So if I go to the homepage and I scroll
to our latest work, this is what you will see.
If you hover over it, you see the date, you can go to the left see some more, and also,
and our services you’ll see related case studies, and I want to change this text and change
it to ‘our latest work’. Save it. But you could do, you could make this, ‘our latest
photography project’, and then somewhere else, you now click on save, click over here, and
then select only to show photography. So that’s okay, save it. Yeah, like this. Our latest
photography project, so you only see the photography projects. If I hover over here, you see you
see it’s a yellow V, but if I go to the homepage and scroll down, it’s a plus. What
I can do, I can go over here to the module customizer, and there I can change some general
settings for each module. So I search for portfolio, and here it says the zoom icon
color, which is this one, is yellow, I could change it for
to green. Now it’s green, and I save and publish it, and remove this. I go to services again,
it’s the green V, but I can still change it everywhere.
If I go to latest work, it’s probably also a green V and green plus, but the color is
changed. If I want to change the color in one individual module, and I can go to enable
the visual builder, I click over here, and the design, if I changed back to for instance
red, now it’s red and I will save it. So right here is red but if I go to the home page it
should still be a green V or plus like that, and also at services, yes. So the color we
changed for every module of portfolio in the whole website is green, the color, unless
we change it our-self. So the individual settings overrule the main settings, the general settings.
so if I go to module customizer, I go to portfolio, the color is green everywhere unless we say
something else, all these settings apply to all the portfolio items unless we change them
individually, so that’s how it works. Let’s add some widgets to our website right
now, here below you see no widgets. I want to add a few widgets, I will show you how
to do that. If you want to do that then go over here to thin customizer, and here we
go to footer, layouts, and I can choose how many
columns I want to have. so I want to have three background color, I leave black for
now, save it, I go back over here and again and I click on widgets, and here it says footer
area one, it’s here at the left you don’t see it yet, but if I click here, I can add
a widget. The widget is a certain area in the website which can show some information
on our website in a really nice way. For instance a normal text or a list of your pages or an
advertisement or a menu or a calendar. For now I want to use text and I say about us,
we love to make something like that. If I scroll down I see it over here. I think it’s
ok. I collapse this one, and I say save and publish.
I press command minus, this is how it looks like on the website, three columns, 1, 2,
3 and I go to add a second one and therefore I need a plugin. So I press this X over here,
press 1, 0 and I go to the back end of the website, to plugins and I say add new. And
I search for Facebook like box by Webinar, are and here it is, one of 50,000 installs,
that’s quite nice. I install it now, and it needs to be easy and it has to look great.
So I install this plug-in, that’s everything you need to do. Now I go back to the Divi
theme customizer. I go press command minus for one time, like this I go to widgets, footer
area 2, I scroll down and I click on add a widget and if I scroll down I see Facebook
buy Webinar. I go to my Facebook, to my page, remove this, copy this, and paste it over
here. now you see a real time update, and I see this, I don’t want this, so I show,
I want to show some faces, but I don’t want to show the live stream, so I say no, and
it’s getting updated immediately, like this. I save it and publish it, I go back and I
go to footer area 3, and I leave this because I want to add some blog posts and I don’t
have them yet. So for now, this is ok. We can go to the blog page and we see no results
yet, so I’m going to create a first post, here it is, new post. The title is ‘the amazing
Divi theme’. I will use the Divi builder, and let’s create a text. I click here, full
white and I go for a text, and I start typing over here. So there’s a small text, what you
can do with this editor, click on this icon in the toolbar toggle, and you click on it
you get more options. it looks like Word and it’s almost the same and I’m going to show
you how it works. I’m creating a blog post, and the blog posts has a lot of times a alinea’s
or paragraphs and titles. So if I want to place a title above this paragraph, I press
enter over here, I go over here, and I say, ‘this is an amazing theme’. I go over here,
and if I want to be in the same paragraph and start a new line, I press “shift + enter”
and now this line is added. so line one, “shift + enter” line two, “shift + enter”,
line three, it’s all the same paragraph but if I press enter without shift I start a new
paragraph, and I can make this a title or a paragraph, and if I start typing again I
could make this text above a header / title, and this a paragraph.
So we have enter for a new alinear, we have ”shift + enter” for a new line, a new
rule, and that’s it. If I say this and I exit it and I can publish it and then I can take
a look, I can feel the post, I do that in a new tab, the amazing Divi thing by Ferdy
Kopershoek on November 13, 2016. It’s uncategorized, there’s no category yet and 0 comments. Here
you see in this amazing thing, is alinear, new alinear / paragraph and another paragraph
and I want to style this. so I go back to the back end, and I click here, now if I select
this over here, I can go over here, so I toggled this, and now you see paragraph I can call
it heading 1. you have to know a heading 1 is seen by Google better than normal paragraph,
so if you use header 1, please make it a nice term where you will want to be found on, so
instead of this amazing theme, I should say, ‘I love the Divi theme’. Then Google sees,
this is very important because it’s a heading 1 and it will be found better on that term,
the Divi theme. So, I select this one also and I make it a header 1, like this, but if
I think, oh this is a new line, new paragraph, I want to make this a title, what you will
see if I do that, everything becomes big. That’s because it’s one paragraph, because
I press “Shift + Enter”, it’s still the same paragraph.
So if I go over here to the text, you see a little bit of code, you see header 1, I
love this thing closing header 1, and here again header 1, everything between it, is
a paragraph. So I save it and I exit it, update, refresh, you see the title, the text, a new
title and a new text / paragraph. as you see the permalink is nice, Divi forward come / the
amazing Divi theme, that looks really clean, and here I have a sidebar, before I get into
that let’s continue with post. So I go back to the post, and yeah we can add a lot of
things. I’m going to clean this up a little bit. I remove this, front end editor. What
I could do, if I give you a little bit information about SEO, I could say Divi or I could go
to Google and say Divi theme, and then you see what people are searching for WordPress.
So what I can see is people are searching for a Divi theme WordPress, so if I want to
optimize my website I could say the front end editor of the Divi theme, and then I place
here WordPress. So you see those three words WordPress, Divi theme, in a Google search
results and maybe I can find better if I use those three words also in my title. I start
typing and I’ll fast forward. OK, a new alinear, what I can do if I go to
this paragraph I can add media. So I click over here, and I can add a logo, for instance
this one, and I can say place it at the right, full-size and no link. So insert into the
post. What you’ll see now, it’s over here. I can click on it and then I can go to edit
it and I could place it at the left or at the center and update it. If I select this,
align left then you’ll see this text is shifted to the right and if I press enter I can still
type around it. So in that way you can place images in the text, it’s really nice way to
show things in the blog posts. I can save it and exit it.
Maybe I think I want to show and video about this thing, so here’s the text module, I’m
going to insert another module, and I call this and it is a video. I go to YouTube, WordPress
king, here it is. I grab the link, [Hi there my name is], I paste it over here and everything
is ok. I save it and I exit it, and if I update this and I take a look at how it looks, then
you see this. I love the Divi theme, the image and the video. So that’s how it works. I go
back to the back end. I also could make a new section, so standard section, and I want
to have three columns, and I can update this and I close this window and now I refresh
the page and I go to the visual builder and then I can edit website in front.
So here I have a new section, I can drag it like this, hold it and place it over here,
it has three columns and in every column I could place a picture there or a button or
a blurb. I’ll do a picture just to show you what’s possible and again let me grab
a simple image. Three websites made with the Divi theme. So I duplicate it or is ok for
now. I duplicate it, I drag it over here, and I duplicate it again and drag it over
here again. I change the image to a different size, to a different website, same goes for,
the same goes for this one. Then I think this one is dark, no, I like it. I save it, by
clicking here, and I exit the visual builder. It looks quite nice, but what I see is a lot
of space over here and over here. I’m not sure what it is but I’m going to try to
remove that. so I go to enable the visual builder and over here I’m going to say,
bedding top 0 pixels, and you see it’s coming closer to the header over here, I think that’s
a good thing. Also about the button, 0, the same goes for this over here, top and bottom,
and that’s better. What I can do, I can go over here and change
backgrounds to red, or to the color or to purple, like this. In this way you can you
can style your blog post. Let’s save it and I go back to edit the post because there
can edit more stuff that has to do with the blog post as you see. Let’s take a look
at the new tab we have a sidebar over here, if you don’t want that and can say, sidebar
full wide, and so no sidebar. You can say, hide the navigation, hide the post idol and
I update it, and I refresh it and you’ll see that you can style everything differently
in every blog post. So you see no menu, but if I scroll down it comes there. So if you
want to make a landing page then this is really nice. You can get visitors to get attention
of all the things you want to show and if they scroll then you’ll see that you can navigate
through the website. So there are a lot of options over here and I’m going to place
them back, to right sidebar, default and show. What else can we do? we can say, I want this
to be published 20th of November, and the day I married for one year so maybe I could
make a blog post about my fair share of marriage and then I want to say on November the 20th
of 2016 ire has to be published at twelve o’ clock. If I say okay, I can schedule it.
So Word Press will place it online at this exact time. I don’t want that what you can
do that, I want to say it’s already published three days ago, publish. What you see over
here it’s uncategorized, so if I go over here to categories, I can rename that. I click
on it and I call this blog, and also this one, blog. Update it and if I go back to the
posts, the one post we have, I click on it, you’ll see now it’s in the category blog.
I can add a new category, it’s called personal or web design. I can make it parent, like
this, and add the new category, and what you’ll see the parent of web design is blocked.
So I update it and I will show you later what is possible with these settings. So that was
our first blog post, let’s check it out one more time. The title written by me on this
date in blog in web design, and if someone clicks here on web design, you’ll see all
the blog posts that are on the web design. What I don’t like is this over here, the sidebar,
I want this to be clean and I don’t want all this stuff. So I go to the back end, over
here to widgets and here you see sidebar and this is on every page in the website with
a sidebar. I don’t need a search widget, recent posts widget I like, no comments, no archives,
no categories, no matter, what I want to have is a Facebook widget. so I drag it over there,
that’s one option, or let me remove it, or I click over here, I select sidebar, different
area, I say add widget, and then I say like us on Facebook, again I need my link. I also
have it in footer area too, so I copy this link and I could say, don’t show faces that
show live stream. and now if I go to the page of the blog, you see recent posts and like
us on Facebook, like page, or read the most recent updates, but still you don’t see it
completely because the sidebar is too small. So I rather don’t use Live Stream, but I want
to show faces. Save it, refresh it, so recent post, ‘ the amazing Divi theme’, and ‘like
us on Facebook’. If we go back to the widgets there are a lot more options, you can add
a calendar, custom menu, ad sense widgets. you can add a text, so I click here, I place
it, and add the sidebar and I say, ‘welcome to the blog post’, save it, refresh the page,
maybe I like this a lot welcome but I wanted to be at the top, then I go to widgets, I
collapse it and I drag this up, just like the menu. If I refresh it now, it looks like
this. So that’s some information about the widgets.
You can download different widgets or plugins. So if I go to plugins, add new, you can see
what’s possible. So if I search for widget, now you see a widget pack with all kinds of
powerful futures. Google analytics widget, YouTube widget responds, a lot of options.
If you need something you can search for it. I don’t need anything, I go to the blog, and
if I take a look here at portfolio and I search for blog standards, like this, there is an
option, I rather have something else, so maybe blog masonry, like this, I like this. Nice
header, nice image over here, and then here the recent post. I wonder if I added a picture
to this blog post, I don’t think so. So I’m going to do that. I’m going to edit the
post, scroll down and set a featured image and that will be shown to your blog post,
and I use this one. Set featurette image, update, now I go to blog, I click on the amazing
Divi theme, and there is this amazing Divi theme, and now I go to the blog page again
and I want this layout. So, it’s called blog masonry, so I click on blog, edit page, and
it says you’re currently editing the page that shows your latest post. So what I will
do, I will go to settings, reading and here it’s the post page is blog, I’m going to
select and save it. So if I go to the front of the website to blog, now we can enable
the visual builder, I want to do that so I click here, and I click here, the plus and
I search for blog masonry. I change the background, to the blurred background saved over here.
I close this so I can upload the image like this. I want to make it parallax like this,
and it’s okay. I click here, and I want to remove this text and say welcome to our
blog. Texts logo orientation in the center, the design, I’m going to make it bigger.
Title font color, and the title font is blue like this. That’s fine, ‘welcome to our
blog’, and here you see the amazing Divi theme, I like it so I’m going to save it. Right now
you see this text and you can read along by clicking on this thing, or I click on the
thing, I edit the most and I want to write my own excerpt. So if I type something over
here, this will be my excerpt update. Let’s go to the blog page, and now this is text.
So what you can do in the excerpt, you can ride kind of a summary of what your blog post
is about. So for me is that the first alinear over here, and then I grab this also over
here, I grab this over here. I save and exit, go to excerpts, paste it, update and now this
is my excerpt like this. I think this is a little bit boring so I’m
going to see if I can add some color and for that I think I need to go too module customizer,
maybe Blog Grid. Yes, so I can increase it, yeah like this. make it a little bigger maybe
or something like this, I can make it different but actually I want to change the color so
let me see where I can do that, I say save and publish and I probably need to go to back-end
to Divi theme options, okay here I can go to single post layout, so for instance I go
to blog, and to the blog post and there I see Ferdy Kopershoek on this date, in these
categories, with 0 comments. I could say I don’t want to see comments, and no author,
and save the changes, refresh, and you won’t see this.
I wonder if you see it over here now. Yes, you still see it over here. So show comments
on posts, yes. Place thumbs on posts, no. I save it, and what you’ll see, this image
will be removed if I click on the theme. I think this is a better option, you can always
edit it manually but like is more. Otherwise you start with big image and I want people
to read text when they start opening this page. Single post layout, single page layout,
general settings, and close this and I go to the blog overview and I still want to change
this over here. So let’s change some things. I got to enable
the visual builder, I change the background maybe to a certain color, not white but little
bit more like this maybe even a little bit lighter like that, I like that. It’s still
too boring in my opinion, so I go to the blog settings over here, this icon of the module,
the blog setting module, and it’s a grid. Post number in my case. I think 100. Include
categories all of them so I select none. Show featured image, yes. Excerpt like this, read
more button, let me see how it looks, yeah I think I like that. Show author, no because
all the posts are by me. Show date, show categories, yes. So comment count, no I don’t want this,
and now let’s go to design and I want to change the color of the title. so the header font,
we could change to blue, let’s see if that looks OK, I don’t think that, no, lets change
it to default, make it a bit smaller, 32. And the color, I would like to make that purple,
the native font and maybe the body text a little bit darker, like this. And you know
what, let’s try a background. I keep it like this, so I added feel more, let’s take a look
over here. Go to blog, here we see the… create a Facebook page as many things in his
heart, and if I click on education, you’ll see all the blog post with education. Only
one, here you see recent posts, the five recent posts, like us on Facebook area, so that’s
how it looks like. I’m still not totally happy with the layout
so let me see if I can make something else of it. We like this, or, yeah I think this
is okay, or this, no. this is OK for me. exit physical builder, I save and exit, and if
you want to display your post a different way, you can also edit it or you go and take
a look here at the blog and see if there’s a different option, for instance this one.
I leave it as it is and now we can go to the third widget. so I go to theme customizer,
I scroll down, I go to widget area 2, I’m going to change a little thing I call the
title, ‘like us on Facebook’, and I go to area three over here and I add a widget, it’s
called recent posts. I go for 5 title most recent posts, and I save and publish it. So
here we have our folder, I can style this, so I go to folder, layout, and I can change
the background to purple like this, and what you see is this is darker because it has a
transparent background. So I like it, I have saved it, I go to the homepage, and it’s
looking quite nice, I like it. The about page, we are going to change that,
and let’s go through it very quickly. I think by now we should have some basic knowledge
about the Divi theme and let’s see if we can do this very quickly, because we want to work
efficient. So let’s go back to this website and I’m going for home page, or you know
what page layouts about me or maybe about us. Like this, I like it, yes. Let’s change
this and first load this page to our website. It’s called page layout about us. So I say
enable visual builder, three dots, plus about us, click on it, there it is. Change the background
to, anew file I uploaded, about us. Manhattan, optimize it, close this, upload the image,
I thought you would see a different background right now. Sorry this is the container, and
this is the slider, you should see forward slider thing so I have to change the background
over here, my bad. I click here, our company, and here it says background image. I copied
it, I paste it now and this is how it looks like.
I can’t read this, so I want to say first Divi 4, contact us, click on contact us, and
copy this, I paste it and I can change the text. ‘we offer you a three-in-one
solution’, new rule, ‘photography, film, web design’, I go to the design button, header
font size is this one, I make it a little bit bigger, body fonts, I make it also wider
and the body line height, little bit higher, not too much maybe 1.2, like that. And then
contact us. What I want to do also, if I think about the background I want it to be darker,
so let me see. I have the background over here, background color, I can make it dark
blue, if I make it more transparent, and I thought I would see something, but no, it’s
not here. I scroll down and I go to use background overlay, like that. I want to choose dark
green or a dark blue and then make the transparency more. So you can see the city, but you will
keep the colors, like this, let’s save it. So about, start with Divi 4, we offer you
a 3 in 1 solution, photography, film, web design. I can change this, but for now I’ll
only change the colors. I can change to a happy green, and blue, yellow, and red. You
can change the background. You can do whatever you want to, I think we have been through
the most elements and the most things. So this one again, we can change a few things
at design radius, make it a little bit higher, look like this, the line height. Like this
go back to general, background color is fully transparent. So you see something like this,
OK. You still can change some text over here,
save it, on to decrease top heather at the top, the space, the bedding, and now there
are three pictures over here. The first one, I go to upload a picture, or three pictures,
pearl, faith and hope. Uploading and here is the big boss. Save it, close this, upload
the image, and this is this Pearl Nolan, CEO, leave the text, you can add your social media
stuff. The second one upload is hope, Hope Watson at administration, the third one is
Faith Baker, she’s the photographer, videographer, and Hope Watson is also
web designer. So that’s how you do it. Nice Header, some focus points, a story, something
like this, and the people that are behind this business. I save it.
Now let’s make one more page, contact us page, and lets to it from scratch. So I say enable
visual builder and yeah, let’s start right here. Remove everything,
now I can start all over again, and I start with a new row, and over here, I want to insert
a background image. I have to upload it, so I go to contact us, divi4/contact us, and
I want this to be over the full width and height of the page. And now I want to start
with a, let me see, a call to action, like this. Remember, with a header, text, and a
button, the head title is, ‘contact us’. Button URL, there’s no button URL. The button text
is, button text is not there. So maybe I can disable the button, and I don’t want to use
a background color. text is light because the background is dark, and if you go to design,
the header is blue, I’m going to change it to 100 and change the color to yellow,
then text over here, ‘get in touch with us’. Design can be a little bit bigger, get in
touch with us, there’s no button which is good, because I don’t need a button, and then
I say, this is okay. What I want to do now, I’m right here in the section and in this
section I want to create a new row but not full wide one, but one with three columns.
So I click over here on the plus, now I say three columns. so it’s in the same background,
in the same section, but a new row and that’s how you can work over here. I’m going for
a blurb, with I can, the title is ‘let’s shake hands’, no URL, I want to use an icon, and
let me see maybe there’s a cup of coffee or something like that, yes over here, course
I knew that. A circle icon, I can do that, but yeah, maybe I liked it.
The circle color is transparent and probably, I like this. I don’t know, I’ll leave it
as it is, like this. Animation from left-to-right, text color is light and here is some text
about our location. Some text like this. Then we’re going to duplicate, I want this title
to be bigger, so I go to design and font size a little bit bigger like this, that’s OK.
I duplicate it, and I drag it over here, second one and changes to start a project, change
the text, like this, I still have to change, of course. The icon, this one, and the third
one. Yes, as we are looking for new people, ’employment’. An icon, this one, scroll down,
and that’s okay. I save it, I save it again when I click on the blue plus over here, regular
one, and I go for the contact form. So okay with me, signed, I like a background so, let
me see, right now this is all ok. I change the background, two blurry backgrounds, and
this one, save it, close this, upload it like this and now I can see, better what I can
do with this design. I can make it a little bit smaller by increasing both sides ten percent.
I think that’s nice. So I go back and I want to change of course the module itself. Success
message, what happens if somebody sends this message, I say, ‘thank you. We will be in
contact’. then I go to design, let’s see what happens if I change the color, it looks like
this, I don’t think that’s unnecessary, so I change back to white, border, we can
change it a bit, title font size, there’s no title, text font size, or the form field
font size, text color can be black, now we can change the style of the button if we want
to make it wide. So I make this wide. If somebody hovers, it becomes something like this, that’s
OK with me. So I save this stuff, thank you for watching
this tutorial, and congratulations with your result. I’m really happy for you, and if
you like this video, please give it a like and if you want to see more videos like these
please subscribe and then I hope to see you next time. Bye!

89 comments

  1. Really amazing tutorial.
    Love to watch this. And waiting for more new tutorials on complete E-commerce website tutorial using divi theme or any other premium theme.
    All i can say is "keep it up."

  2. Awesome!
    I love the way you explain things.
    Waiting for more tutorials on Divi theme.
    And please create some more tutorial on Divi theme specially complete e-commerce tutorial on Dvi.

  3. Hi WordPressKing.
    Concise and self explanatory.
    Thank you for contributing to ET/Divi Community.

    From Nigeria with love.
    Rich

  4. Goedemorgen WordPress King;)
    Question: What do you say about the technique of the Divi theme when it comes about SEO.
    I heared someplace else that the previous divi themes, were not the best for SEO purposes(i thought they meant cause of the shortcode technique)

    Any experience or knowledge in this please?

    Alvast bedankt:)

  5. This is helpful. Thank you for sharing this tutorial. I've got stuck in one area. I was working on a page through the visual builder and then took a break. When I tried to edit the page again, I am not seeing the visual editor in the front page. I am also not seeing the backend default editor. I can only see Revisions column and other sections in the edit page. Can you please help me in locating what is it that I need to correct for me to see the visual editor and default builder ? I did safe my previous work but cannot edit further.

  6. Hi! First of all, thanks for the tutorial. It's amazing. I was wondering why you use custom links for the dropdown menus instead of normal pages?
    Hope you can respond & thanks!! 🙂

  7. Hi ferdy! I've bought enfold but now i have some requests i cant not solve with it, i'm thinking about buying divi, but i need advise, do you hAve idea if i can do the following with this theme? I have a client a she wants the following:

    1- she wants several pages, each of the pages she wants to be in different colours, i mean one page in blue, other in orange, red, etc.. I was wondering if i can change the colour of the font for each page, because she wnats to highlight ramdom words for ecah page in the correspondant colour. (you know whay i mean?)

    2- in the menu, i would like to hoover and maintain the colour corresponding for the page. I mean, if that page is in red, i’d like to have the link menu in red, that supposed to be different colours for each link.

    3- she wants to put diagrams in the pages. For example, a big circle (In blue colour) in the middle of one page and over that circle, put some text.

    really appreciate your support.

    regards and Merry Xmas!!!

  8. i have some problem with uploading vedios.wordpress saying can not upload vedios more than 2 mb.how can i upload 10/15 mb vedios.

  9. Hi Ferdy. Please how do you generate those images that show the way an optimized website looks on desktop, tablet, and smart phones (i.e. like you have in "fitsperfect.jpg" and "JaleyCosmetics.jpg")? I would like to create images like that of some websites for use on my divi based site. Thanks in anticipation for your response.

  10. Thanks for this. I think native english speaking tutorials go wayyyy tooo fast so thanks for the divi noob like me 🙂 subscribed!

  11. can you tell me about how many type of themes available like divi theme,themify ultra…..and what is difference basically between them.

  12. Hey Ferdy… I would like to know your opinion… what is in the better theme for you, Enfold or Divi 3.0? What do you prefer, or what you like on Enfold that Divi is lacking and vice versa… thanks!

  13. Hello my friend, I really wanted your help, I created a website, I have not really been able to create it, I'm Brazilian and I'm very difficult on the DIVI theme, which here in Brazil is still the first version, could you help me, grateful

  14. Hello, everyone masters!
    Who can help me?
    Can I set up a blog in Divi_3_theme options as in the picture?
    See attached picture: https://cloud.mail.ru/public/Aeb1/NybttCqdA
    Sorry if this is off topic.
    But I want to know before buy Divi_3.
    I would be very grateful for the informative answer.

  15. At 2:18:53 video position, when you start to create About page, you refer to eleganttheme example so a minute further suddenly the page becomes complete with the example, without had to made it, I didn´t realize how you do that?

  16. Great tutorial Ferdy! I have been using Divi for quite a while – well, from the beginning… and even so, I really learned a lot from your video =D Very well done! Looking forward to many more –

  17. Hello friend, first of all, I congratulate you for your tutorial. It's very good. I've learned a lot with this divi designer. I wanted to ask you how I can create a login for users to register and publish news or posts in a tab I have designed for that part. As I would in that case. First of all, Thanks

  18. Thanks so much Ferdy for an awesome tutorial. So well explained. Hoping that my divi build experience seems as straight forward as your tutorial!

  19. Can anyone answer this for me? I can not remove a text box in twenty four twelve theme "Grab your visitors' attention front and center on your homepage, then give them an action to take."

  20. Hi mate how i can make my site logo not to move or changing size when i scrolling up nd down is there any settings for that thank you

  21. Hi Fredy, I have a question to ask, where can I design my name logo? I researched on the internet but came with logo designs with objects, shapes, and icons.

  22. Hi i am in senegal in west africa you do a great job thanks to you i have created a professional site thank you and good courage you are super

  23. hey brother i follow all your steps but i have one problem the visual builder tab not open from me idk why any solutions ?

  24. These are easy things which can be done with any theme. How about plugins, widgets, creating a login form, image gallery with links attached, subscription forms, post redirection etc…. .

  25. Klein vraagje op de website van elegant themes heb je een Lifetime Access pakket. Hoeveel domeinnaam mag je gebruiken en installeren? Bedankt voor de reply?

  26. Hee Ferdy, Vraag: ik struggle met de juiste afmetingen voor mijn afbeeldingen. Op verschillende schermen, 13"of 15"' of groter schalen de foto's zo anders dat de kern en het verhaal van de foto verloren gaan. Hoe kan ik dit voorkomen?

    het gaat dan vooral om de volle breedte sliders

  27. Thanks Ferdy, just wondering if we want a one page website with the same menu. Do you have a tutorial for this style?

  28. hi , i liked your tutorial very much. also i need to check with you. i need attached my company profile.pdf in my company website for clients can download.
    how to do it?

  29. Hello
    Thanks so much for your videos
    Really helping
    How can you create a single page site like this : www.definition6.com using DIVI page builder
    Really need help to learn how to create it

  30. really helpful. on the blog part, how can you migrate posts from a different site to divi on enfold… i am really having a problem migrating a website from a different them to another wordpress theme. In future think of doing a tutorial on that.

  31. Hi Ferdy, thanks a lot for your tutorial. I have installed Divi theme and when i am designing website using visual builder, I am not able to scoll down now move in section setting and other windows. Pls help.

  32. Hi Ferdy, I watched this tutorial awhile ago and I am now looking for a good royalty free website for video. Did you mention something like that in this video? I can't recall. If you have a suggestion that would be great. Thanks.

  33. Can you add Divi to a WordPress website that is already live to recreate the look or do you need to start over?

  34. dear Ferdy, I am one of your favorites, earlier I learned elementor, and now Divi. You are awesome always. the way you explains the system is great and even in the sleep people will remember your notes. I am ramana kumar from India

  35. I forgot to thank you when I ran across your video tutorial, almost two tears ago, which was very, very helpful indeed.
    So, "Thank you, Ferdy". ^_^
    – Victor

Leave a Reply

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