1 00:00:00,000 --> 00:00:01,650 All right, so let's go ahead now and 2 00:00:01,650 --> 00:00:03,270 build out the blog page, 3 00:00:03,270 --> 00:00:06,990 which we've named the Articles page on the main menu, 4 00:00:06,990 --> 00:00:08,690 but it's actually the blog page. 5 00:00:08,685 --> 00:00:10,685 The first thing we're gonna do here is we can't 6 00:00:10,680 --> 00:00:12,600 edit with Elementor directly just yet 7 00:00:12,600 --> 00:00:14,820 because we actually need to 8 00:00:14,820 --> 00:00:17,310 edit the page first from the backend, 9 00:00:17,310 --> 00:00:19,350 from the traditional work is back-end. 10 00:00:19,350 --> 00:00:20,040 Right here. 11 00:00:20,040 --> 00:00:22,340 We can now click on Edit with Elementor. 12 00:00:22,335 --> 00:00:24,125 This will now give us access to 13 00:00:24,120 --> 00:00:26,640 the elemental interface for the page. 14 00:00:26,640 --> 00:00:28,080 The first thing I'm gonna do is 15 00:00:28,080 --> 00:00:29,100 I'm gonna come down here to 16 00:00:29,100 --> 00:00:32,670 sit-ins and simply hide the page title. 17 00:00:32,670 --> 00:00:35,600 Then we'll simply use our own heading. 18 00:00:35,595 --> 00:00:38,905 And we'll call this one our blog. 19 00:00:38,905 --> 00:00:42,685 We're gonna sell it as an H1, go to style. 20 00:00:42,680 --> 00:00:45,250 Actually let's align to the center first go to style. 21 00:00:45,245 --> 00:00:46,665 And then for the typography, 22 00:00:46,669 --> 00:00:49,539 we're going to set it as our primary. 23 00:00:49,535 --> 00:00:52,735 If you're not working with the global fonts, 24 00:00:52,730 --> 00:00:53,930 you can set this to about maybe 25 00:00:53,930 --> 00:00:55,840 60 pixels or something like that. 26 00:00:55,835 --> 00:00:58,315 Make sure it's pretty big, right? 27 00:00:58,310 --> 00:01:00,020 Next, we're going to add 28 00:01:00,020 --> 00:01:03,010 our divider for the blog 29 00:01:03,005 --> 00:01:05,875 and we'll align it to the center. 30 00:01:05,870 --> 00:01:09,920 Set this at fits he present. 31 00:01:09,920 --> 00:01:11,630 Now, check this out. 32 00:01:11,630 --> 00:01:15,400 Okay, we're going to add posts from different categories. 33 00:01:15,395 --> 00:01:17,755 We're gonna make use of our posts grid 34 00:01:17,750 --> 00:01:20,650 from the essential add-ons down here. 35 00:01:20,645 --> 00:01:23,435 Now you do have post timeline, 36 00:01:23,435 --> 00:01:25,195 which is actually very interested 37 00:01:25,190 --> 00:01:26,780 in what this will do is that it'll 38 00:01:26,780 --> 00:01:28,310 display your posts in 39 00:01:28,310 --> 00:01:33,440 a vertical timeline and it is a different style. 40 00:01:33,440 --> 00:01:36,080 Personally, I'm not a big fan of it, 41 00:01:36,080 --> 00:01:38,530 but you do have this option if you want to. 42 00:01:38,525 --> 00:01:40,435 But I'm not gonna walk with it. 43 00:01:40,430 --> 00:01:43,210 I'm simply going to use the post grid. 44 00:01:43,205 --> 00:01:47,305 Alright, so I'm gonna go ahead and drag the pose grid, 45 00:01:47,300 --> 00:01:48,740 jump ridges underneath of 46 00:01:48,740 --> 00:01:51,460 the divider. And now look at this. 47 00:01:51,455 --> 00:01:54,775 The source is going to be our posts obviously, 48 00:01:54,770 --> 00:01:56,990 but we can query based on the author, 49 00:01:56,990 --> 00:01:58,430 the tax Fermat's and so on. 50 00:01:58,430 --> 00:02:00,430 But we're going to go with categories. 51 00:02:00,425 --> 00:02:01,355 Here. 52 00:02:01,355 --> 00:02:03,275 I'm going to type in Europe. 53 00:02:03,275 --> 00:02:04,265 Alright. 54 00:02:04,265 --> 00:02:07,375 We're gonna pull in posts from Europe. 55 00:02:07,370 --> 00:02:10,730 The postpaid page here would be set to three, 56 00:02:10,730 --> 00:02:13,550 and then the layout sets in. 57 00:02:13,550 --> 00:02:17,450 So we'll go with three columns for the image size. 58 00:02:17,450 --> 00:02:20,480 We're gonna go with full as usual. 59 00:02:20,480 --> 00:02:23,930 Now, you would notice that because I'm using 60 00:02:23,930 --> 00:02:27,680 different sizes of my images for the posts, 61 00:02:27,679 --> 00:02:30,859 there is a misalignment in terms of heights. 62 00:02:30,860 --> 00:02:32,450 Like obviously the fashion in 63 00:02:32,450 --> 00:02:34,900 Istanbul has the taller image. 64 00:02:34,895 --> 00:02:37,255 And then for their sins in Pittsburgh 65 00:02:37,250 --> 00:02:40,370 and Glasgow posts have shorter images. 66 00:02:40,370 --> 00:02:41,990 There is a way around 67 00:02:41,990 --> 00:02:43,550 this and you will see it right here. 68 00:02:43,550 --> 00:02:45,330 You have image height. 69 00:02:45,334 --> 00:02:49,504 You can simply set a fixed height for your images. 70 00:02:49,505 --> 00:02:51,325 The only drawback to this is that 71 00:02:51,320 --> 00:02:54,110 sometimes you may not get the best angles. 72 00:02:54,110 --> 00:02:55,610 Like for example, you know, if you 73 00:02:55,610 --> 00:02:57,790 made this one taller than, 74 00:02:57,785 --> 00:03:00,775 you may miss out on the best angle 75 00:03:00,770 --> 00:03:01,820 in your images and so on. 76 00:03:01,820 --> 00:03:03,820 So that's the only drawback. 77 00:03:03,815 --> 00:03:06,745 Ideally, you'd want to use images of 78 00:03:06,740 --> 00:03:08,750 the same width and 79 00:03:08,750 --> 00:03:11,510 height when it comes to featured images, 80 00:03:11,510 --> 00:03:12,890 but it's not a problem. 81 00:03:12,890 --> 00:03:13,430 It's okay. 82 00:03:13,430 --> 00:03:15,380 Alright, so we've got that. 83 00:03:15,380 --> 00:03:17,030 What else simply do is let's 84 00:03:17,030 --> 00:03:18,770 add a heading to indicate that, 85 00:03:18,770 --> 00:03:21,190 okay, this is our posts from Europe. 86 00:03:21,185 --> 00:03:25,295 So I'm gonna come in here and say Europe. 87 00:03:25,295 --> 00:03:28,165 Alright, now let's make some changes 88 00:03:28,160 --> 00:03:32,000 to the actual pose good itself. 89 00:03:32,000 --> 00:03:33,540 Layout settings. 90 00:03:33,544 --> 00:03:34,624 In here. 91 00:03:34,625 --> 00:03:39,445 The accept words we're going to go with 15. 92 00:03:39,670 --> 00:03:43,510 Show read more. Yes, show metta. 93 00:03:43,505 --> 00:03:45,025 Yes, Bot Loves. 94 00:03:45,020 --> 00:03:46,570 Go over to style. 95 00:03:46,565 --> 00:03:50,185 What I'll do here is I will select style number two. 96 00:03:50,180 --> 00:03:53,030 This one will show us the date A2 ensures 97 00:03:53,030 --> 00:03:57,710 the avatar or the, the author's name. 98 00:03:57,710 --> 00:04:00,580 So I do prefer this particular style. 99 00:04:00,575 --> 00:04:02,605 Now from understand itself, 100 00:04:02,600 --> 00:04:07,450 we're gonna go over to the color typography and spacing. 101 00:04:07,445 --> 00:04:10,555 Hey, again, you have the title hover color. 102 00:04:10,550 --> 00:04:11,570 We did this earlier, 103 00:04:11,570 --> 00:04:14,050 I'm going to change this one to orange. 104 00:04:14,045 --> 00:04:17,605 So when they hover on the posts link, it turns to orange. 105 00:04:17,600 --> 00:04:19,960 Then for the typography, 106 00:04:19,955 --> 00:04:22,445 we're gonna make some changes in here as well. 107 00:04:22,445 --> 00:04:25,375 I'm going to make this a little bit smaller, 108 00:04:25,370 --> 00:04:27,560 just so that majestic city of Glasgow 109 00:04:27,560 --> 00:04:30,250 can be on one single line. 110 00:04:30,245 --> 00:04:35,755 The style, I'm gonna go with italic decoration, none. 111 00:04:36,070 --> 00:04:38,540 For the Read More button. 112 00:04:38,540 --> 00:04:40,750 Let's also change down as well. 113 00:04:40,745 --> 00:04:43,135 I will find out on down here with 114 00:04:43,130 --> 00:04:46,070 Mo button style, the text color. 115 00:04:46,070 --> 00:04:49,900 We're gonna go with orange just to keep things constant. 116 00:04:49,895 --> 00:04:52,495 And then of course for the typography, 117 00:04:52,490 --> 00:04:53,660 I'm gonna click in here, 118 00:04:53,660 --> 00:04:57,160 go to declaration and then sit down to none. 119 00:04:57,155 --> 00:04:59,015 And that's it. 120 00:04:59,015 --> 00:05:01,985 We've set it up. Europe, we've got a three posts. 121 00:05:01,984 --> 00:05:03,564 What else I want to do right now is 122 00:05:03,560 --> 00:05:06,100 to simply duplicate Europe, 123 00:05:06,095 --> 00:05:09,665 duplicates the Postgres right here. 124 00:05:09,665 --> 00:05:12,595 I will drag Europe, the second one, 125 00:05:12,590 --> 00:05:14,090 drop it above here, 126 00:05:14,090 --> 00:05:18,240 and then set this one to Asia. 127 00:05:18,430 --> 00:05:21,310 That's going to be the next category. 128 00:05:21,309 --> 00:05:23,949 Now for the actual Postgres itself, 129 00:05:23,945 --> 00:05:28,205 we're gonna change the categories in here to Asia. 130 00:05:28,205 --> 00:05:32,865 So let me type in Gia 131 00:05:32,865 --> 00:05:35,025 There it is. 132 00:05:35,020 --> 00:05:37,810 There you go. And then last but not least, 133 00:05:37,810 --> 00:05:39,540 let's do the exact same thing again, 134 00:05:39,535 --> 00:05:43,275 duplicates, duplicates. 135 00:05:43,270 --> 00:05:47,310 Now I'll drag Asia. 136 00:05:47,305 --> 00:05:52,825 Changes wanted to South America, 137 00:05:52,825 --> 00:05:55,785 come down here to the Postgres. 138 00:05:55,780 --> 00:06:00,320 Changes, one to America. 139 00:06:00,540 --> 00:06:03,740 Recall South America. 140 00:06:03,744 --> 00:06:05,094 And there it is. 141 00:06:05,095 --> 00:06:08,085 So one more thing we could do is to add 142 00:06:08,080 --> 00:06:11,740 some space in between the poles grids. So check this out. 143 00:06:11,740 --> 00:06:13,300 Okay, I'll go to my postgraduate work, 144 00:06:13,300 --> 00:06:14,610 either one for Europe, 145 00:06:14,610 --> 00:06:16,820 go to advanced on link 146 00:06:16,820 --> 00:06:20,590 the values and then I'll sets bottom pattern. 147 00:06:20,585 --> 00:06:22,465 Let's say 25 pixels. 148 00:06:22,460 --> 00:06:24,160 Nothing too drastic, 149 00:06:24,155 --> 00:06:27,005 will do the sentence for Asia as well. 150 00:06:27,005 --> 00:06:32,215 Laying bottom 25 pixels. 151 00:06:32,210 --> 00:06:33,680 And then last but not least we'll do 152 00:06:33,680 --> 00:06:35,350 for South America as well, 153 00:06:35,345 --> 00:06:40,315 on laying bottom 25 pixels. 154 00:06:40,310 --> 00:06:42,340 Let's go ahead now updates. 155 00:06:42,335 --> 00:06:46,085 And let us view the page. 156 00:06:46,085 --> 00:06:47,125 There it is. 157 00:06:47,120 --> 00:06:49,610 Okay, so we're gonna add some spacing 158 00:06:49,610 --> 00:06:52,580 for the blog title itself bought. Take a look at this. 159 00:06:52,580 --> 00:06:56,350 This looks pretty neat and it's actually quite cool. 160 00:06:56,345 --> 00:06:58,255 Let me just quickly make that quick change 161 00:06:58,250 --> 00:07:01,070 to the blog title. 162 00:07:01,070 --> 00:07:03,470 Let's add some spacing. So we're going to go, 163 00:07:03,470 --> 00:07:05,830 actually will go to the section button right here holding 164 00:07:05,825 --> 00:07:09,265 all the content will go to advanced on 165 00:07:09,260 --> 00:07:13,640 link and they will simply set 50 pixels for 166 00:07:13,640 --> 00:07:19,730 the top and then fit 50 pixels for the bottom as well. 167 00:07:19,730 --> 00:07:22,480 Okay, OR gates. 168 00:07:22,475 --> 00:07:24,205 Now, one more time, 169 00:07:24,200 --> 00:07:25,910 let's view the page. 170 00:07:25,910 --> 00:07:30,020 And voila law, There you go. 171 00:07:30,020 --> 00:07:32,780 That is the blog page all built out. 172 00:07:32,780 --> 00:07:36,170 However, I want to challenge you. 173 00:07:36,170 --> 00:07:38,260 To make things more interesting. 174 00:07:38,255 --> 00:07:41,195 I'll show you an example of what I'm talking about. 175 00:07:41,195 --> 00:07:43,855 Both with elemental and 176 00:07:43,850 --> 00:07:45,650 with the essential atoms are plugin. 177 00:07:45,650 --> 00:07:48,410 You have access to so many elements to 178 00:07:48,410 --> 00:07:51,700 make your pages look more exciting, more dynamic. 179 00:07:51,695 --> 00:07:54,475 As an example, for the essential atoms have 180 00:07:54,470 --> 00:07:57,380 activated yet another element. 181 00:07:57,380 --> 00:08:00,380 And it is the image accordion. 182 00:08:00,380 --> 00:08:01,460 You'll find it on 183 00:08:01,460 --> 00:08:02,870 the creative elements right here 184 00:08:02,870 --> 00:08:04,660 you'll see image accordion. 185 00:08:04,655 --> 00:08:06,995 Go ahead, activate it. 186 00:08:06,995 --> 00:08:08,815 Now let's go back to the page in 187 00:08:08,810 --> 00:08:10,940 here and let me show you one thing we could do. 188 00:08:10,940 --> 00:08:13,270 I'm going to edit with Elementor. 189 00:08:13,265 --> 00:08:15,815 We're going to make use of the image accordion. 190 00:08:15,815 --> 00:08:18,955 Now check this out again. I'm going to scroll down here. 191 00:08:18,950 --> 00:08:20,800 Are essential atoms. 192 00:08:20,795 --> 00:08:24,635 We have the image accordion element right here. 193 00:08:24,635 --> 00:08:27,235 I'm going to click drag and drop it 194 00:08:27,230 --> 00:08:30,640 just above you up. All right. 195 00:08:30,635 --> 00:08:33,175 Now before I begin to edit this, 196 00:08:33,170 --> 00:08:34,190 I'm going to add another 197 00:08:34,190 --> 00:08:36,460 heading just above the image accordion. 198 00:08:36,455 --> 00:08:42,275 And we can call this one latest posts. 199 00:08:42,275 --> 00:08:44,785 Just as an example, 200 00:08:44,780 --> 00:08:49,300 I'm actually going to add some padding from the top. 201 00:08:49,295 --> 00:08:52,505 Let's go 25 pixels. 202 00:08:52,505 --> 00:08:54,685 Just to give you some distance between 203 00:08:54,680 --> 00:08:56,750 the actual block title and let us posts. 204 00:08:56,750 --> 00:08:58,190 And I'll take a look at this again. 205 00:08:58,190 --> 00:09:01,630 I'm gonna go to my image accordion and invite here. 206 00:09:01,625 --> 00:09:03,055 We can do so many things for the 207 00:09:03,050 --> 00:09:04,780 very first according in here, 208 00:09:04,775 --> 00:09:06,415 I'm going to click inside, 209 00:09:06,410 --> 00:09:11,150 change the image in here to be one of the posts. 210 00:09:11,145 --> 00:09:13,705 This one right here, the Saint-Petersburg posts, 211 00:09:13,700 --> 00:09:15,310 I'm going to choose the featured image. 212 00:09:15,305 --> 00:09:16,655 Insert that. 213 00:09:16,655 --> 00:09:19,025 And now writer you'll see make it active. 214 00:09:19,025 --> 00:09:21,145 Yes, we want to make this, 215 00:09:21,140 --> 00:09:23,360 I couldn't active so that it will 216 00:09:23,360 --> 00:09:25,720 actually linked to the posts in here right now, 217 00:09:25,715 --> 00:09:26,875 I'm going to change that title. 218 00:09:26,870 --> 00:09:31,360 Two visits in St. Petersburg. 219 00:09:31,360 --> 00:09:33,800 That's going to be the title. 220 00:09:33,804 --> 00:09:38,324 And then in here would be the excerpts. 221 00:09:38,320 --> 00:09:40,210 This would be the except for the text, 222 00:09:40,210 --> 00:09:42,340 which we can change it now right 223 00:09:42,340 --> 00:09:45,030 here where you have enabled her to link, 224 00:09:45,025 --> 00:09:47,865 you want to show this and now right here, 225 00:09:47,860 --> 00:09:50,590 this is where you would add the link to the post. 226 00:09:50,590 --> 00:09:52,290 So let me just quickly do this. 227 00:09:52,285 --> 00:09:55,125 Let me view the page real quick. 228 00:09:55,120 --> 00:09:57,340 For days in St. Petersburg. 229 00:09:57,340 --> 00:10:02,160 So right here I'm going to grab this link right here. 230 00:10:02,155 --> 00:10:03,375 Again, notice that you don't need to 231 00:10:03,370 --> 00:10:05,200 copy the domain name itself. 232 00:10:05,200 --> 00:10:07,150 Just go with the forward slash and then the name of 233 00:10:07,150 --> 00:10:09,270 the post or the URL of the posts. 234 00:10:09,270 --> 00:10:10,510 I'm gonna copy this. 235 00:10:10,510 --> 00:10:13,990 Go right here, go back to Edit. 236 00:10:13,990 --> 00:10:16,890 Click on the very first image accordion in here. 237 00:10:16,885 --> 00:10:20,415 And now down here, title link. 238 00:10:20,410 --> 00:10:23,080 I'm going to go ahead now and simply paste that. 239 00:10:23,080 --> 00:10:25,000 So this will now link to the post or 240 00:10:25,000 --> 00:10:27,040 four days in St. Petersburg. 241 00:10:27,040 --> 00:10:30,540 Again, I could do the same thing for the second. 242 00:10:30,535 --> 00:10:32,415 According in here as well. 243 00:10:32,410 --> 00:10:35,070 Our list choose the one for the Rainbow Mountain. 244 00:10:35,065 --> 00:10:38,775 And then again, I can come in here and change the title 245 00:10:38,770 --> 00:10:43,180 to the Rainbow Mountain. 246 00:10:43,180 --> 00:10:48,010 Little quick, Rainbow Mountain, and so on. 247 00:10:48,010 --> 00:10:50,230 That's for the second accordingly, the third quarter. 248 00:10:50,230 --> 00:10:54,590 And I will just change this one to the one who Rapa Nui. 249 00:10:54,585 --> 00:10:56,815 And then of course, the last but not least, 250 00:10:56,810 --> 00:11:00,130 let's go with the one for Turkey, 251 00:11:00,125 --> 00:11:03,505 fashion and fashion in Istanbul. Insert that one. 252 00:11:03,500 --> 00:11:04,570 It is. 253 00:11:04,565 --> 00:11:06,665 I'm gonna go ahead and now updates. 254 00:11:06,665 --> 00:11:12,065 And now we'll take a look at the improved blog page. 255 00:11:12,065 --> 00:11:13,195 Now look at this. 256 00:11:13,190 --> 00:11:15,320 You've got blog posts, for instance, 257 00:11:15,320 --> 00:11:17,840 in Pittsburgh, you will have this rainbow mountain. 258 00:11:17,840 --> 00:11:19,580 They can click on this one for Rapa Nui, 259 00:11:19,580 --> 00:11:22,130 this one for fashion and Istanbul. 260 00:11:22,130 --> 00:11:23,840 And then if they're not interested, 261 00:11:23,840 --> 00:11:25,370 they can simply now scroll down to 262 00:11:25,370 --> 00:11:27,340 view the posts from Europe, 263 00:11:27,335 --> 00:11:30,325 Asia, South America, and so on. 264 00:11:30,320 --> 00:11:31,510 So this is one way, 265 00:11:31,505 --> 00:11:32,995 another way how you can make 266 00:11:32,990 --> 00:11:36,350 your pages more interactive, more dynamic. 267 00:11:36,350 --> 00:11:40,550 You can also add animation as well, 268 00:11:40,550 --> 00:11:42,770 like you can set it up so that you 269 00:11:42,770 --> 00:11:45,020 are maybe slides in from the left or from the right. 270 00:11:45,020 --> 00:11:46,970 I've shown you how to do that in the homepage. 271 00:11:46,970 --> 00:11:50,470 So just try to be creative. 272 00:11:50,465 --> 00:11:55,165 If you're not happy with how static your page feels like, 273 00:11:55,160 --> 00:11:57,260 you can always spice things up by making use of 274 00:11:57,260 --> 00:11:59,830 creative elements, adding some animation. 275 00:11:59,825 --> 00:12:03,595 And you will see a massive improvement 276 00:12:03,590 --> 00:12:06,440 in how dynamic your pages are. 277 00:12:06,440 --> 00:12:09,430 That's it for building out the blog page. 278 00:12:09,425 --> 00:12:10,615 Thank you so much for watching. 279 00:12:10,610 --> 00:12:13,440 I will see you in the next class.