Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,170 --> 00:00:00,530
All right.
2
00:00:00,530 --> 00:00:03,470
So right now, let's go ahead and carry on with the rest of the changes.
3
00:00:03,920 --> 00:00:08,150
Now we're going to use ChatGPT to write content for us in this way.
4
00:00:08,180 --> 00:00:11,990
Now, over here, we have our mission statement.
5
00:00:12,050 --> 00:00:15,050
I'm going to go ahead to ChatGPT and I'm going to say.
6
00:00:15,810 --> 00:00:33,060
We are an agency or a news blog, and I want you to write a mission statement to impress our readers.
7
00:00:33,360 --> 00:00:36,060
So it's going to go ahead and write down a mission statement.
8
00:00:36,060 --> 00:00:38,330
And I'm just going to copy that mission statement.
9
00:00:38,340 --> 00:00:39,960
Hopefully, it doesn't make it big.
10
00:00:39,960 --> 00:00:40,200
All right.
11
00:00:40,200 --> 00:00:41,820
So this one is pretty cool.
12
00:00:41,820 --> 00:00:49,260
So I'm going to go back to my elementor here and I want you to just click here, click on this text.
13
00:00:49,260 --> 00:00:50,520
It's Alarme ipsum text.
14
00:00:50,520 --> 00:00:53,850
So we're going to we're going to replace that by real text.
15
00:00:54,030 --> 00:01:03,120
And over here, instead of our Explore the World, we're going to say our mission statement and I'm
16
00:01:03,120 --> 00:01:06,960
going to go and fetch an image kind of like that looks kind of like this.
17
00:01:06,960 --> 00:01:09,510
Now let's go to Canva here.
18
00:01:09,510 --> 00:01:15,030
And first off, I'm going to click on this section and I want to know exactly what is the size of this
19
00:01:15,030 --> 00:01:15,670
image.
20
00:01:15,670 --> 00:01:20,560
So I'm going to go to style here on the section to see kind of like what the image that they have used
21
00:01:20,560 --> 00:01:21,730
is over here.
22
00:01:21,730 --> 00:01:26,770
It doesn't really appear So I'm going to click here, click on the section again, and let me go to
23
00:01:26,770 --> 00:01:27,490
style.
24
00:01:27,700 --> 00:01:29,170
Okay, So this is the image.
25
00:01:29,170 --> 00:01:33,700
Now, this image is a 1920 pixels by 800 pixels.
26
00:01:33,700 --> 00:01:38,380
So what I'm going to do here is I'm going to go and I'm going to open up a new canva.
27
00:01:38,830 --> 00:01:45,610
So it's 1000 and 920 by 800 pixels.
28
00:01:45,730 --> 00:01:49,630
Now I'm going to go ahead and find something like that.
29
00:01:49,630 --> 00:01:51,820
So I already have my images up here.
30
00:01:51,820 --> 00:01:53,440
You can see that this is the image.
31
00:01:53,440 --> 00:01:59,620
But I need to add a reporter here on the right hand side as well, or on the left hand side.
32
00:01:59,620 --> 00:02:02,050
I'm going to go ahead and remove this image first.
33
00:02:02,230 --> 00:02:08,680
Come back over here, remove this image, and then let me search for news, the topic of news.
34
00:02:09,400 --> 00:02:10,990
So let me just come back over here.
35
00:02:10,990 --> 00:02:11,800
Let's click.
36
00:02:12,710 --> 00:02:16,760
So we have a lot of images up here, but let me just search for it again.
37
00:02:17,210 --> 00:02:20,750
And over here, I want to find something pretty cool.
38
00:02:20,750 --> 00:02:22,040
So let's go down.
39
00:02:22,040 --> 00:02:22,220
All right.
40
00:02:22,220 --> 00:02:26,480
So this is the image and I'm going to set this up as a background image.
41
00:02:26,480 --> 00:02:31,070
And what I'm going to do is I'm going to up this a little bit like this.
42
00:02:31,650 --> 00:02:34,290
And I want to go ahead and look for a person.
43
00:02:34,290 --> 00:02:38,520
So this person I'm not going to make it like this.
44
00:02:38,520 --> 00:02:40,710
I'm going to make it into an animation.
45
00:02:40,710 --> 00:02:46,830
So what I'm going to do, I'm going to download this image as is, and later on we're going to add another
46
00:02:46,830 --> 00:02:48,690
image and I'm going to try to do that.
47
00:02:49,050 --> 00:02:55,710
So I'm going to download this and let me go back to Elementor Up here, click on upload files.
48
00:02:55,740 --> 00:02:57,000
The image was downloaded.
49
00:02:57,000 --> 00:02:58,110
I can see it there.
50
00:02:58,110 --> 00:03:00,570
And so here I'm just going to paste it.
51
00:03:00,960 --> 00:03:01,200
Okay.
52
00:03:01,200 --> 00:03:03,540
So let me wait, wait, wait, wait, wait.
53
00:03:03,630 --> 00:03:04,080
All right.
54
00:03:04,080 --> 00:03:04,800
So there you go.
55
00:03:04,800 --> 00:03:05,730
That's our image.
56
00:03:05,730 --> 00:03:13,740
So I want to take that and simply insert it, insert that media into that.
57
00:03:13,740 --> 00:03:19,080
No longer images, take a little bit of time to curate or to for treatment.
58
00:03:19,110 --> 00:03:24,210
So I'm going to click insert and over here, just don't do anything because normally, normally you'd
59
00:03:24,210 --> 00:03:29,250
have to go to position and attachment, but because we have imported it ready to go website, everything
60
00:03:29,250 --> 00:03:32,980
is set up for us now over here we need to add something.
61
00:03:32,980 --> 00:03:36,520
So I'm going to go and try something crazy.
62
00:03:36,730 --> 00:03:39,100
So I'm really hoping this will work.
63
00:03:39,100 --> 00:03:43,180
So what I'm going to do is I'm going to go ahead and just add.
64
00:03:44,000 --> 00:03:46,210
An image down here.
65
00:03:46,220 --> 00:03:46,790
Right.
66
00:03:46,820 --> 00:03:50,080
So I'm going to go for image, add it down here.
67
00:03:50,090 --> 00:03:52,760
And in that image I'm going to add a person.
68
00:03:52,760 --> 00:04:00,710
So I'm going to go to Canva here and I'm going to resize this kind of like to a 512 by 512.
69
00:04:00,860 --> 00:04:03,620
I don't need the image of the person to be that big actually.
70
00:04:03,650 --> 00:04:09,110
Now maybe the height needs to be bigger and so I'm just going to keep that height 512 by 800.
71
00:04:09,140 --> 00:04:10,940
Let me see what that will get us.
72
00:04:11,000 --> 00:04:13,640
I'm pretty sure we're going to get a pretty good result.
73
00:04:13,640 --> 00:04:20,260
So and I'm going to go ahead and search for this particular reporter and we'll definitely use Dall E
74
00:04:20,270 --> 00:04:22,940
two because we need to complete his body.
75
00:04:22,940 --> 00:04:25,310
But first off, let's just try and find something.
76
00:04:25,310 --> 00:04:26,030
So here.
77
00:04:26,030 --> 00:04:28,400
Reporter Right.
78
00:04:28,400 --> 00:04:32,720
Reporter Now we have a bunch of reporters up here now, right?
79
00:04:32,720 --> 00:04:37,820
So we have this guy and if we scroll down, we have this guy, right?
80
00:04:37,820 --> 00:04:38,810
This guy.
81
00:04:40,070 --> 00:04:46,760
So I think I think we're just going to add this guy up here and I'm just going to edit his image background
82
00:04:46,760 --> 00:04:55,070
remover, and I want to flip his image for his hand to point in the right hand side where we have our
83
00:04:55,070 --> 00:04:59,330
text, the mission statement, and let me show you what I'm going to do.
84
00:04:59,330 --> 00:05:01,160
This is going to be fun, trust me.
85
00:05:01,160 --> 00:05:03,530
So the background is still getting removed.
86
00:05:03,530 --> 00:05:05,270
Let me just wait until it's removed.
87
00:05:05,630 --> 00:05:06,080
All right.
88
00:05:06,080 --> 00:05:07,430
So background was removed.
89
00:05:07,430 --> 00:05:10,880
But the problem is still this shows up in here.
90
00:05:10,880 --> 00:05:16,370
So what I'm going to do, I'm going to crop him just a little bit like that and that will be it.
91
00:05:16,370 --> 00:05:19,430
And so I'm going to click on my image Flip.
92
00:05:19,950 --> 00:05:23,070
Flip horizontally and crop some more.
93
00:05:23,940 --> 00:05:26,040
And over here I'm going the crop.
94
00:05:27,140 --> 00:05:28,670
Now the hand does not show.
95
00:05:28,670 --> 00:05:30,020
So the hand is also.
96
00:05:30,050 --> 00:05:32,040
The hand was also taken out.
97
00:05:32,060 --> 00:05:34,310
So what I'm going to do, I'm going to crop it as well.
98
00:05:34,310 --> 00:05:38,120
I have no choice and I'm going to make this image bigger.
99
00:05:39,510 --> 00:05:40,470
Like this.
100
00:05:40,860 --> 00:05:45,070
And let me show you the power of artificial intelligence.
101
00:05:45,090 --> 00:05:50,280
So I'm going to download this image as it is with a transparent background, and we'll go to chat to
102
00:05:50,280 --> 00:05:53,960
not chat GPT, but to Dall E two, which is chat GPT.
103
00:05:55,210 --> 00:05:55,930
Other.
104
00:05:55,960 --> 00:05:59,080
The other product of OpenAI, including ChatGPT.
105
00:05:59,110 --> 00:06:04,210
So here, let's search for Dall e two.
106
00:06:05,330 --> 00:06:06,140
Or Dolly.
107
00:06:06,360 --> 00:06:08,540
Dolly two is the newest version of Dolly.
108
00:06:08,750 --> 00:06:09,370
Here is.
109
00:06:10,410 --> 00:06:11,730
Video of an elephant.
110
00:06:12,390 --> 00:06:14,900
Now, over here, let me just go to open.
111
00:06:15,360 --> 00:06:16,640
Click on Try Dali.
112
00:06:16,980 --> 00:06:20,580
And right here, let me show you what we're going to do.
113
00:06:20,820 --> 00:06:21,980
Magic.
114
00:06:21,990 --> 00:06:27,360
So let me upload my image and we're just going to complete that image now.
115
00:06:27,360 --> 00:06:28,410
Downloads.
116
00:06:29,820 --> 00:06:31,320
This is the image.
117
00:06:33,480 --> 00:06:37,650
Click add and now skip cropping.
118
00:06:37,740 --> 00:06:41,540
And I want to take this frame.
119
00:06:41,550 --> 00:06:43,320
I'm going to put it right here.
120
00:06:44,120 --> 00:06:46,700
And I'm going to say journalist.
121
00:06:48,400 --> 00:06:49,150
Generate.
122
00:06:49,150 --> 00:06:54,280
And so right now, what it's going to do, it's going going to go ahead and complete the stuff that's
123
00:06:54,280 --> 00:07:01,270
missing from this image by using artificial intelligence so that we can have our guy in a way that looks
124
00:07:01,270 --> 00:07:07,960
kind of similar to this person or in a way similar to kind of how we completed this person's profile.
125
00:07:07,960 --> 00:07:13,630
And so because we want our guy to be a complete human being standing in here and pointing in the direction
126
00:07:13,630 --> 00:07:19,780
of the mission statement, that's how we care or how much we care about the website design.
127
00:07:19,780 --> 00:07:22,630
So over here it generated four propositions.
128
00:07:22,630 --> 00:07:26,230
I'm going to go with the first one because I think the first one is pretty cool.
129
00:07:26,230 --> 00:07:31,570
I'm going to accept it and I'm going to expand more by adding another generation frame up here.
130
00:07:32,380 --> 00:07:37,510
And click generate once more because I want to get the full view of the person.
131
00:07:37,510 --> 00:07:39,620
I want to get his entire body.
132
00:07:39,640 --> 00:07:41,680
That way we have a perfect website.
133
00:07:41,680 --> 00:07:44,230
People will go to the website and they'll be impressed.
134
00:07:44,440 --> 00:07:52,280
Now many people have great design skills but are lazy with these details and I advise you not to be.
135
00:07:52,300 --> 00:07:54,280
So here we have some images.
136
00:07:54,280 --> 00:07:56,010
I think this one here would do well.
137
00:07:56,020 --> 00:08:03,280
I'm going to accept, but right now I'm going to go ahead and download this and I'm going to take it
138
00:08:03,280 --> 00:08:03,750
here.
139
00:08:03,760 --> 00:08:04,050
All right.
140
00:08:04,120 --> 00:08:05,440
I'm going to go back here.
141
00:08:05,440 --> 00:08:07,110
I'm just going to delete this image.
142
00:08:07,120 --> 00:08:13,330
I'm going to go to uploads, upload files, and then I'm just going to upload this recently created
143
00:08:13,330 --> 00:08:17,800
image with artificial intelligence and you guess what I'm going to do to it.
144
00:08:18,040 --> 00:08:20,170
You know exactly what I'm going to do to it.
145
00:08:20,170 --> 00:08:22,180
I'm just going to remove the background off of it.
146
00:08:22,450 --> 00:08:25,720
And first of all here, let's crop this part here.
147
00:08:26,390 --> 00:08:28,070
Okay to make it simpler.
148
00:08:28,670 --> 00:08:32,990
And let me just click edit the image background remover.
149
00:08:32,990 --> 00:08:36,830
So right now we have an entire journalist standing up there.
150
00:08:36,830 --> 00:08:40,880
So we started off from an image that looked nothing like what we have right now.
151
00:08:40,880 --> 00:08:45,380
But with artificial intelligence, we can really achieve impressive results.
152
00:08:45,410 --> 00:08:49,270
Now over here you can see that we have this camera kind of bothering the view.
153
00:08:49,280 --> 00:08:51,410
So I'm going to crop that.
154
00:08:51,440 --> 00:08:57,470
Now, the problem is that the camera is actually, you know, bothering us really now.
155
00:08:57,530 --> 00:09:01,010
But I think if we keep the camera, it wouldn't really look so bad.
156
00:09:01,160 --> 00:09:06,410
Let me just see mean I can remove the camera if I want to, but if we just keep it, it's not really
157
00:09:06,410 --> 00:09:07,400
going to be that bad.
158
00:09:07,400 --> 00:09:09,450
So I'm just going to keep the camera up there.
159
00:09:09,470 --> 00:09:11,210
I'm just going to make my image bigger.
160
00:09:11,980 --> 00:09:13,660
To fill the space.
161
00:09:13,660 --> 00:09:18,790
And I'm going to download this image right now with a transparent background.
162
00:09:19,330 --> 00:09:21,280
And let's go ahead and do some magic.
163
00:09:21,280 --> 00:09:23,740
First of all, let's close these windows.
164
00:09:23,770 --> 00:09:25,360
Let me go back over here.
165
00:09:25,360 --> 00:09:32,890
And on this image, I'm going to upload upload files, select files, and there we go.
166
00:09:32,890 --> 00:09:34,300
Let's do the magic.
167
00:09:34,300 --> 00:09:36,730
So here we have our image.
168
00:09:37,570 --> 00:09:40,240
Perfectly created insert.
169
00:09:40,360 --> 00:09:41,800
And so right now we have our guy.
170
00:09:41,830 --> 00:09:45,340
But let's just take our guy to the top.
171
00:09:45,460 --> 00:09:50,950
Now, I'm going to, first of all, go to content here and I'm going to make the image medium because
172
00:09:50,950 --> 00:09:51,910
I want to make it smaller.
173
00:09:51,910 --> 00:09:53,900
Maybe let's try with Medium here.
174
00:09:53,920 --> 00:09:54,280
All right.
175
00:09:54,280 --> 00:09:56,040
So this one is pretty good.
176
00:09:56,050 --> 00:09:58,750
And I'm going to go ahead to advanced here.
177
00:09:58,750 --> 00:10:05,320
And the margin side, the top, it should be -350.
178
00:10:06,130 --> 00:10:11,540
And in the left hand side, we're going to make it -350 as well.
179
00:10:11,560 --> 00:10:13,750
Now, that's not so much.
180
00:10:13,900 --> 00:10:15,580
Let's make it -800.
181
00:10:15,790 --> 00:10:17,860
And you can see that this is pretty good.
182
00:10:17,890 --> 00:10:20,260
Now, the only issue is that the image is really small.
183
00:10:20,260 --> 00:10:24,940
So maybe if we get it back to its original size, this will look pretty neat.
184
00:10:24,970 --> 00:10:30,720
So right now we have this except for the fact that the button now looks a little distanced.
185
00:10:30,730 --> 00:10:32,760
So I'm going to move it right here.
186
00:10:32,770 --> 00:10:35,470
And you can see the magic happened.
187
00:10:35,500 --> 00:10:37,690
Now, this is pretty cool, isn't it?
188
00:10:37,690 --> 00:10:42,910
So if I update right now, this will look pretty awesome and I'm going to click on my section here and
189
00:10:42,910 --> 00:10:44,320
I'm going to go to Advanced.
190
00:10:44,350 --> 00:10:49,450
Now, over here in the padding, I'm just going to make it 50 by 50.
191
00:10:49,450 --> 00:10:52,210
And let's try it this way and see what this will give us.
192
00:10:52,970 --> 00:10:54,290
50 by 50.
193
00:10:54,790 --> 00:10:54,890
Right.
194
00:10:54,950 --> 00:10:59,390
So I think that this kind of padding is pretty good and update.
195
00:10:59,420 --> 00:11:04,540
So right now, we have created a pretty good pretty good stuff here.
196
00:11:04,550 --> 00:11:05,120
Right.
197
00:11:05,120 --> 00:11:07,130
And I think this is pretty awesome.
198
00:11:07,130 --> 00:11:08,690
This is going to impress our readers.
199
00:11:08,720 --> 00:11:13,280
Now, over here, if you notice, if I go to my other website, this is a little bit different here.
200
00:11:13,280 --> 00:11:14,540
We have an about us.
201
00:11:14,570 --> 00:11:19,640
Now, I'm just going to copy this text because there's no reason for me to go back and ask ChatGPT to
202
00:11:19,640 --> 00:11:20,780
create it for me.
203
00:11:20,780 --> 00:11:22,970
And over here I can delete these images.
204
00:11:22,970 --> 00:11:23,990
I don't need them.
205
00:11:23,990 --> 00:11:25,400
I'm just going to keep one image.
206
00:11:25,400 --> 00:11:31,370
So I'm going to delete this this column over here, delete and delete this column here as well.
207
00:11:31,400 --> 00:11:32,960
Or this image.
208
00:11:32,960 --> 00:11:33,290
Right?
209
00:11:33,320 --> 00:11:36,440
Delete this image and I'm going to keep one image.
210
00:11:36,890 --> 00:11:44,060
I'm going to come in here and instead of this Lorem ipsum not useful text, I will add my text and over
211
00:11:44,060 --> 00:11:48,230
here I need to add the about us copy.
212
00:11:48,230 --> 00:11:49,880
And over here I'm going to add it.
213
00:11:49,880 --> 00:11:54,720
So I'm just going to come in here, add that and right here I need to add a different image.
214
00:11:54,720 --> 00:11:54,870
Now.
215
00:11:54,870 --> 00:11:56,640
This time I'm thinking of a mic.
216
00:11:56,640 --> 00:12:00,420
But first off, let's go and get the background image for the entire section.
217
00:12:00,420 --> 00:12:06,180
So let me go to Canva here, close this window and let me go back to Elementor.
218
00:12:06,210 --> 00:12:09,060
Now, I want to check up here.
219
00:12:09,090 --> 00:12:11,490
I want to check the size of.
220
00:12:12,050 --> 00:12:13,040
This background.
221
00:12:13,070 --> 00:12:16,760
Now let's just try to use the same size of the previous image.
222
00:12:16,810 --> 00:12:18,320
1800.
223
00:12:18,320 --> 00:12:20,060
By how much?
224
00:12:20,060 --> 00:12:21,440
By 900 or something.
225
00:12:21,440 --> 00:12:22,710
So let's just check.
226
00:12:22,730 --> 00:12:24,340
Now, this is 1200.
227
00:12:24,350 --> 00:12:34,400
Let's resize this to 1900 by, let's say 630 or 700 maybe, and copy and resize.
228
00:12:34,520 --> 00:12:39,950
And so let's go now and add an image that has something to do with photography.
229
00:12:39,980 --> 00:12:40,250
Okay?
230
00:12:40,250 --> 00:12:44,960
So we need something to do with photography with the camera, kind of like showing the camera there.
231
00:12:44,960 --> 00:12:50,270
And so I'm going to go to elements here and let me search for news.
232
00:12:51,080 --> 00:12:53,570
Filming, Right?
233
00:12:53,570 --> 00:12:57,080
So here, let's just try to find something interesting here.
234
00:12:57,080 --> 00:12:58,010
Photos.
235
00:12:58,130 --> 00:13:00,830
Let me go and try to find something here.
236
00:13:01,310 --> 00:13:01,610
Okay.
237
00:13:01,610 --> 00:13:04,220
So we have some images, but not really.
238
00:13:04,670 --> 00:13:06,350
Not really what we want.
239
00:13:06,350 --> 00:13:12,350
So let me try the keyword news photo to see what we're going to get.
240
00:13:14,420 --> 00:13:14,900
Right.
241
00:13:15,820 --> 00:13:16,850
No, nothing.
242
00:13:16,870 --> 00:13:18,910
Now let's try photography.
243
00:13:20,400 --> 00:13:23,070
And hopefully we can find some pretty good images there.
244
00:13:23,070 --> 00:13:25,770
Photography, photography, photography.
245
00:13:26,570 --> 00:13:26,870
Right.
246
00:13:26,870 --> 00:13:29,150
No image kind of impressed me here.
247
00:13:29,510 --> 00:13:31,490
Let me just go ahead and.
248
00:13:35,660 --> 00:13:35,850
Right.
249
00:13:35,850 --> 00:13:38,070
Maybe this one here, but this one is not.
250
00:13:38,070 --> 00:13:41,700
I mean, we can add a layer of blue to it.
251
00:13:41,700 --> 00:13:47,130
So I'm going to set these as background and later on I'm going to add a layer of blue.
252
00:13:47,370 --> 00:13:49,890
So let's just download this kind of like it.
253
00:13:49,890 --> 00:13:55,230
And over here I'm going to scroll down, I'm going to click on my section up here, I'm going to go
254
00:13:55,230 --> 00:14:00,120
to Style and I'm going to go over here to classic click image.
255
00:14:00,150 --> 00:14:05,910
Let's upload an image from background and let's give it an overlay of with a shade of blue to kind of
256
00:14:05,910 --> 00:14:08,280
make it flow with the flow of the website.
257
00:14:08,280 --> 00:14:11,660
So that's not really big deal.
258
00:14:11,670 --> 00:14:14,160
Let's just insert media.
259
00:14:14,580 --> 00:14:19,320
It's going to be a little darker, but I'm going to make it a little bluer.
260
00:14:19,320 --> 00:14:21,600
Now, like I said before, it takes a little bit of time.
261
00:14:21,600 --> 00:14:22,980
All right, So that's added.
262
00:14:22,980 --> 00:14:27,300
And let me scroll down over here to the background overlay.
263
00:14:27,480 --> 00:14:30,870
And there is no background overlay here, so we're going to add one.
264
00:14:30,870 --> 00:14:37,240
So here instead of this black color, we're going to add a dark blue color kind of like this.
265
00:14:38,320 --> 00:14:40,030
We have one more issue here.
266
00:14:40,060 --> 00:14:43,990
This text is black, so we're going to make it white.
267
00:14:44,020 --> 00:14:47,830
I'm going to check here, make it white, and I'm going to make this text as well.
268
00:14:47,830 --> 00:14:48,760
White.
269
00:14:49,770 --> 00:14:50,310
Right.
270
00:14:50,610 --> 00:14:56,010
And so here when it comes to this image, I'm going to go and find an image this time that should be
271
00:14:56,040 --> 00:15:01,950
512 by 512, and it should be an image of a mic floating.
272
00:15:01,950 --> 00:15:02,820
So here.
273
00:15:04,090 --> 00:15:06,670
512 by five.
274
00:15:06,670 --> 00:15:07,510
12.
275
00:15:07,690 --> 00:15:10,330
And let me just copy and resize this.
276
00:15:10,360 --> 00:15:12,460
Let me go and look for a mic.
277
00:15:12,820 --> 00:15:15,910
And it should be similar to this mic over here.
278
00:15:16,790 --> 00:15:18,050
Write about us.
279
00:15:18,560 --> 00:15:20,480
Everything should be perfect.
280
00:15:21,110 --> 00:15:25,460
I've been doing web design for a long time, and I know that you need to really, really bring your
281
00:15:25,460 --> 00:15:31,370
A game if you want to create impressive websites that people will stay on and read the content over
282
00:15:31,370 --> 00:15:31,550
here.
283
00:15:31,550 --> 00:15:32,810
Let's look for Mike.
284
00:15:33,780 --> 00:15:34,130
Mike.
285
00:15:34,140 --> 00:15:34,380
Mike.
286
00:15:34,380 --> 00:15:35,070
Mike.
287
00:15:35,070 --> 00:15:37,440
Not Mike Tyson, actually, just Mike.
288
00:15:37,470 --> 00:15:38,760
Mike with a hand.
289
00:15:38,760 --> 00:15:43,770
So let's just add a keyword of Mike with a hand.
290
00:15:45,230 --> 00:15:47,640
And we have these, right?
291
00:15:47,660 --> 00:15:48,620
So we have this one.
292
00:15:48,800 --> 00:15:50,330
This one right.
293
00:15:50,330 --> 00:15:52,250
We have a couple of ones over here.
294
00:15:52,250 --> 00:15:56,990
So I'm thinking I'm thinking let's just try to find something.
295
00:15:57,730 --> 00:15:58,330
Pretty cool.
296
00:15:58,330 --> 00:16:00,850
Here we have this one, so I'm just going to go back.
297
00:16:00,850 --> 00:16:03,990
I saw an image that I liked, so I'm just going to go back to it.
298
00:16:04,000 --> 00:16:07,810
I think that will do well and right.
299
00:16:07,810 --> 00:16:12,220
So this is the image and I'm just going to set this up as my background image.
300
00:16:12,340 --> 00:16:17,590
Now, unfortunately, this couldn't be really set as good background, so I'm just going to detach it
301
00:16:17,590 --> 00:16:20,920
and I'm just going to make it a little bit bigger, kind of like this.
302
00:16:21,560 --> 00:16:26,570
Rotate it a bit, kind of like this, and then make it a little bit bigger.
303
00:16:27,110 --> 00:16:28,760
Move the hand just like this.
304
00:16:28,970 --> 00:16:31,400
Make sure that the hand doesn't really appear.
305
00:16:32,200 --> 00:16:34,710
Or the missing part of the hand appears neat.
306
00:16:34,720 --> 00:16:36,100
And so I think this is cool.
307
00:16:36,130 --> 00:16:38,080
Maybe we can add a little bit of contrast.
308
00:16:38,530 --> 00:16:42,910
So I'm going to go for a little bit of contrast here and download this image.
309
00:16:42,940 --> 00:16:43,300
Okay.
310
00:16:43,300 --> 00:16:44,080
So perfect.
311
00:16:44,110 --> 00:16:46,870
Make sure to download it as a transparent background.
312
00:16:46,870 --> 00:16:49,140
And if you don't have Canva Pro, go ahead and use the website.
313
00:16:49,150 --> 00:16:52,470
I've shown you remove.bg and take the background off of it.
314
00:16:52,480 --> 00:16:57,550
So I'm going to click my image over here and I'm going to go here and change this image from this image
315
00:16:57,550 --> 00:17:00,530
to my lovely image.
316
00:17:00,550 --> 00:17:03,070
So over here we have our image.
317
00:17:03,070 --> 00:17:08,950
It's downloaded, Let's add that and we're going to make it.
318
00:17:09,820 --> 00:17:10,750
Pretty cool here.
319
00:17:10,750 --> 00:17:14,770
So if I go here, you can see that my image there is a difference here.
320
00:17:14,770 --> 00:17:16,270
I don't want that difference.
321
00:17:16,270 --> 00:17:19,960
I want my image to kind of look attached to the screen.
322
00:17:19,960 --> 00:17:23,110
So I'm going to go to Advanced over here and I'm going to go to margin.
323
00:17:23,110 --> 00:17:28,180
And on the left hand side, I'm going to add a positive margin of maybe 50.
324
00:17:29,150 --> 00:17:29,870
Well, still.
325
00:17:30,380 --> 00:17:31,120
Still.
326
00:17:32,480 --> 00:17:37,280
So let's just try to add negative margin doesn't really solve the problem.
327
00:17:37,310 --> 00:17:41,360
Now let's add a right margin margin of minus maybe 20.
328
00:17:41,390 --> 00:17:41,630
All right.
329
00:17:41,630 --> 00:17:43,410
So this actually solved the issue.
330
00:17:43,430 --> 00:17:47,930
So when you add the minus margin, that kind of solves the issue.
331
00:17:47,960 --> 00:17:49,690
So right now, we have our image.
332
00:17:49,700 --> 00:17:51,050
We have our about us.
333
00:17:51,080 --> 00:17:54,170
So right now, we have designed our entire home page.
334
00:17:54,200 --> 00:17:55,360
It's pretty good.
335
00:17:55,370 --> 00:18:00,700
So what we're going to do right now is we're going to go ahead and optimize our image for mobile.
336
00:18:00,710 --> 00:18:08,510
So in order to optimize your home page for mobile, you have to click here responsive mode and click
337
00:18:08,510 --> 00:18:09,050
on tablet.
338
00:18:09,050 --> 00:18:10,430
So there is tablet view.
339
00:18:10,640 --> 00:18:13,250
Now tablet, tablet view always be good.
340
00:18:13,250 --> 00:18:16,520
There's not going to be something bad going with the tablet view.
341
00:18:16,520 --> 00:18:21,100
And so for the mobile view is where we're going to do most of the work.
342
00:18:21,110 --> 00:18:24,950
So I'm going to click the mobile view and let me go ahead and optimize this for mobile.
343
00:18:24,980 --> 00:18:32,300
Mainly we're just going to be editing this stuff, so let's go ahead and just improve.
344
00:18:33,410 --> 00:18:33,610
Right.
345
00:18:33,610 --> 00:18:38,050
So Mobile View, this title is pretty huge, so let's click on it.
346
00:18:39,010 --> 00:18:41,710
And let's just make it a little less.
347
00:18:41,710 --> 00:18:46,570
Now, when you change the size of it for mobile, it doesn't affect how it looks on desktop.
348
00:18:46,570 --> 00:18:49,300
So here I'm going to make it 30, for instance.
349
00:18:49,890 --> 00:18:52,380
And I'm going to click this image right here.
350
00:18:52,590 --> 00:18:56,610
Now, unfortunately, here the image is pretty big.
351
00:18:56,610 --> 00:19:00,510
So I'm going to perhaps at the top make it a minus.
352
00:19:01,470 --> 00:19:03,320
200 or.
353
00:19:04,300 --> 00:19:04,460
No.
354
00:19:04,570 --> 00:19:06,250
-200 didn't do it.
355
00:19:06,730 --> 00:19:07,560
Now, the problem here.
356
00:19:07,570 --> 00:19:09,390
All right, So I made a mistake.
357
00:19:09,400 --> 00:19:13,690
So I'm going to go back a little bit and I'm going to click my image here and to make sure that I'm
358
00:19:13,690 --> 00:19:15,430
uncheck the values of here.
359
00:19:15,820 --> 00:19:18,970
And so this guy right now, we have to change everything.
360
00:19:18,970 --> 00:19:20,440
So -200.
361
00:19:21,330 --> 00:19:25,230
And over here at the left hand side, -150.
362
00:19:26,050 --> 00:19:28,630
Or -50 or something.
363
00:19:28,630 --> 00:19:32,740
All right, so let's try with -250.
364
00:19:34,470 --> 00:19:34,710
All right.
365
00:19:34,710 --> 00:19:40,410
So I think I think we should just keep him at the bottom here because there's no real reason why he
366
00:19:40,410 --> 00:19:41,460
should be up there.
367
00:19:41,670 --> 00:19:44,670
And besides, we've tried and it didn't really work.
368
00:19:44,860 --> 00:19:48,180
Now, over here, we can hide these columns, but there's no point.
369
00:19:48,210 --> 00:19:52,200
The newsletter kind of looks a little bit small, but I feel like it's.
370
00:19:52,200 --> 00:19:52,920
It's pretty good.
371
00:19:52,920 --> 00:19:53,610
It's not really.
372
00:19:53,610 --> 00:19:54,630
It's not really bad.
373
00:19:54,660 --> 00:19:58,770
Here, this one needs to go down a little bit, so I'm going to click on it and go to typography here
374
00:19:58,770 --> 00:20:00,900
and the size, I'm going to make it 30.
375
00:20:02,280 --> 00:20:04,800
And I'm going to click on it here and go to Advanced.
376
00:20:04,800 --> 00:20:06,870
I'm going to add a little bit of a padding to it.
377
00:20:08,170 --> 00:20:11,020
Now 225 padding should do it.
378
00:20:11,020 --> 00:20:13,540
And if I scroll down, this looks pretty cool.
379
00:20:13,540 --> 00:20:15,490
There's no reason for us to change that.
380
00:20:15,490 --> 00:20:19,450
But in this case, over here, we have a pretty unfortunate thing.
381
00:20:19,450 --> 00:20:26,050
And so I'm just going to go click the image here and I'm going to go to Advanced Responsive, and I'm
382
00:20:26,050 --> 00:20:29,410
going to hide it from Mobile right now.
383
00:20:29,410 --> 00:20:32,320
When we hide it from mobile, that kind of changes stuff.
384
00:20:32,320 --> 00:20:35,800
So here if I click on my column.
385
00:20:36,820 --> 00:20:36,960
Right.
386
00:20:36,990 --> 00:20:38,820
So I need to click the column here.
387
00:20:40,830 --> 00:20:41,700
So click.
388
00:20:42,240 --> 00:20:47,010
The problem here is that I can't quite click it right, so I can click it here now.
389
00:20:47,010 --> 00:20:48,450
Here if I go to style.
390
00:20:49,180 --> 00:20:50,230
Layout.
391
00:20:50,380 --> 00:20:53,590
The vertical align is, let's say the middle.
392
00:20:54,490 --> 00:20:55,930
Let's keep it to default.
393
00:20:56,290 --> 00:21:03,150
Or maybe we can just keep it as it is because we don't want to crash the website here or the about us
394
00:21:03,160 --> 00:21:04,060
looks pretty cool.
395
00:21:04,090 --> 00:21:05,680
This one also looks pretty cool.
396
00:21:05,680 --> 00:21:08,740
And so I think this is all for mobile optimization.
397
00:21:08,740 --> 00:21:11,200
We've done the best that we could.
398
00:21:11,200 --> 00:21:13,330
And so if a tablet, it looks pretty good.
399
00:21:14,030 --> 00:21:14,510
Right.
400
00:21:14,510 --> 00:21:17,480
Let's see how it looks for desktop here.
401
00:21:17,480 --> 00:21:20,060
And so we've quite optimized this for mobile.
402
00:21:20,090 --> 00:21:24,710
Now what we're going to do is we're going to add some more responsiveness.
34317
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Persian
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof