Up next in 10
Create an Awesome Website in WordPress Using Divi Theme
Dec 24, 2024
Create an Awesome Website in WordPress Using Divi Theme #WordPress#DiviTheme#WebsiteDesign#BuildAWebsite #WebDevelopment#DiviTutorial#WordPressTips
View Video Transcript
0:00
hi friends welcome to T funing Channel today I'm bring the video of Wordpress
0:05
so WordPress is a nowadays a very famous content management system okay so if you
0:12
are a familiar in the programming you must have a good knowledge of the web
0:17
designing so there are good opportunities okay so if you are if you
0:23
have only the four only one page creation they are paying well so you must study this all the things very
0:30
simple so how to make this simple responsive website step by step we teach
0:35
so this is a completely WordPress website this is here you'll be able to see the mobile responsive you can see
0:41
all the mobile responsive it will be here it it will take it to the mobile responsive it it will be work as a
0:48
tablet and every response it is possible so how to make this website step by step
0:57
will first I'm going to go to first you have to go to the Google and you have to
1:04
purchase
1:10
DVT this is the this is the DV I already purchased so here you can see here DVT
1:16
okay so here you can see today join it today here you have a here this is the
1:23
sign up today you can yearly you can use it $89 per year okay this is a very here
1:29
you will be a able to see what are the things are they available they they which provide for 89 per year okay the
1:37
Builder everything included okay I I purchased this one so what you're going
1:42
to do is now after that you have purchased it you have to you have to get the Z file you have to get an install it
1:48
okay you just browse the template and you have to install okay so now what you're going to I'm going to move to my
1:56
Dash dashboard here what I'm going to do is here I'm going to first this side I'm
2:02
going to uh go to the
2:07
appearance you go to plugin install plugin I'm going to
2:13
completely this one I'm reset it and I'm going to uh do this website from the
2:18
beginning so you have write
2:23
reset reset reset there's a plugin called reset it will be complete the
2:29
website I'm going to reset it you type
2:36
reset ENT side I'm going to reset it after you go to the dashboard here go
2:44
to the appearance your theme you have to add then you have to add new and you
2:50
have to upload the theme after you download the team it will become come as a s file you have to upload after upload
2:58
it you can come the team like this okay now I have to activate it I already done things so now this is
3:05
the theme of them okay them now here what you going to do this here I have to First Step I'm going to go
3:12
to setting General uh okay here General okay here
3:22
writing and reading reading you have to set as a this static page you have to
3:27
set as a hom page so here we have the permanent links this is the important stuff I want to display as not like this
3:34
I want to display as link like this post name this how the URL should be
3:40
look like this this is the way this is efficient way click save changes and apply after that what I'm going to do
3:46
this I'm going to go to do the thing is I'm going to go to the pages all
3:52
pages the sample pages I want to trash I don't need at the moment I'm
3:59
going to crash it okay so after that what I'm going to do is I want to get the another page which is a new page add
4:07
new I'm going to add the pages this homage
4:14
home publish I'm going to
4:20
back black refresh it home page is there I
4:26
have t some couple of pages about
4:34
T okay we have to add one more pages
4:43
Services publish let's add only one another one
4:48
page I won't add it we add home three pages I have ADD so I W add one one page
4:54
this a contact page
5:01
add all the pages sucess now what you going we have add all the pages successfully now I'm going to go
5:09
to now I'm going to first I'm going to go to uh pay all the pages added
5:15
successfully I'm going to go to the setting reading click
5:21
reading uh okay reading SE static home here have
5:27
homepage first this is the page we have when the page is when the site is lo uh when you type the URL this page should
5:34
be visit the first homepage this first page will be your home page so let's
5:40
right click and visit S here this is how the your page look like this okay this how look like this now let's do the
5:47
things remaining stuff okay so first what you going to do I'm going to go to do the things first I'm going to go
5:54
to click on the de theme option here here where have upload the
6:00
your view logo I already upload the logo so here this is the here you can click upload you have to browse the logo where
6:07
I where side on your computer and you will be able to upload the logo okay I already upload the logos okay I already
6:14
uploaded if you upload the logo you will be able to see the logo over here okay
6:19
so after that after upload it what you're going to do is here let's go to the appearance customiz
6:31
so here this is this how to make this links all the things will be discussed okay don't worry so here we have to here
6:38
you can see the add Adder navigation this one add navigation here this header
6:44
format at a for you can see centralized inline logo it is coming okay so there
6:49
are many option default means default coming here if it is Center it is Center
6:56
if it is a central in line it's in line logo slide okay there are plenty of
7:02
options available okay so let's select as default okay I select as default is a
7:08
logo this is my menus okay so now what you're going to do is I'm going to add the menus so out
7:15
at the menus so let's this one I'm going to close
7:22
it appearance
7:28
menus top menu this
7:34
primary create a menu view Pages here write home about
7:41
contact service click add button it's coming here it's
7:46
let's put it here click save
7:54
button okay it saved sucessfully you can see here now let's see the BOS
8:03
it's coming like this okay it's coming like this way now I'm going to save then only it will be coming okay so I haven't
8:09
I forgot to save it so what you going go over here uh customize so customize
8:19
option General sorry I devation at a format
8:28
here right select default click publish if you not publish the same thing the
8:34
changes not changed so it's here what are the links you have created about us
8:41
service all things these are pages I have created okay these are the PES now
8:47
let's Design This for okay now let's design it perfect now what you're going
8:53
to going to go to my dashbo
9:00
my dashboard close it now let's go
9:07
to the page all pages
9:14
edit Ed it with de Builder okay if
9:21
you the de Builder is coming along with this this thing okay here you have to
9:27
click Start building here you can see here what is a row here
9:32
the same thing look like element so I have in my experience this is very easy
9:39
way to use it okay so here you can see I need a image for background image the
9:45
image after the menu I need image so you click on this this image one row so after that click on this you have to
9:51
type image click on this image it ask the image so you have to click on this it
9:57
ask to take the image select select file so I'm going to go to get the image so here Vib click on
10:07
this import the image successfully upload the image it's getting the image okay here click okay perfect here you
10:15
get the image successfully after youve done it here click you can click on this three dot you have to click save then
10:22
only save the all the application will be sa okay perfect now what you're and I want
10:30
to click on this the this is the main part okay so main okay so here this is
10:36
the I want to do here this this here the this image if you have to make the adjustment you have click this options
10:43
okay here this click the option the spacing and everything so you have to go if if if you feel if there's a space
10:50
between this one we have to reduce a space so you have to adjustment
10:57
here Dot 50 here you can reduce the space okay
11:04
margin you have to minus it so here you can take to reduce the space you have to
11:09
go to spacing spacing margin you have minus 50 it will be
11:15
redu so we have to save it very simple very simple way you have
11:22
to do it okay after that here I want to do the another things you have to get this one click on this this P SP
11:30
uh plus symbol I need to do this design building construction this one so how to
11:35
do the this function simple I I need two
11:41
columns First Column I need a heading so you have to click on this you have to
11:47
get the Ed click on the
11:54
eding okay you do the eding so you have to do the eding so I want to type the
12:00
text which is a
12:05
building
12:13
construction it's a background color no background color I need
12:18
color text color design text
12:37
not a background color here have a for if you to change the colors of the label
12:43
where's option text sing text you have you want to
12:48
change the uh B if you want to B and if you want to change the font letter SP
12:55
letter sizing and spacing if you ARR spacing everything done here line height
13:00
everything you will be able to arrange it so here I need to arrange it here as
13:06
a uh font font default font here there are PL there is various fonts available
13:13
so alexpress there's another font so you have to change it the font but you need
13:18
so I want to change this one this is very beautiful font so if you want to make the color if you don't need a color
13:24
you will be able to arrange the color but you need so I just arrange like this don't ARR so here here you can see this
13:30
is the design the design I have to set the left side you have to Senter Center Center so I I need this one okay this is
13:36
okay so let's everything done you can click changes after that what I'm going to
13:43
click on this simpol I want to click Text click on this text so here text
13:51
what you're going to I'm going to go to the dby text
13:59
click on this copy
14:09
this past on it over
14:16
here so I need to this all things so need just this one okay so that's the
14:23
things we have do it okay so so simply so in between
14:29
so in between building and construction if you feel there should be the uh space
14:36
too much space in between these two text heading and text if you
14:42
feel uh there should be the much spaces you can reduce it click on this okay you
14:48
click on this this one okay sorry control set to undo it okay so if you
14:54
click on this here you move the cursor on the here if you want move the cursor here you can select the option over here
15:00
if you move the cursor here you can the based on the option will be there now I'm going to click on this option so
15:06
here you can go to the padding stuff click the design uh here you can
15:11
spacing here margin I want to get the same thing as a 20
15:17
pixel let's see it's okay for things I
15:24
have now I need one things here I need a text box uh image so click on this I
15:31
want to get a image image I want to get some image one image so I have to click
15:37
on this so browse so get some image so the same I
15:42
have only one image this image I get it okay only the the same image I have get so okay if if you have a images lot of
15:49
images in your machine you can get one of them okay so I have the same image I have using for the uh example purpose
15:56
Okay Okay click on app play so here this images fit on the here
16:02
screen okay so I want to I feel it to reduce the screen uh size of the photo so how to reduce it click on this
16:09
option this is click on the option click design sizing this is the width here the width
16:18
you have to size you have to reduce size you can see the redu size after that you
16:23
have to align it the left side right side click on this option it right side
16:29
simple very simple you feel again you have to small you have to go to small like
16:35
this okay mean height so the Min height the Min height okay this now this small
16:41
size okay so now I need another one click on this to apply it I need to get the copy of this to duplicate it get the
16:50
things below now I need to get this one to
16:55
here okay so I I I I already show the this like this way okay this these are
17:01
the things you have ask me when you go to the WordPress developer interview Okay I uh when I'm facing the interview
17:10
they ask this all the things that's why I bring to the video so simple so let's
17:15
click on this option here have in a simple way I have
17:21
do it here in uh uh you can go to the transer
17:29
option transform option you have transform option click on this click on this this Builder here this Builder you
17:35
have to get this one control and so here click on this
17:41
Builder sorry go to transform option this a builder so this Builder
17:49
you have to Arrangement click on this here you have Arrangement here here you can see
17:56
simply take the position what the position you need need you can take off the position simple you can you can take
18:02
off the position simple you can put it like this click on this the transform
18:10
option okay very simple option so if you want to feel if you want to redu size of it click on
18:20
this okay so sizing the size if you already it here something like that okay
18:30
like this perfectly it will be done you can see the perfectly done the work you
18:35
have done the work perfectly okay now I need a I need a another one for the that
18:42
for button okay this get start
18:50
start I click here default you get this click here button so click here okay so
18:56
there you can uh type it whatever okay see here's a button uh the spacing
19:03
andever this animation you can take the image animation you can if adding any animation
19:09
transform uh filter option uh Shadow spacing button okay so
19:17
a button okay simple way button uh okay the things you have to so
19:24
color you have dark dark color light color you have light color no need dark
19:30
color button okay text I have to put it here this one okay so I want to uh this
19:37
one I want to the button if you want to make the color so it's a background
19:44
color background color the button text color
19:51
dark say any option so you to click on it here click on it here
20:02
Advance
20:09
dot filter
20:20
option we have button size here button size you have write button here this one button you have click yes now here have
20:27
to coloring you can change it here you can change whatever color okay the
20:32
background color if you need a back button background I need to adjust a color so I need a background color this
20:39
one the foreground color I want to adjust it this one here it's simple
20:45
okay so it will be simple you have to
20:51
click see here perfect Your Design is perfect now you can see that you can get
20:56
the a some design of the website okay so now only if you want to feel there's a too much spacing now you can see click
21:02
on this click on here what you going to do go to the designing
21:17
spacing I feel it's not too much 10
21:24
enough perfect so this one also I want to
21:29
reduce the size color size click on this
21:44
sizing okay it's done perfect okay done perfect
21:51
work okay so if you have a f the to much spaces
21:56
so uh so here we have to it's okay for us okay no problem okay
22:06
now what you're going to do I want to do the another one is this three things we have to split
22:14
three columns so how to split out three columns you have to click on this here you have slip out three
22:20
columns first one should be the icon
22:42
click on this one some I click on
22:47
this icon so here the design icon the icon icon size you have to the size of
22:55
the icon
23:02
C this now click on this
23:10
text click on this text see how to get the text what your text you are typing
23:15
you have to get the from there somewhere else okay you want text you can put it here I just get that dumy text because
23:22
I'm am doing this website for example purpose so those who wants to study word
23:28
first professional way so you have to get them here get okay now if you feel
23:33
this one icon should be go your left side or right side you can click on this here you can set the design
23:41
alignment you set it as okay if you feel see so here also if
23:47
you have too much spaces you feel now you have idea how to do the things go to
23:54
whatever things spacing P margin I'm going to - 10
24:03
pixel okay now everything you have done perfect okay so now what you're going to
24:09
do this I want to uh I want to this one everything
24:15
perfect I am going to duplicate this one we have to uh this all things just I want to put
24:22
it here this all the things okay so I just do duplicate
24:29
model duplicate model we have to drag drag and
24:37
drop so this one is duplicated drag and drop here click on
24:45
this here and drag
24:55
it Ando it something went wrong you undo it uh you have Undo It undo it so this
25:04
one you put it here Dr it the problem is here first you have to drag this
25:16
one okay the problem is that because I have made simp qu
25:21
mistakes Okay small mistake first time to remove this one first time to trag
25:27
this duplicated first your D
25:35
to okay after that second you have to drag and drop that's that is my fault
25:41
that's why I again do it it's coming now it's coming here now
25:46
it's working okay the same thing you do it over here this one
25:52
duplicate okay so you drag it put it over here you have to duplicate
26:03
it track and
26:26
drop okay uh what's the problem
26:35
here click on
26:41
this for okay something or something you have okay now you can change the icon
26:47
and on now you can change the icon and on okay now you can change the icon and
26:53
all over here yeah click on this if you want to feel to change icon click on this I want fil to change this
27:03
icon change it I want to feel to change any other
27:09
icon this better I I would be better to change this icon I would be better to change this okay everything is I want to
27:16
change the color of this one click on this you
27:21
can change the colors
27:29
the
27:39
colors color
27:53
color perfect now save
27:59
everything will be Sav now you can see everything will be save now if you feel I want to get this step entire
28:07
entire uh this entire design so click on
28:13
this here I want to get the margin spacing put it
28:20
here 30 pixel
28:26
go let go for
28:31
50 okay let see enough okay enough okay so enough so you
28:40
have to get this one if you want to go to we you have a simple way I have already told that go
28:47
to design there one transform here this one don't put it here this one you have
28:53
to click on this option you can go simp
29:10
this okay simple save
29:16
it have save now let's done the things well after that let's moving to the
29:22
website you can just copy this link paste on it over here you can see here it's working perfectly these are the
29:29
sites frequently asking you will be able to now you have idea so how to designing
29:35
so now I want to do the pH pH section how to make the photo section very
29:40
simple uh you have to go to can't do here okay you have to go to the
29:46
dashboard here dashboard there is a team op team
29:52
Builder tee Builder add a section also we can do it so section here this pH
29:57
section click on this build Global
30:12
footer after that click on this option I want to click this option so I
30:18
want to get this option uh here I want to separate it
30:25
for get not this here and Screen I
30:31
needed remove
30:42
them click on this I need the things four I need a four this a four is
30:50
there now first I want to do the thing is ever text
31:04
text you have right here I want to cut here write the name next
31:13
life if you have mention the logo you can put in the logo as well so I SL
31:18
that's uh B
31:24
gold okay so you have got to design also also have
31:40
size arrange H1 H2
31:47
okay and spaces
32:01
now here second one I'm going to with is a second one is a
32:07
text this text I'm going to alignment about
32:17
us
32:23
service like too much SP get that shift plus Enter
32:29
key the to shift plus Enter key contact
32:35
us okay that's thing you right some copy so after that you have the same thing
32:41
you have to copy the same thing you have to if you have plenty of links you have to put it here I have a I don't have a
32:48
link so that I just put it the D text I put it in the same thing copy and paste it over here as well same thing here
32:55
also the same thing I have to
33:04
next so now let's here here this is simple have have a phot section photo
33:10
section what you're going to do is I need a this all area I to click on this main area a main area this all the area
33:16
I want to put this one as a color I want to change as a background color go to the uh color section so layout col
33:26
section background color
33:32
black okay color black now let's this one accidentally
33:37
click on this one so here you can click on this the background color you have write
33:43
the background color you have to click on the background color you have to click on
33:56
this you can put this color as well something the background
34:11
color I need to put the color as a dark
34:16
yellow dark red so this color also you have to go
34:22
dark
34:47
so here the color is not showing well so you have to click on this
34:53
option uh you have to arrange the background a background there a foreground color
34:59
label some background color is
35:12
there backr we have we need a text color you
35:18
this text color so text color we Chang the text okay here here you can
35:24
change the text color I need to White perfect so here we are we have to change
35:29
the text color design text color we change
35:35
as here also we need a x color we change
35:47
the okay so that's thing you have okay so here also the here also we
35:53
can colum have this one
36:01
click on this text
36:09
color Okay need Tex you have to the size little bit bigger text size we have get
36:15
another Tex size bigger cck save that's we have done the pH pH section so I need
36:23
another one is click on this uh what are the option
36:32
design layout so sizing go the sizing mean height you have to me height
36:40
you have to get the mean height
36:51
right Max fight
37:08
okay now what I'm going to do after that I'm going have to simple copyright write
37:13
it here copy set you click on this new section regular you click this one I
37:22
want to here I have to put this one as text
37:29
let
37:37
copyright
37:51
24 so you can take to the middle of the screen uh if you want to make the size a
37:57
little bit bigger you can add the
38:03
size size here one color I'm going to change this
38:11
one okay so you to this one so you have to this one click on this background color I'm going to click on this one as
38:18
a background color the background I'm going give
38:23
as black okay just you have do it simply we
38:29
have to done the things okay so simple side this is
38:35
simple side have done it copyright you have to write the long text so it's okay
38:41
so now let's save bring back to save the document then only it work click on the
38:47
three dot save this changes what you did it right
38:53
now changes has been applied okay now changes has been apped so let
39:00
connect here you put that so here also you have to make the change then only the you can see the site okay now you
39:07
can see the preview here okay if you have the logo your text
39:14
everything it should be fine here simple okay this how you have
39:21
to make the website your professional way okay this how we have make the website professional way okay we will be
39:27
getting in touch with another torial thank you for watching
#Skins
# Themes & Wallpapers
#Web Design & Development
#Web Services