welcome party people come on in and take
a seat my name is darrell wilson and
today i'll be showing you how to make a
wordpress website step by step
with the divi theme so we spent weeks
making this video so complete noobs like
yourself can learn how to make
professional wordpress websites that
look great that are responsive
and you don't need to have any
experience whatsoever plus
you'll learn how to use the divi theme
and all these features which is
currently right now the most popular
wordpress theme in the world
so today after watching this video
you'll be able to create your own
website
and you'll become a wordpress pro trust
me this stuff is so
easy and we do not make ugly websites
here on the darrell wilson channel so
after watching this video you'll have a
modern
professional looking wordpress website
and you'll be so good you can even start
your own
web agency tomorrow so go get some
snacks go get a drink pull up a chair
and let's get started today with this
wordpress tutorial
so today i'll be showing you step by
step on how to build and customize a
modern and beautiful
wordpress website and the great part
about this video is that you don't need
to know any sort of coding or any html
because
we are using a drag and drop builder
that makes it super easy to build
your new wordpress websites and as you
can tell this website looks very
professional
yet simple so i'll be showing you how to
build and customize
every part of the website so you can
walk away today with a beautiful website
that your visitors will love
now you can build any type of website
you want with this tutorial you can
build a business website
a blogger website a portfolio website a
tech website
you can build any type of website you
want in this wordpress tutorial
i will also be showing you how to make
vibrant and beautiful designs with free
templates
that will stun your visitors and make
you and your website look very
professional
and just to make sure you make great
looking websites i'll be giving you some
professional design tips and quizzes
to help you with your web design skills
so today in this video i'll be showing
you how to build your new website with
wordpress and the divi theme
wordpress powers more than half a
billion websites and is by far the most
popular platform for making websites
the divi theme started back in 2013 as a
one-man operation
and after years of development and hard
work the divi theme quickly became the
most popular wordpress theme in the
world employing more than 100 people
worldwide
so as of today divi is the most active
wordpress theme that powers more than
1.8 million websites
it is also used by popular websites like
the kingdom of thailand all of the
palestinian casinos in las vegas
polytechnic institute penn state
university
and the state of georgia so you will be
using the most modern and up-to-date
software to build your new wordpress
website
now i gotta be honest i think the best
part about divi is the templates
you'll have access to over 1400
templates that include
all the images perfectly sized and they
also include the pages
such as the home page the about us page
the services pages
and also several other pages so you will
have full access to all these templates
for your new website
okay party people so this is the website
that i'll be showing you all how to make
today
also in this video i will be giving you
all the demo images
and the starter templates to help you
follow along in this wordpress tutorial
so let's first take a look at the header
so on the header we have the social icon
so i'll be showing you how to add these
and then we have this beautiful gradient
button that says get
quotes and of course you can change this
to any font
and any color that you want on your new
wordpress websites
we have this menu right here with all of
the pages
and you can create as many pages as you
want we have our logo so you can add
your own logo
now if you don't have a logo don't worry
about that because i'll be giving you a
really good resource on where you can
get a professional logo
for your new wordpress websites and then
we have this landing page
and of course you can change this text
to anything that you want
you can put my amazing business website
or you know my dog grooming business
or whatever you want and you can change
the colors and the style of it
and then we have this beautiful gradient
button where if someone were to click on
it
we can navigate them to other parts of
the websites
so let's go ahead and scroll down next
we have
these blurb icons so we have just some
upsells you know just telling people
about our website like
our maybe your services like your
marketing
website and dog grooming that's an
awkward combination
but you get the idea so you can just add
general services that you offer on your
website
and then scrolling down here we have
just some text and we have some other
icons
on the left side we have this image that
just kind of helps add some images
and style into quarter website and then
we have this beautiful gradient text
which i'll show you all how to
incorporate gradient text
on your website to make it look really
vibrant and really amazing
let's go ahead and keep scrolling down
here and then we have this other section
so
this is like a stylus transparent
section where we have this text
and then we offer our services and what
we do
and we just gave it some style decor to
take away from all that white so
i'll be showing you all how to kind of
add design and decor
to your website to make it look really
attractive and then scrolling down here
i'll be showing you how to incorporate
testimonials if you have a bunch of
people that
think your website's amazing or your
service is amazing we can add those
testimonials
to your new wordpress website i'll be
showing you how to add
really nice testimonials to your
websites
and then scrolling down here we just
have some other things that you might
want to offer
like you know go here check out that or
maybe awards or prizes
and of course you can change this to
anything and this can be awards this can
be
something else and then we have this
gradient button
and we can link them to any part of the
websites
and then scroll down here we have
another call to action
and this just looks really nice you know
we have this mountain background to kind
of
take away from that business corporate
look and then we have this button which
again we can link them to
another website or your you know your
linkedin page or whatever you want
and then we have the number and then you
can also add your email
and then we have some companies that we
work with and then at the bottom we have
this really nice footer
where we can talk about where you're
located at we can talk about your
your hours of operation so i have monday
through friday
8 a.m to 5 p.m and then weekends and
then just some other
services and sections that we can add
for your new wordpress websites
so it's a beautiful website i think your
visitors are really gonna like this
website so it doesn't really
matter what kind of niche you're in
it'll basically work for everybody once
you change the images
so next we have the about us page and
you'll notice we have this
banner at the background that represents
a business slash
corporate style and of course you can
change this background to anything that
you want
everything is fully customizable on this
website
and then scrolling down maybe you can
introduce like the owner of the company
or just someone that you know that works
with the company or something like that
it's going down here we have just some
additional upsells saying this is what
we're good at
this is what we offer and maybe just
encourage people to actively
explore your websites and then we can
list
achievements like we have this many
happy customers
this is how much staff members that we
have you know just
something to make your website look you
know engaging and make people want to
navigate it and look great
and then we have maybe your staff so you
can add your staff to your website so we
have
jessica rabbits we have robert brown and
elaine
and we can also list their positions of
the company i'll be showing you how you
can add that
to your current wordpress website and
then again we have
companies that we work with and then
again we finish it off with our footer
again at the bottom
and let's visit our services page
alright cool so this is our services
page and again we have this banner in
the background
and i kind of changed it up i added like
a different style to it because i don't
want it to be too
similar and then here you can list your
services so
i'm just acting as if i'm some marketing
company where we do business planning
branding strategy and just things to
improve current businesses
and then scrolling down here we just
have some other services that we offer
and we can
go ahead and detail and explain what we
do for our business so
maybe here you can talk about web
developments web design
marketing or something else like seo
packages
and just talk about your company and
just give some more information about
your current services
scrolling down here again we have this
beautiful section and again i like this
mountain section because it just takes
away from all that
corporate business it kind of it's
refreshing you know i think
when i see this image it's just you know
it's just refreshing i want to go out
and
you know i want to see it you know so
i'll be showing you how to add this
really nice
call to action section as well for your
website
and then we have your team as well so if
you want to add your teammates again
with this really
cool animation so when i hover over it
you'll see how
paige kind of lifts on the corners i'll
be showing you how to add that
to your website and then again we just
have some current upsells you know just
reminding people
that we work with a lot of reputable
companies and that we're a large and
reputable company
and then again we finish it off with the
footer at the bottom of the website
now let's talk about the contact us page
all right and this is the contact us
page and as the background you can see
there's a bunch of people talking and
engaging and it just looks friendly you
know
it's inviting you know i'd want to
communicate with these people
and then scrolling down here we have the
contact us form so i'll be showing you
how to add a contact us form
to your website and if someone fills
this out and clicks on submits
it will then go to your email inbox
on the right side we have this location
of our company so you can add a location
of your company
telling people where you are and i just
put caesar's palace here i mean i
i don't know what to put so i just put
in a casino and
yeah that was the end of it i just added
something on google's map so i'll be
showing you how to add your company
uh on google's maps on your website and
then we have just some other information
like the address you have your phone
numbers your email
and then also your hours of operation
just to notify people a little bit more
about your website and your services and
that
is the entire websites so this page
builder is super easy to use it's 100
visual and drag and drop so you can edit
the website from the front end
so for example puts learn how to
make an amazing website step
by oop step by step
and then i can scroll down and maybe i
want to change this text to
computer pros right computer
computer oh my oh my goodness computer
pros there we go
and you know we can change the fonts we
can change the color the size
and then to this section if i want to
drag elements around
i can say you know what i want this text
i want to put it above the gradient on
the right side so i'll just
drag and drop it and then this image i
want to put it where that text was so
i'll just
grab the image and i'll drop it right
there
so now let's say you know i made a
mistake on my website this doesn't look
that good
i can just go in my history and redo
everything so i'll just say you know
what let's just go back to the way it
was before
and then there you go everything is back
to the way it was
and then i can change this to this is
the best
wordpress tutorial for the divi theme
and then i can save it on the bottom
right and there we go
so let's keep scrolling down let's just
see what else we can change here
so maybe we want to mix and match these
elements
so for example let's say i want the
marketing strategy
over here on this side so i'll just take
this and i'll drag it
and then take this and then i'll drag it
and
we can duplicate rows so for example
let's just say i want to have
this whole row duplicated so i'll just
click on this duplicate button
and there you go now we have that whole
section duplicated and then we can drag
and drop and edit all these elements
at any time so party people i have a lot
of goodies for all of you i have a lot
of free stuff in this video to help you
out
let's go ahead and get started with this
wordpress tutorial
are you guys excited are you ready good
good because we're going to build your
new website in five simple steps
step one we will get your domain and
hosting so for example
my amazingwebsite.com i'll also show you
how to download the divi theme and also
adjust some general settings for your
wordpress website
step 2 i'll show you how to make pages
and start designing your website and
make it look really professional
using the divi theme step 3 i'll show
you how to use the
theme customizer some wordpress plugins
and just some additional settings for
your wordpress website
step 4 i'll be teaching you how to make
your website mobile responsive
so it doesn't matter what kind of device
your visitors are using such as an
iphone or an android
your website will look good and be
responsive on all
mobile devices and step 5 i'll be
teaching you how to use the divi theme
builder and all the advanced features
that
divi has to offer divi offers some
really cool features that will really
speed up the workflow
of your website so i'll be covering all
this in the advanced features section of
the video
and make sure to stick around to the end
of the video because i'll be introducing
you all to the db marketplace where you
can check out divi plugins
divi child themes and also tons of divi
templates
for your websites now there is a link
below
in the description of this video it'll
take you to a page to purchase
discounted and fast web hosting and this
is named hero.com now namehero.com
performed as the most fastest and one of
the most reliable web hosting companies
out there
now how do i know that how do you know
i'm not just lying to you right well
i actually tested name hero against 20
other web hosting companies
for 90 days a name here performed as one
of the fastest and the most reliable web
hosting companies
on my list in fact name hero had zero
downtime
this whole week so you'll have a
reliable and a fast wordpress websites
now i contacted the owner of this
company to give me a special discount so
through my link exclusively
you all will save 70 off your web
hosting if you go to the website
normally
you'll only save 50 off your hosting
packages
and the owner gave me this discounts
just for my viewers on youtube
so when you get to this page you will
click on get started now
name euro offers four different type of
web hosting plans they offer the starter
cloud
the plus cloud the turbo cloud and the
business cloud for those of you who are
just getting started out for the very
first time i recommend the plus cloud
i think that's suitable it gives you a
lot of ssd storage
it's a very affordable plan and your
website will be very fast
however for those of you who have been
using wordpress for a while and you want
to
upgrade i highly recommend the turbo
cloud
now the reason why i recommend the turbo
cloud is because
this plan offers the nvme storage
technology
which is a new type of store technology
for web hosting servers
for example so this graph is from
pcworld.com and you'll see that the
nvme storage can transfer data a lot
faster than typical ssd
and sata hard drives also you'll see
that the nvme storage can access
information
a lot faster than typical ssd and sata
hard drive so for those of you who want
a blazing fast website
i think the actual turbo cloud is a
pretty good option but i know everyone
out there is on a different budget so
just select the package that works for
you
and once you select the package we'll
scroll down to the bottom
and then you'll click on order now
all right cool so this is where you're
going to enter in your new website so
for example
mynewamazingwebsite.com or my dog is
amazing.com
or whatever you want to put i'll just
put demo
tutorial 123.com and click on search
and look at that we get a free domain on
top of that so once you select your
domain you'll click on continue
lastly we have the review and checkout
and look at that you just saved 125
you have a year of web hosting and id
protection
for under 70 so you have a very good
value with namehero.com
once you're on this page you will scroll
down
next we have the billing details so if
you've seen this screen before
you'll put in your first name your last
name your social security number your
bank account
i'm just kidding guys they don't want
that information it's a joke
you'll put in your billing address and
any other information you see here
for the support pin make sure you write
this down so if there's an issue or you
want to know something about your
accounts they will want to know about
your pin
just to verify that it's you calling and
they want to make sure it's not just
some random person over the internet
trying to get your info you'll create a
password which you probably use the same
password for
all your other websites right i'm just
joking i do that sometimes but i should
really stop that
we have the payment method so you can
pay with credit card
paypal coinbase or credit card
stripe look at that people are using
crypto in fact crypto
i think bitcoin's almost at twenty
thousand dollars right now
yeesh it's crazy man it's just going up
and then you can go ahead and fill all
this information out
once you fill everything out on this
page you will then click on the checkout
button
now i will purchase an account and i
will meet you on the very next page
and congratulations on registering your
domain so this is your current client
area here you can access your supports
you can access billing you can purchase
more domains
or you can upgrade or purchase other
web hosting packages if you want to do
that and name your has very good
supports
so at any time you have a problem with
your website under the supports you can
open a ticket
or you can contact them anytime if you
have issues with the websites
so next let's install wordpress onto
your new domain
under the my cloud you'll go ahead and
click on my cloud
i like this new interface named hero
introduced they recently remade their
whole websites
for those of you who have been with name
hero for a while you can tell they did a
really good job
at making their site look really nice so
i will click on the plus cloud
the next thing that we will do is we
will access the cpanel so on the left
side under actions you will see
log into cpanel go ahead and click on
log in to cpanel
all right cool so next let's install
wordpress let's
scroll down just keep scrolling just
keep scrolling
we're going to find a wordpress
installer and we're going to install
wordpress
onto our domain so under software
you'll see wordpress manager by
softaculous go ahead and click on that
next it's going to say install a new
copy so let's click on install
all right so this is the software setup
so let's just change some quick settings
while we install wordpress onto our
domain
for the protocol make sure you have
https
that just makes sure that your website
has a valid ssl
and that just lets people know that your
website is secure for the in directory
make sure nothing is there
that just means yourwebsite.com you know
that's it we don't want it to be
whatever that is so just leave it like
that for the site name you can give your
website a name
and you can also give it a description
so this can be web agency
you guys can see i i do this quite often
and i just put a
cool website agency or something like
that you can change all this later so
don't worry about it
for the admin username make sure you put
something that you know
because you will need this information
to log into your website and change it
so i'll put paddywhack and then for my
admin password i'll put
paddy wack
99 for the admin email make sure you
have access to this specific email
because let's say for example you forget
your password
you will need to have access to this
email to retrieve your password
and i'll scroll down you can also select
your language
so if you speak chinese you know there's
a big debate on my channel so
isn't it mandarin right not chinese
because there's no mandarin on this list
but i think uh
chinese is the new standard of what
american calls mandarin
i don't know let me know your opinion
about that in the comments below
but i just speak english so i'll leave
this as english but you can select
all these languages like spanish turkish
arabic and
and all those languages and scroll down
and then we will click on the install
button at the bottom of the screen so
now it's installing wordpress onto our
domain
all right wordpress has successfully
been installed on the administrative url
link you can click on this link right
here
and congratulations you have now
successfully installed wordpress and
your website is now
live on the internet if you want to see
what your website looks like right now
under the top left you can click on
visit sites
and this is your new wordpress website
so you have a live website on the
internet
pretty cool right let's go back to our
dashboard so while we make changes to
your website let me show you how to log
in and to log out of your wordpress
website on the top right you'll see your
admin username
you can click on logout in order to log
out of your wordpress website
then i'll just go to the domain now when
you want to log into your wordpress
website to build it and make changes
you'll go to your website and type in
dash wp
dash admin and press enter
here you will go ahead and enter in the
login credentials that you created
during the wordpress installation so
i'll put in my
email address and my password
i will click on remember me and then
click on login
and that's it so every time you want to
log in and log out of your website you
can just go to your domain type in
wp-admin and you can access your website
okay so your website's live on the
internet and it's all ready to go so the
next thing that we're gonna do is we're
going to download and purchase
the divi theme so let's go on the left
side you'll see
users go ahead and click on profile
now here you can change the color scheme
of the back ends and just make it look a
little bit you know nicer or your style
oh that is ugly
that is ugly so i like modern i think
modern's a good one you know or
midnight that's also a really nice one
so go ahead and pick your color scheme
and then scroll on down here we have
email so make sure you have access to
this email
let's say you forget your password which
a lot of people tend to do
your password will go to this specific
email address
so make sure you have access to that
email and you can always change it
whenever you want
and also for those of you who want to
change your password
on the bottom you can click on generate
password and here you can enter in a new
password for your wordpress website
but i'm going to leave mine standard and
then once you're done with all those
settings
you'll click on update profile okay
next we're going to do is we're going to
change the links of our website so we're
going to make it look a little bit more
cleaner
and we're also going to make it more seo
friendly on the left side you will see
um i'm sorry you'll see where is it
again we'll see settings sorry
settings and then you'll see permalinks
go ahead and click on permalinks
so you have these common settings but
you want to change this to post name
and the reason why we do this is because
you want it to display your websites
like you know darrellwilson.com about us
not you know 2021 you know this doesn't
look good
and this is a lot cleaner and looks a
lot better for seo purposes
so make sure you select post name scroll
down and then click on
save changes all right so the next thing
that we're gonna do is that we're going
to make some pages for our website so if
you go to your website right now and
click on visit site
you'll notice that there's no pages
there's no menu and there's there's
it's just like it looks terrible we're
going to make it look a lot nicer
go ahead and click on dashboard and
under pages
click on all pages now these pages are
created by default when you install
wordpress and you do not need these
pages
so to delete a page you can click on
trash
and click on trash okay so let's go
ahead and create a page
on the top you'll see add new click on
add new
okay and where here we have add a title
so this will be our
home page right so home and now we'll
click on
publish at the top right and click on
publish
alright now we need to make the about us
page let's click on the
wordpress icon and click on add new
next we'll make our about us page so
about us or
about you know either one you know about
or about us same thing right you know
click on a publish and a publish and
let's do that two more times for the
services and the contact us now you can
make as many pages as you want you are
not restricted in any way so go crazy
you know
go crazy here we go services publish and
publish
all right so we made the pages now we
need to create a menu
for our pages let's go ahead and do that
on the appearance section you'll see
menus
i'm going to click on menus so we don't
have a menu right now
so this will be main menu for website
look at that i was already messing
around with this earlier as you can tell
i mean i had to remake the website
uh here uh on the right side you'll see
create a menu i'll click on create menu
and then under the pages on the left
side you'll see view
all let's click on all the pages here
and then i'll click on add to menu so
you'll notice we have the pages
however for this home page we have this
custom link now we don't need custom
links
a custom link is basically a link to
anywhere on the website
so for example you can put this to like
a gofundme account or something and then
you can link the gofundme
link there and then that will display on
the menu so
the custom links are just links to
pretty much anywhere
it doesn't even have to be your website
but i'm going to remove this custom link
so i'll
remove that and then i'll rearrange this
menu so i'll put the home at the top
and the contact us so that looks good
right the home the about us services and
the contacts
now on the bottom where it says display
location i want to click
on the desktop horizontal menu
and then click on save menu so now let's
take a look at our website and see what
that has done so on the top left i'll
click on visit
sites and there we go we got the home
page we have the about us page the
services page and the contact page
pretty nice this theme is really ugly
you know i don't even know why they made
this thing hopefully 2021 will be
looking a lot nicer i'm not really sure
why why they made such an ugly looking
theme
so now that we've created our pages we
want people to go to our home page when
they visit our website right
so let's assign the home page as the
home page
on the top left you'll see this
customize button go ahead and click on
customize
now we will come back to the theme
customizer and the divi options
a little bit later in the video but all
you need to do right now
don't panic first off go to the bottom
of the home page settings
and then under a static page you want to
select the home page
as home duh it's pretty simple right so
that's it
so homepage is home and then on the top
you'll click on to publish
and that's it your changes are saved so
let's click on this x icon
and this is the first page that users
will visit when they visit your website
so you'll see how this says divi theme
tutorial
and if they go to it it'll bring them to
our home page that is pretty cool
the next thing that we're going to do is
we're going to purchase and install
the divi theme now i do have a 20
discount code
for all of you watching this video
you're welcome so you'll open up a new
browser or you can go to my website
durawilson.com i think the link's in
there somewhere but
i'll leave the link to purchase divvy in
the description below of this video if
you want to receive the 20
off discounts so you'll type in daryl
wilson oh
okay cancel my name guys so
darwilson.com
divi 20.
and there you go you have 20 off so this
will give you 20
off the divi theme uh let's go ahead and
purchase divi's get the discount while
the
supplies last so we have two options and
we have the yearly access and the
lifetime access now
i want to go ahead and say two things
before we go any further
is that no other company offers lifetime
access and in fact
divi is probably one of the only
companies out there that offer lifetime
access
and i have lifetime access so i would go
ahead and purchase a lifetime access
now second off is that i already have
the lifetime access
and there is a 30-day money-back
guarantee for any reason
if you just say hey darryl this video
sucks this theme sucks
you can go and get your money back so
that's a it's a win-win for both of us
because
i do get a small commission if you guys
do decide to purchase
this helps to make these tutorials for
you for free we have two options again
you'll go ahead and select either one
you have the yearly plan
or the lifetime access usually what
happens guys is people purchase the
yearly and then they upgrade to the
lifetime
that's usually what happens so once you
go ahead and purchase it you'll click on
sign up today and then you'll go through
the process
you know of creating an account and
putting your credit card and all that
good stuff
and you'll see at the bottom they have a
lot of positive reviews on trustpilot
elegant themes is a very reputable
company they're not some fly-by-night
company these guys have been around for
a long time a very very long time so go
ahead and
purchase the uh the theme and then i
will meet you
in the account page all right awesome
welcome to the divi family so this is
the members area where you can access
all the products now when you purchase
divi you get access to a lot of other
products you get access to the divi
theme which was what we're going to use
you also get access to the divi builder
plug-in now with the divi builder
plug-in is is
essentially you can use any other theme
that you want
and also use the divi builder so you can
use a different theme and use
divi to build your pages if you want to
go that route
and then also you have access to bloom
which is one of the best email opt-in
plugins
you have access to monarch which is
another plugin which allows you to
display
social sharing in a very professional
manner and then we also have divi's
younger brother
extra which um you know it's it's it's
fading away
you know but it's still there there's
still light we still love extra it's
just a theme for
uh blogs and you know it's it's still
there you know it's still there
it's still trucking so good for you
extra good for you
on the section where it says divi theme
and it says download the divi theme
go ahead and click on download the divi
theme and save this file
now what it's going to do is that it's
going to save a
zip file to your desktop or your
computer or wherever you're working on
now let's go back to our website and go
to our dashboard
so now we need to upload divi onto our
website
we'll go down to appearance and click on
themes
and now we're going to upload the divi
theme to our website
on the top where it says add new i'll
click on add new
and here is a list of some free themes a
lot of these free themes they're just
like
empty like kind of templates and
although they look nice
they're very limited on what you can do
with them and that's hence why they are
free
so on the top you'll click on upload
theme
and you'll click on browse and now
you'll want to go ahead and upload
the zip file that you downloaded from
elegant themes
i'll click on open next i will click on
install now okay awesome so we uploaded
divi now in the middle you'll see
activate go ahead and click on activate
and congratulations welcome to the divi
family you now have divy installed on
your
wordpress websites so if you want to see
how your website looks now it might have
changed a little bit
on the top where it says my blog click
on visit sites
and you'll notice right away how
everything looks a little different we
have the home
the about the services the contact looks
a little different we have this footer
which looks like crap don't worry we'll
change all that a little bit later
we have this default logo and we also
have this sidebar
on the right side okay so let's just
take a look here so we have our website
we have the pages
we have our menu everything set up so in
this next section
i'm going to show you how to design your
website using the divi theme go ahead
and get your thinking caps on let's make
your website look amazing let's go back
to the video
ready to now start designing the website
using the divi builder
so there's two ways to access the visual
builder on the top
you'll see enable visual builder and
this will allow you to build your
website on the front end
also if you click on edit page there is
also another button
to use the divi builder on every single
page see how on the top it says use the
divi builder
go ahead and click on use the divi
builder or if you're on the front end
click on enable the visual builder so
next let's click on edit with the divi
builder
all right so they're just welcoming us
to the dv builder we have nick roach was
the owner saying hey i'll help you out
blah blah blah blah but uh let's just
click on start building
and here we have three options we can
build from scratch choose a pre-made
layout and clone an existing page
so on the left side click on start
building what i'm going to do to help
you all out
is i'm going to open up my demo website
and i want to compare and contrast and
teach you
how to look at websites and know how to
build them with
divi so here's the website that i showed
you all in the beginning of the video
i'm going to show you this website and
then i'm going to help you understand
how to look at any websites
and kind of build it using the divi
builder first we have this header
a full with header module and then we
have this three column row with three
blurbs
and then under that we have you know a
two column row we have text
text text we have a text module now this
is a
special plugin and we will talk about uh
divi extensions near the end of the
video that i make your website look
really really nice
but first off let's just go back to our
website and just go stick to the basics
so here we have some rows where you can
add specific rows to your website so
here you can add in a blurb
for your first row and then for the
second row maybe you can add in you know
a call to action for a button and then
if you want to move these elements
you can go ahead and drag them with this
icon and just drag it below it
and there you go or i can do that over
here
as well just to kind of you know mess
around with stuff i can also duplicate
elements at any time with this duplicate
button
and then i can drag it to the other
section like that
so that's just a quick way on how to
kind of utilize the drag and drop aspect
of this builder
but let's just create a full width
section first so in order to delete a
section you can go ahead and just click
on this trash can
to delete that module or if you want to
delete everything inside of this row
i can click on this trash can or i can
go ahead and click on this trash can
and that will delete the entire section
so first if you want to add a new
section
you'll see this plus icon and you'll see
regular
specialty and full width i want to
select the
full width section and for this specific
section i want to select the full width
slider settings or the full slider
module
so we have the full slider and i'll
click on check
now this top section we don't need this
so let's delete this
so here we go we have this full section
now whenever you want to access a module
or design it you'll see this gear icon
let's click on that gear icon
and we have two specific slides however
i only want to use
one so i'll go ahead and click on trash
and only have
one specific slide let's click on the
gear icon
to customize this slide you can put
anything you want i'll just put
make something amazing
and then for the button i'll do start
now right
or you can put it wherever you want you
know start now or begin or something
like that
now i'm going to go to my demo website
here and just kind of copy the text just
to speed this up because i don't want to
you know take too long typing everything
from scratch because i've already
i've already made everything you know
paste that in there
here i have learn how to create your own
website and you notice how website is
colored now there's a few ways on how to
do that however what i just did was i
just
double clicked on the word and under the
text color
i just changed it to blue that's all i
did so you can have multi-color text i
mean right here i can change this one
to red or something like that you know
like something like that you know
if you want to add some design and decor
learn how to create your wordpress
websites
and then i'll go ahead and go to the
design section and we have these other
options right here so
if you want to go ahead and design this
specific slide
you can use these to design everything
now once you understand how to design
one module you will understand how to
design all of the modules
also you'll notice that we have these
little blue pencils now this is going to
display
for every module whenever you click on
this little pencil
divi will automatically bring you to
that section so you can start editing
your website
as you want so for the title font i like
poppins i think poppins is a very good
font
so i select poppins and then i'll do
something like uh
you know i'll do ultra light or i don't
know light
you can change the weight of the font
see how it's very skinny
like that or you can make it you know
ultra light
or you know however you want and you can
align this text to different parts
like that if you want to do that and
then for the text size i'll change this
to something a little bit smaller
actually because i want the the middle
part to be bigger
so i'll leave it like that i think
that's good and let's design
the middle section now so for the middle
section i'll click on little pencil icon
i'll change this also to pop-ins however
i want this to be bold i want this to be
ultra bold and we can change the font
style
these are just decorations or designing
the specific element
so we can have this italicized we can
have this upper case
you can change the elements the alarm
sorry the alignment
of the actual uh of the of the the
module
and then we have the text size so here
you'll see i can make this
really big like that in fact you can
even make this bigger than
divi wants you to make it so i can put
like 100 i could type in 150 pixels
and that will make it even bigger now
the reason why it looks clustered like
this
is because it's trying to work within
this specific box
so it's really like clustered it doesn't
look good we can always change that but
uh
let's just let's just keep it simple
here i'll just change this to something
like uh
you know we'll just do 65 something like
that
and for the letter spacing we can make
the letter spacing wider
now let's say look i don't know what i'm
doing here i messed up how do i change
this back to
what i was doing before under every
module
you'll see these little icons so this
little uh i guess it's a refresh
this will change it back to where it was
before so i'm just going to leave it
there
next we have line height so what line
height does is that it adds some
it adds some height in between the
specific line so
it just basically adds a little bit of
space in between everything so you'll
see here how
we have 1.1 1.2 and i want to add maybe
just like one
you know one pixel of line height so now
it looks a little bit more cleaner
and nicer right and then we can add in a
text shadow so if you want to add in the
shadow
see how behind we have the shadow like
that
you can kind of control the shadow like
that
and then you can control the actual blur
of the shadow with all these options
like that
and i mean there's so much cool stuff
you can do with divi i mean
the the possibilities go on and on and
on you can even change the color of the
shadow so
by default we use a gray but if you want
to use like
a a red or another color you can go
ahead and do that
that's just a quick little run down of
the actual styling we'll come back to it
a little bit more when we do the actual
modules
but let's go ahead and design this
button so i can click on button right
here
or i can click on these pencil icon and
that will bring me to the pencil
or the button customization
automatically
so on the right side you'll see use
custom styles for button
i want to turn that on because i want to
design this specific button
so here you'll be able to change the
actual button text size
of the actual buttons by default it's 20
pixels but we can make it like 25 pixels
you can also go ahead and change the
text color
of the button as well just by clicking
on the specific colors
now if you want a custom color you can
click on this little icon and this can
like you know you can get very
technical with the colors that you want
for your specific button
um scrolling down we have the button
background by default it's a
transparent but if you want to add a
background color you can add in a
specific background
color to your button i'll get rid of
that and if you want to add a gradient
to your background you can go ahead and
add any gradients
so you'll notice how on my demo website
right here i added a specific
gradient to my button now if you want to
get a good color palette for gradients
you guys can go to uigradients.com
this website will really help you out
with gradients so gradients by default
guys i know every amateur loves them
but they're very hard to carry
throughout your website so let's just
say for instance uh we'll just
you know we'll just pick a gradient here
i'll just click on a blue one and i'll
just select the
azure lane or something like that
actually no that's that's too many
we're gonna do there we go so what
you'll do is you'll copy this color code
go back to your website and under the
actual
first color i'll click on that i'll
paste that in there
go back to this website and i'll paste
the second
color code and click on that color and
then i'll paste that in there like that
so now you'll see how we have that same
color palettes from the actual ui
gradients website
you can use that website if you want
help with gradients because i know
people like gradients and it's uh you
know it's
they're fun you know they're nice to
have but again it's hard to carry them
throughout the website
so here we have gradient direction so
you can change the direction of the
actual gradients
also we have the gradient type now
there's linear and there's radial
so radial just means the gradient starts
from within the circle
so you'll see here how it starts from
within and linear
is just basically like a linear style
it's like it's like a directional
angle and you can kind of change the
start position
and also the end position of the
gradients you can even make a split
color
a button like that if you want to get
crazy and creative you can go ahead and
do that
but you know there's so many
possibilities on what you can do
with divi it's just uh it really depends
on what you're going for
the color palette that i use for my
specific website let's go and take a
look here i'll just put that in there
and paste that and then for the second
color
i have this one i'll copy that and then
i will go back and just paste it in
there like that so there you go
we have this other option so we have a
button border width
so we have this white border if you want
to get rid of it just go ahead and just
take it off to say you know what i don't
want a border
but if you do want a border you can add
a border to pretty much anything so
you'll see how we have this
border in fact i can't even make the
border the same color as the
actual button to make it blend in but
i'll just get rid of it for now
now also here we have the border radius
and this just gives it a circular kind
of style
you'll see here how the the button gets
this like circular style
now since we don't have a border it's
actually kind of like missing there so
if you want to have like a
like a total circle like that you'll
need to match the colors
and then just add a border radius or
something like that
you know something like that you get it
so you'll just have to match the color
with the actual button border
because technically they're two
different things but i'll just get rid
of that for now
and just leave that basic don't worry
you'll get this whole layout later don't
worry about it
and then for the button font you can
change this as well to like pop-ins
and you can change it there like that so
on and so forth
so again once you understand the options
for one module you kind of get it for
all the modules
now if you want to add a little icon to
your button you can go ahead and do that
as well
so you'll see here how that little
button pops up you can change the color
of that button
you can also change the placement of the
button so the left side
or the right side and you can also have
the button show
you know forever or only when they hover
over it this just means the button will
be displayed at all times
and you might want to add a border if
you do that because then it'll look like
it's cut off
and then we can change the alignment of
the button so that's pretty much
it for this specific module now we'll go
through all these options a little bit
more
um when we talk about other modules
because this is kind of a bad example to
use it for the fullest slider module
let's just go back to the actual content
and then go to background
so let's say you want to change the
background color of your website
you'll click on these little icons and
this is the actual color so we can add a
background color
and you know you can add in like an
orange or red or black or something like
that to match the criteria
of your website also if you want a
gradient
you'll click on the gradients and then
you can click on add ingredients and
then you can select a specific gradient
for your website just like we did before
so you can have a gradient background
also if you want to add in a specific
image which i think is the most standard
you can go ahead and do that as well by
clicking on the image
icon so let's go ahead and add an image
to our background so i'll click on the
plus image
now there are demo images for all of you
in the description below of this video
that you guys can download for free to
follow along in this tutorial
you'll click on the select files and
then you'll see
the divi images so you'll need to go
ahead and unzip that folder
and then once you unzip that folder you
can go ahead and upload all those images
to the website okay so the images have
finally been uploaded now there's a few
images i gave you guys all just for free
like for example this one i think this
is a really good one you know it just
looks nice it looks very clean
and it's like multi-purpose you know it
kind of works for anything you know give
or take
or you can do something like this
mountain look where
you know you just want to have that like
you know oh we're we're up here in the
mountains and uh you know we
eat goats or whatever you know you can
have that
or you can have something like this is
which is like the default one that i had
now you might come across images online
that you love
the problem is that sometimes it's too
white and it makes your text blend in
and
it looks really bad and you can't see it
so what we can do is we can add in an
overlay so go ahead and click on the
slide and under the design tab
under overlay we can click on use a
background overlay
so now what we'll do is we'll just dim
the overlay but you'll see how i have
this black
and or here we go color there we go and
i just want to reduce the transparency
on the right side
we have this transparency we can just
reduce the transparency
we can let people know what we're you
know we can let them know
about the image but we just want to add
in a very
little like hints so people can kind of
see the image yet also see the text
at the same time so that's just a way on
how to add in a background overlay to
pretty much any image that you might
come across
on the internet all right break time so
let's talk about my design tip
number one for all of you building
websites now when you're building
websites
you can use specific colors right
however for your landing page for your
home page whatever colors you introduce
on your home page
that is basically your color scheme
that's your color palette that's your
brand
and you need to make sure that it's
understandable right away so for example
divvy for business okay business website
and we have the colors
now if i scroll down on this page you'll
notice wait a minute wait a minute wait
a minute
the colors are all different now these
colors don't make sense
because on my home page you know why did
i introduce this red
that doesn't make a lot of sense let's
take a look at my website so on my
website durableson.com
we have this black color scheme and we
have this black
white and red color scheme with this
specific font and style right
now if i scroll down on the website
you'll see how we keep that scheme
consistent so we have this
black text we have this little abstract
red
gray black design and i carry that
throughout the website
i add in this banner here and i have
this red button
i'm keeping everything consistent you
know i'm not adding any yellow i'm not
adding any blue
i'm just keeping all the colors here
consistent on my website
when you are building your website you
need to make sure that you keep the
colors consistent so you should have a
color palette
no more of maybe three to four colors no
more than three colors anything more
than three colors
it just looks tacky so for example here
i have this purple i have a red i have a
yellow
and now i've introduced this other color
and then we have this other gradient it
just doesn't make sense
it looks tacky and you know if i'm
someone who's building or if i'm someone
who's visiting your website i'm not
going to know what you're trying to do
i'm not i don't know what you're trying
to achieve here so
make sure it doesn't look ugly guys
remember just keep it consistent
and when you are building your website
just make sure that you're not adding in
too many colors you know my
my obvious tip is don't add more than
three
three color schemes or three color
palettes so
on my website you might see that i added
just a white
black and red color palette i did throw
in the gradient as a wild card so this
gradient at the top you'll see
is another color palette that i used i
use this more of a
wild card i do introduce it throughout
my website you saw on the top bar you
saw it over there
and i think i also added here on the
bottoms i do have maybe a
four color palette or four color
uh palettes that worked for my website
just
keep that in mind and remember whatever
colors you introduce on your home page
that is your color scheme and you must
carry that throughout the website
this is a three column row right one two
three and it's three blurbs
as we do this i wanna just kind of help
you understand like for example this
next section
this is a two column row right and this
is a text
text blurb and a text and an image
that's it so let's go ahead and create
this section next
make a new section click on the plus
icon and click on regular
and i'll click on the three column row
now the great part about this is that we
only need to make
one icon and then we can duplicate it
saving us a lot of the hard work
is i'll select the blurb icon so this is
the blurb
blurb is just kind of like i don't know
i like the blurb icon you might want to
use something else but i think the blurb
is just easy to work with
so what i'll do is just put in something
here like you know business solutions
and then over here i'll just you know
i'll just actually just do this i'll
just copy this paste right here there we
go
and then i will paste that in there like
that
now we can put in an image here however
we can also use the icons that
davie comes with instead of actually
using a custom image
i like using the icons more because i
feel like these just
they're very responsive they work well
with divi and
ultimately just makes things a lot
easier uh go ahead and just select an
image
and we can go ahead and change the color
of that image so maybe
for this one i'll put in put in this
building right here
you know we'll put in the building there
we go we got the building so
and then we'll go ahead and go to the
design tab so now that we actually have
the
everything done we need to just design
it now i know it looks terrible but
we just need to just give it some color
give it some fonts and we're all good to
go
i'll click on this pencil icon and i'll
do the
pop-ins and i like the the bold here we
have like the ultra bold
i think that looks really good we can
even do
heavy as well i mean heavy also works
and i want to align this to the center
and maybe i'll change this a little bit
bigger 20
right and then i think that's pretty
much it so next we have the body text
so the body text as well changes to
pop-ins and i will put this as
a light right or we can do like a
like a light and we can also center that
as well and keep it like that
and then we can change the text of that
as well and so on and so forth
so that's pretty much it you know we
just made our module now what i did here
to be a little bit more
creative and i want to kind of help you
guys think outside the box here
is under the text tab i kind of made a
fake button so
i just typed in read more and
i bolded this so under here i'll bold
only this one
and then i added this arrow now let's
say for example you want to link
this somewhere within this box you'll
click on this insert edit link
and you can insert a url so i'll put
darrylwilson.com
i can open this in a new window when
someone clicks on this specific link
under this read more
it'll actually take them to my website
essentially what i did here is i just
kind of created a button
using text there's no right or wrong way
to use a module guys however
you can use a module that's what you
know whatever whatever you're trying to
achieve with whatever you want
that's what works you know there's no
there's no handbook to divvy it's just
whatever you can think of that will work
and i want to change this to black you
know i want to keep this black like that
so you'll see how this is now a link
that we can use
to pretty much anywhere we want also
you'll notice on my demo website how we
have these gray little bars
now what this does is it just gives it
some separation
and it's too much white so the gray bars
kind of helps it take away all of that
white
so to add a border to anything under the
design tab
you'll see this border option now we can
add a border to
the top we can add a bottom to the right
the bottom
or you know the entire box but i just
want to only add a gray border to the
right side
so we can add in a small border like
that
and that's a little bit too dark so i
want to just kind of reduce the
transparency there so
over here i can just reduce it just kind
of give it like a
faint look right not too much
just a little bit like that and there
you go what we can do next
instead of having to do everything all
over again you know i'm a lazy guy you
know i'm very lazy so i'll just
duplicate this module twice
and i will drag this over there there it
goes
okay let's see we can do that again here
let's do this let's see here
oh there there it goes so if that ever
happens guys
you know i'm not going to edit that out
that really does happen with me
sometimes so
it's just you know you just got to work
around with it so next let's go ahead
and say all right darrell well
you added this little this little
section here and you pushed it up how
did you do that
well let me just show you how i did that
what i did under this section is i added
a
a drop shadow so under the teal section
under the design we have a box shadow
and i added a box shadow to it like that
and for the actual sizing of this
i made this a little bigger so i want to
reduce this i want to increase this
width here
i just want it a little bigger you know
something like that
max width there we go
something like that now one thing also
is that sometimes these are too close to
the ends
so you can go ahead and just see you
know it's i want this a little bit you
know in the center there you might need
to adjust
things as needed while you're building
this so now that i've done that so we
have these three icons
what i can do is i want to push it up
here
now this is a little advanced but this
is where margin comes in
so there's margin and padding so let me
click on this gear icon just explain it
to you really briefly about margin and
padding
so under the design you'll see i think
it's under a spacing
essentially what margin and padding is
padding is creating space
you see how right here we have the space
and how it's making more
space so padding is creating space above
this particular icon if i
do padding on the bottom it'll create
space
below the icon so now it's making more
space below it
if i add space to the left it'll create
more space to the left
and more space to the right essentially
what it's doing is that it's kind of
pushing everything away because
it's too clustered and you want space
like let's say for example
i just want more space on the top here
so i can just click on the gear icon
under the design we'll go to the spacing
and just say i want space on the top
like that and you can do that for pretty
much
every single module 100 pixels gives it
a lot of space
now what margin is margin is saying
i just wanted to start from a particular
area so that's what margin is in a
nutshell and you can even have negative
margin with negative margin you can say
well i want this mod
to start way up here so i'm giving it
negative 40 margin
i'm just essentially saying i want this
module to start
minus 40 pixels from where i originally
put it
so that's what margin and padding is so
we can use margin
for this entire row here if we did it
for one module we can do it for rows
so i want to go ahead and click on this
gear icon and i want to add margin to
this entire row
so design spacing now we have margin
right
so we have margin on the top but what i
can do is i can add margin
to the actual whole entire row and we
can push it above it
like that now you might notice also how
we have this
space and it's also kind of transparent
as well from this top one
but we need to add a background color to
this first i'll go ahead and access this
whole row
see i'll go ahead and double click on
this row
and under the background i want to
change this background color
to white like that so now we have this
white background you know we just want
to make sure that uh
you know it doesn't interfere with this
top one next let's say okay we made this
section congratulations
now how do we make this section pretty
simple right we have a two column row
text text and blurbs text and an image
under this little plus icon regular
right
and we have a two column row and
we just say we said text right so we
have text here i'm lazy here
there we go there we go and then also
we have this divider so we have text
divider and text right
we have text and i'll click on the plus
icon
and we have a divider
and then i'll duplicate this text and
then i'll drag this text below that one
right
there like that and also we have three
blurbs
so i'll just put in a blurb
like that okay and then under this
section we have text
and then we have an image below that
text see i want you guys to just kind of
look at the website and say okay
i know where everything goes we just
have to design it so i know this looks
nothing
like this but literally all we do is we
just change some fonts
we change the colors and that's it so
for example we have this section
about us and then we listen and work
carefully
now for this section i'm gonna introduce
you all to h1 tags
about us and then i'll go ahead and just
copy and paste this
this text
and paste it in there so with this text
you'll see how we have heading one
heading two heading three heading four
heading five so i wanna change this to
heading two
okay there we go heading two and i want
to leave it like that
now when i go to the design tab you're
going to see
text right i want to design this text
however
we can have different text for each of
these ones
so usually you know since we have it in
one box it would change
everything but since we have the heading
2 tag
we can now design this text
independently
from this text so for the text here i'll
just change this to
ultra light now you'll notice here how
only the top is changing and that's
because
the text is default to the paragraph
font so now let's say okay darrell well
you know we we you know we change that
how do i change this one
well let's go ahead and close that
go to heading text and we selected the
h2 tag right remember how we selected h2
i'll go ahead and change this font now
to something like ultra bold
and yeah i mean that looks pretty good
right i mean i can
you know maybe increase the size of it
so heading text
h2 and uh let's make that a little
bigger like that
so that's what that means under the text
section where you see
the h1 h2 h3 and all that different
font and a different size for every h
tag which is pretty cool
all right so now that that's done we'll
click on this and this is the divider
guys a divider essentially adds
space in between certain modules i'll
just go to the design
and just under the line uh we can change
this to blue because i want to carry
that blue
and under the sizing i want to make this
little fat you know a little fatty here
we got a
we got a fatty that offends a lot of
people today i shouldn't use that word
anymore it's like
people on the internet take everything
offensive and it's like well it's a fat
line you know
i want to reduce this width you'll see
here how i just kind of reducing the
width
like that and that's pretty much it
and here we have the max that i'm sorry
the minimum height
and then we also have the height as well
so essentially what the height does guys
is we're just adding
height above it and below it that's
essentially what a divider module is
supposed to do
however i'm just using it to add decor
to the website
because i just don't want all that white
everywhere and i want to create this
divider
to kind of you know help people
understand you know what i'm trying to
do there so
that's basically how we add a divider
and again i can always
adjust this like that and also
the same way as well so it's kind of
hard to kind of get to all these modules
because a lot of them
get in the way of each other but you
guys get the point now let's just say
for instance i want this
you know i want to make sure that i want
to reduce the space here
and maybe this module is like the max
space you can add
you can always add negative margin so
remember design
spacing and i want to add negative
margin to the top
and negative margin to the bottom like
that just to give it a little bit more
space
something like that you get what i'm
saying so that's where margin can come
into play kind of
forces everything to work together now
let's go back to here and i'll just grab
them some demo text all right
copy this and you know paste this
paste there and then like that and then
i can just change this text to pop-ins
and i think ultra there we go that's
good all right that's good
just light that's good so now we have
this section now what i've done on this
website
is you see how i have this orange red
and green
i kind of use that as a color palette so
with colors on your website guys you
probably only want
two maybe max three color palettes
however i'm using this
as a specific color palette so i'm just
getting a little bit more creative
so let's just say if i introduce this
color on my website i have to introduce
it again somewhere and i did
so i introduced it right here as well
and i also introduced it on the other
pages
that's where you want to keep the colors
as consistent as possible
there we go so i have this little module
and what we'll do is just go over here
and you know i'll just put in what did i
put there we bring
quality experiences and then you know i
can just you know you guys get the point
and then for the design i'll just add an
icon but i want to place the icon to the
left here
so to the left like that you know now
you'll see how we can change
the blurb to you know a different style
because up here
this is more for like introduction of a
service this is more for something where
we're just trying to add
you know decors and features so i have
the icon on the left side however under
the content section
i'll click on the image and icon and i
want to use an icon here and again we
can just use any icon
there we go like that and then for the
design tab
we can design the color of this so i can
have it blue
also for the um there we go the text we
can change this to poppins
right so i think the blue little uh
pencils really help you find everything
because
it is kind of hard to go through all
these settings and find each particular
one
so just clicking on that blue little
pencil really speeds up the process of
building the website
i'll change this to something like ultra
bold and then over here i will also
change this to
pop-ins and make this light so something
like that
and again we will come back to the image
filtering a little bit later the image
filtering is really cool so we'll come
back to this a little bit later
and i just want to duplicate this and
then we can just change the actual color
of the icon
and so on and so forth now this
particular module right here
this is created by another plugin called
divi next
and i will have an exclusive discount
for all of you watching this
but essentially what this module does
that it allows you to like have some
really cool stuff
on this website you'll notice how if i
click on the plus icon
i have more modules and this is where we
have the divi third party um
the divi third party extensions come in
which i'll talk more about a little
like at the end of the video but the the
extensions
just they just add a lot of stuff to
your website and it just makes
your website look really cool next we
have this placeholder image
and i want to click on this gear icon
and i just want to change this image
i'll just grab an image from one of
these here so i'll just grab in this one
and upload an image so i did talk about
the
image saturation i did talk about the
filters of the image so let's go ahead
and apply those now to this image now
that we have a good image to work with
i'll go to the design tab
and then we'll find the filters so with
the filters essentially what this
is is like you have a built-in photoshop
you can just kind of
change the saturation the brightness of
everything which is really cool you can
change the contrast
so you can go ahead and mess around with
all these settings now personally i am
not an expert when it comes to
you know photoshop so these are just
some things that you can do like you
want to blur
stuff but i'm just giving you an example
of how you can
apply filters to specific images so next
let's talk about how to make this
section
we have this header section we have a
text and we have a
four column row right we're going to
create a one column row
and then we'll create a second row with
four columns so
one column and then four columns and
then we also have another one column row
underneath that four column row so let's
just do that so here
i'll click on the regular rights click
on one row
text right we got it and then what i can
do
is i can under the plus icon under the
teal
a lot in a four column row and i'll just
add in a blurb
just you know just to just to help us
understand what we're trying to do
and then we have a text one below that
now the reason why i'm doing this like
this
is because i just want to help you all
visualize what we're actually trying to
achieve and
i'm just trying to give you some ideas
now the reason why i'm not going to
duplicate this is because
we haven't edited it first yet so i want
to edit it first and then i want to go
ahead and change it
i did forget the divider model didn't i
under this plus icon
i'll add in the divider module
like that first things first under this
icon i can go ahead and
align this to the center like that and
remember earlier how we use the actual
paragraph and the h2 tag we can do the
same thing
here because remember this text is
different
from this one now i'm kind of lazy guys
i'll be honest so i'm lazy
so what i'm going to do is i'm going to
just duplicate this section here
right i mean why work hard twice guys
why why you know
i'm lazy we're all lazy here and i'll
just drag that below that
and for this section i'll just align
this to the center
and also for this one i'll double click
on all this and i'll align this to the
center as well
so i'll delete that april fools yeah
we're not using that no more
and for this one why should we do that
again we can just you know
duplicate this all right and then i'll
just drag this to the bottom here
and i want to align this to the center
oops wrong one
so sometimes you might have problems
clicking on a module now if that ever
happens
there's a few things you can do i'll
click on this purple
icon at the bottom and right here we
have this little brick
or i don't know what those are we can
click on that and this kind of displays
everything about what we're doing we
have this
section row and we have two dividers
here so
i'll just go ahead and delete one you
know i don't need two
but this is how you can kind of visually
see your website
from like a block standpoint you know
what's funny uh about a year and a half
ago two years
this was the only way to build pages
with divi they didn't have
a front end builder so that was version
before 3.0 and that was a long time ago
i'll just uh align this to the center i
believe this is under the
let's see under the sizing is it the
module alignment there we go the center
like that
and also you know we don't need to
really you know i don't really want to
do this all over again so what i'll do
as well is i'll duplicate this module
and i'll just
drag it to the bottom and just drop it
in there
now i have this background image so
let's go ahead and add in a background
image here i'll go
over here and add a background image
there we go and then i'll click on that
now we might need to change these to
whites now instead of having to do
that all over again or even duplicating
it i can copy this module style and i
can
paste it on other modules so what i'll
do is i'll right click
and when i right click over a module
you'll see certain things you'll see
split test save to library all of this
stuff
however i can click on copy module
styles
and i can paste it right over there like
that
and paste it and then paste it again
like that now the reason why it didn't
change the read more
is because the read more i actually use
it through the text editor so
i'd have to go ahead and change that
manually but that's just an example
of how you can go ahead and copy module
styles from other places
and bring them to somewhere else now
what i did here is i just added a drop
shadow or i can even add in a
black background and i just made it
transparent
so there's a few ways on how you can
achieve that so for example for the
first column here
i'll go to the design tab and under the
backgrounds
i just want to add in a black background
right
and i can just make it very transparent
what i'll do is just make this very
transparent like that
you see how i did that now also you
might notice how we have no space
remember how we talked about padding
before how we want space above and below
now's a good time to exhibit that so for
the
sizing here let's see where it is where
is it here the spacing here
let's add some padding of 10 pixels to
the top
right and then we also have 10 pixels to
the bottom
so now you can see how we have the the
padding and now you can visually see
where it should be applied it's just a
really you know a good way on how to
you know add padding and everything to
your website i can even add more here
maybe 20 pixels is good
now what i also could have done is i
could have added a box shadow around
that specific
column as well so let's just say i
wanted to add in something like that or
like this
you know i can always add in some sort
of design and decor to it
it's really up to you you know i like
box shadows but just be careful don't
add too much of them because
it's a quick way to make your website
look really tacky so now that i've added
that little background over it
i can go ahead and maybe uh change this
specific
column to the left side you'll see here
how i have this
column to the left and i'll show you how
i did that what i did to achieve that
is i actually changed the actual size of
the column
i'm sorry the icon for the image icon
placement i left it at top
i put it to the left side now we have
this option right here to use the icon
font size and i just made it a lot more
smaller
something like that and for this text
i actually put it to the left side here
so i put it to the left side
and also i put this as well to the left
side so
there's really no right or wrong way to
do things that's just how i achieve that
now
instead of doing this all over again i
can delete these and i can just
duplicate that module so
that's essentially how i achieved this
section right here
so you can kind of go through ahead and
mess around with it it's the same thing
you know it's just some small
adjustments i need to make but overall
that's how i achieved this specific
section so let's talk about
this section right here now this is
pretty simple and you guys probably know
how i did this already because we
already introduced it to you earlier
and this is a testimonial icon i'll
click on add a new section
regular one row and we have a
testimonial
so testimonial i'll just put in like the
author names like jennymc
and then she's the ceo of uh
i don't know ladies gym ladies gym
something like that
and then for the body paragraph we could
put some text here
and then for the design we can go ahead
and design all this now remember
you can just hover over something and
just click on it and then you can adjust
whatever you want there
uh that's just a quick one how you can
you know design everything and just you
know
make your design for a little faster now
for the image i'll just go ahead and get
rid of that image
and put in this woman like that
now again you can design this and maybe
even want to add in a specific
background image like i did
for the actual background under this
section i'll put in a
background image and i believe i added
something like this here
there we go like that i'll go ahead and
delete that
actually no i think that actually looks
better there we go or something like
that actually
yeah i think that actually works out and
then i also added a drop shadow
around this whole specific row so under
the gear icon
for the design a box shadow like that
so now let's say all right well you made
this section darrell let's just go ahead
and move it up again
i'll just move it up so gear icon
here i'll go ahead and click on that to
get rid of that
there we go like that and then for the
design
uh under the spacing section i'll do the
same thing again
so i'll just give it some negative 100
pixels
there we go and then i need to make sure
that this background is white
that makes it so people can actually see
the actual you know the white background
color
like that so next we've done that
section we have
this specific section we have this
section which we've already created
we have text and we also have a button
and then we have
these modules which these are just
blurbs and they're just designed
differently
than we normally did so let's go ahead
and make that next section
first let's go ahead and just say you
know what i've already done that hard
work
let's duplicate this section but first i
need to introduce
a regular row and
over here what i've done is we have one
column
two columns and three columns now if you
ever want to see how many columns that
you have
you can click on this column row and
it'll show you
the columns and the formats you can
actually change that as well so for
example
if you want to change it you can click
on it and it'll change everything inside
of those
specific modules to adjust to whatever
you want to put
however i wanted to go back to that like
that
for this section i'll click on that
little uh row or column whatever you
want to call it and then
i will drag this put this in there
right and then we also have a text
like that but maybe that's too much text
right something like that
now for this text we can't see it
because it's white so if you want to
change the design we can change it to
black
right black
and then also we can change this there
we go
there to black as well just so we can
see it so now that we've actually copied
this what we can do to speed up the
workflow
is we can actually save certain modules
to the library
so let's say for example i need this
divider module right but i don't want to
copy it and i don't want to bring it
somewhere i just want to kind of save it
and just use it to
other parts of the website so we have
this little save button
and we can add this to the library so
this will be our divider module
and i will save this to the library so
now what i can do is i can go ahead and
click on the plus icon
and i can add that from the library
instead of having to duplicate it and
bring it everywhere
you know all around the website
essentially you can make certain modules
add them to the library and then you can
just kind of use them throughout the
website
i want to go ahead and maybe push this
to the left side
so all this to the left side you know i
think that's uh you know it looks better
like that
this one as well i want to push this to
the left side
it's kind of hard for me to remember
where everything is all the time guys so
you know my bad if i make mistakes it's
just hard to do this because i'm not on
a script now that we've actually made
that specific section
we need to make the button so we want to
make something like this however
for the button we will have to make one
from scratch because that module
is part of another module and we can't
use that specific button what i'll do is
click on the plus icon
and select a button like that
and then i'll just select it right there
and there's our button
now let's just say for example you have
other modules later on and you don't
want to
go through every single one and you
don't want to change them what i'll do
is i'll go to this plus icon
and click on button now there's a few
ways on how you can kind of achieve this
little
trick i'm going to show you how to do
i'll teach you this later but i just
wanted to kind of give you a crash
course about some of the advanced
features so again what we can do
is i can just go ahead and copy this
module style
and then i can paste it onto this module
style
and therefore it'll change it to you
know however i want that to look
also we can use the extend styles
so i'll go ahead and right click on this
and go to
extend button styles so what this is
going to do
is that it's going to take this same
design of the button
and apply it to all the buttons on
this page this section this row or this
column
so i'll just say this page and i'll
extend the styles
so now it's going to find any button on
this page and change it to that specific
style
it doesn't change it to this button
because this is part of the
full width slider module it's not a
specific button module
so that's just some you know just a
crash course on some of the advanced
features
that come with divi it's really really
cool we'll talk more about all those
features a little bit later
in the video so now i have this section
here
and this section is just a blur so i
just added a
image and some text and what i can do is
i can actually just go ahead and
copy this module or even add this to the
library so this will be the new blurb
see blurb icon
blurb icon and save this to the library
and then we can go ahead and just you
know i'll put in a four column row here
and add this from the library and now we
have the blurb icon now essentially what
i did is
i just added an image instead of the
actual um
icon now one thing to note is i might
want to go ahead and change this
to black let's go ahead and experiment
here i'll go ahead and copy this
module styles and see if i can paste
those module styles here
so here we go does that work
no it doesn't work it has to be the same
module guys so
i was i was hoping it would because it
would save a lot a lot of our time
but what i'll do is just change this to
black and then also here i'll change
this uh
you know the text to black as well and
then there you go
and then also we have that little read
more but whatever that's fine
all i did here is instead of using the
blurb i just used
an image so for the image and icon i'll
use an image
and then i put a picture of like the
women here
right so we have a picture of the woman
and then what i did here is i added a
box shadow around this specific column
for the green row under the gear icon
for the first column under the design
i will add in a box shadow to it
something like that
and also now that you guys know about
what padding is i want to add some
padding
to the top right because you see how
everything's scrunched together
i want to add padding so let's add some
padding to the top
right there like that and there you go
and i can just duplicate this module and
so on and so forth so duplicate it
put it there duplicate it
and then put it there like that's oh
wait but
here we go sometimes guys it gets
glitchy just kind of you just have to
drop it and it's like a game you know
just gotta
you just gotta drop it and hope it works
out like that so there we go
now uh also i have to add in the drop
shadow to all four columns just to make
sure that it all looks good
for column one for the design under the
um
here we go for the box shadow right
and then for design column two we have
yeah so what i can do actually is i can
just copy
this row style copy autumn styles and
then i'll just
paste the item styles here like that
there we go
paste item styles now you'll see how
they all look the same
okay so next let's add a call to action
on your website
call to actions are very helpful and
you've probably seen these on various
other websites
it just adds a lot of navigation to your
website it tells users where to go and
you can link them to pretty much
anywhere you want your contact form
let's go back to our website and let's
now create a
call to action section so first i'll hit
on the
plus icon and click on regular now
you've probably already seen
specialty it's just a different style
and way you can
add different sections now that's what
specialty is i don't really use it too
much
i don't really find a big reason to use
specialty but
i'm sure there's a reason for everything
if you want to add specialty sections
you can go ahead and do that
but i'm just going to add a regular
section and just put in a single column
row
and i'll type in text
okay now i don't really have to edit
everything all over again in fact what i
can do here
is just take this and duplicate this
right
and then maybe even just drag this down
and just use this section
you know just add it there and then
center align this and i'll hit the plus
icon and here i'll type in a
button like that and then
you can put in the link so this can go
to like darrylwilson.com or something
like that
right so durawilson.com and what i'm
going to do here is remember we need to
be smarter here we don't want to work
too hard
so there's a few things i can do here i
can copy this element
drag it or i can copy the module styles
and then i can paste it here instead of
having to do everything all over again
something like that right
and then i can center align this as well
by going on the design tab
and on the alignments i will center
align this
now we need to add an image on the
background i think that's the only thing
that we need to add
what i'll do is under the gear icon for
the section settings
under background i will oh no not color
we'll go to an image and we'll add a
background image now i did give you the
image
for this specific background as well
it's at the bottom here is this little
mountain
and i'll upload this image and there you
go
now the only thing that we need to do is
probably change this text to
white and i think that's pretty much it
alright cool so i uploaded that image
now i might want to add a specific
overlay to this background image because
it's kind of hard to read this text
since we have this white mountain
so what i can do is if i scroll down
i will then see the background image
blend so click on that
and there's a various ways you can blend
it in but i'll just click on
soft light now once i click on soft
light you'll notice how everything
disappears
but also need to do is click on the
background color
and i need to add a specific color for
that color blend
i'll click on the plus and i'll select
black
so now i have this black background but
what i want to do is click on this color
and i want to reduce the transparency
now
so now you'll see how it kind of blends
in really well and it just looks great
so something like that and then we click
on check and then there you go now if
you want to adjust this section
i can adjust it like that and also
like that as well and you can make this
text bigger or smaller
just depending on how big you want your
call to action to be don't make it too
big but
something like that is pretty cool so
next let's go ahead and create
this section here which is a very unique
section you'll notice here how we have
this
text and it's also overlapping however
it's this kind of circular style which
is really unique
so let's quickly go ahead and create
that and we are pretty much
done with our homepage so add a new
section
regular right normal
text and i'll just paste in some
demo content and i'll make sure that
center align which is good
right so i'll close that
now i might want to actually reduce the
size of this whole column it's it's a
little big
you know so what i can do is i can
reduce the size of this whole column of
this teal column
so what i'll do is i'll click on this
gear icon and for the design tab
under the sizing what i'll do is for the
width
i'll change this to something like 65
and then for the max width i'll make
this 614 pixels
so a little bit smaller just a little
smaller
so if i hover over it i'll click on
check
you will then see how the whole column
gets smaller
and that's what i want because i want i
don't want the overlay to be too big
when i push it up
so let's go ahead and continue under the
gear icon i'll click on that
and for the design i want to add a
border radius so remember a border
radius you can use for everything
it just gives things that circular style
so for the border
i'll add let's see 26 pixels
around the whole uh module and you'll
see how we have the
borders now you can kind of visibly see
what it looks like
and then for the content background i
need to actually give this a
background color of white so i just want
to make sure that
when it goes up that it doesn't like
fall in there and and you know it shows
the background
so i added in the background now let's
push it up that's all we got to do
so for design we have the
spacing i want to go ahead and give this
negative margin
of maybe minus minus 60 that work
minus 60 pixels
nope a little bit more
and perfect we'll just do it at like
maybe 85.
now there's one thing that we're missing
and we're missing a box shadow
the box shadow just kind of adds
emphasis around this whole section
so click on box shadow and i'll just add
a box shadow
and we can add different styles so
that's how i achieved that specific
section i did post that in my facebook
group and a lot of people were asking me
like how did you do that daryl and i was
like well you just gotta think outside
the box there but
let's go ahead and make this last
section which is pretty simple
add a new row five columns and i just
added an
image i mean that's it that's all i did
and then for the image
i just added in one of these demo images
and that's it you're done and i can just
duplicate this right
one two three four five
and congratulations guys you are now
done with your home page
you made it this far go get yourself a
beer my favorite beer is modelo
so at this point i think you're very
familiar now with the builder
and it's really up to you to kind of you
know make the step and just explore
other modules
seeing how you can improve your web
design process all right party people
welcome to design tip
number two now i want you to tell me
what's wrong with this
picture or website so i'm just gonna
scroll down and i want you to visually
look at it and say okay
what's wrong with this website we have
our landing page
okay the next section we have welcome to
royal and we have this
picture of fruits or vegetables okay
and then we have fresh ingredients tasty
meals what's wrong with what i just
showed you all
well you might notice that i used a
different font
for pretty much every section so i have
one font here
and that font obviously it's it's unique
and it works right but now we have this
other problem is we added
another font and another font
and if i scroll down here we added
another font
and we have this different font when
you're building your website you need to
keep the fonts
consistent now a general rule of thumb
is to have
two fonts most don't go more than two
fonts so
you can have a font that introduced your
heading tag and you can have an
additional font
that introduces the smaller text for
example i use roboto and a lot of my
faller font the smaller fonts
and then for my larger fonts i use
poppins bold
so you can get away with two fonts
however you want to make sure that you
don't use a large amount of font because
then your website just looks tacky i
mean
we have only quality food and then we
have this welcome to royal
and then we have this other one it's
just confusing and it just looks tacky
and ugly so when you are building your
websites make sure to stick to around
one to two fonts
and keep it consistent on my website
you'll see that we have
this uh poppins bold is my h1 tags or h2
tags
and i'm just consistent i mean you can
click on this blog post here
and i use the same font as well and i
use a different font
for these smaller text okay so that is a
general rule of thumb a lot of amateurs
they like to add multiple fonts
but just be mindful that it will turn
your website into a complete disaster
if you add in multiple fonts guys so you
don't want an ugly website
keep your fonts under two fonts
well now that you're all professionals
let me quickly show you how to
import the other pages along with making
sure your contact form is working
on your wordpress website in the folder
that i gave you all that you downloaded
if you open it
there is the about us there is the the
divi header
the services and all these other pages
you can go to your pages
and open it and then you can enable the
visual builder
and you can basically drag and drop this
on every page to make sure you get your
layout and everything is working
the way it's supposed to i enabled the
visual builder on the about us page and
then i'll just drag and drop the about a
section
replace the existing content and import
the divi builder layout
you can do this for every page all right
and there we go we have the about us
page and everything looks great
so go ahead and go through the other
pages and you can import them
all on your website and there you go
there is your free layout
you're welcome now let me go ahead and
show you all how to make sure that your
contact form is working
on your website first let's go to the
contact page
next i will enable the visual builder
all right we have these three options so
i will build from scratch
click on x i will find the contact us
page
and drag and drop it then i will click
on import divi builder layout
and there we are so now you have this
beautiful contact us form you are
welcome
now this is the contact form module you
can get to this module by clicking on
the plus icon
and typing in contact form and this is
the module that you need to
insert in order to have a contact form
however this layout already includes it
so you don't have to do that this
is the actual contact form module
the contact form settings includes any
field so you can have one for name
email message phone number fax machine
and whatever else you want to have on
your contact form the
contact form for elegant themes is
amazing there is so much you can do with
it
you can have conditional logic and there
is a lot of things that you can
have on your contact form i do have a
video on the contact form it is a little
old so i will be updating it
but i'm not going to go into detail on
this contact form because
there is a lot to talk about with the
contact form
however i just want to show you right
now how to accept emails from your
contact form
in case you want to use it on your
website which i think most of you will
once you open the actual module you'll
see these options
click on the email and then for the
email address
just put in your email that's it so i'll
put in my email address
now we can also set a redirect so for
instance let's say someone fills out
your contact form
after they hit the submit button we can
redirect them
to another url like a thank you page or
a terms and conditions page or any page
that you want to have
users go to after they fill out the
contact form but i'll be saving a
tutorial on the contact form for another
video
because again i want to be very thorough
i just didn't want to make this video
too long because i can easily talk about
the contact form for
another 30 minutes and then you'll click
on the green check
and click on save and that is it you are
done so now when someone goes to your
contact form and fills it out it should
go directly to
your email inbox on the right side we
have this
google maps this google maps is
essentially an embedded form from google
maps
you'll see that this is just code from
google maps and i'll also show you how
you can quickly add google forms
or google maps on your website
okay the first thing you'll do is go to
google maps and you will enter
google maps on the top left where it
says search google maps
you'll just put in your business address
or whatever you want people to see
on your contact us page i will type in
the red rock mountains near nevada
and i'll click on the red rock canyon
national
conservation area i actually used to
live right here and
these mountains are just beautiful i
mean the red rock mountains i mean i
hate to go off topic here but
for those of you living in the united
states you definitely have to check out
the
red rock mountains they are beautiful
and there is
tons of hiking i mean look at the
multi-color here it's pretty it's pretty
wild so
now that you actually have the address
of whatever you want to have so your
business or anything else
where it says share you'll click on the
share icon
and you'll click on embed a map you will
then
click on the copy html
and then go back to your website and for
the text
under the actual text element you'll
click on
text not visual and you'll paste that in
there
right there and then click on check
and there it is so now you'll see the
red rock canyon national
conservative area and then you'll see
the uh no
conservation area area whoops so you'll
see the the location
and then you can click on save and
that's how you can show people
uh where you are at or where your
business is located on your website
all right party people welcome to
another quiz so this is gonna be design
tip number three
and i get this common mistake with a lot
of amateurs building websites
so i want to visibly show you what i'm
talking about and show you how to fix
this problem
just in case you add this to your
website which a lot of amateurs tend to
do
i get a lot of people in my facebook
group asking me hey girl
i just made this website what do you
think about it and i get this
problem quite a bit with a lot of
amateurs so let's just take a quick look
at this website
and then try to understand what we did
wrong here so let's take a look we have
the landing page
looks good and we have the secondary
section
welcome tutorial with a picture of some
vegetables
and then we have the third section which
is
just some text and another image what is
wrong
with this website well if you guess that
we have too many background images
you're absolutely right so a common
mistake that i see with people is they
don't know how to introduce
new sections so we have this image in
the background which is good
however when you introduce a new section
it's very safe
to have a color and image so just
remember this color palette
image color maybe another color and an
image
so maybe do like two colors and an image
so this background should be a
solid color there's no reason why it has
another image
with another image on top and then on
top of that we have a third image so
at this point i don't know where the
website's going i don't know what it's
doing it's just all over the place
so let's just take a look at a layout
elegant names created and follow their
design
uh criteria so they introduce their
landing page with an image right that
makes a lot of sense
and then they added the secondary
section with just a standard color in
the background
that again makes a lot of sense and we
have this third section
which they've also introduced another
color and
the reason why i like this is because
they've made it this
faded color so as someone who's
navigating the website we know that it's
a new section right because
if this were white as well i would be
confused i'm saying well is this part of
this page
or is this part of this section or is it
part of this section
so since elegant themes added this very
faint color
it basically distinguishes and tells
people this is a new
section to the visitors and if i scroll
down
now you'll see how they started to add
in different images so they could have
even added a background image but
since they've already added images to
this section they probably felt
like let's not add in more white let's
add in a black color palette
but let's just introduce some images
here to take away from all this
white because there's too much white at
this point because if they were to
involve a third section with all white
the website would look bland and boring
right so let's keep scrolling down here
all right we keep scrolling down and now
they've also said okay let's just go
back to the basic color
right let's just go back no more images
let's just you know stick to a basic
plain color
and scrolling down here and again they
they stuck to another color you'll see
how this is a white color
on the top and then this is another like
i want to say it's like a darker white
but the overall purpose is they're just
telling the users
that this is a newer section and they
haven't changed the color palette
they've just kind of
tinted it just a little bit to let
people know that this is a new section
so i'll scroll down and then they
decided okay let's add it some images
because now we've added in too much
whites
so let's just take away from all that
white by adding in some images on the
background
and then that would be the end of the
website with the footer so just remember
that when you are building your website
you want to introduce
specific sections with specific colors
and styles
to tell your visitors that this is a new
section
and that this is something they should
look forward to so if i had this all as
a white background
it would look bland and boring however
if there's too many images
the people would be confused saying okay
image image
what is going on here this is too much
so even on my website we have
this image we have this color palette
now you notice also right here
we have this second section now i added
a
very small tint of whites but you've
also noticed how i've reduced
the the strength of this color because i
didn't want to introduce the same
strength of the colors twice
because the website would look um it
would look um repetitive at that point
so i have this section and then i'm
saying okay darrell look i have too much
white
let's introduce some black you know to
kind of take away from all that white
and now let's introduce a new section so
we have this new section here
however i took away from the abstract
designs so i don't have those little red
things here anymore because
it was too much and i just want to take
away from that design so
i want to have every single design
distinct and then here i added in the
black however i added in these little
designs again
to kind of remind users that this is my
brand and this is my style
just so they remember okay i remember
the designs and then we finished it off
with a footer at the end
so just remember to incorporate
different designs and different styles
for every section
do not add too many images and also
do not add too much color and if you do
add color
make sure you just introduce a tint of
something to just
take away from all of the whites or to
you know
not make it look so bland and boring
that is a very common mistake i see with
a lot of amateurs
but uh now that i've told you how to fix
that
go ahead and make sure you don't add
that to your website that was my design
tip number three and if you guessed
right
congratulations so congratulations your
website is coming along pretty well
now guys feel free to pause the video
and mess around with the you know the
builder
check out some other stuff i know people
like to kind of mess around with other
stuff so you know go ahead and do your
thing
but in this next section i'm going to
show you all how to use the theme
customizer
i'm going to introduce you all to
wordpress plugins and then we'll also
talk about the divi theme
options let's go back to the video
welcome back guys so in this part of the
video i'll be talking about the theme
customizer options the divi theme
options
and also give you some good resources on
wordpress plugins and where to get a
logo as well
the first thing that you'll do is let's
access the theme customizer first
on the top left you'll see my blog and
the theme customizer
you can also get there by going to your
dashboard and usually there's this
button here that says
customize your site that's the same
thing so it brings you to the same exact
place
so the theme customizer generally
controls parts of the website that the
page bowler normally does not
to be very honest i don't use the theme
customizer a lot with page builders
i feel like the theme customizers are
becoming a little outdated
the only thing that i would use on the
theme customizer is probably
the header navigation to design the menu
and then just the home page settings
which we did earlier
i'll first go to general settings and go
to site identity
now for the site icon you might want to
add something there
you'll see how on the top right here we
have this like icon
and an icon if you want to add your icon
to browsers you can select a site icon
so under media library i'll just grab a
picture of this
logo and click on select and just use
part of that
on the right side you'll see how this
now is part of the browser icon
so if you want to add a site icon you
can do that from the theme customizer
let's go back here and under layout
settings this is again where you can
just control
the layout of your website so if you
want to have like a box with which is
kind of old school but i think a lot of
you know i don't know i don't know if
people do that or not it's
uh i don't know i think that's like uh
back in the 2000's right
but uh you can enable a box layouts uh
under the header navigation tab
this is where you can customize the menu
for example the primary menu bar
you can make this full width you can
change the text size
the menu height and all the options to
customize the menu
are in the primary menu bar section next
we have the secondary menu bar
for example if you have a drop down menu
you can design the drop down
background or you can design the font of
the actual drop down menu as well
now i'm not going to go through all
these options personally i think you're
not going to use any of these you're
probably only going to use the home page
settings
but you can just check these out see if
these apply for your website
but for most of us i don't think we're
going to use the theme customizer too
much
only for maybe just the actual menu so
let's move on to the divi theme options
i'll go ahead and close this now when
you install
divi on the bottom left you'll see divi
and you'll see
theme options the divi theme options
allows you to upload your logo
it enables smooth scroll a fixed
navigation bar and other cool various
options
i'll scroll down and let's say for
example
you have those social media icons at the
bottom right of the screen on your
website
you can enable those or you can disable
those if you want to do that
a really cool feature that a lot of
people overlook in the divi theme
options
is the smooth scrolling which i love if
you enable the smooth scrolling
it allows your visitors to have a smooth
scroll effect on the website like this
instead of having it jagged and
something like that
the smooth scroll effect i think makes
your site look a lot more professional
and it just feels good from a visitor
point of view
you can enable the back to top button
which
on the bottom right of the screen on my
website you'll see if i click on it
it brings users back up to the website
so the divi theme options it just has
other various options
and styling things that you can add on
your website
that just make it feel better and just
you know give it a little bit more
emphasis on design
now if you need a logo i recommend going
to fiverr.com
i'll put a link below to fiverr.com
personally i've seen
videos where they recommend free logo
makers
but guys if you're really serious about
your business you wouldn't mind spending
you know five to ten bucks on a logo
to make yourself look really
professional because personally if
you're using free logos it's just
something that you're not really gonna
attract people with
but if you just spend like five to ten
bucks on a designer to make a really
nice logo
you can go a lot farther than that with
your business and just remember
a logo is a representation of you and
yourself
so if you have a great logo that looks
fantastic people will like it
in fact i got my logo from fiverr.com so
my logo on the top left you'll see
i got that from fiverr i found a
designer we worked together i paid it
more than five bucks obviously i paid
them around 50 bucks
but i think it was worth it i like the
logo and i'm really happy with it
so make sure to check out the divi theme
options you might find some options in
here that apply for you and your website
next let me talk to you about wordpress
plugins if you go to plugins on the
bottom left
and you click on add new you'll have
access to over
50 000 plugins essentially what plugins
are
is they are applications for your
website every plugin has a specific
feature
and there's pretty much a plug-in for
everything i mean i have
so many tutorials on plugins and all the
features that they offer
for example this one will actually
reduce all of the image sizes on your
website making your website load faster
if you feel someone's trying to hack
your website you can install this plugin
which will limit the login attempts
so that means if someone tries to log in
10 times it will ban them
from trying to log in we have this one
which is a caching plugin
and this one as well a caching plugin so
there is a lot of plugins that you can
have on your website and there's really
no best plugin but there is a good list
that i do recommend
on my website therewilson.com under the
wordpress resources
i do have a lot of plugins that i
recommend and page builders obviously
divi is one that i do recommend
these are other wordpress themes now
popular wordpress plugins
i think you would need an seo plugin for
your website like yoast or rank math
it basically makes your website look
proper in the search engine and it just
you know adds a lot of seo features for
your website
also something like translate press for
those of you who are trying to make a
multilingual website you can try
translate press
and uh ecommerce plugins
uh best optimization plugins personally
i would use wp rockets
it's a paid plugin but you want to make
sure you have a good caching plugin on
your website
so go ahead and check out some of the
free caching plugins
but again i would recommend wp rocket
and that's the one i use
scrolling down here we just do have some
other ones and these are booking plugins
so if you want to convert your website
into a booking membership websites
these plugins are the ones i recommend
and i've spent probably
years with trial and error on good and
crappy plugins so
i think i have a good understanding of
what good plugins are
and these are web hosting companies that
i do recommend
so be sure to check out the list of the
resources i put on my website
that's the end of the divi theme options
and the plugin section of this video
be sure to check out the resources tab
on my website to make sure that you find
some really good plugins for your
wordpress website
so now that you're all professionals
let's go ahead and talk about mobile
optimization which is a very important
part of this video so
you want to make sure your website looks
responsive and good from all devices
such as
iphones tablets or androids or pcs or
macs
so let me go ahead and show you all how
to optimize your website for all mobile
devices
let's go back to the video all right
party people welcome to the mobile
optimization section now we have a
website here and it needs some help guys
it looks terrible and we're gonna make
it look a lot better
in fact if we visit our website on
various devices
this website looks terrible it's gonna
go ahead and optimize it for all of the
devices
under this little purple icon on the
left side
bottom left you'll see this computer
you'll see a tablet
right i'll click on the tablet now this
is the view from a tablet point of view
so i'll scroll up here
and this is the view from a tablet and
also i'll click on the
phone and scroll back up and this is
what our website looks like on a
on the phone right so we need some help
here
now also on the phone view you can
actively see what your website looks
like
on specific devices isn't that cool
let's say you want to see what it looks
like on
an iphone 11 or a galaxy a6
and this is a new feature davey just
added i mean those guys are just
they're crazy over there i don't even
know how they think of all this stuff
first things first
let's click on the desktop view and
let's just change this really quick on
the desktop view so i'll click on the
gear icon
right and under this little section i'll
click on that
and let's just change this you know
let's just change the letter spacing
here i'll i'll reduce it to
normal zero again a little bit more
right something like that
and then i'll change the line height as
well let's just clean that up a little
bit
right now when you edit these like texts
or whatever editing
you'll see this picture of a tablet and
also a phone
so let's click on the tablet device now
so let's go back scroll up here
it's kind of annoying how it keeps doing
that to us on a
tablet because now we select it to 80
pixels when you're editing your website
you just want to say okay i want this to
be
maybe 85 pixels you know something like
that
and that looks good next let's click on
the phone
section and scroll back up
we have a we have some work to do here
first things let's just reduce the size
of this text and let's change the height
click on this pencil right and then for
the
text size let's reduce it you know let's
make it a little bit more
simpler right and let's change the
line height let's uh there we go reduce
it a little bit
here i'll just refresh it to what it was
before so i had it at 1.7 before right
and yeah i think something like that is
good right
now this title text is too small now
this text is
you know it's good size but we need to
change this one so i'll click on this
and i'll go back down and under the
phone icon i will increase the size of
this
something you know we that that can work
you know that can work or even that can
work but now you get
at that point i would say okay that's
fine so now let's keep scrolling through
the website to see
what's wrong so everything looks good
and we have this section and this again
this is too big
the font is just it's it's kind of
clustered everywhere and we want to make
make sure that we can change this as
well
let's go ahead and change that as well
i'll click on check really quick
under this section oops let's go back
and click on the phone icon
yeah sometimes the builder just gives
you some weird stuff you just kind of
work with so now you see this section
here and
this section is just too big go ahead
and reduce the size of this for mobile
so
click on the gear icon and under the
design tab
or i can just click on the blue pencil
instead of navigating throughout the
you know the editor scroll down and i'll
click on the phone
and under the phone we can reduce the
size of this to make it look a lot more
cleaner and nicer so that looks really
cool
and this section maybe we can change you
know the s
i mean we can change that as well you
know just the s is just a little cut off
there
let's change that as well so the design
and then we have the text size we can
just just reduce it a little bit you
know just make it look good like that
and then scrolling down i think
everything else looks pretty good
now let's talk about okay so i know how
to optimize my website for mobile
but maybe there's specific sections that
you do not need
for tablet and phone like for example if
i scroll down here
do i really need this image here you
know i don't really need it
per se you know you might come across
images that you don't need
you know i don't want this image so
let's get rid of this image i just don't
feel like it's necessary for people on
tablets it's too big
and it's just you know they don't know
what's going on here so let's get rid of
it i'll click on the gear icon
and under the advanced section under
visibility
i can disable this on the tablets and
also
the phone and then i will click on check
so what that means is i want to go ahead
and get rid of this section
because it's just not necessary for
people visiting my website on a tablet
or a mobile device and you can do that
for pretty much everything you can go
ahead and check out
or disable certain modules and you can
also disable
certain sections so let's say for
example this top destination section
you do not want it on your website for
mobile and
tablet users i will click on section
settings advanced
and then for visibility i will disable
this also
on the phone and the tablets that's how
you can kind of
disable certain sections of your website
for specific devices
now let me give you all a very good
strategy that i used when i was getting
started with web design and you can use
this strategy on your own as well
for example we have this section here
right
but maybe you don't want this landing
page for
mobile users and tablet users watch what
i do here i'm going to go ahead and
duplicate this section so now there are
two of these sections right
and uh for this one i'll put explore the
world
and i'll just leave that i'll just leave
that like that i just think this is good
however i want to disable this section
for tablet and mobile users so i'll
click on the gear icon
and under the advanced tab for
visibility
i will disable this section on the
tablet and the phone
right and click on check so that means
people visiting on this websites
will not see this on a tablet or a phone
however i want to have a section
specifically
only for mobile users so for example
when you visit a website on your phone
have you noticed sometimes it looks
different from the actual desktop
version maybe it might look a hundred
percent different right
that's because a lot of developers feel
that it's not necessary to show
the home page on a computer and this on
a tablet or a phone
like for example if you are selling a
product on a phone device
you might want to have a different
landing page for that
for me to achieve this whole results
what i'll do is click on the gear icon
and click on the advanced tab and go to
visibility
and i want to disable this on the
desktop
so that means visitors coming to my
website on a computer
will see this visitors coming to my
website on a
mobile device will see this instead
so now you'll see how this looks really
cool you know for a tablet user
and this is disabled that's a very key
strategy for mobile optimization and i
think that's a very common practice now
especially with large tech companies who
want to navigate their users to a
specific part of the website easier
and now let's go to the mobile friendly
test so now i will type in my website
divi themetutorial.com and test this url
i'll put this in the description you
know of this video as well
let's say you're editing your website
and you're just not sure if google
thinks it's responsive
well you can ask them saying hey is my
website mobile friendly
and congratulations so your website is
mobile friendly so google is saying your
website is mobile responsive
and you'll see how this says register
for digital nomad life
because remember visitors on a tablet or
a
phone will only see this page and not
the default page of this one
now we know our website is working so
congratulations
that was the mobile responsiveness
section you'll want to go through every
single page and make sure your website
is mobile responsive congrats on
learning how to make your website mobile
responsive
let's go ahead and move on to the next
section hey guys welcome to my design
tip number four
now as you're building your website you
might come into a common problem
that your website is running slow you're
going to say hey darryl
i built the website using divi but now
my website's really slow
what's wrong with divi what's wrong with
my web hosting and
generally around 90 of the time it's
neither it's the images on your website
if you go to my website and you go to
fix slow websites
i have an article and i just want you to
follow each one step by step
and i promise you if you follow these
step by step
your website will load faster number one
which is the biggest problem for most
amateurs
is your page size you want to keep your
page size
under three megabytes what that means is
don't go to your website and just add in
random images
that are very large because what's going
to happen is that
these images will usually be massive and
they will slow down your entire website
if you want to measure the size of your
page
you can go to tools.pingdom.com
i also have this on the ultimate list of
resources that you can check out it's on
my website under
the website resources and these are all
free they don't cost you anything
or some of them do you got to pay for
fiverr you got to pay for
uh themeforest pingdom is down here
pink number is what i use to test the
speed of the website
for example you put in your domain and
then you'll see your performance grade
my page size on this website is 4.5
megabytes
so as a result because my i'm on shared
hosting
my load time is 3.36 seconds a little
high i want to keep that under three
seconds
if i go back to my article here what
other things that you can do
is you can you know get reliable web
hosting which you all did
image optimization and you can use a
tiny jpeg as a great resource so maybe a
lot of you aren't good with photoshop
and you don't know how to reduce the
image size you can just drag and drop
your images
on this website and it will drastically
reduce the size
of the images speeding up your website
for example i had an image of 714
kilobytes
and we reduced it just to 76 kilobytes
that's another thing about your uh or
your post your
images should be no more than around 100
kilobytes
so if your images are more than 100
kilobytes you probably could do some
work and reduce the size of it
also add a caching plugin that makes it
so your website doesn't have to keep
loading everything all over again
for every single visitor it creates a
cached version of it
and also reduce the javascript and css
javascript and css is basically all
those really cool animations and all
those cool graphics and everything
that is javascript and the more
javascript that you have
the more your website will be slow so i
made some modifications to this specific
website
i want to retest this specific domain
so i'll click on save here and you'll
see that this is dvt tutorial
however i just decided to optimize
around
five or six images on this website and
now i want to retest it
so i'll retest it i am closest to
washington dc
and i will click on start test and i'll
show you all how to read this chart
so you can know what to look for when
you're running these speed tests on your
website
okay so my result is 3.1 megabytes i've
reduced the page size and as a result my
website is now loading at 1.8 seconds
which is fairly good you want to keep
your low time under 3 seconds
now i'm going to show you all how to
read this chart we have the image
the font the javascript and the css
you want to keep the images try to keep
it around two megabytes or under i'm a
little lazy i could have probably
reduced this a little bit more
you want to make sure your javascript is
low javascript are those fantasy
animations and every time you add an
animation to your
module or you add an animation to
something that is javascript so just
know that it will slow down your website
in the long term
and we have the css which we have fairly
little and css is actually good uh css
is a lot lighter than javascript
but the main thing here is you just want
to make sure that your
javascript is no more than one megabytes
your css
you'll probably never get to one
megabyte anyways and your images
try to keep it under two megabytes 2.5
is a little bit too much
but uh still the website's loading at a
decent speed so i don't think that's a
big
cause for concern i just find a lot of
beginners tend to say their website slow
because of
wordpress themes or something but it's
exactly what you put on the website that
is the end result of making it fast or
slow so check out this guide it's a
great guide
i spent a lot of time making it i was
very thorough i gave you examples of my
websites and other websites
on how to make your website with optimal
performance
so remember no one likes a slow website
always optimize all the images and
everything on your website to make sure
your website is loading fast for all
your visitors at all times
all right you guys made it to the last
step this is like the final boss of a
video game so
in this section i'm going to introduce
you all to the advanced features of divi
in the video there were some advanced
features i didn't cover i'll be covering
all of the advanced features that davey
has to offer i'll also touch
base on what third-party plug-ins are
and i'll introduce you all to the divi
marketplace all right party people
welcome to the advanced section of the
video so in this part of the tutorial
i'll be teaching you about how to use
the divi theme builder along with all of
the other advanced features
that come with divi such as creating
custom headers and footers
custom 404 pages and also custom post
pages with dynamic
content first things first let's create
a new header and a new footer
for our website now on my website
durwilson.com if you go to the view
layout section
you'll actually get templates that will
help you follow along in this part of
the video
so right here we have custom footer
layouts
now these were all created by elegant
themes and these just create some really
nice footers
on your website if you want to add those
and upload them to your websites
there's also the divi theme builder pack
which you can download and have
different styles of 404 pages
or different category pages and so on
and so forth
and also i do have a header ui kits
so this is the divi uh ui kit that you
can also download which just comes with
just various header styles
for your website and it's completely
free you can go ahead and
download any of those and once you
download those or once you
you know decide to use whatever one you
want let's go ahead and
activate the theme builder so let's go
over here to my dashboard
and on the left side you'll see divi and
go to theme builder
now remember essentially what the theme
builder is is creating a custom header
and a footer
for various parts of the website so i'll
go ahead and open up a second browser so
we can see our work
so right here we have global header
global body
and global footer let's create a global
header
now before i do that i want to upload
whatever i downloaded from my website so
i'll go over here under
the divi library i'll click on
import and export and import
and i want to choose the file now
remember earlier how i gave you all that
file the divi agency layouts i did have
a
header in there as well that you can
download and i also do have the divi
theme builder
settings that you can download as well
but i'll just download the divi header
32 and click on open and import divi
builder layout
okay so now you'll see we have the divi
header 32
and this is how you can import layouts
to your website
like such as a custom header and a
footer to apply on the theme builder
so let's go back to the theme builder
and now i'll click on
add a global header and we can add it
from library
or build a global header so i'll click
on build a global header
and i will choose this from scratch
right i think that's
standard so now you can basically build
your header just like you normally would
with the modules so for example we can
just
select you know one module here and in
the middle we can type in
menu and we can apply the menu there so
remember we have the menu the main menu
for our websites
and then you can design this any which
way you want you can center align this
then you can change the background color
and you can decorate this outer part you
can make this smaller and bigger
so essentially now you can build your
header and your footer any which way you
want you can give it a certain
background color you can add different
modules you can make it as customizable
as you want however i don't want to make
this part of the video
very long by creating a header from
scratch so i'll be using a template that
i
uploaded so what i'll do is click on the
purple buttons
and click on this little plus icon and
under your saved layouts
now you'll see we have that header that
i uploaded in my library this will be
32 right i'll click on that and there
you go so now we have this header
we have this logo we have this uh you
know we have our menu and we have this
button that we added as well
and then of course we can add in a
background color by clicking on the
section settings
under background and you know we can
apply a specific background to this as
well
so if you want this to be black we can
have it black
and then we can maybe even to turn this
text to white to make it stand out
i think i'll do that actually so what
i'll do is i'll i'll dim this black
right and then for this section under
this
gear icon i want to take this and i want
the
menu text to be white right our menu
text color to be whites
and then also the logo here so for the
logo we can change the logo to anything
that we want so maybe i'd probably want
to put in something
lighter right i'll put in this one
essentially now we have our menu we have
this button and we can link this button
to maybe our contact page and so on and
so forth
i'll click on close or save and exit
whoops
whoops make sure you click on save at
the bottom right i thought i did
so now we have this global header right
now with this global header it's being
applied on the entire
website click on save changes
go to our websites refresh the page
and there you go so now we have this
header being applied throughout our
entire website
i'll go to the about us the services
the contacts and there you go i never
added the services layout guys
i was really lazy you know maybe i
should have you know shame on me shame
on me
but now we have this custom header on
our website and what you can do
is you can just basically change this to
any style that you want and it'll
dynamically update on all of the pages
so that's how you can achieve a global
header now we can do the same thing
for the global footer as well so i'll go
ahead and upload a
divi footer that i downloaded from my
website so
import exports imports choose the file
and under my desktop i downloaded this
divi 100 footer pack
number six and import that one all right
so we have footer six and again you can
download all these for free
on my website so let's go back to the
divi theme builder
under the global footer i will build a
global footer
build from scratch close this and i just
want to add it to my library so
let's go ahead and go to my saved
layouts and footer number six
and this is now my new footer we have
these icons here that look really cool
we have this and then we have you know
we have our pages and so on and so forth
of course now i can edit this maybe
change this to black right because
we have our header black so i want this
to be black too
and then click on save
all right now let's go ahead and close
this save the changes
and let's take a look at our website so
i'll refresh this page
and scroll to the bottom and voila so we
have this footer it looks really clean
really professional and we can add
anything we want here we can link these
uh text to anywhere that we want such as
our other pages and so on and so forth
so that is pretty much a quick rundown
of the
divi theme builder pretty simple right
now let's get a little bit more dynamic
let's say okay daryl you know we have a
really picky client
but for the about us page they want a
different menu and this is very common
for squeeze
pages where you're trying to sell a
certain product
so i want to have a different menu for
the about us page i don't want to have
it for the global so
let's do that i'll go to add a new menu
or what is that what is that add a new
templates right add a new templates
now i want to have this on a specific
page so i want to only have this
on the about us page all right so just
on the about us page
and that's it so add a new menu about us
page
sorry create a template so now we have a
specific page here but i want to get rid
of this one
i want to have a custom header only on
the about us page
so let's do that let's create a custom
header on the about us page
so let's go to view save layouts and
let's use 35 this time you know 35
you're coming back we're
you're back in the game so now you'll
see we have 35 here
and we can go ahead and customize this
by clicking on the pencil icon
and now you'll see this is the default
header that i originally used for the
website
so i say all right that looks good we
can change this we can edit this and all
that stuff but
you know i'm lazy so i'm not going to do
that so i'll just click on save
and i will click on close next i will
click on
save changes and now let's see what our
website looks like
so let's go to our home page all right
home page looks good
right contact looks good however if i
click on the about us page
the header should look different and
there you go so now the header
looks different and it's using a
different header so essentially what you
can do with a theme builder is
you can keep adding new sections and
saying you know what
uh for my blog post i want a different
header
for this i want a different header and
footer and so on and so forth
so now let's say all right zero well
that's cool but uh you know
let's go to my website you know dv theme
tutorial and let's say someone enters in
a wrong domain name like
something like that now we have this
and this is the default with
divi this looks really ugly you know i
want a custom 404 page
let's create a custom 404 page back to
our website
so let's click on add a new template i
will scroll down to the 404 page
and click on create a template so now
you'll see we have the 404 page now you
can choose to
hide the menu and the footer
and only have a custom body i think i
want to do that
let's just click on add a custom body
and let's just do a
build custom body let's see if davie has
any custom 404 pages
i don't think they do you know i don't
think they do but uh choose a pre-made
layout
and under the search let's type in 404
no they don't so let's make one it's
really really simple
right i'm going to go ahead and find
something really quick
i will pick this one and i want to use
this layouts
when you're using when you're building
your website you can just grab sections
from certain templates and just
use specific part of those sections you
don't have to use
all of the page okay so we have divi for
business now you notice how the
footer and the header is gone because
remember i don't want that
and this is just gonna say something
like lost like are you
are you stupid you're are you stupid
lost and then we can redirect them to
our home page
so what i'll do is this is the i think
this is the full
slider module so what i'll do is i'll
double click on this
and i don't want two buttons i only want
one button
and this will be back to home
right so i just want them to go back to
home and for the link
it'll just be the website www dot
baby theme tutorial dot com right
and close that and i can get rid of this
text obviously i can design
this i can you know do whatever i want
but i think that's all they want
now there's other parts of the websites
that we just don't need so let's just do
this let's just
this is trash trash trash
trash trash trash i should make a song
no trash
trash and man that is a lot of sections
good good lord all right so finally all
that stuff's gone
and uh it looks like down here is there
any padding down here we can check it
out is there any
padding here nope that's about it i will
click on save
okay now let's close this i will save
the changes
now let's test this out so remember i am
hiding the header in the footer and i
only want
the lost page to be displayed so let's
click on home make sure everything's
cool right everything looks good
now let's type in a bogus url this will
be
like that enter
and there you go are you stupid are you
lost go back to home
and you notice how the header and the
footer are gone because i don't want
them to navigate to other parts i just
want to take them back to the home page
click on back to home and that's it
they're back to our home page so you can
create a custom 404 page
really easily with the divi theme
builder so next let's talk about posts
so i'll show you
how to create posts with the divi theme
builder as well but before i do
i need to actually create a page for my
blog posts
so let's do that i'll go to plus new and
go to page now you don't have to follow
me here this is only for people
who want to have a blog on your website
and blogs are really helpful actually so
this will be my blog page i'll publish
and publish
right so now that i've actually created
the blog
page i need to assign the blog page as
our blog page and do you guys remember
how to do that
you'll go to the theme customizer if you
if you remember congrats congrats
remember home page settings and post
page
so this will be blog right i'll publish
that
and we need to add it to the menu so we
need to have a blog on the menu
so under the menus
main menu for website i'll go ahead and
add the item so add the item
the blog right
and publish so that's just another
shortcut on how you can add
the blog or add pages to your menu using
the theme customizer
so i'll close that now so now we have
the blog page here pretty cool
and nothing is here so let's create a
blog post so first
plus new and post
and 10 things women
are good at or no no let's see what
here we go 10 things woman women think
they are good at think they are good at
it's a very controversial post you know
these posts they just get a lot of
you know like 10 things men need to know
or five things women
need to talk about with their husbands
you know those those topics just get so
many clicks it's ridiculous
what we can do is use the default editor
or use the divi builder
so i'll click on use the default editor
okay so i got some dummy text there
that's that's a lot better i went to my
secret website and got some dummy text
now also i'll click on this plus icon
and we can just add something in here so
for example we can add in an image so if
i click on an image
we can upload an image from our media
library you know we can
build it like that and so on and so
forth now with divi
they also have integration so you can
add a block and you'll see this divi
layout
so you can insert a divi layout and
insert it inside of your post
so you can use divi within the editor so
for example
load from library and you know i'll just
put in something here really
i don't even know we'll put in footer
six guys i don't want to upload a whole
template
so now you'll see how that has been
uploaded so you can just you know use
the builder
from inside of the gutenberg editor
that's where the integration from divi
comes in very handy because now you can
add in full layouts to your posts right
so i can build the new layouts
and you can put something in there you
know that you want to add so you can
build within the gutenberg editor
now i'm not going to go into that too
much because
i don't want to spend another hour
talking about the blog post which i
easily can
but uh what i'm going to do here is i'll
just take this
copy this and i will just add a new
block of a paragraph and just grab in
some text
and there you go now i want to add in a
featured image
so under featured image i will click on
one now this is the image
that uh people are going to see when
they see your article so i'll put a
picture
of these images are a little small here
saying again the bigger one
let's see there we go that's a good one
we'll put in a picture of this
this happy happy woman and click on
publish
and publish so now let's click on view
the post
and there you go so 10 things women
think they are good at and then you can
go ahead and talk about
your post and maybe i would probably
want to get a
better image that is not so pixelated
you want to get a probably an image
a little bit bigger than a thousand
pixels um you know so yeah that'd be it
but now let's say this is the default
editor right and
you know it just doesn't look good you
know we have all the stuff on the side
it's not creative it doesn't look good
we can use the divi builder to create
all of our posts for us
instead of using the default gutenberg
editor
quickly show you how to do that with the
theme builder let's go back to our theme
builder
and i'll click on add new templates now
i want this to be under
all posts and click on create a
templates
let's go ahead and select a custom body
and let's
add one from the library i'll type in
posts and i do think they have
some post page for us guys they do have
some which are pretty helpful
let's go ahead and scroll down so you
want to find the post pages
for example this one post page
post page two post page three post page
four uh i used that one last tutorial
last year
so i'll just select this one all right
and i will use this layout
okay so now we have all posts so now
this is going to be my default template
for all of my blog posts let's check it
out let's make a new post
so let's just give you an example of how
this works and we gotta pick on men this
time
five warning signs to
break up with your boyfriend ooh that is
a good one man i should i should have
like a
a blog talking about relationships i can
really get some
some uh some you know people to watch my
stuff so
i'll click here on publish and publish
what i'm going to do is set a featured
image so we'll add a featured image of a
guy all right that looks good
and i'll use the default editor and here
i'll just type in some you know content
right and that's it
i'll update it and now let's view the
post
so now you'll see how dynamic content is
working we have this title dynamically
updating
five warning signs to break up with your
boyfriend we have written by
we have the actual author the date and
then we have the featured image here
which is a little bit too big
and then we have some content here and
it just looks really nice
it looks really professional this will
be like the default way of
creating your post and you have other
categories
and you can stay up to date with other
stuff so all this stuff is created by
the page builder and it's a default
a post template for all of your blog
posts
now let's just say for example you want
to move something around if you want to
change
anything on your website you can go back
to the theme builder
so let's go to the dashboard divi
theme builder and i'll edit the custom
body
so this is the current post template
this is the post title
and again you can move this anywhere you
want it'll update dynamically
this is the featured image if i click on
the gear icon
you'll see that this is an image however
to make this dynamic it's very simple
for example i'll delete this image
and you'll see this on the right side
how this says dynamic or there's that
little icon
that's dynamic content so what this
means is
you can basically reflect certain images
to be here automatically
maybe you want the site logo to be here
every single time you make a post right
or the featured image or the profile
of the author so i'll select featured
image so that means the featured image
will be displayed here
and then over here you'll see that a
blurb setting however
they decided to add the author of this
and maybe you want to add in the logo of
your website to update dynamically so
i'll click on plus
i'll type an image right image
now for the image i want the logo of my
website to display here so i will
put the trash can click on the dynamic
update
uh i guess you want to say i don't know
what that is guys it's just a
barrel or something so and then i'll
just put site logo
and then i'll click on check and
there we go save that's how you can use
dynamic content
with your posts i hope i was very clear
on that so remember the divi theme
builder just gives you
tons of control and flexibility over
your website so again you can add new
templates
and say hey you know what for my
category pages for my blog i wanted to
look different
which you can do for your search results
you can change
the way your search results look and so
on and so forth
so in a nutshell that is the divi theme
builder
it's a very powerful tool and it just
gives you total flexibility and control
over your website
so now that we talked about the divi
theme builder let's now talk about the
advanced features that come with divi
all right let's talk about some advanced
features that come with tv that can help
speed up the workflow of your websites
now you don't have to use these features
however i just want to introduce you to
some of them just in case you want to
apply them to your website
so number one is find and replace now
when you're building your website you
might notice that you have specific
colors on your website
wouldn't it be nice if you can change
all the colors at one time
to a different color just to see how
your website will look
so let's do that so i'll click on this
specific icon i'll double click
i'll go to the design tab and i will go
to the image and icon
and i'll see the icon color now this
works for any module so you can do this
for any blue module
so click on the color now i have the
specific color but i want to change
all of the blue colors here on the page
to
maybe like green or something so i'll
right click
and i'll click on find and replace so
now what it's saying is
find this color so find the blue color
and replace
it within this page this column or row
to this color so you know what let's
change this to something like
uh this color right here and then once
that's done
i'll say replace all so i want to
replace all the blue colors with this
teal turquoise color and click on
replace
now let's scroll up and now you'll see
how all those colors that we applied on
our websites
are now being changed to this specific
colors it's a very fast way on how to
change the design and workflow of your
website so now you'll see
all of these colors that we had are
being changed to a different colors
number two is the paste styles
so for example i have these four columns
here now i've already modified this
column
and you know i don't want to have to do
that all over again i can right click
i can copy the module styles and then i
can paste it
within this other column all the
settings that are being saved on this
specific module we can apply it
to other ones another really cool
feature is not really advanced feature
but this is the
shape dividers so when you're building
your website you might want to add
shape dividers onto your website
amateurs love shape dividers i'll click
on this gear icon
and i'll go to the design tab i'll see
this divider section
and under the top section i can change
this divider to something else
a lot of different ways on how you can
design dividers so we can add it to the
top
and also the bottom can add a different
divider style maybe something like blue
or black or something like that and
there's a lot of different ways how you
can customize it
i don't use them too much but they are
very trending and i do recommend using
shape dividers
just don't go too crazy with them
because then again you have to carry it
out throughout your website and that can
be
a little tough so shape dividers are
really cool
i'm going to do something called bulk
editing so with bulk editing
you would simply click on a module and
hold shift
so i'll click on this module one two
three four and i'll click on the gear
icon
now what i can do is i can edit all
these modules at the same time
so for example if i want to add a
specific border to this
i will add in a black border and i will
increase the border width and now you'll
see how it's being applied to
all of the modules pretty cool you can
apply this to
all the modules you just need to hold
shift and click on all the modules and
whatever changes you make
for one module it will be applied for
all of the modules so
that is basically called the bulk
editing and it's a feature that came out
sometime this year
the next feature is called the divi
presets feature
wouldn't it be nice if you can create
modules and they were already preseted
and created for you without having you
to design everything
all over again or duplicating it we can
do that with the divi presets feature
so for example i'll go on this button
right here and click on the gear icon
now this works for all modules
you'll see this preset default we can
click on that
and click on create a new preset from
current styles
and this will be the main button
now we can assign this button style to
other modules
or i can assign this preset to default
meaning
every time you create a button it will
look like this
so that's pretty convenient right so
i'll click on check and say yes
and then we can style that button preset
right here but i'll just click on check
and check now let's add a new module
here so i'll click on the plus icon
and i'll select button
and there you go so now you'll see the
button is created for us automatically
with this specific style so that's a
really cool helpful feature
now of course you can create new styles
and you can store them in your presets
by going to module settings
and then go to presets and you can add
another one so for example
you can create a this is like this will
be like the black button style or
something like that
and i'll click on check and now you can
design the black button styles the
button
you'll have it as a black or will have a
white color
and then i'll have a black background
right something like that
and i'll click on yes we have the main
button right
and then we also there we go main button
and we also have the black button style
so you can create different presets for
different modules and you can go apply
them throughout the website um yeah the
green button i just made that because i
was just you know during my editing time
i just made it just to mess around with
things
but you get the idea here so you can
have different styles for specific
modules
and create presets for your modules so
the next feature which i think is really
cool is called the fixed positions
feature
now there's a few ways on how you can
apply this and i'll just go ahead and
just give you an example so i'll scroll
down on my website here
and now you'll notice that this button
on the top right keeps following us
it's sticky so what we can do is we can
have certain section sticky we can have
module sticky
we can create a sticky feature for
pretty much any specific module
column or row so let me show you all how
i did that so for example i'll click on
this module
and i'll go to the advanced section
under the advanced section we have
scroll effects
now there's different type of sticky
effects and there's different sticky
positions so
we have stick to the bottom we have
stick to the top and bottom
and we have just do not stick so for
example the do not stick
it's just going to remain not sticky
right if i click on the stick the top
when i scroll past it it will stick to
the top of the screen
something like that and you can set the
actual top offsets
right here so basically saying i want it
to be 135 pixels
from the top that's what that's
referring to so the next option we have
is
stick to bottom now this is a very
interesting effect and it works on some
websites but
let's say for example we pass the button
so you'll see the button however if we
scroll
up the button will now follow us on the
bottom right
so that is where this stick to bottom
comes into play and when i
scroll past of where i originally put
the module it is now there
that's just a way on how you can add
stick to the bottom or
we can have it stick to the top and the
bottom so if i scroll down you'll see
how it scrolls to the bottom
and it scrolls to the top but i have
that preset up there so i'll reduce that
to zero
and it'll remain there it's a pretty
cool effect we can have that button
there and also there
now this is a great feature to have on
your blog so let's say for example you
want people to sign up or you want
people to do something
it's a really cool effect and you can
apply it not just to a specific module
but you can also apply it to a specific
row now what i'll do is i'll apply this
with a sticky so under the advanced
scroll effects i can put this as stick
to the top
so when i scroll down past this you'll
see here how
now it eats up everything because it
wants me to kind of
you know wants me to click on this and
when i scroll up it's gone
and i can do that again i can do stick
to the top and to the bottom so the
scroll effects
i will put stick to the bottom now
you'll see how
when i start the website it loads at the
bottom
and if i scroll to the bottom it then
fits into place
and then everything's normal let's talk
about another really cool feature
which is the transformation of the
scroll effects scroll effects on the
advanced tab you might notice that you
have these other
options so you have you know the sticky
positions but you can also do really
cool things like vertical motion you can
have rotating
now i'll just click on this image and
use this particular one to give you an
example
so what i'll do is i'll first rotate
this object
now you'll see as i scroll we can rotate
the specific
object which is really cool and we can
turn that off and say okay i don't want
the rotating
however i want to add vertical motion
so now basically when i scroll up and
down the object will
go into place like that and we can
control the viewport bottom and the
viewport top
by you know just selecting something
like that
so now what happens when i scroll down
it'll
it'll come up more at a you know at a
better angle you can go through each of
these options
and find out what you want to do for
your websites the horizontal motion is
really cool and there's a lot of good
examples to use it like right now so
i'll just scroll down and the image will
come out of the website and be placed
there
now there's various ways on how you can
you know design this page so you can put
the
you know the end starting off and the
mid starting off so for example
i can put it off the screen and then as
i scroll
we can have it come on and off like that
so there's just so many different ways
on how you can customize
with this section with the
transformation effects there is actually
an article by elegant themes and
they do give some very unique styles of
how they apply the transformation
effects so you'll see how they add these
donuts
and the donuts roll off the screen as
you scroll up and down
also we have this one with the car
goes off and on the screen when people
rotate off the screen like that
so as they scroll up and down the car
kind of you know kind of goes in and out
so there's just a lot of ways on how you
can apply these scroll effects
personally i don't use them too much but
there definitely is a reason to use them
it's a really cool feature and the
scroll effects can really add a lot of
nice design in the core
to your website next is an amazing
feature that i think that you're really
going to love
and it's called the a b split testing
with divi
so for example we have this text right
here and we have this button now
how do i know if this text is being
effective or not you know are these
people
clicking the button because of this text
well
we can a b split test with different
versions of this specific text so i'll
right click on this module
and click on a b split testing or split
testing and then click on ok
i will then click on this button because
i want to test this specific button
so essentially i want to test this text
versus
this button but what i can do is i'll
click on this little arrow here
and now i'll create a different version
of this text
so click on the gear icon here and then
put something like
and i'll click on check and then we have
two different versions i'll go ahead and
save this right here
and on these little block icons i'll
click on that
and i'll scroll down and now you'll see
that we have
two different versions of the text so
what divi will do is that it will
distribute this to different visitors on
your website so
when you have visitors on your website
it will distribute this text and this
text
equally to all your visitors and they
will find out
which text is performing better based
off this text who is clicking this
button
and again we can make a third version so
we can make a third version
we can change this to something like um
a hundred percent money back
guarantee and click on check
and save you can split test every single
part of the website to see
if something's being effective or not
and this is great for home pages
this is great for call to actions what
we can do is we can just wait this out
and you can even visit your website on
other browsers and you will see that
the text will constantly change and
rotate to other visitors to determine
what text is being the most effective so
let's open this up really quick
i'll click on these three bars and now
you'll see text one
text two and text three so what this is
going to do is that it's going to
compare
the impressions that the clicks and the
click-through rate
to determine is text one more effective
is text two more effective
or is text three more effective you can
read the reads
the bounces and then they have a goal
engagement as well
so the abs but testing it's really cool
it's really helpful
and let's say for example text 2 is
performing the best
you can end the split test pick a winner
proceed and say you know what text 2 had
the highest
rate of conversions so i want to select
text 2
to be the permanent text and that's your
winner so now text 2
will be displayed on your current
wordpress website so that's it that's
all of the advanced features i hope this
part of the video was helpful
um i hope it wasn't too much for you
guys so remember feel free to pause
the video go get a drink go get a beer
and and come back
now that we talked about all of the
advanced features with tv let's talk
about some of the creative styles that
you can achieve
with the divi builder next let's talk
about some creative designs
in the beginning of this video i showed
you all some really cool animations
like this animated clock when users
scroll on your website
or this expanding blurb section or an
expanding call to action
or a creative divider scroll
you'll see when users scroll on your
website you'll see these
section dividers that actually move with
the actual user which looks really cool
there's various ways on how you can
design and style it or you have this
divi test
mask with background animation which
also looks really cool
now elegant themes kind of did a poor
job at keeping all these
together and having records for them so
what i did is i went back
two years on elegant themes blog and i
created a blog post and i linked all
these tutorials and layouts
on one specific blog post so you'll have
access to all these tutorials
in this blog post i'll put these
tutorials in the description below of
this video
so you can go ahead and download all of
these layouts also some of these are
tutorials
for example this mobile contact bar
this is a tutorial where they'll show
you how users can click on something
and then it'll call on their phone or if
they click on this
it'll pull up a google's maps and uh
yeah i just didn't want these to go to
waste
because they have some really good
tutorials and they have some really good
stuff
and i just wanted to kind of put them
all together in one source
so you don't have to go back and scour
the internet and you know spend hours of
your time and everything
i wasn't going to make these in this
video because i felt it would have been
too long
of a tutorial and i figured these guys
have already
showed you how to do it so i just wanted
to include that in this tutorial
you are welcome go have fun and download
all those free layouts on your website
okay welcome to my design tip number
five now let's say for example you're
like zero i know how to use divi i'm
really good at it but you know i just
lacked some design aspect i need some
inspiration i just need some help
in order to you know make my website
vibrant and really good and i want to
get some help and ideas
so if you go to my website under the
divi tab you'll see
the best divi resources tab that i have
now what i've done
is i've compiled a list of a lot of divi
plugins
divi templates and also divi child theme
so for example i'll click on
the divi theme plugins and these are all
plugins that are made specifically for
divi so we have the divi supreme plugin
which gives you 50 more elements to your
website like gradient text
and other stuff we have divi carousel
which is
a plug-in that allows you to have a
carousel onto your website with divi
and then we have something like a divi
mega menu as well which just gives you a
really cool mega menu to your website
so you can go ahead and check out this
list and you might find something that
you need
sometimes you're building stuff and you
might need just like one or small
plug-in
and that'll complete your website also
for those of you who need templates
uh i recommend dividend they have just
tons and tons of templates
that you can use they have more than
1600 templates
that you can purchase and download on
your websites
also divi monk the landing factory this
resource page it took me
it took me weeks to you know compile and
get together but
you can find templates dv plugins and
also
divi child themes now essentially what a
divi child theme is you might come
across that a lot and we'll talk more
about that at the end of the video
essentially what it is is a theme that's
created with divi
just with some php modification it's
just basically
geared a little bit more towards people
for a specific niche like
divi e-commerce or digital marketing and
it just adds new features
it adds new styles that normally don't
come with divi
so it just adds a little bit more to
your websites and
if you see something that you like you
can just purchase it and it'll import
all of the demo contents for you so
it'll basically it's basically a
pre-made website just with some small
modifications
just to kind of push the design limits
of divi if you want to go ahead and
check out some of the davey child themes
you can check that out
also memberships and packages let's say
you just see
a large list of something that you like
they have memberships where you can
purchase a membership and you get access
to all of their plugins
all of their themes everything that they
offer like the divi space membership and
mark hendrickson
and also the be superfly membership also
for those of you who
just want some help you know with uh you
know
divi and everything else all these
websites offer membership courses
which can really help you with your web
design flow
so go ahead and check out the divi
resources page i just spent a lot of
time making it
just to make sure that everyone out
there has a resource for something
again go ahead and check those out and
that was my design tip number five in
case you
suck at designing don't worry about it
you can always get work and inspiration
from other designers you guys are going
to love the divi marketplace it offers
uh plugins for dvd templates and child
themes
and all sorts of goodies for your
website with that said
let's go back to the video guys all
right so we saved the best for last
in this section of the video i'll be
showing you how to use layouts how to
use tv extensions and also
divi child themes that you might come
across on the internet
now if you go to the divi website and
you go to divi and go to the divi
marketplace
i'll leave a link in the description
below to the marketplace you're going to
come across
tons of really fun stuff you're going to
come across divi extensions divvy
channel themes daily layouts
and it's overwhelming there's so much
stuff here and you know i can't have a
video on every single one but you can
just get a general idea
of what some of these plug-ins do for
example the divi essential plug-in
this plug-in is the one i used earlier
in the demo and this gives you access to
55 different modules and it has 500
layouts for those specific
modules it's really cool and in this
video i'll give you an example of this
specific plugin
now whenever you purchase a product from
the marketplace
it's going to end up in your account so
you'll go click on my downloads
and if you scroll to the bottom of the
page it'll say your divi marketplace
products
and then you can download that specific
product that you purchased
i'm going to use the dv essentials
plugin first just to give you an example
of what you might do if you come across
a divi plug-in
plugins click on add new i'll click on
upload plugin i'll select browse and now
i'll select
the zip file so whenever you purchase
these plugins they're going to be in
zip files so i will open the zip file
and i will click on install now all
right cool so i'll activate the plugin
and now you'll see the dv essentials
plugin is activated
so everything is pretty much done now
i'll just go back to visit sites
and now i will enable the visual builder
pretty simple now i can just add
different modules to my website
click on the plus module and i'll scroll
down
and now you'll notice that we have these
blue modules so we have a
flip box we have the business hours a
next dvd review
a dual button a next button i mean
there's so many different buttons and
different things that we can have
on our website that are a lot different
than what divi normally offers now this
is a bad example because
i have to fully customize that but let
me just give you an example of something
that you saw earlier in the video which
was the gradient text and they also have
a lot of animations they have all these
really cool modules that you can add to
your website
text gradients and you can design this
just like you normally would any other
module with a gradient color we can pick
a specific gradient color
and then we can change the direction of
its and maybe i would want to change
something like the font right so for the
fonts i think we're sticking with
poppins right
poppins heavy and then there you go and
you can also control the speed of the
gradients you can control the direction
you would use these just as regular divi
modules so i'll just drag it up there
and uh yeah you know you can change the
design the reveal effect what's that huh
i think that's when you hover over it
it adds like a it adds like a something
over it and the hover effects
grow oh see that oh that's cool
that's interesting so you have all these
cool goodies you know that they offer so
you know you'd have to just go through a
lot of these modules and then just oh
there it goes yeah
that's the reveal text it's like a black
little thing that pops over it
so you'd have to just go through a lot
of these modules and just kind of
you know figure out what they do like
here we got this really cool flip box
and then we can design the color we can
add uh different icons we can change the
front and the back
a new element okay oh it's a floating
image how cool is that
so let's add in an image here let's put
in uh put in this guy
put in this guy oh that's really really
cool
and then we can uh probably customize
that more the animation settings
horizontal oh look at that that is
really that's really cool actually
so for this specific plug-in i do have a
discount code
if you go to the developers normal
websites and you go to their products
and go to divi essentials
uh i have a coupon code for 20 off that
specific plug-in
if you want to go that routes now every
developer on the marketplace they have
their own websites
but at the same time we want to probably
buy it off the marketplace because we
want to support elegant themes
and we also want to support a lot of
these other developers
but sometimes these guys give me
discount codes and they're only good on
their websites
so if you enter the code darrell wilson
you will save
20 off this particular plug-in so i do
have other discounts and offers on my
current website for other divi
third-party
companies so if you want to check that
out just go to the divi tab on my
website
but in general you can find the most
extensions and plugins
for divi on this website and you can see
what they do like for example
the divi carousel module it makes like a
carousel for your blog post and just
gives it
you know a lot more style also divi
supreme is another really good one
i do have a discount code for them as
well on my blog and that basically gives
you 40 more modules
however the divi essentials plug-in it
gives you 55 modules so it does give you
a little bit more
and i think they're on the same price 79
bucks and 79 bucks so
yeah so that's exactly how you would
upload dv extensions
to your website all right so i showed
you all how to upload plugins now let's
say for example
you want to upload a template that you
might come across from the divi
marketplace
or from just someone giving out a
freebie over here under the divi layouts
you'll see that there's just tons of
different layouts that you can
uh purchase so the one that i purchased
just now i just bought this one
you know i just it was just something
really cheap it's three bucks
and it's just a coming soon page i'll
show you how to upload these to your
websites
once you purchase a specific layouts
from the actual marketplace whether it's
this one or this one or
or whatever the product will end up in
your account
so you'll go to accounts my downloads
you'll scroll down and you'll see your
divi marketplace products
so you'll click on download and then you
will just save the file
now once you save the file you will
receive a zip folder
and again the same thing you will have
to unzip the folder
and then you'll get the json files so
it's the divi coming soon one that i
downloaded
to upload a layout just go to your
dashboard
you go to divi and go to divi library
you will then click on import and export
click on the import tab
click on choose a file and then you will
just
simply upload that json file so here it
is coming soon
and i will import the db builder layouts
all right cool so once that's done it
will be displayed in your layout section
of your divi library so let's add it to
our website now
i'll go over here to my blog visit site
and then i will enable the visual
builder then i will go ahead and delete
this
just you know start from scratch and
everything in the bottom of the screen
you'll see these dots
click on those dots and then click on
the plus tab
so then you'll click on the your stage
layouts and then you'll go ahead and
click on the layout that you wanted to
you know to upload to your website i
have the coming soon
layouts so i'll just go ahead and upload
this one here
so that's how you would upload layouts
onto your website that you might come
across
from various other websites or facebook
communities or the divi marketplace
okay so this is the last part of the
video and i'm going to show you all how
to
upload divi child themes to your website
now first off what is a divi child theme
so dv child theme is essentially just a
layout on steroids it basically is a
enhanced version of divi and it
basically takes all the features for
divi
and it adds a little bit more such as
different features
different animations different modules
or different javascript
and it does involve some custom code so
it is a little bit more useful
than a normal divi layout for example we
have this divi ecommerce child theme
now you'll notice right away if i scroll
down you'll see that a lot of this is
very hard to do with tv like this line
animation
also we have this add to cart now by
default
divi does not offer this right here so
this was done with custom code
and this is what the child theme does it
just adds some custom code to your
websites
and it just gives it a little bit more
featured and enhancements
that dvd normally doesn't offer so what
you can do is just go through this list
and just kind of browse around and shop
around and see what you like
now i'm just going to upload the divi
business pro because that's the one i
purchased
and again remember all of the layouts
that you purchased or child themes
will be in the my account section under
your marketplace products
and i will go to dashboard i know i
deleted my website oh it's all gone so
sad
so i'll go to the appearance and this
time we're going to themes so we're not
going to layouts
now in order for child themes to work
divi must be
installed so you must install and
activate divi
then after divi is activated and
installed
we will click on add new and we will
upload that theme that we purchased
click on browse now the one that i
downloaded was the divi business pro
and it will be in a zip folder so i will
click on install now
child theme recognizes divi and remember
divi must be installed for this to work
so next i will click on activate now
every child theme has a different way of
importing the content some have to
upload plugins
some will have an easy demo importer so
you'll just have to follow the
documentation for every single child
theme because they are different
now whenever you install a child theme
on the left side you might get a new
setting so
here i have the db business pro and i
want to
import the demo data so next it's asking
me if i want to import the demo data
with a plug-in i guess this is their
testify plug-in but i'm just going to
install it without the testify plug-in
and i will click on continue next it's
going to ask me if i want to
import all of this information so import
the images
the pages the blog post essentially it's
going to import the entire website for
me
automatically we'll click on import demo
data
all right so the import was complete
let's just take a quick look at the
website
all right so here is the website now
there's different slides you'll notice
here are the slides on the left side
see that's kind of where the child theme
comes into play just adds a little bit
more style and decor
uh to your website so i'll scroll down
here and just take a quick look
we have the images this really cool
project section
we have this image and some text and
some more text
and our services page with some really
cool slides
so that's a you know cool little feature
so that is pretty much the end of the
tutorial guys so congratulations on
making it this far
if there's anything that i missed out
about child themes or plugins
feel free to let me know in the comments
below all right you guys did it
congratulations tie yourself on the back
for making it this far
now you have an amazing wordpress
website you have all the resources that
you need
now if you guys have any questions for
me feel free to put them in the comments
below
i do my best to get to every single
comments of course i can get to
every single one but if there's a
question i can answer
i'll go ahead and answer it let me know
how this tutorial was did i do
good was i too fast was i too boring
go ahead and let me know in the comments
below my favorite beer
is modelo so go ahead and put that in
the comments below and just let me know
that you got this far but until then
guys congrats on your new website and i
will see all of your party people in the
next video guys take it easy