3. Create Header Wordpress website

  • last month
Transcript
00:00Why don't you see the sharing screen?
00:03Can you see it?
00:05Can you see it?
00:06Yes, I can see it.
00:24OK.
00:26Wait a minute.
00:30Yes, I can see it.
00:32OK.
00:34I see it.
00:36Yes.
00:38OK.
00:40Yes.
00:42OK.
00:44Yes.
00:46OK.
00:48OK.
00:50Yes.
00:52OK.
00:54Yes.
00:56OK.
00:58Yes.
01:00Yes.
01:02Yes.
01:04Yes.
01:06Yes.
01:08Yes.
01:10Yes.
01:12Yes.
01:14Yes.
01:16Yes.
01:18Yes.
01:20Yes.
01:22Yes.
01:24Yes.
01:26Yes.
01:28Yes.
01:30Yes.
01:32Yes.
01:34Yes.
01:36Yes.
01:38Yes.
01:40Yes.
01:42Yes.
01:44Yes.
01:46Yes.
01:48Yes.
01:50Yes.
01:52Yes.
01:54Yes.
01:56Yes.
01:58Yes.
02:00Yes.
02:02Yes.
02:04Yes.
02:06Yes.
02:08Yes.
02:10Yes.
02:12Yes.
02:14Yes.
02:16Yes.
02:18Yes.
02:20Yes.
02:22Yes.
02:24Yes.
02:26Yes.
02:28Yes.
02:30Yes.
02:32Yes.
02:34Yes.
02:36Yes.
02:38Yes.
02:40Yes.
02:42Yes.
02:44Yes.
02:46Yes.
02:48Yes.
02:50Yes.
02:52Yes.
02:54Yes.
02:56Yes.
02:58Yes.
03:00Yes.
03:02Yes.
03:04Yes.
03:06Yes.
03:08Yes.
03:10Yes.
03:12Yes.
03:14Yes.
03:16Yes.
03:18Yes.
03:20Yes.
03:22Yes.
03:24Yes.
03:26Yes.
03:28Yes.
03:30Yes.
03:32Yes.
03:34Yes.
03:36Yes.
03:38Yes.
03:40Yes.
03:42Yes.
03:44Yes.
03:46Yes.
03:48Yes.
03:50Yes.
03:52Yes.
03:54Yes.
03:56Yes.
03:58Yes.
04:00Yes.
04:02Yes.
04:04Yes.
04:06Yes.
04:08Yes.
04:10Yes.
04:12Yes.
04:14Yes.
04:16Yes.
04:18Yes.
04:20Yes.
04:22Yes.
04:24Yes.
04:26Yes.
04:28Yes.
04:30Yes.
04:32Yes.
04:34Yes.
04:36Yes.
04:38Yes.
04:40Yes.
04:42Yes.
04:44Yes.
04:46Yes.
04:48Yes.
04:50Yes.
04:52Yes.
04:54Yes.
04:56Yes.
04:58Yes.
05:00Yes.
05:02Yes.
05:04Yes.
05:06Yes.
05:08Yes.
05:10Yes.
05:12Yes.
05:14Yes.
05:16Yes.
05:18Yes.
05:20Yes.
05:22Yes.
05:24Yes.
05:26Yes.
05:28Yes.
05:30Yes.
05:32Yes.
05:34Yes.
05:36Yes.
05:38Yes.
05:40Yes.
05:42Yes.
05:44Yes.
05:46Yes.
05:48Yes.
05:50Yes.
05:52Yes.
05:54Yes.
05:56Yes.
05:58Yes.
06:00Yes.
06:02Yes.
06:04Yes.
06:06Yes.
06:08Yes.
06:10Yes.
06:12Yes.
06:14Yes.
06:16Yes.
06:18Yes.
06:20Yes.
06:22Yes.
06:24Yes.
06:26Yes.
06:28Yes.
06:30Yes.
06:32Yes.
06:34Yes.
06:36Yes.
06:38Yes.
06:40Yes.
06:42Yes.
06:44Yes.
06:46Yes.
06:48Yes.
06:50Yes.
06:52Yes.
06:54Yes.
06:56Yes.
06:58Yes.
07:00Yes.
07:02Yes.
07:04Yes.
07:06Yes.
07:08Yes.
07:10Yes.
07:12Yes.
07:14Yes.
07:16Yes.
07:18Yes.
07:20Yes.
07:22Yes.
07:24Yes.
07:26Yes.
07:28Yes.
07:30Yes.
07:32Yes.
07:34Yes.
07:36Yes.
07:38Yes.
07:40Yes.
07:42Yes.
07:44Yes.
07:46Yes.
07:48Yes.
07:50Yes.
07:52Yes.
07:54Yes.
07:56Yes.
07:58Yes.
08:00Yes.
08:02Yes.
08:04Yes.
08:06Yes.
08:08Yes.
08:10Yes.
08:12Yes.
08:14Yes.
08:16Yes.
08:18Yes.
08:20Yes.
08:22Yes.
08:24Yes.
08:26Yes.
08:28Yes.
08:30Yes.
08:32Yes.
08:34Yes.
08:36Yes.
08:38Yes.
08:40Yes.
08:42Yes.
08:44Yes.
08:46Yes.
08:48Yes.
08:50Yes.
08:52Yes.
08:54Yes.
08:56Yes.
08:58Yes.
09:00Yes.
09:02Yes.
09:04Yes.
09:06Yes.
09:08Yes.
09:10Yes.
09:12Yes.
09:14Yes.
09:16Yes.
09:18Yes.
09:20Yes.
09:22Now I want to change the color to yellow, or red, or this word, I want to change it to another color, but I don't like this word, I want to change it to another font, and I want to drag this logo to the right a bit.
09:49You need to know the programming knowledge to be able to move it or change it, but to make it easier for those who don't know how to program, there is an elementor tool to help you edit these parts.
10:09Here I choose the type of model, choose the header, add a new model, choose the elementor model, choose the new theme, and here I choose the type of model is the header, I'm just talking about the header part, select the header, then enter the model, I translate it into Vietnamese,
10:28select the header, then create the design, that's it, now it comes out like this, I will press the X button to turn it off, turn off these boards,
10:49now you will see the elements, the elements are available, you just need to drag it into this box, now I'm talking about this header, this header is divided into 2 parts, the first is the logo and the menu,
11:10now I will divide it into 2 parts, this is like a brick, now I press the plus sign to divide it into 2 parts, now I want to drag each element into it, I press the 9 dot sign, the first is to drag the logo, the logo will be on the left,
11:30the second is to drag the bottom, the logo is an image, drag the image in, select the image and find the logo image, for example, I choose this logo, it's okay, then what do I do?
11:49I will shrink it by pressing the mouse wheel in the middle, next is the menu bar, now I press the 9 dots on the top to find the menu,
12:11now I want to change the font color, I don't like this color, I want to change it to another color, I want to change it to blue, now I choose the font color,
12:29I want to change it to blue, now I press the 9 dots on the top to find the menu, next is the menu bar, I want to change it to blue, now I press the 9 dots on the top to find the menu,
13:00now I press the 9 dots on the top to find the menu, next is the menu bar, I want to change it to blue, now I press the 9 dots on the top to find the menu, next is the menu bar,
13:21Let's change the color to red
13:25Put it in
13:27The border color is the color of the bottom bracket
13:31That's the border color
13:38Red
13:39Let's change the color to red
13:53Ok, it's done. Let's print it out
13:58What does it mean?
13:59Where do you want to display your model?
14:09Is the header displayed all over your website?
14:24For example
14:31This page is not yet
14:36Let's go to this page
14:39The header is displayed on the top
14:44The product is also displayed on the top
14:47The header is also on the top
14:49The contact is still displayed on the top
14:53So I will display this model on the entire website
15:03It's all over the website
15:05So I will change it to display all over the website
15:10Add condition
15:12Include
15:14The value of NTSite is all over the website
15:22Then press Save and Load
15:24Done
15:26I just watched it again
15:35It's all over the website
15:42It's not gone
15:44Done
15:46Let's go to this page
15:51Scroll down
15:54Scroll down
15:58The two pages are different
16:02Scroll down
16:05Scroll down
16:07Scroll up
16:09Scroll down
16:11How is it?
16:15How is it different?
16:18Scroll down
16:20This page
16:22Scroll down
16:24How is it different?
16:26See?
16:28How is it different?
16:33Scroll down
16:36Scroll down
16:38This is the main page
16:40This is the details
16:42This is the main page, right?
16:44Scroll down
16:46This page is also on the top
16:49Scroll down
16:51How is it different?
16:53Remove the content
16:55How is it different?
16:59How to display
17:02See? I'm talking about the header
17:05Scroll down
17:07Is there a header?
17:09Scroll down
17:11Is there a header?
17:13No
17:15What is it for?
17:25What is it for?
17:27For example, customers are lazy
17:31Maybe I scroll down here
17:33I want to access the contact page
17:35For example, I look at your website
17:37See the information
17:39If you want to buy goods
17:41Maybe I scroll up now
17:43I look at the contact page
17:45Does it take time?
17:47It's related to experience
17:49Scroll down
17:51The website is too long
17:53Scroll up to see the contact information
17:55There is no time
17:57The type of user
17:58What is the fastest
18:00So I have to put the header on top
18:03To make it easier for users to see more details of your website
18:07Want to learn more about other pages
18:09For example, I read this website
18:11I think it's great
18:13I want to contact the person who made this website
18:16I choose to contact
18:18Then I will contact them
18:20Or I see the information is great
18:22Now I will see their product information
18:24See what I bought
18:26It will be much faster
18:28Now I scroll down
18:30Now I scroll up
18:32It takes too much time
18:34So here it is
18:36Create a fixed header
18:42Fixed
18:45Located at the top of the web
18:49Must create this header
18:51Located at the top of the web
18:53Now let it be located at the top of the web
18:56Back
19:02Now it looks like this
19:04Fixed
19:06For example, I want to fix this header
19:08Located at the top of the web
19:10I want to fix it
19:13Fixed
19:15Now I want to make it stick to the top
19:17Now I choose
19:20I choose this whole bar
19:22To choose the whole bar
19:23There are 6 dots
19:25In the middle
19:27Then I want to make it stick
19:29Choose
19:31Increase
19:33Choose in a dynamic effect
19:35Here is a dynamic effect
19:37It has a sticky
19:42Sticky
19:45Sticky is like a sticker
19:47Also called a sticker
19:51It will stick to the top
19:53Sticky
19:56Choose
19:58Sticky will be located at the top
20:00Top
20:02Then click update
20:04Done
20:06Now choose here
20:08Scroll down
20:10See it
20:12Sticky
20:14Sticky
20:17Sticky
20:19Sticky
20:23See nothing
20:25See it
20:27See it
20:29Scroll down
20:31It's sticky
20:33But what's wrong
20:39Scroll down here
20:46Scroll down
20:49The word is more pronounced, right?
20:50Scroll down
20:52It is
20:54It is
20:56Planted on the bottom
20:58The content of the web
21:01Now because of this
21:03Because of this, there is no bottom
21:05Because of this bar, there is no bottom
21:07So I have to add one more
21:09It is at the bottom of this header
21:11To add a bar
21:13Choose in the folder
21:15Install
21:17Choose this whole
21:18Then choose style
21:20Choose color
21:22White
21:25Done
21:27Click update
21:34Done
21:36OK
21:40It sticks to the top
21:42Now it sticks to the top
21:44Continue
21:46For example, I want to create
21:48The style is like a way
21:50To distinguish between the content
21:52With the header of the website
21:54To let people know
21:56This part is called the header
21:58The content is below
22:00Create a style
22:02Create a circle
22:04If you want to create a circle
22:06Now choose this whole
22:10Then choose inside the circle
22:13Then choose inside the shadow
22:16Shadow
22:18The shadow will be a line
22:20Small
22:22Now adjust the blur
22:24The blur is the softness
22:26Drag the blur down
22:28Spread out
22:30Let it spread out
22:32Let it spread out
22:35The color can only be changed
22:37For example, the color
22:39Blue
22:41The best is to take the logo color
22:43I don't know what color to take
22:45The logo color is the best color
22:46Because the website sometimes
22:48The header is too colorful
22:50People will be confused
22:52Not beautiful
22:54After finishing, click update
22:56Done
22:58Continue
23:00Done
23:02Logo and menu
23:04OK
23:06Done
23:09Now this website
23:11It will be on the computer
23:13Now
23:14Now most customers
23:17They will access the website
23:19Most customers
23:21They will access the website
23:23In mobile devices, right?
23:25But now few people use computers
23:27Access the website
23:29So
23:31Now I have to
23:33Adjust the header interface
23:35On the mobile device
23:37How to adjust
23:39Here
23:41Look at the mobile device
23:42Here
23:44There is an option to choose
23:46In the lower left corner
23:48Next to the eyes
23:51And here it will display
23:53Devices such as computers
23:55Mobile devices
23:57Now I want to display
23:59I want to edit the interface
24:01On the mobile device
24:03Done
24:05Call it out like this
24:07OK
24:09For example, like this
24:10On the mobile device
24:12It appears like this
24:15Do you see ok?
24:17Yes
24:19What's wrong?
24:22The header
24:24Like the mobile screen
24:26The external screen
24:28The header header
24:30How much
24:32Take
24:34More than half of the website
24:36Now how do people see the content
24:38So I have to make it neat
24:40Make this header neat
24:42I want to make it neat
24:44Now I will edit it again
24:48Then here is the logo
24:50This logo is too big
24:54So now
24:56Here
24:58It will have a
25:00The function of fixing the column
25:02I choose to fix the column
25:04Then I will adjust the column width
25:07Like each friend
25:08Now each friend takes about 50%
25:10Oh, it's 100%
25:13One column is one friend
25:15It takes 100%
25:17So the other guy has to push down
25:21That's why I have to adjust
25:23This column width is
25:2550
25:28Smaller
25:3030
25:3130
25:37Then the next one is the column width
25:39The column below
25:42How about this
25:44The column below is also 100%
25:46100%
25:48Now this table wants 100%
25:50So this table is pushed down
25:52So I have to adjust this table
25:54About
25:5670
25:5880%
25:59You can lie on top
26:02After you lie on top
26:04Click update
26:06Then here is the button
26:08The button of the menu
26:10Click here
26:18But when it comes out like this
26:20It will push the header down
26:22It will be ugly
26:25So when you click here
26:27It will happen
26:30Give it
26:34This is called the toggle button
26:37I will edit this toggle button
26:40Here is mobile drop down
26:42Select full width
26:44Click here
26:46It will be full width
26:48Already ok
26:52Done
26:55It turned out like this
26:57Now I want to change the color
26:59This button
27:01Take the color of the logo
27:03Here I say
27:05This button is called the toggle button
27:07Now I will find the toggle button
27:11If you want to edit the color, font, font size, font style
27:15Here is the style
27:18Remember the style
27:20Style will be related to color, font, font size, font style
27:24What is the width
27:26It will be related to
27:27Style
27:30What is related to the content
27:32For example, edit the text or something
27:35It will be the effect
27:37It will be related to the content
27:39And this is the style
27:41It will be related to color, font, font size, font style
27:43Already
27:45I just talked about the button
27:47Toggle button
27:49Select toggle button
27:52Color is the color
27:54Color is here
27:55There are 2 colors
27:57Color and background color
27:59Color is the color of 3 bricks
28:02White
28:04Background color is green
28:07I put the green color
28:09Change to green
28:11Done
28:13Click here
28:15Already
28:17When I scroll down
28:19I want to change the color of the text
28:21I want to change the text to
28:22I want to change the text to
28:25White
28:28Now I want to change the color of the text
28:30Select drop down
28:32Text color is the color of the text
28:36The text color is white
28:38Now I switch to green
28:41Here is the green
28:46Blue
28:48See
28:50Switch to blue
28:53Done
28:55Blue
28:57What else can I adjust?
28:59Blue
29:02Now when I switch
29:04Switch to
29:06Switch to
29:08Hover
29:10Switch to
29:12Hover
29:14Switch to
29:16Background color
29:18Now the background color is gray
29:20Black and gray
29:22Switch to blue
29:27The text color is
29:29White
29:31It will be more beautiful
29:33Here
29:36On the mobile device, it will appear like this
29:40After finishing, click update
29:42Done
29:48Like this
29:50On the mobile device, it will appear like this
29:58On the mobile device, it will appear like this
30:02You can search on your phone
30:04Let me see
30:06How is my website
30:09Done
30:11Create a header
30:16Create a header for the website
30:20Done
30:22I will edit the header
30:24Edit the header
30:35Edit the header
30:40Edit the header
30:42For the website
30:44On the computer and
30:46Mobile
30:50Use Elementor
30:58Create a header
31:01My learning process is simple
31:03For example
31:05After creating a header
31:07After creating a header
31:09I will switch to the footer
31:11After that, I will go to the content of the page
31:17Body
31:20Body
31:22After creating a page
31:24Done
31:29Body
31:31There will be many pages
31:33Contact page
31:35Product page
31:37Information page
31:39Header page
31:42I will go through the process like this
31:44It will be easier
31:46The goal of science is
31:47Learn how to design and manage a website
31:49How to manage a website
31:51Follow that process
31:54OK
31:56I will finish this part
31:59OK
32:01I will give you the email
32:03OK
32:05If you have any questions, please message me
32:07OK
32:09I will study again next time
32:11OK, study again next time
32:13OK, bye
32:15Bye
32:17Bye