Hero

10 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$10
List Price:  $49
You save:  $39
€9.34
List Price:  €45.78
You save:  €36.43
£7.99
List Price:  £39.15
You save:  £31.16
CA$13.71
List Price:  CA$67.21
You save:  CA$53.50
A$15.31
List Price:  A$75.02
You save:  A$59.71
S$13.59
List Price:  S$66.60
You save:  S$53.01
HK$78.17
List Price:  HK$383.05
You save:  HK$304.88
CHF 9.12
List Price:  CHF 44.70
You save:  CHF 35.58
NOK kr110.78
List Price:  NOK kr542.86
You save:  NOK kr432.07
DKK kr69.69
List Price:  DKK kr341.49
You save:  DKK kr271.80
NZ$16.86
List Price:  NZ$82.62
You save:  NZ$65.76
د.إ36.72
List Price:  د.إ179.96
You save:  د.إ143.24
৳1,097.37
List Price:  ৳5,377.11
You save:  ৳4,279.74
₹834.69
List Price:  ₹4,090
You save:  ₹3,255.31
RM47.55
List Price:  RM233.04
You save:  RM185.48
₦12,350
List Price:  ₦60,515
You save:  ₦48,165
₨2,784.96
List Price:  ₨13,646.32
You save:  ₨10,861.36
฿369.49
List Price:  ฿1,810.52
You save:  ฿1,441.03
₺323.67
List Price:  ₺1,586
You save:  ₺1,262.32
B$51.94
List Price:  B$254.50
You save:  B$202.56
R186.11
List Price:  R911.98
You save:  R725.86
Лв18.27
List Price:  Лв89.54
You save:  Лв71.27
₩13,754.89
List Price:  ₩67,398.96
You save:  ₩53,644.07
₪37.47
List Price:  ₪183.62
You save:  ₪146.15
₱576.35
List Price:  ₱2,824.16
You save:  ₱2,247.80
¥1,552.66
List Price:  ¥7,608.07
You save:  ¥6,055.40
MX$169.61
List Price:  MX$831.10
You save:  MX$661.49
QR36.42
List Price:  QR178.47
You save:  QR142.05
P142.03
List Price:  P695.96
You save:  P553.92
KSh1,337.43
List Price:  KSh6,553.42
You save:  KSh5,215.99
E£479.87
List Price:  E£2,351.38
You save:  E£1,871.50
ብር572.05
List Price:  ብር2,803.04
You save:  ብር2,230.99
Kz8,365
List Price:  Kz40,988.50
You save:  Kz32,623.50
CLP$9,603.80
List Price:  CLP$47,058.62
You save:  CLP$37,454.82
CN¥72.39
List Price:  CN¥354.74
You save:  CN¥282.34
RD$582.01
List Price:  RD$2,851.88
You save:  RD$2,269.86
DA1,345.67
List Price:  DA6,593.78
You save:  DA5,248.11
FJ$22.62
List Price:  FJ$110.83
You save:  FJ$88.21
Q77.72
List Price:  Q380.83
You save:  Q303.11
GY$2,093.19
List Price:  GY$10,256.67
You save:  GY$8,163.47
ISK kr1,402.40
List Price:  ISK kr6,871.76
You save:  ISK kr5,469.36
DH101.11
List Price:  DH495.47
You save:  DH394.35
L176.85
List Price:  L866.57
You save:  L689.71
ден575.11
List Price:  ден2,818.07
You save:  ден2,242.95
MOP$80.57
List Price:  MOP$394.83
You save:  MOP$314.25
N$186.36
List Price:  N$913.16
You save:  N$726.80
C$367.25
List Price:  C$1,799.52
You save:  C$1,432.27
रु1,342.65
List Price:  रु6,579.02
You save:  रु5,236.37
S/37.63
List Price:  S/184.43
You save:  S/146.79
K38.59
List Price:  K189.10
You save:  K150.51
SAR37.50
List Price:  SAR183.77
You save:  SAR146.27
ZK267.73
List Price:  ZK1,311.91
You save:  ZK1,044.17
L46.48
List Price:  L227.79
You save:  L181.30
Kč234.81
List Price:  Kč1,150.59
You save:  Kč915.77
Ft3,637.38
List Price:  Ft17,823.17
You save:  Ft14,185.79
SEK kr109.28
List Price:  SEK kr535.50
You save:  SEK kr426.22
ARS$8,762.29
List Price:  ARS$42,935.22
You save:  ARS$34,172.93
Bs69.09
List Price:  Bs338.55
You save:  Bs269.45
COP$39,036.83
List Price:  COP$191,280.47
You save:  COP$152,243.64
₡5,102.25
List Price:  ₡25,001.03
You save:  ₡19,898.78
L247.69
List Price:  L1,213.72
You save:  L966.02
₲74,931.09
List Price:  ₲367,162.36
You save:  ₲292,231.27
$U383.35
List Price:  $U1,878.43
You save:  $U1,495.07
zł40.46
List Price:  zł198.29
You save:  zł157.82
Already have an account? Log In

