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!
