1 00:00:00,000 --> 00:00:02,460 Alright, so let's start working with elements approved 2 00:00:02,460 --> 00:00:05,450 by rebuilding our header. 3 00:00:05,445 --> 00:00:07,055 And I'll show you how templates 4 00:00:07,050 --> 00:00:09,600 work with elements are pro. 5 00:00:09,600 --> 00:00:11,250 The first I'm gonna do is I'm gonna go over to 6 00:00:11,250 --> 00:00:13,500 the backend and let's go ahead and 7 00:00:13,500 --> 00:00:17,280 deactivate the elemental header and footer builder. 8 00:00:17,280 --> 00:00:18,750 We no longer need that. 9 00:00:18,750 --> 00:00:22,190 So I'm going to deactivate and let's just take a look at 10 00:00:22,190 --> 00:00:25,370 the non-existent header that 11 00:00:25,370 --> 00:00:28,600 we don't have anymore and of course, no footer. 12 00:00:28,595 --> 00:00:29,815 Now you can still see 13 00:00:29,810 --> 00:00:31,790 the one shovel misadventures 14 00:00:31,790 --> 00:00:33,320 and then the corporate texts in here, 15 00:00:33,320 --> 00:00:35,150 this is the hello theme 16 00:00:35,150 --> 00:00:38,440 displaying these foods are for us. 17 00:00:38,435 --> 00:00:40,015 All right, let's go back in here. 18 00:00:40,010 --> 00:00:44,120 And once you've installed and activated Elementor Pro, 19 00:00:44,120 --> 00:00:46,400 you will see right here where you 20 00:00:46,400 --> 00:00:48,820 have a template on the LM elemental, 21 00:00:48,815 --> 00:00:51,205 you'll see the theme builder. 22 00:00:51,200 --> 00:00:53,410 So go ahead, click in here. 23 00:00:53,405 --> 00:00:55,465 And right now you can see 24 00:00:55,460 --> 00:00:57,890 the different kinds of templates we can build. 25 00:00:57,890 --> 00:00:59,620 We're gonna build out the header. 26 00:00:59,615 --> 00:01:02,885 So I'm going to click on plus to add the header. 27 00:01:02,885 --> 00:01:04,825 The good thing about Elementor Pro 28 00:01:04,820 --> 00:01:06,470 is that you'll have access to 29 00:01:06,470 --> 00:01:10,360 a very wide variety of templates that you can use. 30 00:01:10,355 --> 00:01:12,155 You can see them right here. 31 00:01:12,155 --> 00:01:14,245 Different styles for the header. 32 00:01:14,240 --> 00:01:15,680 You can see some, you know, you'll have 33 00:01:15,680 --> 00:01:17,800 the logo on the left, 34 00:01:17,795 --> 00:01:19,325 the social media icons on the right, 35 00:01:19,325 --> 00:01:20,585 the main menu below. 36 00:01:20,585 --> 00:01:23,305 So you can just quickly insert any one of these templates 37 00:01:23,300 --> 00:01:26,050 that closely match the kind of design that you want. 38 00:01:26,045 --> 00:01:27,805 But I'm gonna go ahead and simply 39 00:01:27,800 --> 00:01:29,450 build us from scratch because I 40 00:01:29,450 --> 00:01:30,980 want to show you how this 41 00:01:30,980 --> 00:01:32,720 works with the elemental per elements. 42 00:01:32,720 --> 00:01:34,840 So I'm gonna close this. 43 00:01:34,835 --> 00:01:37,525 We're simply gonna rebuild just like before. 44 00:01:37,520 --> 00:01:38,900 I'm gonna come in here right now, 45 00:01:38,900 --> 00:01:40,730 create our two columns. Section. 46 00:01:40,730 --> 00:01:44,140 One there'll be about 30%, the other one about 70%. 47 00:01:44,135 --> 00:01:47,795 And now if I go over here to the elemental backend, 48 00:01:47,795 --> 00:01:49,435 and right now you can see we have 49 00:01:49,430 --> 00:01:52,090 the site logo right here. 50 00:01:52,085 --> 00:01:54,685 So I'm going to drag that one and drop it inside. 51 00:01:54,680 --> 00:01:57,410 Another thing is you might notice 52 00:01:57,410 --> 00:02:01,250 a change with the elemental pro logo element. 53 00:02:01,250 --> 00:02:02,960 That is the fact that you actually have 54 00:02:02,960 --> 00:02:05,740 access to the heights. 55 00:02:05,735 --> 00:02:07,825 The logo on the style with 56 00:02:07,820 --> 00:02:09,440 the logo element provided by 57 00:02:09,440 --> 00:02:11,590 the elemental header and footer builder plug-in. 58 00:02:11,585 --> 00:02:13,555 You don't have these options, 59 00:02:13,550 --> 00:02:15,200 so you can actually control the height 60 00:02:15,200 --> 00:02:16,720 of the logo from here. 61 00:02:16,715 --> 00:02:18,755 But we're not gonna touch that just yet. 62 00:02:18,755 --> 00:02:21,715 I'm gonna go over to the back-end again, 63 00:02:21,710 --> 00:02:24,770 choose the Nav Menu elements right here, 64 00:02:24,770 --> 00:02:26,120 drop it inside here. 65 00:02:26,120 --> 00:02:28,510 And of course, Main Menu will choose. 66 00:02:28,505 --> 00:02:32,075 Let's align to the right big points. 67 00:02:32,075 --> 00:02:33,325 We're gonna set this one to mobile. 68 00:02:33,320 --> 00:02:37,280 Remember, let's go over to style our typography. 69 00:02:37,280 --> 00:02:40,060 We'll make this one uppercase. 70 00:02:40,055 --> 00:02:42,175 Let's go back to the main session 71 00:02:42,170 --> 00:02:43,610 itself holding both columns. 72 00:02:43,610 --> 00:02:45,950 Let's make it full width. 73 00:02:45,950 --> 00:02:48,860 For the logo, I'm just go ahead 74 00:02:48,860 --> 00:02:51,500 and add a black background. 75 00:02:51,500 --> 00:02:53,660 So at least temporarily we can see the logo. 76 00:02:53,660 --> 00:02:55,670 Okay, So much too large. 77 00:02:55,670 --> 00:02:57,560 Let's go back in here. 78 00:02:57,560 --> 00:03:04,790 For the max-width, we'll just go ahead and choose 75%, 79 00:03:04,790 --> 00:03:06,380 just like we did previously. 80 00:03:06,379 --> 00:03:08,569 Know, nipped to use the height in 81 00:03:08,570 --> 00:03:10,940 this case, one more change. 82 00:03:10,940 --> 00:03:15,050 Let's align the menu items vertical, 83 00:03:15,050 --> 00:03:16,960 align them to the middle. 84 00:03:16,955 --> 00:03:18,835 And there you go. 85 00:03:18,830 --> 00:03:21,140 And of course, the color as well. 86 00:03:21,140 --> 00:03:21,890 I forgot about that. 87 00:03:21,890 --> 00:03:25,140 Let's change the color. Ticks ClO2 primary. 88 00:03:25,144 --> 00:03:27,054 And that is that. 89 00:03:27,050 --> 00:03:28,360 Now take a look at this. 90 00:03:28,355 --> 00:03:30,605 Down here you have publish. 91 00:03:30,605 --> 00:03:32,105 When you hit Publish, 92 00:03:32,105 --> 00:03:34,385 this is where elements are pool and I'll say, hey, 93 00:03:34,385 --> 00:03:38,435 where would you like to display this particular template? 94 00:03:38,434 --> 00:03:40,374 We're going to add the condition, 95 00:03:40,370 --> 00:03:41,930 not the antacid because 96 00:03:41,930 --> 00:03:43,460 this is going to be for the homepage. 97 00:03:43,460 --> 00:03:46,490 I'm gonna come in here right now and choose singular. 98 00:03:46,490 --> 00:03:48,040 And then for singlets will say, 99 00:03:48,035 --> 00:03:50,225 okay, all single pages, no, 100 00:03:50,225 --> 00:03:54,395 wanted to split specifically on the front page. 101 00:03:54,395 --> 00:03:55,775 So I'm going to choose that one. 102 00:03:55,775 --> 00:03:57,805 And that is I'm gonna go 103 00:03:57,800 --> 00:04:00,170 ahead and I'll simply save and close. 104 00:04:00,170 --> 00:04:03,790 And that is it. 105 00:04:03,785 --> 00:04:07,225 Let's go ahead now and refresh. 106 00:04:07,220 --> 00:04:10,580 And I'm gonna show you something very, very interesting. 107 00:04:10,580 --> 00:04:13,350 All right, let me do a hard refresh. 108 00:04:16,540 --> 00:04:19,720 So here's a thinner line. 109 00:04:19,715 --> 00:04:22,385 You can see that we do have 110 00:04:22,385 --> 00:04:25,815 the menu items right here showing up. 111 00:04:25,815 --> 00:04:29,205 Oh, by the way, the hover effect that he can see, 112 00:04:29,200 --> 00:04:30,430 the dash apparent on 113 00:04:30,430 --> 00:04:33,490 the age menu item that's provided by Elemental pool, 114 00:04:33,490 --> 00:04:35,560 menu, menu element by default. 115 00:04:35,560 --> 00:04:38,160 So you can change that on the hover effect if you want to 116 00:04:38,155 --> 00:04:40,545 bore the manager here at now 117 00:04:40,540 --> 00:04:43,170 is that we no longer see the logo. 118 00:04:43,165 --> 00:04:45,895 We can see the menu items, but we don't see the logo. 119 00:04:45,895 --> 00:04:47,895 What is happening here? 120 00:04:47,890 --> 00:04:50,530 This is where I would like to introduce to you 121 00:04:50,530 --> 00:04:53,980 the concept of the Z index. 122 00:04:53,980 --> 00:04:55,710 Now let's go back in here. 123 00:04:55,705 --> 00:04:57,515 Very first of all, we move 124 00:04:57,519 --> 00:05:01,479 the background color for the header. 125 00:05:01,480 --> 00:05:02,800 We no longer needed. 126 00:05:02,800 --> 00:05:03,940 But take a look at this. 127 00:05:03,940 --> 00:05:06,180 I'm gonna go over to advanced. 128 00:05:06,175 --> 00:05:08,565 Right here you have this. 129 00:05:08,565 --> 00:05:11,125 Option but very, very important, 130 00:05:11,120 --> 00:05:13,760 very powerful called the z-index. 131 00:05:13,760 --> 00:05:15,950 I'm gonna give this one a value of 132 00:05:15,950 --> 00:05:21,610 two updates. Let's go back in here. 133 00:05:21,605 --> 00:05:24,485 Let's do a very hard refresh. 134 00:05:25,450 --> 00:05:29,370 And just like that. 135 00:05:29,590 --> 00:05:33,850 Now you can see the logo appearing. 136 00:05:33,845 --> 00:05:34,895 Board. 137 00:05:34,895 --> 00:05:35,845 Hold on a second. 138 00:05:35,840 --> 00:05:37,280 What exactly just happened? 139 00:05:37,280 --> 00:05:40,850 See this Z index value right here. 140 00:05:40,850 --> 00:05:43,600 Whenever you have one element, 141 00:05:43,595 --> 00:05:47,075 one section overlapping another section, 142 00:05:47,075 --> 00:05:51,065 you might want to be able to tell Elemental 143 00:05:51,065 --> 00:05:52,945 which of those elements you 144 00:05:52,940 --> 00:05:55,110 want to show first basically, which won't. 145 00:05:55,110 --> 00:05:57,830 You want to bring in front of the other? 146 00:05:57,830 --> 00:06:00,100 In this case, right now we do have 147 00:06:00,095 --> 00:06:04,375 the binary image overlapping our header. 148 00:06:04,370 --> 00:06:07,310 We want the header to be influenced so we can 149 00:06:07,310 --> 00:06:10,040 see the logo and the main menu. 150 00:06:10,040 --> 00:06:12,760 As such, you will have to give 151 00:06:12,755 --> 00:06:15,605 a higher z-index number 152 00:06:15,605 --> 00:06:19,915 to the element that you want to appear in front. 153 00:06:19,910 --> 00:06:24,650 Since we've given the header the Z index value of two. 154 00:06:24,649 --> 00:06:28,789 Let me actually go to the section holding our banana. 155 00:06:28,790 --> 00:06:31,310 So let me edit with elemental. 156 00:06:31,305 --> 00:06:37,315 Let's go to the navigator section right here, advanced. 157 00:06:37,315 --> 00:06:39,465 You can see right here that we don't have any value for 158 00:06:39,460 --> 00:06:42,880 the Z index for the section holding the banner. 159 00:06:42,880 --> 00:06:44,220 But if I came in here right now 160 00:06:44,215 --> 00:06:46,345 and I give it a value of three. 161 00:06:46,344 --> 00:06:48,464 Now you can see we no longer see the logo, 162 00:06:48,460 --> 00:06:51,070 we no longer see the main menu either. 163 00:06:51,070 --> 00:06:52,420 That's because the xin index 164 00:06:52,420 --> 00:06:53,680 value of this section holding 165 00:06:53,680 --> 00:06:56,680 the banana is now greater than two. 166 00:06:56,680 --> 00:06:58,780 But if I give it one now you can see we have 167 00:06:58,780 --> 00:07:00,840 the main menu and the logo. 168 00:07:00,835 --> 00:07:03,325 That's exactly how the Z index works. 169 00:07:03,325 --> 00:07:05,235 Now, a question you might have an, 170 00:07:05,230 --> 00:07:06,510 a very good question is, 171 00:07:06,505 --> 00:07:08,445 Alex, hold on a second. 172 00:07:08,440 --> 00:07:10,750 Before we gave the value of 173 00:07:10,750 --> 00:07:13,830 this index of two to the header. 174 00:07:13,830 --> 00:07:16,490 How can we still solve the main menu? 175 00:07:16,489 --> 00:07:18,489 But we didn't see the logo. 176 00:07:18,485 --> 00:07:20,875 I will be 100% honest with you. 177 00:07:20,870 --> 00:07:24,550 I'm not exactly sure why that happened. 178 00:07:24,545 --> 00:07:27,495 I'm guessing maybe there is some code 179 00:07:27,499 --> 00:07:29,539 within elements that always gives 180 00:07:29,540 --> 00:07:32,470 priority to the main menu to always show. 181 00:07:32,465 --> 00:07:34,075 Again, it might be something very, 182 00:07:34,070 --> 00:07:35,990 very simple that I'm simply missing. 183 00:07:35,990 --> 00:07:37,340 I'm not entirely sure on edge. 184 00:07:37,340 --> 00:07:39,730 Apologize for that, but I'd like to be honest with you. 185 00:07:39,725 --> 00:07:41,765 But just take it for what it is. 186 00:07:41,765 --> 00:07:43,495 Whenever you want to introduce kind of situation 187 00:07:43,490 --> 00:07:45,650 where you have one element overlapping the 188 00:07:45,650 --> 00:07:46,670 other and you want that 189 00:07:46,670 --> 00:07:49,040 auto elements behind the show in front 190 00:07:49,040 --> 00:07:53,450 simply give it a higher Z index value. 191 00:07:53,450 --> 00:07:55,480 One thing you may have noticed is 192 00:07:55,475 --> 00:07:58,015 the sudden whitespace that's 193 00:07:58,010 --> 00:08:00,170 not appearing right here at the very top. 194 00:08:00,170 --> 00:08:01,880 And this happens because 195 00:08:01,880 --> 00:08:04,460 elemental by default in many instances, 196 00:08:04,460 --> 00:08:09,230 we'll add a pattern of ten pixels around the elements. 197 00:08:09,230 --> 00:08:13,580 So one way to bypass these kind of issue, 198 00:08:13,580 --> 00:08:15,070 it's a simply edit 199 00:08:15,065 --> 00:08:17,035 the section that has 200 00:08:17,030 --> 00:08:19,550 the whitespace in this case right now it's my header. 201 00:08:19,550 --> 00:08:25,090 So let me go ahead and edit the elemental header. 202 00:08:25,085 --> 00:08:27,655 Gonna go to this section itself. 203 00:08:27,650 --> 00:08:29,000 So edit section and then 204 00:08:29,000 --> 00:08:31,060 invite here where you have the columns gap. 205 00:08:31,055 --> 00:08:33,245 I'm gonna say no gap, 206 00:08:33,245 --> 00:08:35,245 no gap at all. 207 00:08:35,240 --> 00:08:38,240 Let's update basically by saying no gap. 208 00:08:38,240 --> 00:08:41,170 We're saying, Hey, we don't want any patterns anywhere. 209 00:08:41,165 --> 00:08:44,905 Now, this will get read off the whitespace. 210 00:08:44,900 --> 00:08:47,840 But now note that because we've said No, no gaps at all. 211 00:08:47,840 --> 00:08:50,870 Now the column holding a logo no longer has 212 00:08:50,870 --> 00:08:53,970 any pattern between the logo and the top of our screen. 213 00:08:53,965 --> 00:08:57,635 So very simply just go to the column holding the logo. 214 00:08:57,635 --> 00:08:59,995 Go to advanced pattern right here, 215 00:08:59,990 --> 00:09:02,510 we just give it say, ten pixels of padding at the top. 216 00:09:02,510 --> 00:09:06,740 Updates that will solve the issue or incidences. 217 00:09:06,740 --> 00:09:08,900 So these are some of the very little 218 00:09:08,900 --> 00:09:09,950 annoying issues you might run 219 00:09:09,950 --> 00:09:13,600 into when using elemental and how to bypass them. 220 00:09:13,595 --> 00:09:14,555 But almost done. 221 00:09:14,555 --> 00:09:16,825 Let's go ahead and create the mobile header for 222 00:09:16,820 --> 00:09:20,110 our header for the front page rather. 223 00:09:20,105 --> 00:09:23,095 And is the exact same thing that we did previously. 224 00:09:23,090 --> 00:09:25,070 We're going to come in here right now, 225 00:09:25,070 --> 00:09:27,560 duplicate the entire section. 226 00:09:27,559 --> 00:09:29,119 And let's come out, come down here to 227 00:09:29,120 --> 00:09:31,630 the mobile header edit section. 228 00:09:31,625 --> 00:09:35,905 We're gonna go to style classic color of black. 229 00:09:35,900 --> 00:09:39,470 And then what do we need? What else do we need to do? 230 00:09:39,470 --> 00:09:43,130 We need to switch to the responsive mode. 231 00:09:43,130 --> 00:09:45,210 Go to mobile. 232 00:09:45,214 --> 00:09:47,134 And now right here, 233 00:09:47,135 --> 00:09:50,755 edit column, we're gonna say 50%. 234 00:09:50,750 --> 00:09:55,100 Do the same thing for the column holding the main menu. 235 00:09:55,100 --> 00:09:57,520 And then say 50%. 236 00:09:57,515 --> 00:09:59,615 We can edit the menu right here, 237 00:09:59,615 --> 00:10:01,865 aligned to the right. 238 00:10:01,865 --> 00:10:03,505 Maybe make it a little bit bigger. 239 00:10:03,500 --> 00:10:05,300 So let's go to style. 240 00:10:05,300 --> 00:10:08,180 Come down here to the toggle button. 241 00:10:08,180 --> 00:10:11,990 The size, make it a little bit big. 242 00:10:11,990 --> 00:10:14,210 For the logo as well. 243 00:10:14,210 --> 00:10:18,880 Go to style, max width, 100%. 244 00:10:18,875 --> 00:10:21,505 Yeah, we also need to do the show 245 00:10:21,500 --> 00:10:24,340 hide or options, so advanced. 246 00:10:24,335 --> 00:10:27,755 Let's go to the responsive. 247 00:10:27,750 --> 00:10:30,670 For this section and this section holding 248 00:10:30,670 --> 00:10:33,270 the logo and demand menu. 249 00:10:33,265 --> 00:10:34,965 We're going to go in here to 250 00:10:34,960 --> 00:10:37,440 Advanced and then responsive. 251 00:10:37,435 --> 00:10:39,405 I'm going to say hide on deck, Stop, 252 00:10:39,400 --> 00:10:42,940 Hide on tablet, but then show on mobile. 253 00:10:42,940 --> 00:10:45,820 Let's now go to the old original header, 254 00:10:45,820 --> 00:10:47,130 edit this section. 255 00:10:47,125 --> 00:10:50,685 Go to Advanced, go to responsive. 256 00:10:50,680 --> 00:10:54,070 Simply hide on mobile, and that's it. 257 00:10:54,070 --> 00:10:55,830 So let's go ahead and update. 258 00:10:55,825 --> 00:10:57,445 Hopefully I didn't forget 259 00:10:57,445 --> 00:11:00,205 anything that's come back in here. 260 00:11:00,205 --> 00:11:02,935 Refresh the page. 261 00:11:03,120 --> 00:11:04,930 Let's see what we have. 262 00:11:04,930 --> 00:11:07,510 Okay, so original ahead or I dare. 263 00:11:07,510 --> 00:11:12,040 And this is oblique view looking good. 264 00:11:12,035 --> 00:11:15,445 And then now this is gonna be the mobile view. 265 00:11:15,440 --> 00:11:19,430 And David is thus exactly how to do 266 00:11:19,430 --> 00:11:22,370 the exact same thing on Elementor product we 267 00:11:22,370 --> 00:11:26,230 did with the Elementor header and footer are plugin. 268 00:11:26,225 --> 00:11:29,825 One final thing before I close this video, 269 00:11:29,825 --> 00:11:32,605 let us go to the back-end. 270 00:11:32,600 --> 00:11:35,500 Now on the templates. 271 00:11:35,495 --> 00:11:39,115 I'm sorry, under the theme builder 272 00:11:39,110 --> 00:11:41,590 rather than our templates on a theme builder, 273 00:11:41,585 --> 00:11:45,145 this is where you will see the new header you've created. 274 00:11:45,140 --> 00:11:48,680 You can click inside to edit. 275 00:11:48,680 --> 00:11:50,510 Once again. 276 00:11:50,510 --> 00:11:53,150 Then if you want to change the name, 277 00:11:53,150 --> 00:11:54,350 it's very, very simple. 278 00:11:54,350 --> 00:11:55,970 You come down here to the Settings button 279 00:11:55,970 --> 00:11:57,220 and then right here, 280 00:11:57,215 --> 00:12:02,515 we can call this one the home header. 281 00:12:02,510 --> 00:12:05,030 We can call it home, 282 00:12:05,030 --> 00:12:06,920 home, the home header basically. 283 00:12:06,920 --> 00:12:10,130 And then we can give the order header the name of global. 284 00:12:10,130 --> 00:12:13,430 If you want to change the conditions for this plane, 285 00:12:13,430 --> 00:12:15,140 the head or maybe you want to use 286 00:12:15,140 --> 00:12:17,170 the same header on a different page. 287 00:12:17,165 --> 00:12:21,505 Down here, you have the save options, you click in there. 288 00:12:21,500 --> 00:12:24,890 Now here you will have access to the display. 289 00:12:24,890 --> 00:12:26,600 Our conditions option. 290 00:12:26,600 --> 00:12:28,190 This is where you can now go into, 291 00:12:28,190 --> 00:12:31,030 now maybe change to a different page and so on. 292 00:12:31,025 --> 00:12:34,315 And that is basically it for 293 00:12:34,310 --> 00:12:38,050 creating the homepage header, 294 00:12:38,045 --> 00:12:40,625 both on the desktop and mobile versions 295 00:12:40,625 --> 00:12:41,905 using Elementor Pro. 296 00:12:41,900 --> 00:12:42,580 Thank you for watching. 297 00:12:42,575 --> 00:12:44,705 I will see you in the next class.