Elementor Landing Page Website Design | WordPress Elementor Pro Tutorial

[Music] hey what's going on guys in this tutorial i'm going to show you how to create this beautiful interactive landing page portion using elementor page builder i have divided this video into three different parts first i will show you how to create this page from scratch i mean how to design this whole page how to do all the typography everything you can see inside this landing page also i will show you how to create these beautiful thumbnail images with nice hover effects and when you click on this thumbnail image you see the big image changing here like here if i click on this black can image here we can see the big image is changing instantly secondly i will show you another cool option like whenever you will click on any of these thumbnails not only this big image also the background of this whole section will be changed with nice transition effect and then lastly i will show you how to make this page responsive 100 responsive on tablet device and mobile device and like i said i will be showing you everything step by step so without further ado let's now go inside elementor page builder all right so first let's take a section and i'm taking two column structure now let's give it a height so here i'm giving it a vh and let's set the height to 85 vh now let's give it a background color so from here background type select a background color and the color code is hash 0865b a now here under advanced tab let's add some padding and i want to give it in percentage let's add two percent of padding now first here inside the left column i'm adding a heading widget and here i wanted to say that's what let's do a bit of styling so first i'm making the text color to white color now from typography make the phone family to pop ins and here font size make it 60 pixel font weight let's make it 900 from transform let's make it uppercase and line height i'm making it 0.8 now let's just duplicate this text and here instead i'm typing i like with the second heading i just wanna increase its font size so from here font size i'm making it 126 pixel now underneath the second heading i'm just dragging a text editor widget here so to make it more content i'm just duplicating this text couple more time also let's make its fonts color to the pure white color and you know we get some extra spaces underneath the paragraph so i want to reduce that from under advanced tab just unbind the margin and on bottom i'm adding some negative margin minus 20 pixel of margin all right now underneath this paragraph here i'm adding a button widget first instead of click here i'm typing a view all products now let's do a bit styling so first typography here i'm just making the font weight to 600 and transform to uppercase and then let's make the text color to black color and here the background color i'm making it to white then let's add 25 pixel of border radius and padding first unbind it on the top and bottom i'm adding 10 pixel and on the right and left i'm adding 20 pixel of padding all right now within this right column here i'm adding an image widget here so first let's choose the image by the way for this tutorial i will be using these four images and i will put the image download link in the description all right so first i'm selecting this blue pepsi can let's insert this image i just wanna reduce its width so go under style tab and here with let's make it 43 percent all right now on the right side of this image i want to add social media icons and i want them to vertically aligned so let's do it very quickly from here i'm searching for social icons here you go just drag it underneath this pepsi can now first do a bit of styling so from here color to custom color the primary color let's make a transparent and here the secondary color i'm just making it white now to make it vertically aligned we just need to go under advanced tab from here just expand the positioning first of all here i'm making the width to custom and i'm giving the custom width to 48 pixel now let's position it in this place on the right side so from here first position let's make it absolute and then here horizontal orientation i wanna start it from the right side so i'm selecting right and here offset i'm giving a 20 pixel then here is the vertical orientation let's keep its position to top but here i'm giving is offset in percentage and let's make the offset to 35 percent all right now i will be adding the thumbnails so to do that let's click on the rubik's cube icon and here i'm dragging an inner section underneath this image now let's set the width of this inner section from here i'm giving its width to 180 pixel now first within the left column here i'm dragging an image widget so let's choose the image as it would be our first thumbnail so let's select the blue can now insert it now i just want to reduce its height so just go under style tab i'm giving its height to 65 pixel and from here object fit i'm making it contain it looks perfect to me let's now just duplicate this whole column i'm duplicating it now let's duplicate it one more time and let's just delete the empty column from here and you know now i will be changing the images so for the second one let's select another image it would be the silver or white color can and for the third one i'm selecting the black can this one let's insert it now i wanna align these thumbnails at the center of this page but technically we can't do that using elementor page builder only i mean there is no drag and drop option for that so to achieve that we need to write some custom css code and we need to apply that custom css code with this inner section so first let's select this inner section from under its advanced tab let's now scroll down and here you can find the custom css option let's now expand it by the way custom css is only available on elementor pro i will put elementor pro purchase link in the description if you don't have elementor pro already you can get that from the description link alright let's now write some css code inside here but no worries because i already have retained the css code for you all you need to do you just need to go to jim fahad digital.com i will put this pages link in the description from that page if you scroll down a bit here you will find thumbnails centered css just copy this css snippet from here and then inside elementor page builder paste the css code inside this field and boom it's instantly centered by the way this code is not hard coded i mean you are comfortable to change any of these values like here you can see the bottom value i have given here minus 10 vh if you wanna adjust that for example instead of minus 10 you can give here minus 15 or just minus five but i wanna keep it minus 10 vh and then i wanna add an over effect with each of these thumbnails so to do that let's just select this thumbnail image now go under this images advanced tab and open the custom css option and also i have written this css code for you just go to jim fahad digital.com and here if you scroll down you can see thumbnails over animation css just copy this css snippet from here and then inside elementor page builder just paste the css code now have a look on the first thumbnail if we hover over on it you see it smoothly pops up a bit more than other thumbnails it looks really cool to me so now i want to apply this on other thumbnails and you know it's pretty easy just right click here copy it then right click over other image and then click on paste style let's do the same with this image click on paste style now we have got this over effect with all of these thumbnails cool now we need to make these thumbnails work i mean whenever we will click on any of these thumbnails that specific image will be shown here on this big image place so to achieve it we need to write some custom javascript code so let's do it very quickly from here click on this rubik's cube icon and here i'm searching for html widget here it is this is the html widget we can drag this widget anywhere of this page so if you want you can insert it anywhere of your page so here i'm just dragging this html widget here outside of this section and don't worry about this appearance of this html code because the html codes will only be visible inside elementor page builder your visitors cannot see these html codes now to get the javascript snippet again go inside jimforthedigital.com and if you scroll down a bit here you can see javascript snippet for thumbnails just copy this snippet from here i'm explaining this code a bit later now go inside eliminator page builder and inside html code field just paste the javascript snippet now if you want me to explain this javascript or jquery code it's pretty simple if you are comfortable with javascript or jquery you see it's just 12 lines of codes and i have done nothing crazy you see i have just added a class that's name is pepsi so that's basically this right big image then whenever you will click on any of these thumbnails this image will appear in this place now to make it work we just need to two more things number one thing let's first make the left sidebar minimized all right so now first thing you need to do to make it work first of all just select this image widget then go under its advanced tab and here css classes add the class name that's pepc remember you need to put exactly this class name pepsi and then the second thing you need to do you need to add some data attribute with each of these thumbnails so let's just select the first thumbnail go under its advanced tab from there let's open the attributes option if you are not familiar with attributes attributes is basically more information that you can give with html tags if you are comfortable with html you may write attributes like key name then equal the value name but here inside elementor page builder the structure is a bit different i mean the writing structure is different here first you need to put the key name then a pipe symbol and then you need to write the value name but you know you don't need to write here anything on your hand because i already have written this code for you just go to jimfah digital.com from here if you scroll down you can see thumbnail custom attribute so from there let's just copy this snippet then go inside elementor page builder inside these attributes paste the code here if you have a look it says data dash gym then a pipe symbol and then you can see image underscore url you need to replace this image under score url with the real image link let me make it easier for you so as we are doing work with the first thumbnail image to get the link of this image just click over this image go under its content tab if we select the image then here on the right side you can see the file url name that's basically this images link you can copy the link from here or you can just simply click here copy url to clipboard then now close it again go under its advanced tab open the attributes then here instead of image url first i'm removing it and then i'm pasting the image link here all right now i'm copying this whole custom attribute from here let's now select the second thumbnail go under its advanced tab now open the attributes here i'm pasting the custom attribute snippet as the second image url is different so here instead of pepsi 001 the second image name is 002 here but if your image url is different just put the image url in this place now i'm doing the same with the third one go under its advanced tab open the attributes paste the snippet and put the third image url here now have a look if we now click on the first thumbnail or second thumbnail nothing happens here why is that because this wouldn't work inside elementor page builder if you wanna see it in action you just need to click here on this green update button and then click on this eyeball icon to preview the page now have a look if we now click on the second thumbnail you see the image is changing if we click on the third image i mean on the third thumbnail we can see this bigger image is changing also if we click on the first thumbnail the image has been changed cool now we will do the second portion of this tutorial like i said when we will be clicking on any of the thumbnail not only this big image but also the background color will be changed with a beautiful transition effect but before that i wanna add a header with this page so let's go back inside elementor page builder let's add a header before this section now just click on the above plus icon and here i'm taking another section let's select this layout i'm giving its height to a minimum height and let's set it also in vh and let's give the minimum height to 10 vh now let's give the background color we can just go under style tab from here let's select the background type and here background color we can select this background color you know elementor has this new feature we can use this eyedropper and let's select this blue color from here perfect now inside the left column here i'm adding another image widget now from here let's choose the image here i'm selecting the pepsi logo so let's select the logo and insert it now under style tab i'm giving the image width to 13 percent and also let's make it to left aligned now on the right column let's add a navigation menu here i'm searching here nav so here is now i have menu the elementor's built-in menu i'm just dragging this nav menu here first i'm selecting the menu to the pepsi menu you can select any other menu you have and then i'm making the alignment to right and then from under style tab i'm making the text color to white color alright let's now make the color transition effect so to make it first of all let's select the section by clicking on these six dots go under its advanced tab and from here css classes i'm giving it a class name that's pepsi dash section remember you need to put exactly this class name pepsi dash section and now we need to add another data attribute with these thumbnails so here i'm selecting the first thumbnail let's go under its advanced tab and from here let's open the attributes remember we have used a attribute a few times ago that attribute was for changing this bigger image now i want to use another data attribute and again you don't need to write anything by your hand you can just go to jim fahad digital.com and if you scroll down a bit here you can see bg color custom attribute i'm just copying this attribute snippet from here now go inside elementor page builder now here this is very important just after the first data attribute it ends here dot png so i'm putting my cursor here then hit enter that will separate one data attribute with another so here i'm just pasting the second data attribute here if you have a look it says data dash color then a pipe symbol and then here is the color code now you can replace this color code text with any color like white or you can put here red or you can put any hex code here so for the first thumbnail i want to keep this blue color the blue color code is hash 0865 ba now i'm just copying the second data attribute then let's select the second thumbnail go under its advanced tab open the attributes after our first data attribute hit enter to make them separate then paste it and here i'm writing the second color code that's d300 2d now let's go inside third thumbnail go under its advanced tab open the attributes hit enter after the first data attribute then paste it and here i'm putting the third attribute color that's one f one f alright now just click on the update button and let's preview our page let's now click on our second thumbnail and boom the big image is changing also the background color is changing let's now click on our third thumbnail here we go but if we have a look if we click on the thumbnail the color changes immediately but i want to add another transition effect so to add the transition effect we can go to jim fahad digital.com if you scroll down here you can see background transition css just copy the css snippet from here go inside elementor page builder and you can paste this css snippet anywhere of the page i mean anywhere of the page builder but as we have done this to the section so i'm selecting this section go under its advanced tab now open the custom css and here i'm pasting the css code let's now update it to save our work and if we now preview it let's now click on our second thumbnail we see the beautiful transition is now in action i really like this transition effect very much but one thing that looks odd to me like if we click on the second thumbnail only the second section color is changing not this header color actually i did it intentionally because this is a landing page and you may have different header that's coming from your theme or your other page then you can apply this trick like you can just go inside elementor page builder and let's select your header just click on the header six dots go under its advanced tab and add the same css class that we have added with this section so you know the class name is pepsi section if we now just update our page and let's preview the page now have a look if we click on the thumbnails the whole page background color is changing with a beautiful transition effect i really really like it so we're done with the making of this beautiful landing page now the very last thing i want to do with this page to make it responsive for tablet and mobile device so let's do it now really quickly and you know just click on this responsive mode icon first and then click here on this tablet icon now have a look here if we now click on this hamburger icon it only drops within the right column but i want to make it full width so from left here under the mobile drop down let's on the full width so i'm clicking it to turn it on and then let's make it right aligned so from here toggle align let's make it right and then just go and restyle tab and from here toggle button i'm making its color to pure white color right now it looks perfect to me so let's just close it then one last thing with the tablet view just click on this text now under style tab let's make its font size a bit smaller i'm making it 46 pixel only for tablet device to me it looks perfect on tablet device so the last thing we need to do to make it responsive for mobile device so let's click on the mobile device icon now first let's make them fifty percent so from here i'm selecting the column icon and i'm making its width to fifty percent also with this column click on the column icon and make it with 50 percent but right now the logo looks very small so select the logo and let's make its width to 25 percent all right now for the first heading let's make its font size to 35 pixel for the second heading i'm making its font size to 90 or let's make it 95 pixel and then i want to adjust the spacing of this section so let's select this section go under its advanced tab first let's unbind the padding now on the top and bottom i'm adding 10 pixel but i think we need to add more so let's just redo it i wanna give the padding in percentage now unbind it so on the top and bottom i'm adding ten percent of padding and on the right and left i'm adding two percent of padding now this piecing looks perfect to me all right now let's adjust these thumbnails because this looks super weird and also i cannot select it because we cannot see the six dots here but no worries just select any of the images i mean any of the thumbnails we can select that using the navigator so i'm opening navigator and from there let's search for it here we have selected the thumbnail above that here it is our inner section so select this inner section and here with this intersection i need to apply some custom css for mobile device and you know i have written that code for you just go to gym for the digital.com and if you scroll down a bit here you can see thumbnail media query so just copy this snippet from here go inside elementor page builder we have selected the intersection from the navigator so just go under advanced tab and open the custom css field just after our existing css here i'm hitting enter to make some space and pasting the css code now they are positioning at the center of the page so to keep them under one line just click on their wrapping column and from here i'm making the column width to 33 percent let's do the same with this column let's make it with 33 percent also with the last column let's make its width to 33 percent now i want to add some spacing with the top and bottom of this big image so let's select the big image go under its advanced tab and bind its margin i'm adding 40 pixel of margin at the top and 100 pixel margin at the bottom to me it looks perfect and the last thing i wanna make these social buttons i mean social links position a bit top here in this position so let's just select the social icons go under its advanced tab now from inside the positioning let's scroll down i just want to make the vertical orientations offset to 96 pixel right now it looks perfect all right let's now close the navigator on the mobile device our landing page looks really cool on the tablet view it looks perfect and on the desktop view it looks awesome all right let's now close the responsive mode and then click on the update button to save our work so that's basically it i hope you have learned something new today if you like it please give this video a big thumb up and don't forget to subscribe this youtube channel also press on the bell icon to get notified before anyone whenever i will upload a new video on this youtube channel and if you want me to help you on your wordpress project or elementor project then you can contact me through my website that's jim fahad digital.com i will try my best to help you personally once again thank you so much for watching this full tutorial i will see you on the next video for now bye bye

Channel: Jim Fahad Digital

Views: 67,301

Keywords: Elementor Landing Page Website Design, Wordpress Elementor Pro Tutorial, Elementor Landing Page Design, Elementor Landing Page, Elementor Landing, Elementor Landing Page Templates, Elementor Landing Page Mobile, Responsive Elementor Landing Page, Elementor Landing Page 2021, Elementor Landing Page 2022, WordPress Landing Page Design, WordPress Landing Page, Landing Page Design, Landing Page, Jim Fahad Digital, Elementor, Elementor Pro, Elementor Tutorial, Elementor Pro Tutorial

Id: WMEJ2VcPGSs

Length: 24min 50sec (1490 seconds)

Published: Wed Aug 25 2021