Need up to 30 seconds to load.
[Music]
hi and welcome to this dcp work tutorial
in today's tutorial i'm going to show
you how to install divi theme onto
wordpress so let's open up the web
browser and you can see i've got a basic
installation of wordpress here it's on a
test domain at the moment and if i go
into the admin control panel and go to
appearances here you'll see that i've
got the default theme wordpress normally
installs this theme as default
but if i go over to this website it's
called elegant themes and here we can
purchase and download and install the dv
film theme builder so what is that all
about it's the most popular wordpress
theme in the world and it's the ultimate
visual page builder so rather than
writing code you can build your website
using visual based tools right so it's a
different way or a different approach to
building websites
so with this particular website i have
an affiliate account with them so i'll
put my affiliate link in the youtube
description so if you decide to purchase
this software it'll be great if you can
use my affiliate link but let's go ahead
and look at all products quickly if i
click here and go to divi all in one
theme
um you can watch the video here and it
explains a little bit about it but it's
just a a nice
simplified way of building websites for
multiple devices so it's fully uh
responsive design i want to say it's the
easiest thing to learn and understand
but at the same time it's much more
simplistic than learning code right
learning code base although you do need
to have a bit of code knowledge i'm
going to be making many tutorials
explaining how to use divi builder to
build different types of websites let's
quickly go over to pricing so you
understand what the costs are involved
so there's one license complete access
unlimited websites unlimited users so
you know there's over 700 000 people
using this particular software so it's
quite popular in terms of a
theme builder there are other ones out
there but this is the one that i'm using
at present you've got two options you
either got a yearly access if you're
just going to build it if you want to
use this just for one website maybe or
if you want to test it out for a year
and just get um familiarized with the
software because it's not just divi
you've got extra bloom and monarch so
these are different tools that you can
see in here you can read a little bit
more about them but some are good for
magazines um some are good for like
email campaigns you've got a plug-in for
email campaigns and social media like
bookmarking and social media sharing so
when you buy this software you don't get
one piece of software you actually get
one two three four five different
applications for that price so there's
yearly price at 89 and then there's a a
lifetime access which is what i have
which is 249 pounds but you get
unlimited updates right and you can use
it on unlimited websites with here you
can only use it on um
you can use it on unlimited um websites
but you have to pay a yearly fee of 89
or you pay 249
and you can use it on unlimited websites
and you get unlimited updates so any
security issues any bugs they'll fix it
and you can update your theme so let's
go ahead and click on account and when i
can log into my account now uh it's
already purchased this software so let's
go ahead and
log into that account
so here's my login and i'll put my
password in here
and when we log in
you'll see the members area here and
you'll get the option to download divi
theme or divi builder i will be doing
some more in-depth tutorials explaining
the difference between these but dv
builder really you can use this on other
themes right so you can install
divi builder to work with other themes
that's typically used for but the divi
theme itself is the the visual builder
and the theme engine itself so it's all
in one package right so i'm going to
click download the divi theme here let's
download it and it's going to download
this little file
so let's just drag this to one side and
we'll open up this folder
and it's not a small file in terms of a
plugin right it's around nine megabytes
so you need to make sure that your
hosting account is set up in the right
way to accept uh a nine or ten megabyte
upload file right so let's go ahead and
try and install this we'll go to
our wordpress admin and we'll go to
uh appearances and in appearances we're
going to click add new so we'll click
add new
and you'll get all of these different
themes that you can select from the
default wordpress but we want to upload
a theme so we're going to click upload
theme here
and we're going to choose a file so
we're going to click choose file and
then we're going to go to this folder
and we're going to select this divi zip
file click open and then we're going to
click install now
it's going to take a little bit of time
because it's a nine megabyte file to
upload to unzip and then to install so
we'll be a bit patient and we'll take it
for a quick test run just to see that
everything is working correctly i'll be
making lots more wordpress tutorials
using different techniques some for
e-commerce some for you sort of standard
websites right a wide variety of
different tutorials using different
types of plugins to achieve different
effects and outcomes
so we'll wait for this to install so
it's unpacking it now and it says the
theme installed successfully so if we go
back to appearances here
we see there's an option to select divi
theme now so you can activate it you
click activate here
and now that theme is active the one
thing that you must do is go to the
divi options here and go into divi theme
options here
and then go to updates here and you need
to put in your username here so i'll
typically put my username the one that i
log in with and you need to generate an
api key you need to put that in here and
that allows you to get updates directly
in wordpress so whenever divi needs to
be updated you can do that directly in
wordpress if you go to elegant themes
here the website when you log into your
account you can go down to username and
api key click here and just follow the
basic instructions to generate an api
key copy that key and then paste it into
here with your username and then click
save changes and now the theme uh will
get updated whenever there's updates to
be done uh you'll be able to update them
using your wordpress rather than having
to go to dv themes and downloading it
again yeah if we go back to the main
website and refresh
we'll see the there's a bit of a change
here now right you've got this footer
section down here you've got hello world
here you've got the divi um
logo here if we click sample page then
you'll see some sample test content in
here if we click enable visual builder
what that will do is convert that page
into a divi page right so you can follow
the tutorials here this little pop-up
will show i'm going to say
use existing content here for now
and now you can see the module in here
that allows us to start adding content
so if i delete this one for example and
this is called a section so the blue
content is called a section if i delete
that
uh you can't yeah you actually have to
have one section in there right let's
just show you a couple of examples of
things we can do so you've got a section
the green button represents a row so it
says add a row we can click add row then
we can add one column row two column
rows three five whatever we want let's
just say for example we add a two column
row so here we've got two column row and
then these all the different tools that
will appear so you may want to add some
text you can do custom code you can
write comments
you can do like opt-in emails you can do
image galleries there's so many
different options in here but maybe
we'll do like a number count for example
so we're going to cut up to a percentage
and it's saying 50 so let's set it to 95
percent let's set it to 99 that's a
better number for me and then your title
goes here
let's just put get
dv
installed
and let's set it to
100 because we've done that job so let's
click okay
and then we see get dv installed and
it's 100 here then on this side you can
add some other type of content you could
add a picture you could have some text
so let's try and add a picture let's
just type in image and then when we type
in image in the search we get the image
option and then we click here one thing
you can do actually is take this um this
tool and drag it to the side and it
becomes like a tool that sits on the
sidebar and i find that a bit easier
rather than having to drag it across
let's click here let's see if there's
another piece so we haven't got any
pictures so let's go to unsplash
and normally you'll compress your images
right before you upload them but we'll
just upload an example so let's just
take um
let's just type in
something like computer here
let's type that in correctly
computer work something like this and
maybe we'll take this picture here let's
download it
so normally i would go and edit this
image in photoshop or in software
compress the image resize it right
before i upload it to
um
before i upload it to wordpress
otherwise the file will be too large so
let's just see what file size is at the
moment it's like let's see it's like two
megabytes right so let's go and fix that
quickly that's a bit silly to upload
something that's two megabytes so we can
do that in um let's say
let's just do that in photoshop let's
just open up photoshop
mazda do this right if we're going to do
it right we might as well do it the
right way i don't like to do things
incorrectly
so i'll be doing a lot more tutorials
explaining image compression and the
reasons behind it and so forth
but here we've got photoshop open
so let's just drag that over here
let's just drag our image into photoshop
and here we can see the image and uh
it's pretty big right it's like 5000
pixels wide by whatever image it is so
we're going to go to image and we're
going to go to image size we can see
that it's 5000 pixels wide we probably
need this to be no more than 500 pixels
here and we're going to click the lock
so we can lock it on the aspect ratio so
it'll be 500 by 333 we'll click ok now
it's going to be a much smaller image
but it will still be good quality we can
zoom in and see it but that's going to
be large enough more than large enough
for what we need and let's just export
this so let's go to
export the image
and we'll set we'll leave it 100
compression because i'm going to show
you one more thing afterwards so let's
just call this
uh example
image01
we'll save this let's minimize this so
really what we've done is we've taken
that image from unsplash here the
original one and we've compressed it
from 2.3 meg to 178 kilobytes and now
we're going to recompress it one more
time so i'm going to go to this website
called compress jpeg drag and drop that
picture into here
and i'm going to download it
and i'm going to show you a lot of this
stuff in future tutorials but really
what we've done is we've taken an image
which is 2.3 meg compressed it in
photoshop to 178 kilobytes and then
recompressed it all the way down to 44
kilobytes right if it's like open up
this image put it on this side take this
image put it on the other side although
it's a smaller image the quality is
pretty much there for the size that we
want right the image quality hasn't
depreciated because we want the image to
be roughly this size anyway and we
should really measure it out a bit more
accurately but for this test i think
it's fine so we just rename this one to
uh zero two
that's what i normally do and you can
delete these other ones if you don't
want them we'll keep it for now we'll go
back to wordpress here we are and it's
asking us to drag and drop a file in
here so we drag and drop it you should
give it an alt name so we'll just copy
this
let's just call it
example image for now
let's uh spell that correctly with help
example image
we'll give it a title here and click
upload image now we've got that image in
divi build all right so it's set to um
landscape at the moment but now you can
see the text or the uh
timer the counter on this side and the
image on this side and we can go ahead
and add another module so we can click
this little grey button and then maybe
we want to add some text
and we'll add some text in here and i
might write something like
just
showed
you how to install
tv
themes
builder
also add a
counter and
image which has been
compressed all right so we've got a bit
of text there i might just copy this
image has
uh which image
has been compressed i might copy this
text paste it one more time
just as a just to fill out the space
here and then we'll click
the green button
and then we can exit the visual builder
really we should click this purple
button and save it
and we'll add a logo and start to build
our navigation here but let's just exit
the visual builder and now we can see
the time the you know the percentage is
ticking up we've got our text here and
we've got our image here and if we were
to resize this on the screen so if we
just resize the browser you can see that
it's responsive for mobile and tablets
doing all that good stuff right so it's
responsive let's just show you one other
more powerful thing in dv builder let's
just show you what it can potentially do
we're going to be making some nice
websites using the software i'm going to
click on the little cog icon on the
image and we'll just drag it to
let's just drag it to this side for now
here i'm going to go to design i'm going
to go to animation and i'm going to
click flip so now we can flip this image
or we can fold it or we can have it
slide in we can have it sliding from the
center we can have it sliding from the
left so maybe we'll have this image
sliding from the left
and i'm going to put a delay on it so
i'm going to say i don't want you to
slide in until 500 milliseconds half a
second right and we'll click ok and then
we've got this little counter going so
we can click on the cog there go to
design go to animation and maybe this
one we will bounce it in so it bounces
like this
and then the text itself
we're going to set that to
animation we're going to slide it in
from the left from the left side so we
want to slide in from
the right hand side going this way or
slide to the right should i say and
we're going to set that to one second
delay 1000 milliseconds so there's going
to be some delays between this content
this will show first then this and then
this will slide in so if we exit the
visual builder and save it we can watch
that sequence happen now
right so now we can build in some basic
animation and we can do much more
complex stuff than this
this is just giving you some basic
demonstration i didn't i didn't want to
install the plugin and then show you
nothing i thought i managed to show you
a few little tips and tricks and we're
going to you know in future tutorials
i'm going to be showing you how to
create custom headers and custom footers
and do lots of interesting things and
how to build web pages using the divi
film builder so if you decide to
purchase this software it will be
awesome if you can use my affiliate link
that way i'll get a little commission
from it and that way it helps me to fund
these tutorials to spend time making
these tutorials to help you to learn how
to use the tools right so it's a win-win
situation i get a bit of cash and i use
that money to spend time to make these
tutorials for you so let's minimize this
that's how you go about installing the
divi theme builder it was a little bit
longer tutorial than i expected it to be
should have been really short to be fair
but i thought i'd show you a few uh tips
and tricks on how to use some basic
content within the divi builder i hope
you find this tutorial useful and i look
forward to seeing you in the next dcp
web tutorial
[Music]
you
![Top 10 VS Code Extensions for WordPress Developers [2023]](https://i.ytimg.com/vi/krsYc7pwuvw/mqdefault.jpg)
