Create Your First Landing Page With Elementor - With Ziv Geurts

hi and welcome to this elemental free basics webinar my name is Eve and I'm a web designer and elementals lead educator I'm really excited to introduce you to the Internet's leading wordpress drag-and-drop site builder and a mentor especially during these challenging times and I really hope that everybody is healthy and staying safe okay so this webinar will give you a basic breakdown of elemental and show you how to use it to design build and publish your own landing pages just like the one that we're going to be building together and these skills that can be applied to create attractive landing pages for your own businesses in all different types of industries to help convert potential customers it could be the hospitality industry restaurants gyms ecommerce and a lot more so let me just share the screen so you can see what we're going to be building we're gonna be building this landing page as you can see it's one online courses website it's a communication course over here we can read more about it you can join it at the bottom there's a button to download a free sample so in general what exactly is a landing page okay so first of all a landing page is a page on your site that visitors arrive on via some kind of advertising it could be a Facebook ad or Google search could be a link in via email and the page is designed with a specific purpose to convert visitors into leads the visitors they need to take a specific action for this to happen and in our example an online courses website just like I showed you they wanted a landing page to direct the visitors to one of their online courses okay so this is the communications course and that can do that by just clicking join now and that will lead them to the courses page visitors can also click the read more button that will take them to the next section on the page they're provided with information over here what the course has to offer and they can also join over here and when we scroll down there's another button where they can download a free sample of the course okay so basically alimentar is the perfect tool to help you create landing pages it's an advanced page builder that allows you to build entire websites page by page with your own custom design it's a drag-and-drop builder meaning that you work directly on the page and you can see the results in real time exactly the way that your website visitors would see there are so many advantages with using Elementor such as saving a lot of time and development costs because with elemental you can design and implement the design without using code and it also gives you full design options for page layouts there's a huge selection of widgets that you can use ranging from basic such as text image battens icon lists widgets which is what we're going to be using today and pro widgets such as call to action countdown form widgets and a lot more so I'm going to stop babbling and I just want to let you know that you know feel free to ask questions in the chat we'll try on to all of them and I'll be pausing every now and then to answer some questions okay so to start working with elemental you need to create your first page so what we're going to be doing is I'll just go to our dashboard over here and under pages we'll go ahead and click add new and we'll just give it a name and we'll click edit with elemental now to start with a clean page you need to go to the bottom panel okay and you can click the Settings icon over here and in page layout we'll just choose canvas okay so this is the easiest way to create a full blank page without a header and a footer which is exactly what we need for our landing page okay so let's get familiar with the elemental interface on the right side is the editing area of the page okay so this is where you can add and edit all the elements that form the layout of your page and on the left side is the elemental panel as you can see over here there's a creative tools they're called widgets and you can use these widgets to add elements to your page just like headings paragraphs images videos and you can always access this area by clicking on the we just icon over here on the top right and in the top left we've got some more settings over here we've got setting settings such as the default colors fonts theme style we can also click here to view the page to preview the page and we can click exit to dashboard to go back to our WordPress dashboard let's move on to the bottom panel there's more features over here as well just like we saw before we've got the page settings where we can change the page name we can change the page layout and a lot more next to that we have the navigator and right now the Navigator is is empty because we haven't created any content so basically what the Navigator does it helps us get an organized view of all the content on our page all the elements all the the things that we build so we're going to be coming back back back to that later so we can see exactly how that will help us out so I'll go ahead and close that next to that we've got the history the history helps us to see the recent changes that we made and we can go back to them we've got powerful revisions as well and there's no need to be afraid while you're working everything's automatically saved so that's really cool next to that we've got the preview changes option where we can preview the page while we busy creating it and lastly when we're done creating we can publish the page and we've got some other save options as well that we'll delve into later as well okay so let's take a closer look at how pages are built there's two ways that you can start as you can see over here what I'm going to be doing is I'm going to start off in the library so this is this icon brings us to the library and here we can preview elementals pre-made blocks and pages okay the pages are also known as the template kits these are just a lot of pages that we created and you can just preview them like so and if we want to insert it we can simply insert it we can go back to the library I'll go to blocks and I'll insert this block for example and now what a block is it's not a page it's just part of a page so it's actually you know sections you can just add certain blocks all together you can create page very quickly on the fly so let's just insert this block and see exactly what it's made out of okay so Elementor uses three main building blocks sections columns and widgets sections they're the largest ones and they can be identified by the blue border just like you see over here and inside of them we've got the columns and they can be identified by the black dashed border and inside them are the widgets as you can see there's a title there's some text there's a button and they're inside the column now to edit them you can simply right-click the handle so let's say we want to edit this section you can right click and there's a lot of settings over here we can duplicate delete let's go ahead and duplicate as you can see just duplicated all of the content we can delete let's duplicate the column now I've got two columns with identical content now you can really play around with it what we can also do is we can move sections columns and widgets around by simply dragging and dropping as you can see here I can just drag this widget the blue line indicates where it's going to be positioned when you let go so now it's inside the same column just above the text widget I can also bring it over to another column so it's a positioned over here and I can also switch between the two columns by just dragging and dropping and play around with that I can also drag the column width like that and really control what my layout is and what what we've got going okay so sections columns and widgets as you can see also they've got three tabs in the panel on the Left I'll just click on the section over here the section in the columns they have the layout style and advanced tabs and widgets there we go widgets they have the content style and advanced tabs and soon we'll see exactly how we use these settings to create our landing page first what I'm going to do is I'll just delete this section and because we're gonna be creating our page from scratch so I'll just show you another way to add sections is by pressing the plus icon over here we can simply choose one of the preset structures for example one column two identical columns three identical columns two columns where the right column is larger than the left column and we can just simply insert that and start building and we can tweak that on the go as well so I'll go ahead and close this and let's just start building our page okay so first let's just check out the page again and just see what we have over here so this is the first section and actually it's made out of two sections where the upper section and the the bottom section they have the same blue background color and as you can see here the content is just a little bit longer and the content in the second sections is just a little bit shorter the width and in the second part you can see that there's two columns here with the text the buttons and another column with the image so let's just dive in and see exactly how we can build this okay so let's just add a section with one column and let's control the width of the content okay so as you can see the width of the content the content is in the column so that's the column column width so over here if I drag this you can see I don't if you can actually see really clearly but now it's getting smaller 700 and that's increasing over here okay so I'll just set this to 1,200 so I can control the the width of my content and what I also want to controls I want to control the height of the section itself okay so what I'm going to be doing is I choose the height and I'll set min Heights min height means that no matter the amount of content we put in the section it will at least be a certain height now the default is 400 pixels we can increase that there we go 600 plus pixels like that but I'm not going to be using pixels I'm gonna be using a relative unit which is I'm going to use V H stands for viewport height which is in relation to the viewports height okay which is your browser height over here so a hundred VH simply means that it takes up a hundred percent of your viewport height as you can see by the blue lines in the section and if I set it to 50 V edge for example it takes up exact 50% of the viewport height so what I'm going to be doing is I'm going to be setting that 220v edge like so and now I'm going to style the background okay so in this section settings I'll go to style and what I'm gonna be doing is I'm gonna give it a blue background okay so I'll just go to background type there's a couple of background types but I mean she's classic I'll choose the color and over here I'm just gonna add this blue color okay there we go and we can very easily save this color as well by pressing the plus icon over there I already saved it before so it's already over there so I'll just go and select that that's great um now what we'll go and do is we'll go back to our widgets over here and I'll search for an icon list widget okay so can very easily search icon list and drag and drop it into the column as you can see we've got the content style advanced tabs and in the content tab I'm just gonna delete two items so we just left with with one item and I'm gonna be changing the text in the first item okay this one is going to just click it over here and I'll change the text it's gonna say online courses now the color is a little bit dark so it's hard to see so we're gonna fix that soon but let's just go back to the page over here so you can see it's going to be white and the icons gonna be yellow orangish so let's just do that let's first change the icon I'm gonna go to the icon library so I click on that and I can simply search for graduation I'll insert that so great now we've got all of our content going now we need to style it so I'll go to style and over here in style I'll go ahead and select icon and I'll give it this orange yellow color okay so once again I pre save this color before you can add your color codes on the bottom of it here press the plus it's let's add it to your palette and you can organize your palette very easily you can just drag and you can drop it into the bin over here to delete can reorganize them so it's it's very handy and very helpful for your workflow okay so that's the the icon now I want to I want to increase the size because it's a little bit small so I'll increase the size over here 20 is good let's go to the text drop-down and let's change the text color to white okay and now what we need to do is just style it a bit so I go to the the font family I'll go to typography and I'll set the font family to Montserrat that's good umm let's have a look increase the size 20 pixels I'll make it bolder so I'll go to weights I'll set the boldness here 700 so it's nice and bold and I'll set the transform I'll set it to capitalized so the first letter of each word is capitalized and and that's that's good for now so that's that's the first section okay so that's this section over here now let's move on to the second section it's actually the second part of the hearers section right so what we'll do is we'll add a section with two columns over here this time we're going to be adding a content width of just a little bit shorter okay so not 1200 will be 950 just like you see here so we can really control the layout so this is 950 pixels and let's go to height and also set min Heights change it to the relative VH units and set it to 80 so it takes up 80% of the viewports height which is great now another thing that we can do over here in layout is we can control the column position so right now the column as you can see it's position in the middle we can also position the column at the top okay so this is cool and what we can also do is we can set the column position to stretch so it takes up a hundred percent of the sections height which is also really cool but I'll go ahead and set it to top like so and let's just style it now as well so I'll go to style like before I'll go to background and you know you've got classic you've got gradient background that you can play around with you've got a video background you got a slideshow background you can play around with and which are really really cool settings I'm just gonna go ahead and set it back to also to the blue color and what I also do is I'll go ahead and set a shape divider now shape divide is a really cool way to play around with your section I'll go ahead and set a shape divide on the bottom I'll set the type as you can see there's a lot of types I'm gonna set it to waves so now there's waves on the bottom of the section and we can play around with that as well let's have a look you can play around with the width okay as you can see I'll go ahead and set that to you can get really really accurate over here set the 200 and we can play around with the height like that 215 we can also flip it we can invert it and there's some other settings as well so I'll just leave it like this that's cool and next what we're going to be doing is we'll just go back to the widgets and we'll drag a heading widget into the Left column okay and this is going to say the the the title is the your success in communication so let's just do that let's just have a look over here what's going on so here we've got your success in communication which is one heading and we've got another heading over here that says start here with with a different color okay so let's just go back this is going to be the your success in communication so I'll just go ahead and add the text here in content and let's style it so I'll go to style change the text color to white what we'll do is we'll go to typography and I'll set the font family to Google Google's play fair play fair display that's great or set it to 50 pixels and also set the transform I'll make it bold as well like before and I'll set the transform to capitalize okay great now in order to save time to create the second heading I'll just simply right-click the widget the heading widget and I'll hit duplicate so I just saved all the settings over with the styling already that we did and what I'll just do is I'll just change the content I'll go ahead and change the text like so and in style it needs to be yellow so I got a text color I'll just set it to the yellow where before and I wanted to I want to bring it up a little bit okay so it seems part of the first heading what I'll do is I'll play around with the line height in typography okay so I can play around with that as you can see I can really control its how close it is to the first heading over here so that looks great let's move on to dragging in a text editor widget below that there we go um I'll go ahead and change the text there we go that's the text and let's style it I'll change the color also I'll change that to white and I'll go to typography and I'll set the family to Poppins also a Google font that looks cool I'll make it less bold so I'll set it to set its way to 200 and also set this one to capitalize okay that's great now what I want to do is I want to add some space between the heading widgets and this text editor widget so what I'm going to be doing is I'm going to be adding some padding okay so what I'll do is in the text editor widget I'll go to advanced and I'll unlink the padding values so I can set them individually so I want to set individually I want to set them only at the top so I'll go ahead and add 30 pixels of padding over here which is exactly what I wanted okay so next let's move on to the button let's drag in a button widget over here and I'll go ahead and change the text this is the first button that's gonna say join now so I changed the text over here join now and in the link over here this is where you can add the link to the course of sign up page so I'll just go ahead and add that link over here and you know it can also be an external link if you're using a third party events platform for example for courses and other stuff you can go ahead and add that as well let's just change the size of the baton to medium and let's style it so I'll get a style and in typography I'll change the font family to Poppins as well that's great I'll change the weight to 500 and I'll set it to capitalize as well that's great now as you can see the button itself has a normal state and a have a state normal state is what we see now however of course it means when we have over the button you know we can change certain styling aspects so for the normal button states let's just go to the text color and set it to the blue that we saved before and for the background color let's change it to the yellow okay that's great and let's go to the heavy state and I'm just gonna leave the text color as it is it will inherit the text color as is and I'll change the background color I'll change that to a darker yellow orange so I'll go ahead and add that over here it's a darker yellow orange so when we hover over it it's a darker orange and I can also add a hover animation I was a couple of average animations we can choose from I'm gonna go ahead and choose floats so it floats up nicely which is really cool next let's also play around with the border-radius I want to control the border I want to make it look like a pill pill shaped button so I'll go ahead and increase the border radius as you can see I'll just go ahead set it 250 pixels like that okay great now in order to save some time we'll simply duplicate the button okay like that and let's just go back and check to see exactly what we have so we've got two buttons next to each other right so let's just carry on with a button and style the second button and then we'll see exactly how we get them next to each other okay great so let's change the text this one's gonna say read more so I'll go ahead and change the text over there and this button okay we're going to set the link to automatically scroll down to the middle section which contains the course information we haven't created that yet so I'll show you exactly how to do that later but that's a link that we're going to be adding here that will automatically scroll down to that section as you can see when I duplicated the button that automatically copied the link that we added in the first one I'll just go ahead and delete that as well okay great so let's style it I'll go to style and for the normal state let's just change the text color I'm going to change the text color to the yellow orange right now we can't see it because the backgrounds got the same color so let's change the background color and for this what I'm actually gonna do is I'm gonna change the background I'm gonna remove the background color so I'll just drag down the opacity slider so there's no background color whatsoever and instead of a background color what I'm gonna be doing is I'm gonna be adding a border okay so I'll go and choose the border type I'll set it to solid and I'll change I'll change it to a subtle 0.5 pixel like that so it's nice and subtle as you can see when we have wherever it still has the same darker orange yellow color that we said before so let's just go to the harvest state and I'll change the background color to that blue okay so now when we hover over it that looks great okay so now let's position them next to each other so what I'll do is I'll go back to the first button and as you can see the widget itself okay it takes up a hundred percent of the columns width you can see that with the blue border over there right it's all the way to the end of the column over there it takes up a hundred percent of that width and what we're going to be doing now is we're going to be creating more space so we can actually put them next to each other so what we're going to be doing is we're going to go to advanced and we're gonna go to positioning and here we'll choose width and in width we'll choose in line and now as you can see it doesn't take app a hundred percent of the width anymore it only takes app the amounts of that the object itself or the element itself takes app so we've got more space to add more more objects so what we'll do we'll do that exactly the same thing with the second button go to advanced we'll go to positioning will go to width and we'll set it to inline as well and automatically it appears next to it so that's really cool now we need to add some space in between them so I'll just go to the first button and I'll go to advanced over here I'll just unlink the mod margin values and I'll just add some let's have a look to the right or just increase the margin over here so there's some space in between and that looks great okay so we can move on to the second column on the right over here what we're going to be doing is we can drag in an image widget there we go and we can just click over here to choose an image and we need an upload an image so I'll go ahead and choose that um and I'll go ahead and upload the image I'll insert it there we go okay great so I also just want to let you know that there's a lot of online sites that you can check out where you can download free vector illustrations just like the one that I've had in here I use for this one I used icons 8 that comes less out there's really a lot of stuff that you can check out here and there's a lot of other pages online as well okay so let's just position the image a bit I'm just going to position it very easily I'm just going to go to advanced I'll play around with with the margins just to move it around a bit so I'll only the margin values and I'll use negative margins okay so this might be a little bit intimidating it might be a little bit you know new to you whatever not but you can just play around with it and you'll see exactly how it effects the positioning of of your objects and of the image in this case so I'll add negative margin as you can see adding a negative margin on the top brings the image app so I'll go ahead and bring it up over here on the right I'll also add a negative margin as you can see it moves out to the right over there so I can play around with that that's cool I'll leave the bottom as is and the left I'll give it a positive margin yeah that's that's that's about right that's that's what I was going for so that's great okay so now we created the first section and let's check to see if there are any questions I am can it al 1971 asks will these sections automatically adjust for the different views I mobile tablet and desktop okay so we're gonna be tweaking these screens for mobile later as well in depth for the first section all of the settings at your area automatically inherited for the tablet and mobile responsive modes and you can really control you can really tweak them and you can position them and create a even a different layout for your for your mobile devices so yes they're not automatically adjusted you can really tweak them to your lacking and control exactly what what's going on it might be a little bit tricky in the beginning but I'll show you exactly soon how that's done let's see McNab which asks does the link include the hashtag symbol or should I delete it I deleted that I'll show you later on when we do use the hashtag but I just added a link to to the website course page definitely if you're adding a link don't add the hashtag before that if it's a link that doesn't include the hashtag okay cool so let's carry on let's move on and check to see and check out the next section okay so this next section we get that by clicking on the read more button okay so let's check it out also there's two columns as you can see here and in the right column we've got to icon list widgets that actually appear next to each other so I'll show you exactly how you can position them next to each other as well and another thing that you might see over here is a heading widget where part of the text is one color and the other part of the text is another color so we'll see exactly how that's done over here all right so let's scroll down and let's make a start in order to save time what we're going to be doing is I'm just going to be duplicating the entire section okay don't worry we're gonna fix it we're gonna tweak it it saves us a lot of time um I'll simply drag the right column over here so the image appears on the left then what I'll do is I go to the section settings and I'll go to column position I'll change it to middle because this the top setting was copied over when we duplicated that so now it's back in the middle um and then what I'll do is I'll just go to style and I'll remove the shape divider okay we won't be needing that so that's on the bottom over there I set the type back to none okay also the this section is background color we're gonna change it to white but first I'm gonna change some content before we do that so let's just select this image and as you can see also it's the margin that we just added before it also got copied over so what we're going to be doing is we're gonna be we're gonna be removing that so I'll go to advanced and instead of just removing them manually I'll just link all of the values together again and I'll just delete one and they're all deleted instantaneously so that's great next let's just select a different image so I'll just click over here I'll go to content I'll go to the library and I'll go ahead and upload a file and I'll go ahead and choose this image I'll go ahead and insert that and now what I'm gonna be doing is I'll position it as well okay so this one's going to be positioned a little more a bit more to the left so I just gotta advanced like before I'll just go ahead and unlink the margin and I'll add negative 50 on the top 50 on the right 0 on the bottom and negative 150 like that that's great now let's go back to the section settings and change the background color to white and the moment we do that the headings and the text over here they you can't see them because the the same color so let's just change those colors as well I'll go ahead and select the heading I'll set that to the blue that we saved before that's great now let's also go to topography and change it make a little bit smaller forty pixels then let's change the text I'll go back to content there we go now let's select the text editor widget go-to style I'll just change the text color over here to black okay like that and I'll just leave the text as is but you know it can be different that's no problem okay what I'm gonna be doing is what I'm gonna be increasing this padding above here so I'll just go to advanced I'll just increase increase that to 40 which is great okay so far so good let's go back to see what we have okay so here we're going to be adding in between the buttons and the text edit we're going to be adding the icon list widgets over here and they appear next to each other but before that we've got the starts here okay that's one heading it's gonna say transform your life in two different colors okay so this is just like we did before with with the button we're gonna be using the in line method and we're going to have two headings appear next to each other two with different colors so let's go ahead and do that we'll go ahead and position them I'll go ahead and select the starts here heading this is gonna say transform like that let's go to style change it to the blue and change it to 40 pixels as well then we'll just simply duplicate that and in style I'll change it to the yellow orange and this is gonna say transform this is gonna say your life so we got a content there we go okay just like before let's select the first heading in advanced positioning width will set it to inline I will do that to the second one as well advanced positioning with inline boom great so they appear next to each other now let's just delete this read more button okay and let's just start this join Now button let's go to style and change the text color to white and we'll go ahead and change the background color to blue and as you can see the margin that we added before over here got copied over as well okay so we'll go ahead and delete that like that and what we'll do is we'll add some margin on top to create some space I'll go ahead and add 30 CD pixels and it's still set to inline width right because that got copied over as well so in advanced positioning I'll go ahead and change that I'll set that back to default so now it takes up a hundred percent of the column width and let's just check out over here now we're gonna be adding the icon list widgets they're going to appear next to each other so let's see how that's done there's a different way to add two elements next to each other and that's by using a widget that's called intersection we're going to be using this for the icon list widgets let's show exactly what the course has to offer so let's just go ahead and drag in as you can see there's the intersection we'll drag it in between the baton and the text editor and right now as you can see hold on there we go we've got a section with two columns inside a column inside another section so that's why it's called an intersection so it really helps us create the layout that we're looking for okay so let's just start off with the icon list widgets let's search for it and drag it into the left column okay so here we've got all of the list items over here and they include an icon and they include text okay so what I'm going to be doing is first of all just delete - so we just left with one and when we go back here you can see that there's some text okay so basically what I did is I just created a list item without an icon and just the text and then the rest is all with icons so for the first one I'll just change the text this is the you will learn and go over here you will learn and let's just remove the icon like that great then let's add an item okay and this one's going to be saying win a job interview go to the text win a job interview okay so let's just duplicate this a couple of times so we've got five in total like that and then change the text okay win a job interview get a pay raise as you can see it's very easy to create a lot of content very quickly go ahead and paste the last one okay great so now we got all the content that we want now it's time to style them so we go we'll go to style and what I'm gonna be doing is as you can see there's an icon and text and list drop-down dropdowns over here I'll go to icon and I'll change the color I'll change that to the blue and we saved before and let's go to text let's have a look let's go to text and let's just change the color to black and I'll go to typography and I change the family I said that the poppins give it a light weight like that I also set the transform to capitalize and I'll play around with the line height that looks good and I'll also play around with the letter spacing that's great and now simply what we can do is we can just right-click the widget and we can hit copy and we can right click in the column next to it and click paste and it will be copied over very very easily now all you just need to do is change all of the text so I'll just go ahead and delete the first one and I'll just leave the text as is but you just change the text now we just need to align the map so let's just go to the the widget and in advanced we'll add some padding on top okay so I'll go ahead and unlink the padding over here and I'll just add some padding on top till it's aligned that's cool okay great now let's just hide the panel over here so we can check it out as you can see the header the header and the text editor widgets they're not really aligned over here with the the icon list widget that we just added it's because we used an an intersection widget with columns and the columns they have padding over here as you can see the blue line of the widgets indicates that there's space between the black dashed line of the bow of the column and the widget itself this is default padding that comes with with elemental in the in the column settings so we'll just simply go to the column settings and we'll go to advanced and what we can do is we can remove them very easily by unlinking the values okay so now they're just disappeared now there's no values we can add padding if we want but I'm just going to leave it the way as is and I'll do the same with with the other widget like that okay now let's set the now that we actually finished okay let's set the read more button in the first section to scroll down to this to this section okay so in order to do that what you need to do is you need to go to the section that you wanted to scroll down to okay and entered settings like that and then you go to advanced and over here you add the CSS ID it can be any description word that you want just make sure that there aren't any spaces so I've gone ahead and set it to read more which is the same as the battle text ok so then all you need to do is simply copy that and you go back to the button settings over here and go to content and go to link and make sure that there's a hash ok in front of the CSS ID we simply paste the the ID that we just gave we paste it over there oopsie we just paste it over there and we make sure that the hash is before before it so now when we click on the button it will automatically scroll down to that section which is really really cool ok so let's move on to let's just first check if there are any questions let's have a look okay let's just click let's just carry on to the last section then we'll take some questions after that this is a small section this is the last one ok as you can see this is going to be the download the free sample one so let's get started with that we're going to just go ahead and add a section with two columns will control the content width got a question let's just take the question Chris Milty moros what's the difference between padding and margin generally speaking the difference is that let's say you got a widget so the margin is the space outside of the widgets and the padding is inside the widget that's just a very general explanation I hope that helped and and let's carry on okay right so let's control the content width I'll go ahead and set this to 1200 as well and I'll control its Heights or set a min height of 40 VH okay and I'm gonna go ahead and change the background-color go ahead and set it's a classic I'll choose the yellow orange that we had before and this time I'm gonna add a divider I'm gonna add it on the top so this is gonna be waves waves on top I'll also set it to invert and I'm just gonna save some time by copying this heading here and pasting it over here and I'll go ahead and change the text now as you can see over here I added a break line okay and this is very handy when you want certain text to always appear below other text so download the free lesson in this case will always appear under ready to get a pay raise so that's why I use the break line next I'll just go ahead and copy the button I'll go ahead and paste that over here and I'll change the text this is gonna be the download free sample so I'll go ahead and change that and what we're going to be doing now is we basically when you click the button you want the PDF to automatically download okay so what we need to do is when they upload a PDF file to the library so let's just quickly enter the library by clicking any image that we created before and just go to the library over here we can go to upload files and I'll very easily upload the PDF that I want to use it's uploaded and I'll simply copy the link okay copy link I'll close this and I'll go back to the button and I'll go ahead and paste that link over here okay now what we need to do is we need to add another setting that will automatically download the PDF when you click on it okay so we'll go to link options and what we've got a couple of settings over here but we're going to be using custom attributes okay it might sound a little bit in a little bit technical or whatever not but this is there a lot of attributes custom attributes that you can add and you can learn them and there's a lot of resources online but this one that we're going to be using is download is equal to true which basically automatically when you click the button will download the PDF so that's really cool I'll show you in a bit let's first add an icon from the library I'll go ahead and search for download and insert us let's also star that a bit let's just add some spacing over here that's great because we copied the button over from from here there's still the margin that we added before so let's just remove that ok remove that and over here as you can see the button itself is in the right column and what we can do is the widget itself takes up a hundred percent of the columns width but we can go to content and we can go and set the alignment of the button so I'll go ahead and set the alignment to Center so that's great and the hover it over here it's yellow on yellow which is it's not right so we'll go to style and I'll just change the background color to to a darker blue okay so go to background color just add the color here so now when we have Roberts it's a darker blue Oh what did I do it's just clear that when you clear it it gets the default colors from that you set in your default colors over here just so you know let's just fix this I wasn't in the hava state so what I'll do is I set the background color to the blue and then I'll go to the have a state okay this is where I was supposed to be and I'll go ahead and paste the darker color over here so now when I hover over it there we go it's a little bit dark if you can see okay great so now what we need to do is I want to align I'll go to the column settings over here I want to align this baton to the middle it's on the top over here so I'll go to the column settings over here and I'll go to a vertical align and I'll set it to middle so now all the content in the column they're all aligned to the middle there's a lot of options that you got over here I'm just using middle so you can really play around with it and check that out next let's go to the section settings and in advanced I'll click advanced over here I'll go ahead and unlink the padding values and I'll just add some padding on top as you can see that's the space between the column and the section over here so I'm increasing that I'll go ahead and set that to 90 okay so that's great also for this specific section over here it's nice to have a button that automatically downloads a form but also it would be regret to use a contact form over here especially for conversion elemental Pro has a contact form widget the dets you visually design all of your contact forms so there's no need for third-party plugins and really empowers you to work faster and really design a lot better so let's now it be done let's just check out the page I'll go ahead and hit preview and let's just click read more yeah works joy now we'll bring us to the course page scroll down a bit more download the free sample great automatically downloads so everything's working nicely that's really really great and like I said before um ah you know what let's take some questions let's see if we have some questions over here Brayden w's our asks how did you get the wave between the sections okay so it's called the shape divider you just need to go to section settings and in layout sorry in style you've got a shape divided drop-down okay so here we can set the top and for the bottom and you simply choose the type you can choose a lot of different things I chose the wave the waves so I hope that helps Helle Peterson asks in the icon lists why did you copy rather than duplicate the the checklist in the two columns you can duplicate it as well when you duplicate it it will automatically paste it under it so then you just need to drag it to where you want I copied and pasted there just to avoid that that from happening sometimes it's more accurate for me to position my mouse and really work more clearly so I hope that that helps okay so let's just carry on how it good another question a Bui visvanatha is it a paid tool or a free tool if paid means how much ok so right now we're using elemental call write this elemental free so everything that we're using is is elemental free and there's a lot of a lot more features that elemental Pro has which I'll talk a little bit later as well ok ok great so let's carry on ok so right now we created all of this content and like I mentioned before it's time to open up the navigator ok so there we go the navigate is not empty anymore it's full of the sections it's full of the columns it's full of all of the widgets so I'll just minimize that and when we click on it it will automatically bring us to it ok so it's we already have a clear overview of what's going on on the page when we click over here we can see it's got one column the second section has two columns in the first second in the first column we've got heading widgets and we can click on them and it will automatically be selected so it can automatically start editing it straight away and it really helps us get a clear overview of what's going on on the page another cool thing is that we can name the sections ok so we can just double click and I'll go ahead and call this here one I'll double-click this and I'll go ahead and call that here are two there we go this is the third section which was the info section about the course and the last section was the download free sample PDF so I'll call that download so now the clear overview of what's going on and soon we'll see exactly how that's going to help us specifically for our mobile and tablet devices so like I mentioned before also you know we've got a responsive mobile mode a lot of potential customers they're going to be viewing this page on the mobile devices so let's see exactly how you can make responsive adjustments to make your design look great on mobile as well what I'm going to be doing is I'm going to be tweaking the first section to show you exactly how it works so you can apply it yourself first of all let's just go to the responsive mode and I'll go ahead and choose tablets I'll just move the navigator to the side a bit okay and let's just check out this section over here so as you can see automatically it takes up 50% of the width writes the column there's two columns and there's 50 50 so I just want to show you a cool trick that I use when I'm busy organizing my styling my pages for a tablet and for mobile I use the column width settings over here so I can really control the layout for example as you can see here in layout i've got the column width and because we're in the mobile responsive mode we're in tablets you can see over here they've got these handles these handles indicate that all of the settings that we all the values that we give for these for these specific features the column width they're only applied for the screen for the screens that we're in so for tablets so not applied for desktop they're not applied for mobile ok so here I can change this to 60% so now this column takes up 60% and I can select the second column and I can set that to 40% I guess I'm already controlling what's going on now let's just delete that because I'm not going to be using that and let's just go to the mobile responsive mode and tweak this these two sections okay so here a section one hero section two let's just tweak that so you can see exactly how that's done okay so first of all I'm just gonna use the navigator I'm gonna click on hero one automatically brings me to its settings and what I'll do is I'll just go to layout and I'll go to min height okay as you can see here the min height and it also has a responsive handle so all the all the values I give now they're only applied for mobile and I'll change that to 5vh so it takes up 5% of the viewports height okay so that's one fifth of the viewport side so that's exactly what I need and I'll just go to here a section number two and I'll go to the Advanced Settings over here and as you can see there's a drop-down called responsive where there's a lot of settings that we can play around with let's just have a look what we have here we've got in the first column we have our text and our buttons and in the second column we have the image what we can do is we can we can choose to reverse the columns when we reverse them on mobile now the image will appear first and only then the text so we'll leave that as is what we can also do is we can play around with the visibility we can hide this whole section on mobile so now it's grayed out indicating that it's hidden on mobile so when I hide the panel it just disappears okay I'm not going to be doing that but it's something that you can do as well for example you can create a one section that you only see on mobile that you don't see on desktop and tablet and another section that you only see on desktop so you can really control that watch what you see what you view is your visitors actually see okay great so let's just fix the sizes so all of this looks great on mobile as well I'll go ahead and click on the image there we go edit image I'll go to style and as you can see the width also has a responsive handle so I'll go ahead and play around with that I'll set that to 80% that's about grades now I'll go to advanced okay as you can see the space here right the space is bugging me and basically what happened is it inherited the margin that we added on desktop okay so it inherits the settings that you set on desktop but we can easily get rid of that by simply and linking them the the margins okay so now that just disappeared they're not inherited from the desktop settings anymore which is really great and next let's just go back to content and align this image to the left that's great okay so let's just go to the column settings over here and as you can see there's also some space here that's inherited so I'll go to the column settings and I'll go to advanced and also unlink the padding values as you can see just jumped up adjust the padding just disappeared okay so now I don't have anything from the desktop anymore so that's great and I can just leave that as is next let's go to the heading widget okay we'll just change the size over here in typography you can see the size says a responsive handle over here all of these changes are only applied on mobile I said 30 to 35 pixels that's great and I'll do the same over here I'll set that to 35 next let's click on the text editor widgets as you can see it's highlighted in navigator as well so it's really helpful and I'll just go to style typography and I'll set its size to 15 pixels so just a little bit smaller also it inherited the padding that we have over here so what I'll do is I'll go to advanced and I'll just go ahead and unlink that so now it moves up a bit okay so we need to fix this what's going on over here right so the shape divider and everything so let's have a look let's just add some space here as well on top I'll just add sorry this is just what we removed now let's go back to the section setting so I click on here or - now we um in back in the section okay so I'm gonna just fix the mess that's going on over here what I'll do is I'll go to layout and I'll just change the min height okay what I'm gonna do is I'm gonna change it to a hundred VH okay I wanted to take up a hundred percent of the viewport height and what we'll do is we'll go to style and fix the shape divider so I'll go to shape divider go to bottom and over here the width and the height they also have mobile responsive handles okay I'll just go ahead and set that - there we go 140 I'll set the height to 95 okay and let's have a look hold on a second let's just go back to desktop mode because something doesn't look right to me let's check out the final result right so the shape divider on the bottom it needs to be inverted okay great so we just changed that as you can see it's inverted something was bugging me let's go back to to our ball mode and there we go automatically as applied here as well as you can see there we go it just is inverted as well and it's selected here okay so it's inherited from the desktop setting great let's just bring the buttons up a bit as well okay because they're really on the bottom over here so in order to do that I'll just select the text editor again and what I'll just do is I'll go to advanced okay and I'll add a negative a negative margin I'll just unlink and link the values and I'll just add on the bottom either negative margin as you can see what also creates the space so you can really play around with it and control what's what's going on over there so I think that looks great okay cool so let's close the navigator and let's just hide the panel and check it out okay great so I think that looks nice and as you can see mobile editing it's very easy and it's a lot of fun I'll just go ahead and go back to the desktop mode and what we can also do is we can add an entrance animation so I'll just quickly show that to you because we're running out of time we can go to the section we can go to motion effects okay and we can add an entrance animation so we can go ahead and set that to fade in and we can go set that to slow normal fast so when you scroll down it automatically fades in and we can also set that over here in advanced motion effects entrance animation fade in normal slow fast so when we preview that then if you can see it but there we go that was a slight fade I showed that to you because you can really bring your pages to life that way and also just so you know elemental Pro is even more motion effects that you can use to really make your design stand out such as scrolling and Mouse animations including really sophisticated parallax effects so that's really cool let's see if there's any questions let's see and now we Pukalani asked what kind of pictures did you put in P&G and what size and you can add pap and G's JPEGs gifts there's a lot of stuff you can upload to the media library can just play around with that sizes as well you can control the sizes let's just go to one of the images over here over here we can you can choose you can control the image size at loads foster and it takes up less resources so that's really cool so I hope that helped okay great so now that we're nearing the end of the webinar we finished creating our page so what we can do is we can go ahead and hit publish okay and what we can do is we can preview our live page now everybody with this link they can they can see this page it's live and and everybody can interact with it okay so there we go Scrolls down joy now the download button that's great like I mentioned before there's a couple of other save options here we can go ahead and save this whole page as a template simply give it a name template let's just call call it landing page templates you can go ahead and save it as you can see it's in your my templates over here automatically and you can insert it into any page and another cool thing is you can also just select a section right click the section and save the section as a template so you can really reuse them give it a name servers and insert it into two other pages and really saves a lot of time another cool that I used to save a lot of time is the finder you can just simply click command or control e to open that up basically you can simply search for where you want to go what you want to do it's a search bar that offers easy navigation between different pages and dashboard settings I can create a new page add new page very easily on the fly and I can preview existing pages so I use it a lot so it really helps me out and you know this is just the tip of the iceberg there's a lot of a lot or that you can learn elemental really is a powerful web design tool meant to help you grow your business and your career elemental pro provides you with even more tools to create highly converting landing pages and fully fledged websites such as the forum widgets I mentioned before motion effects to help bring your designs to life there's pop-ups a pop-up builder to keep your visitors engaged a theme builder I create a full-fledged website and a lot more well that's it and I think that you're ready now to take your first steps with Elementor create your own stunning landing pages I'd like to invite you to join our Facebook group if you haven't done it already there's loads of helpful tips and tricks over there a lot of people helping each other out can become part of our huge elemental community full of like-minded web creators everybody helping each other out becoming better at what they do don't forget to subscribe to our You Tube channel that's full of interesting tutorials to help you master Elementor also check out the website and you know we've got a Help Center easy access to the knowledgebase FAQ use Docs and a lot more and lastly we'll send you a link to the materials needed to create this landing page so feel free to re-watch the webinar and recreate the page step-by-step also you can apply these skills to create your unattractive and converting landing pages for all types of businesses like I mentioned the hospitality industry restaurants software as a service companies gyms ecommerce and a lot more and will also send you a link to a survey to give some feedback on this specific webinar so we can improve them and keep making relevant and to-the-point webinars also feel free to share your creations inspired from this webinar in the comments below and I wish you good luck and most of all enjoy being creative especially during these hard times so thanks for tuning in ciao for now

Channel: Elementor

Views: 27,147

Keywords:

Id: asoh_I8QRxQ

Length: 68min 14sec (4094 seconds)

Published: Sun May 17 2020