Transcript

Alright, welcome back guys. Now let's create the hero section of our homepage. Okay, so go to pages all pages, look for homepage, click on it. Now before clicking on edit with Elementor make sure the content layout is full with the sidebar is default and the title is disabled. Okay. Now click on edit with Elementor and it will take you here.

So this is how the element or workspace looks like. towards the left we have all these elements, okay elements or widgets, as you call them. And towards the right is our web page. Okay, now we need to make a carousel. All right, so let's search for the carousel widget here. All right.

As you can see, there is this testimonial carousel. But we don't need that one. We need the image cosel but we are not going to use this one because this does not provide us with the functions that we need. Okay, now let's scroll down more. Let's scroll down a search for carousel. Yeah, premium add ons, we need this one premium carousel.

All right, so pick it up and drag it here. Now, to use this premium carousel, we need templates. Okay, and we have to create those templates. I created one already, which is this one one. So as you can see, I have placed this image in this template, okay. So let me delete this for now and create some templates, which are in our hero section.

Okay, so let's, let's drag this image here. Alright, and select our image. All these files are there in your exercise. Resources file, okay, so insert media. Now it reaches here. Now what we need to do is make the image size full.

Now, go to link, okay, and click on custom URL. Okay, now let's open our website crazy design dot space. Okay, let's go to men and copy this link. All right, copy, go back here and paste it here. So this photograph is now linked with our category men. Okay.

Now what we need to do is go to this thing, navigator thing. Okay. This will help us understand how our webpages being made or right oh yeah before one more thing. Select this section from the next data. All right, select the section thing in the properties. Make this make distress section two Yes, content with full weight, and columns gap, no gap.

Now as you can see this images, this image covers the entire width of this web page. Okay? Now, right click on the section and save as template. Let's name it hero one. All right, and save. Alright, it is saved.

Let's close this. Now click on the image. Alright, choose image and select this one. Insert media. Go back to our website, click on women. All right, copy this link, copy, go back and replace this one.

With this with the link of the category. Women are right now again Go to section right click and save as template. Let's name this hero to hero two. All right, and save. Let's close this again. Now go back to image again.

Select the third image which is this one insert media. Now go back here let's select bags. copy this link, paste it here and save it. Alright, save as template hero three, save and glows. again click here, select this one and insert media okay let me just fast forward from here. All right, I'm done saving all the hero sections now let's delete this Bring our carousel back.

Premium carousel. Okay, click on the section distinct the six dots and agree shoulder section properties. Let's make it full width. So straight section content with full width, columns gap, no gap. Now, go to navigator premium carousel and content type select repeater templates, add item content. Now we don't have our templates here.

That is because we need to refresh it first. So let's update it from here. and refresh. Now open the section and select premium carousel. Okay, template content. As you can see, we have word templates here.

Okay, so let's select hero one now. Add Item, content hero to add item Hero three, and here hero four and lastly, Hero five. All right. Now let's open slide settings in finite loop. Yes. Fade transitions.

Okay, let's turn it on zoom effect no transition speed. Let's increase it to 800. Do you want to do you want those slides to play automatically? Yes. autoplay speed 5000 Okay, animations. Let's select fade in.

All right. Now additional settings. Do you want draggable effect? Yes. touchmove Yes. Okay.

Let's just go through all these settings and turn on the ones that you want to and turn off the ones which you don't want to now pause on how I want it right. Now let's go to style. Okay. And select the navigation arrows. All right, I want these one but I want Remove these dots. I think it's in content.

Yeah, yeah. From here, remove the dots. Alright, let's go back here. Okay, now increase the size of the arrows. Where are they? Where are they?

Here they are. Okay. And position. All right. The color of the arrow. Let's make it white.

Okay, and our color. Let's make it gray ish. All right. Yeah. Um, yeah, I think that's all. As you can see, we have a carousel which is changing nicely.

But we need to remove this gap. Let me show you why. So let me update this. Okay, and preview changes. As you can see there is this gap here. Okay.

Oh and this weird thing is also happening. Alright, so let's just fix all these things. So first let's remove the SCAP so select the section Go to Advanced from the margin unlock it and top go to go into the negative direction okay and when is let's see when it touches the top yeah now updated as you can see it is touching the top. Now let's fix this. This is happening because we made the header transparent. To fix that go to customize and here go to header general and remove this add transparent header and hide when you are scrolling and turn on stick only the menu alright Not top header, let's make the background color to white.

Okay, white. All right, and publish. Now let me close this. And let's see if it worked. Indeed it worked. All right.

So this way our hero section is done. And when I click on this, it takes me to the bags. All right. In the next video, we'll make it responsive. Let me show you what I mean by that. So when I rescale, my browser as you can see, as the screen goes smaller, our cursor looks very bad, as you can see this.

So in the next one, we'll create one for, especially for devices with smaller screens, such as mobile phones. Alright, so I'll see you there. Bye

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.