Elementor Complete Tutorial 2019 - Build a Full Website with Elementor

hello welcome to the web monkey show my name is Alex and let me also say welcome to the year 2019 this is actually the very first tutorial that I'm going to be publishing for the year 2019 and I felt what better tutorial to publish than one on one of the best page without plug-ins for WordPress which is Elementor it actually pains me to say that I've never done a tutorial on how to use elemental before and I felt it's about time let me make a full tutorial on how you can use Elementor to build any kind of website that you desire so basically in this tutorial I'm gonna be teaching you how you can use elemental to build a website a one-page website for a fictional company known as the white hat hackers basically these guys are ethical hackers who help companies fight against hackers and cyber criminals so we're gonna be building this one-page websites to promote this business now with Elementor you do have the free version of Elemento but you also have the paid version of Elementor in this course this tutorial is going to be divided into two sections the very first section we're gonna make use of the free version of Elementor to build out this particular website you're looking at right now you can see we've got the logo we've got the menu we've got a video planet the background you've got the major headline they're saying don't get hacked and then of course we're gonna have your typical content for business websites what is the company what is their objective the kinds of services that the vendor why you might want to work with the company you will have admitted the team section you're also gonna have our clients testimonials and then of course a counter indicating why you might want to keep your website secure just something like that you promote the business and then finally the contact section area we're gonna have an email address and social media icons we're gonna build this society using the free version of Elementor and then if you decide to go and purchase the paid version of Elementor i'm gonna teach you how you can enhance this website and turn it into this particular website now with this paid version of elements we're going to build out this same website but now you can begin to see the differences with the paid version of elements we're going to create these and that headline which is much better than the static headline that we had in here this one is gonna be so much better we're going to have a countdown timer which you can't see now but trust me it's there we're also going to real walk the services section now you're gonna have this cool effect where when you hover over the image the actual service appears behind the image we're going to real walk the walk with us section as well now you can see we have this really cool zooming in effect and zooming down effect with a background image you're also gonna have the text indicating why companies should do business with the white hat hackers comm there will also be some other adjustments and then finally I will show you how you can add your contact form and Google Maps using the paid version of elemental so whether you're trying to use the free version of Elemental or you're ready to go with the paid version of elemental I do have something for you in this tutorial and by the way if you decide to purchase the paid version of Elemental please I am an affiliate for elemental which means if you use my affiliate link I will get a small commission you will find the link in the description box below now one last intervention before we begin is the fact that this tutorial is actually part of my element or course I have this course on udemy on Skillshare and also on one perfect platform you'll find the links in the description to a course you're gonna learn so much more you're gonna learn how to build an entire website with elements of how you can build our your post suit elemental and so much more so if you're interested you can check the links in the shrim box below for more information so without wasting any more time let's get started alright so before we begin this incredible journey towards learning about elemental I wanted to give you a very quick preview of my current setup right now I do have my site called the white hat hackers Das Kapital calm and this is basically a fresh installation of WordPress I don't have any pages zero pages for posts I do have one post which is a sample post that said going to will create for you if you choose to host with them for plugins I only have the elemental plug-in installed and active you will note that I also have the elements of Pro which is installed but not act like I said we will build the website first using the free version of Elemental and then proceed to use the pro version so you can go ahead now and simply download install and activate the elemental plug-in over here you can either go straight to or press dot org for such plugins elemental or you can just go to element or comment download the free version of the plugin now in terms of themes I will be using the 2019 theme but to be honest in this course the theme is not going to matter it's not going to matter if you isn't it 2019 theme or the 2017 or 2016 theme doesn't matter because we're gonna build the website purely using Elementor we might use one or two additional plugins to add some functionality but the types of themes it's not gonna matter at all because again whatever theme you choose to work with it's not gonna play any role and the setup and the design of our WordPress website so that is that join me in the next class where will now begin to officially walk with elemental before we begin building out content with elemental I wanted to walk you through the general settings real quickly so when you install elemental you will see the tab in here that says elemental and you have access to all this tabs the very first one here is my templates now with elemental you have the ability to either create your page templates which you can then save and reuse over and over again or you can also import templates we'll take a look at this a bit later you've got the settings and on the general you can choose the kinds of post types you want Elementor to have access to typically you want to choose every available option in here you can also choose to disable the colors and fonts that element will provide if you want to stick with those that your theme provided so you can check this two boxes about like I said earlier we're not gonna be making use of any themes settings or options we're gonna be building our site primarily with elemental so I'm not gonna check any of these two boxes and then you can also opt in for usage data tracking if you wanted to on the style in here you can set major changes as to how your website will look like so you've got the default generic fonts which means if you don't choose a particular kind of font family for a particular piece of text son serif will be the default or be used feel free to come in here and add your own chosen fonts the content width again you can determine how wide the width of your website will be in here the default is 1140 I'm gonna stick with that and then of course you can choose the space between widgets and if you're into CSS you can choose the what kind of select all your stretched sections will fit too you can also choose a particular class for your page title section if you wanted to and then for responsiveness you can choose the breaking points for your tablet and mobile don't you worry if you don't understand what these breakpoints exactly ah I'll talk about them a bit later and then you'll also have the option of opening your image links in a lightbox again don't worry if you don't know what the leadboxes I'll show you exactly what that looks like lightbox is actually pretty cool so I'll recommend you keep this checkbox ticked okay so that's it for the general I'm sorry that's it for style under advanced the only thing I wanted to show you here would be the switch editor loader method by default is disabled but you can choose to enable it and you would only want to do this if you're having some sort of difficulty technical difficulty that is using element or you can switch this to enable and you will be provided with certain information and that information you can provide either to your web hosts or the developers of elemental so that's it under settings now for wool manager you can determine who has the ability to edit pages post content with elemental so if for some reason you don't like your contributors you can come in here and simply say no access to the editor and your contributors will not be able to use elemental on your website so that's what the vault manager will do on the tools most of this stuff here is pretty advanced stuff but you've got something there called the sink library so what happens here is every day your plug-in will automatically try to sync with the elemental library and the elemental library is basically where all the features and little updates of elemental are in so if there's a new feature that's been added a new kind of tool that's been added to the elemental library your plug-in everyday will sink itself so that it can import that lit exchange however if for some reason you are racing against time and you need to get the latest version of elemental or the latest two from elemental as quickly as possible you can come in here and manually sync your library but again I don't know why you would ever want to do that all right on the replace URL in here if you're changing the address of your website you can come in here and do that however I'll strongly recommend that you make a backup of your database before doing this you've got something I call the version control which is an excellent excellent tool provided by elemental should in case you've updated to the latest version of Elementor and for some reason that update ends up breaking your website you can come in here and go back to the previous version of elemental and I think this is just fantastic it's a really really fantastic tool now over here you can also opt to become a better tester if you're not familiar with this concept typically whenever developers of a plug-in are working on a new version of the plug-in they might want to release the better version to people so they can test and provide feedback so if you're feeling bored or you're a geek like me you can choose to opt in and become a better tester and you will be notified whenever a better version of the plug-in is available for you to spend time testing out you've got the maintenance mode and in here you can actually choose to provide a comment soon or website on the maintenance our page and you can come in here and choose those two and then when you choose one of them you can then choose who has access to this particular page or who has access to the backend who can actually see the real content of the website but you actually enable this you need to create a template don't worry we'll take a look at this a bit later in the course as well and then finally we've got the system info again most of all this stuff is technical jargons and you might just only need to provide any of this information if you're trying to troubleshoot a particular problem and then of course you got to get you started knowledgebase yeah yeah yeah and then custom forms you can add custom funds but that is only available with the pro version of the plugin so well that is it for the general settings and tools with elemental let's now begin to build out content using this fantastic plugin let's now create our home page using the elemental plugin now you can either just go to your dashboard and click on the create new page under the elemental section or you can simply go to pages click on add new and with elemental active you will see this big blue button that says edit with elemental click in there and this will take you to the element or interface and ok ok ok so right now you can see that my page title has been named elemental hash tag 11 for some reason yours might be different doesn't matter but this is basically the elemental interface now on the elements over here this are basically the building blocks which you can use to create content on your page so you've got the basic elements you've got the general elements as well and then of course you also have access to the WordPress widgets and naturally you will have more access with the pro version of the plug-in but the basic elements in general are more than enough for you to create some really awesome looking pages now down here you will notice that we have this gear button I'm gonna click on the gear button right here it's for settings and in here this is where we can now add the page title so I'm gonna call this home alright it's gonna be the home page the status we'll leave it on draft no featured image I'm gonna hide the title as well we don't need to display the title and now in here under the page layout you have access to 3 different layouts you have the default layout you've got the elemental canvas and then you've got the elemental fool with the difference between this two is that with elemental full-width you're basically going to include the header and the footer from your theme however you will be able to create content that goes full-width on your website using elemental but with elemental canvas we are not important the header footer from the theme we're just gonna start off with a blank template and that's exactly what we're gonna do because remember I said we're gonna build everything using elemental so I'm gonna choose the elemental canvas and I'm simply gonna go ahead now and publish the page and it says who are you looking at this live have a look we can either click on have a look or click on this eye right here and you can preview your changes so this is exactly what you should see right now this big white empty screen and this is exactly what we want because like I said we're gonna build everything using elemental before I round up this video just want to give you a very very quick tour of some of the options in here you see this button right here the one with the circles with the nine circles this would always take you to the page you can access your elements and then this one right here the one that looks like a menu with this you can choose your default colors and fonts most people take a look at never next our class but from here you can also exit to the WordPress back and I know you probably might want to do this every now and then go to your back-end maybe make one or two changes so this is where you would be able to access your WordPress dashboard so that is it we have successfully created our homepage and before we actually round this up let's go to settings go to reading and make sure that we have set our home page to display the home page let's save our changes make sure this is actually walking and cool all right so our home page has been set to the home page with no content Jeremy in the next very next video well will now see it default values what we're gonna do now would be to set up our global values and what I mean is we can set default font families for our text and we can also set default colors of our text which we will be working with so a question might have here is why set up global values what is the advantage of this well the advantage here is that once you set global values for your phone family and your colors elemental will continually use those values for the specific text that you've set those values to continuously over and over again what I mean here is say for example you said your H wants you be of a particular font family and a particular font color whenever you add an h1 tag on your website Elementor will automatically use that font color and family so you don't have to constantly go to all your h1 tags and set the color there set the family there go to another h1 tag and repeat the process so global values just is just you add in your values once and for all and the Elemento using those values over and over again you can always of course choose to change those values change those global values or you could just change the individual values for specific tags when you want to so to do this I'm just gonna click on the edit with elemental link right here and just go straight to our elemental interface alright so what I'm gonna do is I'm gonna click on the menu button right here all right click in there and now in here we've got on the style we've got default colors alright so I'm gonna click in here so over here right now by default you've got this four colors which are used for your primary secondary text and then accent primary will simply mean your major h1 and h2 tags secondary I believe will be h3 h4 to h6 and then text refers to the actual text of your main content your body text and then accents could be used for things like lists I think headers for your accordion styles and so on so what I'm gonna do is I'm gonna choose this palette right here this one you could choose any kind of palette that would go with your design so all you need to do like I've it'll just be to click on any of them and then you can now begin to change the actual colors on the inside so for example I want to change the primary color over here I'm gonna change this over here to this version of orange I like this particular color so i'm gonna click outside now i'm gonna do the same for secondary as well i'll paste that color right there click outside and then for the actual body text I'm gonna go with pure white FFF that's that's for white and then for the accent honestly actually haven't decided on what color on the go with this one I guess I'll just go with the same orange for now I could always come back here and change this alright so this is basically my color palates not the most decorative there's just two colors orange and white but this will do me just fine I'm gonna hit apply for that and then I'm gonna go back in here go to default fonts all right now I am by no means an expert web designer I can build websites but I'm not exactly the best designer out there but from what I've learned from most web designers worked with is that you typically want to go with two different font families one for your actual contents your text and then one for your headers all right so primary headline I'm gonna go with the railway I'm gonna go with railway for the primary headline the weight of course refers to how bold it's going to be will stick with 604 now secondary headline I'm gonna go with railway as well all right stick with the 400 for the weight I think that's okay ah body text now I'm gonna go with monserrate for this one alright I'm gonna go with montserrat weight is 400 cool for the accent text maybe we can stick with a bottle and what light changes a bit later but this is what I'm gonna go with for now I'm gonna hit apply and that is it for our fonts let's go back to the menu and we've got the color picker over here this is where you can choose the colors that you want to walk with whenever you're adding text to your content so you can choose or whatever color palettes suit your fancy I'm gonna go back and well that's pretty much it for the global colors and fonts we've also got the global settings and this is exactly what we saw a few videos ago where you can choose your content with choose the defaults to generic fonts and so on what else do we have here we've got the dashboard settings so you want to go back to your back-end as usual this is where you would go to you can video page exit the dashboard and that is pretty much it now unfortunately we can't set universal background colors or background images for our pages but we can set background colors or even images for our individual pages so to round this video up I'm gonna add the black background specifically for our home page and to do this I'm gonna come down here it's where you've got the settings for the page and I'm gonna go over to style and an understand we can choose two different kinds of backgrounds we have the classic we have the gradient I'm gonna go with the classic and then we can choose an image or we can go with a color I'm gonna go with the color and of course I'm gonna go with black and well there you go with edit the black background close to home page hit update let's take a look at what we have now from the front hand and that is it alright so now we are ready to begin adding content to our website ok the moment of truth has arrived now we're going to add content to our website using elemental and what we're gonna add would be a header with some text and in the background are gonna have a video plane now we're going to ignore the actual real header for now which would contain the logo of our website and quite possibly also a menu well ignore that for now we'll add that much later so let's just go ahead now and add the text and the video backgrounds I'm gonna click on edit with elemental and all right so this is what you are going to see alright you're gonna see this black background and you're gonna see in here where you can drag a widget into this particular box the way the whole thing works here is this alright basically you've got your elements to the left which you can drag and drop so you have different elements like one for an image one for video button heading and so on so what I'm gonna do right now is I'm simply gonna drag the header and I'm gonna drop it inside of this particular section I'm gonna drop that in there and there you go alright so by default you're going to have some textures in add your heading text here I want you to pay very close attention to what we now see on the screen over here in blue you can see we've got three different buttons you've got one that says add to section one that says edit a section and then another one that says delete the section inside you're gonna find in kind of like dockage grey you will see this button that says edit this is for the column alright and now over here to the right you will see another blue button with like a pen this is to edit the actual text so the basic structure of an elemental page is as follows first you have your section and then inside of that section you're gonna have a column it is now inside of the column where you'll now have your element whether it's an image video also text now it's possible to create more advanced structures by simply dividing this section into several columns and then inside of those columns have even more columns or inner columns and then finally in those inner columns you could then have your elements I'm gonna change the default text in here right now - don't get hacked okay alright so for our header on the content we have access to a link we can add a link specifically for this piece of text we can change the size at attack change the element if we wanted to on the style we can change the default text color of orange and give it a very specific color if you wanted to we could also change the typography as well make changes to the default font family which is Ubuntu which we've set for our headers we can change the size the way its transformation style and so on you have access to all of these wonderful options and then of course you can add a text shadow and then blend mode I will take a look at this much later in the course and then under Advanced you have access to things like margins patterns our entrance animation which we will take a look at in just a moment you could also add a background two types you can either go to classic where you can add a background color specifically for the text or add an image you can even control what happens when you hover over this particular text you can add border as well responsive or take a look at this a bit later alright that's it for this particular text let's add the video to a background now and to do this I'm gonna click on the button here that says edit section alright now for the section we have three different tabs we have layout we have style we have advanced on the layout you can control how wide you want the contents of this particular section to go now there is an option in here to stretch the section but I don't go into details about this what you should concern yourself with are the two options in here where you have boxed and then you got full width with boxed you're basically saying you don't want the width to go full alright alright you don't want the contents of the section to go full width if you want to keep it at a controlled with so in such an instance you can come in here right now and indicate how wide you want the section to be or you could simply go with full width and in this case right now you're basically saying I want the contents of this section to extend to the ends of my screen and you can control the columns gap we'll take a look at this a bit later and then for height you can set the height to fit the screen or give it a minimum height as well content position you can position your content either in the middle the top or the bottom and on the style this is where we're going to add our video note now for the background type you can go with the classic which would be a color or an image you got a gradient but now you also have a background video click on background video and in here it says youtube link or video file mp4 is recommended so you can either add a link directly from YouTube Vimeo but if you have a video in your media library well it's very easy to add it I have one in my media library so I'm gonna come in here right now click on the menu button and I'm gonna click on the dashboard settings this will open up a new tab I'm gonna go to my media click on library and this is my video I have a video of this serious-looking individual staring at a screen right there so I'm simply gonna go ahead now and grab the URL in here let's copy that copy and then I'm gonna go back to my element or I'll go back to edit the section link go to style background and then in here for the video link I'm gonna go ahead now and paste that oh yes okay so we can kind of see his mouth and nose at least but with the video right now we can control when we want the video to start the start time at the end time as well we can also add a background overlay but let's just see how this looks like okay I'm gonna hit update right now okay and let's let me just close this media library let's now preview page and see what we have let's preview the changes okay all right yeah that's done we are good to go and I'm joking I'm joking this isn't this is okay this video is too short we need to make it a bit taller because all we can see right now is just the guy's nose and now and uh well we need something better than what we currently have all right I'm gonna go back to edit with elemental okay and wait for this to load all right let's go back to edit the section to go back to the hide in here so for default I'm gonna change this right now to minimum height okay this is much better right now and I'm going to like this a little bit taller let's go with uh let's go at 500 for now 500 pixels okay all right now for the text I can click inside of the actual text area and you'll take me straight to the area back and now edit the particular header so I'm gonna go with style and for the typography I'm gonna click in here and I'm gonna change the size right now we're gonna go all the way make it really big alright let's go with a 115 and I'm gonna click in here where we had the text area I'm gonna press Enter so now we have don't get hacked go into two lines let's update this and for me I'm gonna click on the preview changes let's see what we have and okay not bad not bad at all the video looks much better but I still want to make this a little bit bigger so I'm gonna go back and what we're gonna do is we're gonna go to at its section we're gonna change the height now to 640 pixels make it really big and then for the text area i'm gonna click inside again i'm gonna go to style and we're gonna go with a size of 170 pixels make it really big update now let's go over here to see and by the way you can see that the changes have taken effect so whenever you make changes to elemental any hit update if you have a browser or a window currently displaying the page you're editing it will refresh automatically so you can see right now cooled our video is much bigger right now we've got our text and i like this let's quickly add some animation so i'm gonna go back in here i'm gonna click on the text area now to add animation for a head now I'm gonna go over to advanced come over it to entrance animation and they've got different times if animation can play with you've got the fading left you've got the zooming and so on the one I want to use is the light speed in and it's the one right here let's spit in okay now you can also control the duration like how quickly do you want the animation to run do you want to go with slow or you want to go it fast okay I'm gonna stick with be normal you can also add your animation delay if you wanted to but that is it for our text I'm gonna go to the Edit section area and what I want to do it has to go to style and what I'm gonna do is to scroll all the way down here so you have the background overlay I'm gonna click in there and I'm gonna add a bag and overlay of black so I'm gonna click on the color right here I'm gonna choose black as the overlay okay oh sorry all right so from here right now I can change the opacity I can either go with like full passes or no one can see anything or I can just make it about let's scroll a bit down here to 0.42 okay I think this is pretty cool yep I like this go ahead now and update this now let's see what we have refresh and boom don't get hacked pretty pretty awesome right so that is it this has been a long long video but we've successfully been able to add a background video and if it had some success over some animation and some overlays so I hope you enjoyed this video and I will see the next one where we'll continue to build out our website alright so welcome back and in the previous video we successfully added our background video with the heading don't get hacked so now we're gonna add a second section and this one is gonna be a little bit more advanced because it's gonna be a two column section and we're gonna have one image in the very first column and then two elements in the second column so let's do this I'm gonna click on edit with elemental of course and I'm gonna scroll down here I'm gonna click on the plus button right here click in there and I'm gonna choose this particular structure you can see it's two columns so I'm gonna click in there so now we've got two columns one on the left one on the right cool now the one on the left I'm gonna go to my elements and I'm gonna drag the image element I'm gonna drag that in here and by the way note how we have a light blue background that pops up when we try to add an element that tells us that the column is ready to receive that particular element so there you go I'm gonna release my mouse drop the image in there and I'm gonna choose my image from my meter library and I've got a few of them by the way if you want anyway can I get like really cool images to use on my website check out our pixabay.com they've got thousands and maybe even tens of thousands of three images you can use on your website on various kinds of topics alright now you can see I've tabbed in cybersecurity and these are all the images I can use for free on the website so as an example if I liked this one right here with the hand I can click in there and then over here to the White House just go to free download choose my size and that is it so check out pixabay.com today all right I'm gonna choose this image right here it looks very techy mysterious dark I like it I'm gonna click on insert media now for the image size we can choose from a variety of sizes I'm gonna go with the large size because it's pretty big no captions no alignments no links no Stalin let's just leave that as it is I'm gonna go back to my elements block and now for our second column I'm gonna drag the heading in here and I'll paste that right there now for the text I'm gonna say what is WH H like who are these guys alright ok no styling no nothing else let's just close that now I'm gonna drag a second element which is gonna be the text a tool now check this out alright dragon I'm dragging it's going it's going it's passing the first column it's passed the first column it's got it into the second column now as you can see I can either drop the text just beneath the header or I can go above the header so you can see the difference between the two that's below that's above I'm gonna drop this below and now we have some text I'm gonna remove all of this and I'm gonna put some text I already copied right there and it says established in 2014 you were a group of white hat hackers and fight crime that has to be where we are here and your game is over ha all right so I'm gonna go ahead and update this and let us see what we have let's preview our changes and not too bad okay this is cool however we can improve this you can see right now that the image is a bit small in comparison to the height of the text on the white so let's do this I'm gonna go back in here and the first I'm gonna do is to expand the width of our section let's go fool with let's update and let's see how this will look like now this looks better but get in there now the text is a bit too bold for my liking so let's go to our global forms right here and we're gonna change the body text the weight from 400 to 300 let's do that let's apply the change and okay let's come in here right now let's refresh this page and see if that has taken effect okay it's taking effect now that sex is a bit lighter I like that okay this isn't too bad at all let's see maybe the text we can change this actual size of the text also let's go back in here go to style go to typography for the size we're gonna go with let's see 21 pixels maybe or 20 pixels 18 pixels I think this is cool 18 pixels alright let's update that let's see how this looks like scroll down and okay this is actually too small let's go back in here change this back to you let's go to 21 all right I think 21 should be just fine that's updates and now let's see how this would look like and okay alright not too bad now before I round this up you may have noticed a small issue and that is the fact that the actual text for our headers doesn't match what we have in the editing section right now you can see the way our W looks like right here it's different from what we have over here so clearly this is a different font this is not the real way font that we've set as our default fonts for our headers remember when we came in here and we set a primary headline to have railway as a font family so premiere headlines is h1 to h6 actually with elemental that's your primary headline so it's very obvious that this is not real way so if you're having this kind of issue what you need to do is to simply go to your back end you want to go to your element or go to tools and then from tools where you have regenerate CSS you want to go ahead now and click with generate files basically you're telling Elementor to like refresh all the CSS changes to your web so that's basically what that means so now let's take a look and see if there is a difference and well there you go now you can see that we now have the W looking exactly as it should this is the railway formed in action so awesome final change before we round this up I'm going to Center our text let's enter it actually I think that might better alignments to the center and for the actual size of the text itself I'm going to go to style click on typography and let's go with 60 pixels 60 pixels make it quite big I'm just go down here 60 and we can even change the tag from h2 to h1 let's go with h1 update that and there you go so let's see how this looks like now let's scroll down and see what we have Vanda well not bad that is it all right so that's it we've successfully created a second section with the image the header and some text if you have any questions about this or what we've done so far do let me know thank you for watching the video and I will see in the next class before we progress any further I quickly wanted to draw your attention to two different tools that you might find useful been working with elemental and the very first one here's gonna be down here called the history tool and when you click in there you're gonna have access to two different tabs actions and revisions actions will show you the changes that you've that are currently are making to your document now because this page has been saved I haven't made any changes thus far the history is empty with revisions on the other hand this will be for changes that you've made a while ago so maybe changes that you've made up until the time you actually saved your document and you can see right now that we've got changes all the way till one day ago 18 hours ago 56 minutes ago so to restore a previous version just click on the time so by restoring back to one hour ago and this was how our page looked like an hour ago and that's exactly how you would work with the revisions tab and also with the actions tab as well once you begin to get the history available the second tool is going to be the Navigator this is more applicable than just refresh this page first make sure this is refreshed and all right so with the Navigator this would be more useful when you have like very long pages with lots of content this quickly helps you to locate columns or elements on your page so it's an example right now the Navigator tells us that we have two sections and if I clicked on the second section I can expand it we have the first column we have the second column right there so if I click on any one of these elements to the left you will now see will be taken straight to where we can edit that particular element and there is also an eye to the right of each element in here I can choose to hide that particular element just to see what the page would look like so there you go and that's it for the navigator it's a very useful tool for quickly identifying and tracking down elements or columns on your webpage so that is it thank you for watching and now let's continue building our website all right the next section we're going to build will be this Services section and over here what you're looking at is actually a mock-up of what we're going to be building and you can see we've got services as the main headline and then we're gonna have three columns on the very first section and then another three columns in this second section now you can see they are filled with images as well as text so I know this might be a little tricky like how exactly would you create this kind of structure because we know what's happening here is we have one big section that contains two sections and each of those two sections have three columns in them so what I want to do here is to show you how you could create this kind of structure so let's go let me just close this and go to our actual website so first times first I'm gonna go ahead now and create the very first section by simply dragging the header in here I'm gonna drop that right there all right so this is gonna be our very first section inside of the main section now for the second one here's what I'm gonna do for the second section I'm gonna go back to our elements I'm gonna make use of the inner section element right here I'm gonna drag that and I'm gonna drop that just beneath the main header and there you go so now we've got this section inside of the main section but there is a small challenge this is two columns we're looking for three columns now over here on the structure you do see that we can change the width of each particular column we can go with a three by six to six or 66 by 33 but we can there is no option in here to add more columns so how exactly are we gonna add a third column here oh wow this must be a very very very difficult challenge ah need to do some like expert coding to get this done but it's actually very very simple you know what you're gonna do just right-click right there aDNA : that's pretty much all you need to do just right click anyway inside of that section I click on your mouse and then look for the aDNA column and then simply add that column that's all you literally need to do it's a simple how some of this tax tasks can actually be achieved they actually look very tricky at first but then once you know what to do it becomes so simple alright so to add the second section that will contain the next elements you might be thinking okay well then I'll have to go back to the elements in here drag the intersection and simply repeat the process all you actually need to do is just to go to this first section in here and then just simply right-click where you have the Edit section by clicking there and then click duplicate and there you go we instantly now have three columns in the second section so that's how to make use of some of these little tools that you have with elemental it makes you work so much faster so much more convenient now I might as well mention that with elemental you can actually be very very precise with how wide you want each individual column to be right now they are all at 3.3 percent of the width of the entire section but if you dragged your mouse to the edge of one column right there you can see the symbol now has changed let me just do that again right there once you send a symbol that means you can now expand you can increase or decrease the width so I introduce just click and then you can then either move to the left alright move to the right or move to the left so you can be very very precise with how you want your individual columns to be wide and once that's done you can simply just come in here click on the research structure button right here I'm sorry just click back in here then click on research structure they need to take you back to the original width of each individual column so that's how you can also increase and decrease the width of individual columns if you wanted to so there you go with successfully created our one main section containing one column that has a header and then two inner sections that have three columns in each one of them so that's it thank you so much for watching this if you had any questions do let me know I will see you in the next class now that we've got the structure laid out for our third main section I want to give you a small assignment I want you to pause this training and trying to replicate exactly what I have over here so you can see I've got services centered in the middle and I have got my images on my text in the individual columns so I want you to try and replicate what you're sitting in here right now on your website if you don't have access to these images please feel free to use any images that you want you can also use your own type of text you don't have to follow or use the exact same words I've used in here just try to get your images set up and your text set up also pay attention to the fact that with the text it's centered in the middle of the column it's not positioned at the top or the bottom it's right there in middle so try to do that so please take some time now pause the training try to get this done and once you're done you can then move on to the very next video I'll show you how to actually provide this kind of content alrighty I trust that you've tried your best to solve the assignment and if you gave an honest attempt well congratulations I'm proud of you and if you didn't well shame on you I'm just kidding I'm just kidding I know not everyone has time to make attempts at assignments and things like that so it's okay let's try and replicate what we see right now on our main website so the first thing here is the services okay we're gonna go ahead now and add the services header make it make it sent it as well so let's just do this gonna click in here and I'm going to say that I'm just go over here I'm gonna call this services the alignment we're gonna take it to the center okay let's update this looking good and alright so that's done with the services next right now is going to be a very first image so nothing too complex in here I'm gonna click on the plus button right here to add in element I'm gonna drag my image in here and drop it into the box I'm gonna choose my image and it's the one with the silhouettes of people so I'm gonna insert my media and alright now here is something that you obviously most likely may not have done and I also didn't give you any hints to this but it's okay for the image size I'm not gonna go with the large default size I'm gonna go with the custom size and the custom size here will be for 60 by for 60 I'm gonna apply that and if you're wondering why have I gone with this particular image sighs it's just with the benefit of a hand side I've tested our different sizes and for 60 by for 60 looks to be the best for at the website so I'm gonna stick with that all right so that's it for the very first image oils do we have in here we've got the text we perform ethical hacking blah blah blah right I'm gonna copy this text all right so this is obviously gonna be a text box so I'm gonna go back to my elements let's drag the text edit all in here first all right and I'm going to paste the text they were just copied right there but then the head of itself the analysis is gonna be a different element so I'm gonna go back in here go back to my elements drag a header am I gonna dump it right in here just above the text and there you go so what was the analysis okay analysis with the header so analysis and it's also positioned in the center or its analysis right now it's in the center now that text is cell the text size we're gonna change that so let's go to style and I'm gonna go to the typography and we're gonna go with 30 pixels so it's not too small it's not too big I like that as it is and we're gonna do the same for the text itself as well we're gonna go to style and we're gonna go to the alignment right there center and then typography let's go with 20 pixels so it's not too small not too big also cool alright so that's it done for the text however notice that it is centered or positioned in the middle of the column so to achieve this what we're gonna do is we're gonna go to the column button right here click on it and then in here for content position we're gonna go with middle and there you go so that's exactly how you can position content in the middle of your column note that we could do the same with this section as well if we go to edit section right there you have the exact same option in here to position your content in the middle however note that if you apply this change on this section it will affect all the columns inside of that particular section so be careful about making such changes on your main section all right cool so that's it done for our first image and our forced piece of text the second thing right now or rather the third element would be the same image this one with the padlock so what I'm gonna do very quickly to achieve this is just to right click on our first image right there copy go in here and simply paste that image and then from here I'm simply gonna go ahead right now and change the image to the one for the padlock insert media and there you go so that's a very very very quick way to have achieved what we just did and I'm gonna do the same again in here for the fifth column this is the one that has the guy staring at the computer so I'm gonna do the same i T I'm gonna right click again inside I'm going to paste the image go in here just change that image to the guy and there you go very very very quick like so these are some of the ways how you can very very quickly just copy and paste content and then just edit the content as you need to very very quickly with elemental alright so the last two columns are going to be some more text we've got consultancy and then we also have our prevention all right there's a few ways how you could quickly achieve this one as well you could simply just copy the entire column in here you could just go ahead and say okay copy coming here and then just right there you have the bottom idea paste you could do that however when you do this way it will automatically create an additional column so you could stick with this and then just simply go over here and delete the first column all right so that's one way how you can quickly achieve that and we could do the exact same thing here in here as well again right-click on the column and then paste the additional new column and then we can go back in here and then delete the empty column so now there you go now we've got our two new text columns all we need to do right now will just be to change the text so let's quickly do that I'm gonna go ahead right now and copy the one for consultancy go in here click in here we move the text paste that and then of course the header we'll change this to consult and see and then the last one this is gonna be prevention all right let's go ahead and copy this and go back in here click in here and we're gonna go ahead and paste that and then of course change the header to prevention and you go updates and Wow let's actually take a look and see our website right now and see what we have done okay not bad at all I like this all right we're getting there so just a few things to point out whenever you go ahead and copy a column or you copy an element basically you're gonna be copying both the actual content and whatever styles that you may have applied to that particular or elemental column take for example look at this alright if I go back in here to the very first text coma we have analysis if I go over to style and I change the elements to left okay now if I right-click on the text that at all and I click copy if I now go back let's say to consultancy right click on the text area you can see we've got the option here that says paste style so then click on paste aisle and there you can now see that it takes us also now shifted to the left because we copied the style of the very first text editor in here so that's a very quick tip for you when it comes to copying and pasting you can either copy just the style and the content and if you choose to either paste both the content and style or just simply paste only the style so I'm just doing my ctrl Z ctrl Z to go back to how it was so well there you go that's it thank you so much for watching the video if you have any questions about what we've done in here please do let me know and let's continue welcome back hope you're enjoying the course so far and in the previous video we successfully added the services section where we highlighted the three main kinds of services that we offer but now it is time to add the Y walk with us section so ideally as a business once you've told your clients the kinds of services that you offer you typically want to tell them why they should do business with you so here's exactly why we're professionals we got the experience we're proving and we are affordable so we're gonna create this section right now so let's get this party started I'm gonna go over here to my back-end I'm gonna drag the heading element right there shove it in there and our title here would be Y walk with us because we're the greatest and the best all right my walk with us with a question mark I lined that to the center cool let's update that and then next is gonna be the first text block right here with the icon so for this particular kind of content we're gonna make use of an element known as the icon box and slide hey it's on the general icon box but before we can actually begin adding these elements we have to create a new section so I'm gonna click on the big red button right here at the new section which is now three columns I'm gonna click that in there so for the very first column right here I'm gonna go and add the icon box click and drag drop that in there and cool so the icon itself right now is the ASL interpreter that's the icon and then for the text I'm just gonna go ahead and copy this text real quick copy that the title is professionalism so that profession nalem and then we've got our text I'm gonna paste that okay cool this right now is a little bit too big so we'll have to change the size of the title as well as the text and also the color because we want to make it white as opposed to orange so let's go over here to style all right so on this style we can change the settings for the icon or the content let's start with the icon it's orange which is good but we can also change the size make it really big make it really small we're gonna go with 50 pixels I believe but a full file it's good for the 5 pixels for the 5 pixels and then if you want you can rotate to the left right 360 180 however you want to play with your icon anyway I'm not gonna rotate it at all we'll leave it on 0 and that's for the icon now for the content we want to change the color of the title so we're on the title as you can see so I'm gonna go over it to color and we're gonna make this just pure white no white and then for the typography we're gonna change the size we're gonna go with I believe 25 pixels should be about right let's just do this 25 pixels okay and then for the actual text itself we'll go over here on the color and we're gonna change the color just just to make it a little bit different from the pure white which is the title I believed when I was looking for was 9 9 9 that's the hexadecimal value so this is kind of like gray we just to make it different from the pure white of the main title so that's that for the color and then the size we're gonna go down to let's see oh I'm sorry I'm editing the title alright alright description typography the size here where is it over here the size is going to be 18 pixels I think 18 should be it should be about white it's in pixels okay let's update this and let's see how this looks like let's preview our changes please be good let's see oh it's cold down here well walk with us okay this is not bad at all what do you think I think this is good yeah the size is all good it's all legible I like this I like this a lot so let's continue let's go back so next now is going to be the proven solutions section so I'm gonna copy this now to add that here's what I'm gonna do okay I'm gonna go back to my elements I'm gonna drag the icon box and I'm gonna drop that just beneath the first icon box here you can see we have the blue background the highlights in saying hey I'm ready to accept this new element I'm gonna drop that in there and there you go alright so for the icon that's gonna be the bullseye bullseye is the icon and then the head and right here is gonna be our VinSolutions okay and then the text I'm gonna paste that right there alright okay let's scroll down here and see okay good alright so here's we're gonna do it now for the actual style in we're not gonna go back in here and begin to change the color change the size all that's for amateurs but we're professionals okay so here's exactly what we're gonna do I'm going to right click inside of the first icon box right click right there just click copy and then I'm good to I'm gonna go over here to the second icon box right click again and then I'm going to paste the style and that's it very very quick right so that's that we've done the first column right here professionalism and then proven solutions and then for the second main column right here very very easy we're just gonna add the image element to drop it right there let's choose our image and of course I have my futuristic looking image right here what they I insert that media right there and for me you can see the size is large 1024 by 1024 okay I'm gonna align this right there in the center so I'm gonna go to edit column and then I'm gonna change the composition from default to middle okay we're gonna go back to the actual image itself go to style and let's add some opacity make it a little bit dark and I think this is okay 0.44 let's go ahead and update this and let's see what this looks like right now let's check this out all right go scroll down and okay not bad not bad at all I like this so next up right now we're just gonna add the remaining two icon boxes welcome back and as you can see I have added the remaining two ICANN boxes for experience and affordability now I also wanted to draw your attention to the fact that each icon box has exactly three lines of text this is very deliberate and it's a trick that many of us web developers and designers tend to do whenever we are building websites it just helps with the alignment and makes the webpage look a lot better when you have equal lines of text are in each column so a few things to do before we realm this up first I'm going to expand the width of our section because this is very congested so let's go to edit page and we're editing the main section containing all these columns in here so we're going to choose the content width from box to fool with okay and then for the columns gap which would represent the gap between the columns we're gonna give this wide okay wide and then for the first club mark here I'm gonna click on edit column let's give this an animation that will zoom in what I'll go to 18 down left so it's like that and then we'll do the opposite for the third column that's going to be rotate in down right okay like that that's updates and now let's see how this will look like let's refresh this page come over here okay this looks much better the only last change right now we need to make would be the actual image itself this is a bit too tall so I'm just gonna do this let's click on the image image size will go with custom image and so average at 500 by 500 so let's go ahead and apply that and that's update this and let's see how this would look like let's refresh this page and this looks much much much better than always really so that's it we've successfully created the wild walk with this section and it's got the icon boxes it's got the animation it's got the features looking image anyone who sees this website will be more than convinced that we are the best guys to go to for ethical hacking and cybersecurity so that's it thank you for watching if you have any questions to let me know I will see in the next class welcome back and the next section we're gonna build here would be the meet the team section and this is a rough sketch of what we're gonna build we have 16 members with their black and white images the caption identifying their name as well as the position and also some text just to describe who that particular person is so let's get this done pretty quickly I'm gonna go over here to my back-end and I'm gonna go ahead and create a section for the team members are gonna go with the 3 columns section however we need to also add the section for the header meet the team so we can do this very simply I can just drag a header down in here again and now I can move the header above the section for the team members by simply clicking on the edit button for the particular section containing the header click and then just drag that above the section of the three columns so this is exactly how you can move sections from one position to another alright so for the header let's just say really quickly meet the team and of course we'll align that to the center let's go back to our elements now for the team members very very quickly I'm gonna go ahead and add our image for our first team member and that's gonna be Bruce Wayne himself alright for the image size I'm gonna go with a custom size of to 75 pixels by 275 pixels let's apply that and then we're going to go with the caption and it's gonna be a custom caption and so the name here is gonna be our Bruce Wayne and then CEO okay let's go to style and let's close one for image not for the caption we're gonna make some changes first of all we're gonna change the text color we're gonna go with our orange color which is e five five five one two to keep it standard okay that's for the color and then for the typography itself let's click in here and there's a few things we can do here we can actually change the style from default we can go with italic and I think that's okay we don't really need to change any other thin I like this as it looks okay cool let's go back to our elements next up right now would be the text editor I'm gonna click and drag and all those job that beneath mr. Bruce Wayne let's come in here and just copy this text will quick alright let's go ahead and paste this text so a founder of whh and father of two beautiful kids Bruce has a passion for fighting cybercrime and is a huge Batman fan hold of guest okay let's go to style add a text color again we're gonna go consistently 999 make it a little bit dark all I meant will be to the and then for the sighs we're gonna go let's go with twenty pixels maybe trying to pick souls okay yeah I think this should be fine let's update and let's just take a quick look and see how this actually looks like let's go down yeah okay not too bad alright meet the team Bruce Wayne CEO ok cool now to create a next one which would be for ah Maurice Jones I'm gonna go over here go to our elements and then just very easily again I'm gonna drag the image and then just drop that beneath the text for Bruce Wayne drop the image right there and then I can go back to my elements once again simply drag the text editor and drop that beneath the image so this is exactly what I'm gonna do right now I'm gonna repeat the process for the second column and then the third column so please go ahead repeat the process add your image add the tags and then add some text do all your styling so I'm gonna do that for this six team what I define remaining team members I'm gonna pause the video and I'll resume the video once I am done welcome back and as you can see I've added the remaining team members we've got Clark and Kelly Jean with good Maurice Jones Chloe O'Brian and Stanley Jobson now to round this up you may have noticed that over here on the mark-up when I hover over the image it kind of moves up slowly and if I remove the mouse it goes back down you see that it goes up slowly it goes back down goes up goes down so if you want to create something like this this kind of effect it's very simple simply go to the image and then go to style and then understand you will see the hover option click in there and then in here you can choose your hover animation right here and the one that I had is the float so you can see right there it goes up goes down goes up goes down but that's very quick so if you want to reduce the speed make it a bit slower make it more elegant you can add your transition tuition and I'm gonna go all the way to 1.9 let's go to even let's go b2 alright so there you go you can see right now it offers up goes down it hovers up it goes down so you can apply this same effect to all the many images if you want to then just update this real quick and finally for the section itself I'm gonna add its own animation it's good to advanced entrance animation let's see zoom in yep I love that zoom in you can also reduce the duration as well slow fast will go normal I like that updates and okay so let's see how this looks like now let's go back down here I'll scroll all the way down with the team awesome I love I love that I love that that's pretty pretty good alright so that is it for creating the meet the team section and I will see in the next class the next section we're going to build right now would be the our clients section and as a business you want to showcase all the clients you've worked with to create some Authority and credibility with your potential new clients so how can we create this particular section with the images slide into the left well it's fairly easy but gonna go over here to a back-end and first things first let's add the header and this is gonna be our clients alright so let's make this an h3 tag let's Center that now we're gonna go against the default orange color we're gonna make this just appear white just for variety purposes so our clients and then next here is gonna be driving well it's gonna be driving security for leading brands so we're gonna add a second header just underneath that and this is gonna be drivin security for leading brands okay so we're gonna make this an h4 tag align that to the center we're gonna change the color as well we're gonna go with the nine nine nine Javan security for leading brands and this seems to be still a little bit big so let's go back to content maybe make this an h5 tag okay all right let's go back to style I let's see what else we can do on the typography let's space in we can go to this space just a little bit more okay I think this is let's see four point three four point two four we'll leave it on for for now I think we should be there should be okay we'll leave it on for for now all right so our clients driving security for leading brands okay let's update this now how do we create this carousel you can see images in there and ideally they should be moving from right to left let's do this I'm gonna go back in here and then I'm gonna go ahead now and drag a new element and that element is going to be our image carousel right here I'm gonna drag that and I'm going to dump that right in there alright so in here right now we can add our images so I'm gonna go to my back-end and I've got all these images from all the companies we've worked with all five of them I'm going to create my gallery right there insert the gallery now for the size I'm gonna go with the medium 300 by 300 and in here you've got all different kinds of options you can go with the slides to show how many do you want to show at a time the slides to scroll do you wanna stretch the images do you want to show arrows and dots or maybe none I do want to add links do you want to add captions and so on down here under additional options again you can go with a pause on offer or to play infinite loop and so on and so forth so you've got all these options in here and you can feel free to choose whatever options are tickles your fancy basically something go ahead now and update this and let's check this out let's see what we have let's scroll all the way down here my walk with us with the team our clients and well there you go so really there isn't any needs to add any sort of animation in here since the images are already moving themselves from right to left it will just seem like an overkill if we start adding additional animation in there so that's how to add the clients section and I will see in the next section welcome back and now that we've displayed the client section it is now time to also display testimonials from actual people this is another great way to build credibility and this is kind of like the mock-up of organ of build right now customer reviews and then we'll have some testimonials in three different columns so let's get this done real quickly I'm gonna drag my header in here and I'm gonna say customer testimonials we're going to Center that keep the orange color we're gonna go back in here right now and we're going to add a new section with three columns and now I want you to guess which elements are going to use to display our testimonials not that much of a puzzle we're gonna use the testimonial tab so I'm gonna drag that shrub that in there and for the text itself I'm gonna leave the default text as it is i I'm feeling kind of lazy so I don't want to create like real text so I'll just leave the default text as it is now for the image well I do have this guy who looks like a like a James Bond villain he looks like one of those guys who wants to take over the world you know um anyway anyway I'm gonna use this guy's image so I'm gonna insert that in there in his name let's call him Maximus Maximus Evon that sounds very like that sounds like the movie villain Maximus Evon and okay so his job we'll call him an entrepreneur obviously entrepreneur and all right so that is it now you can also decide to change the alignment to maybe the left or Center the image position you can maybe take it to the top instead so it's above the name of the person and the job title or you can go with a side I like a side a bit better now for the text itself this is a bit too large so what I'm gonna do is I'm gonna go to style and then first of all let's change the text color we're gonna go with the 999 so right it's a little bit dark okay and then typography we're gonna go with size and we're gonna go with I think was it 18 pixels 18 pixels seems about right mm maybe 20 now let's go let's go with 19 19 pixels should be fine so there you go let's take a look at the mock-up alright so the title is also the job that it was also a bit a little bit dark so let's do that I'm gonna change his name first of all so let's go to name change the text color we're gonna go with white and then for the job title we're gonna change the text color we're gonna go with the 999 again make that little bit dark and that is it let me update this and see how this would actually look like let's preview our changes now let's see Maximus in action I'm gonna scroll down here customer testimonials okay not too bad alright so as usual I'm gonna pause the video right now and add our two more testimonials welcome back and as you can see I've added the two women in testimonials for Raja Bing and inventor and leha nod CEO now I made two changes as well the text I decided to go with the full white collar and also change the font size from 19 pixels to 16 pixels I think this looks better this way now one more thing to add it will be the border you can see each of our testimonials have the white border so to do this it's fairly easy I'm gonna go to the column containing the testimonial I will go to style and then on the style I will click on border I'm gonna choose my prototype we've got different types I'm gonna go with solid and the width I'm gonna go over just that's great 1 1 pixel for the width and then you would notice that the border also has like a curve right there on the edges on the left right at the bottom as well you can see there's like a very slight curve so to create this curve effect with after increase the border radius so I'm gonna go all the way to 5 pixels and then the color itself for the border will be set to white as you can see so I'm gonna update this and let's see the effect that we have let's go down and there you go so you can't really see the bottom but don't worry it's because at the moment we don't have any content beneath the testimonials that's why we can't see the balla don't worry once we add content in the next video you will see the border but that's how you can add the butter to your testimonial so very quickly I'm just gonna go ahead now and copy the column I'm gonna go to the second column right here right click I'll paste the style do the same thing right here for the third column paste the style and let's update let's go back in here and see testimonials from real people and ok so you can see right now that we still have a slight change to make and that's because there seems to be no space between the columns the borders are pushed up right next to each other so German ver next video where I'll show you how you can walk with spacing so far so good we've been able to add lots of different kinds of content to our web page but you may have come to the conclusion that we need some space we need to add some space in between our sections I mean take a look at MIT the team for example and then the our clients there is very little space between our clients and then the last section of the mid-to team area you can see there is very very little space right there and even between our clients and customer testimonials we can do with some space we can create more space between these two sections and then also our borders the borders for our testimonials I'll write up next to each other we also need to create space between the testimonials and when it comes to space in there are two different kinds of space that you can are create a walk with first you can create space between an element and its immediate portal container and then second you can create space between elements themselves so between sections or between columns you can create that kind of space what we're gonna do here is we're gonna create space now between our columns for the customer testimonials so to do this let's go to the backend and now over here alright note I'm gonna click on the edit button for the very first column and then go to advanced all right now under advanced you're gonna see margin and padding now if you've ever worked with HTML or CSS before you probably already know what these two things are but if you don't let me explain you see margins and padding's can be used to create space however there is a difference in the kind of space that they create if you want to create space between let's say the text of the testimonial and the border or the container you would use patterns so patterns are basically used to create space for the inner element however if you are gonna create space between one column to the other you would use margins so basically margins are used to create outer space so let's check this out okay I'm gonna go back to edit button for the column go to advanced and I check this out okay if I came in here right now and for the pardon I said okay I'm gonna give a pattern of 30 note by the way that 30 has been applied to all before sides top right bottom and left I will explain why in just a moment but note the difference even though we've added padding to the right and the left the borders are still right up next to each other although we now have more space between the top and bottom but you can see that padding did not push the borders of our first column away from the borders of the second column see the difference but if I came over here to margin and I give the exact same 30 now look at that now we've got more space between the borders of the force testimonial and the border of the second testimonial but we now also have space between the top border of our first testimonial and then the head in the customer testimonial heading we now have most pissed because margins again will push a column away from its immediate surrounding columns or even the section containing that particular column so that's the difference between margins and padding's now the reason why the values are applied all together at once is because the values are linked together so if I came in here and made this that you want it would apply to all because again the vowels are linked so if you want you wanna lick the values and give different values to each side just unlink them and now you can add individual or values to whatever side that you wanted to go to so I'm gonna do this I'm gonna give parens 0 because we're not working with patterns in here and then for the margins what I'm gonna do is I'm gonna give a margin of 16 pixels on the rights of the very first column so there you go let me go ahead and update this let's jump in here and see the effects let's scroll down and there you go so we now have 16 pixels of space between the right border of the fourth column and the left border of the second column so let's go back and add some more space in here again I'm gonna go over to the top column now and I'm gonna do this I'm gonna go to advanced I'm going to unlink the value of the margin and then I'm gonna give a value of 6 in pixels to the left so nowadays peace between the right border of the second column and the left border over the third column let's go ahead and update that and let's come in here and let's see the change and there you go so that's exactly how you can create space between columns in your section before I round this up let's take a very quick look at our patterns all right so I'm gonna go in here so let's say for example I wanted to add some padding for our testimonials if I came in here right now and I added padding let's go with let's make this very obvious let's go with let's see 30 pixels all right so now you can see we've added 30 pixels it's on the left it's on the right if I Unchained these and I excite increasing the values for the right you can see right now that the text is now being pushed from right to left if I give this zero on the other hand and I came over to the left and I give this a value of let's say 70 now you can see that we have space on the left because now we're pushing our content to the right of its border so this is exactly how patterns what patterns will affect the content itself inside of either a column or a section so I'm gonna go back and give this guy's the value of zero again cuz again by not looking to create any space for our patterns zero link the link put links back together and there you go so that's basically the difference between our patterns and margins if you have any questions about this please do let me know thank you so much for watching and I will see in the next class let me now introduce you to a different way of adding space between your sections and what I'm gonna do here is to add some space between the mid the team section as well as the our client section and also between the our clients section and also the customer testimonials you can see that all this section are too close to one another now technically we could do this all right I could go to the mid the team section and I could add imagine at the bottom so it pushes our clients section down all I could do the opposite I could go to the our client section go to edit section go to advanced and I could add margin at the top so let's say for example I could go over 25 pixels now you can see our clients section has been pushed down up by 25 pixels so you could technically add margins either at the top or at the bottom of your sections but there's a different way how we could also do this so let me just go back to 0 in here I'll I'm just update to create space we could make use of a new element known as the spacer it's right here so what we could do easily is to drag the spacer element and we could drop that just above the our clients section note that it's going full width all right it's not in here it's not under the Chloe O'Brian column it's actually just above the our clients head up I'm gonna drop that in there and what this does is it just creates space by default the value here is 50 but we could go all the way to 1000 or whatever so 50 I think is actually a pretty good number so that's it 50 let's go ahead and update this page and let's see what we have let's scroll down here and there you go so now more space between myth the team and our clients like that let's do the same enough for our clients and customer testimonials I'm gonna go to our elements and then just above customer testimonials let's track spacer and then drop that in there and we're gonna leave it on 50 pixels as well no need to increase that let's update this let's take a look at what we have let's see how this looks like and there you go a lot more space now between our clients and customer testimonials so that's how you could make use of the space element or at the spacer there's another one known as the the divider the difference between these two is a divider would actually create a line like a rule I to create a line between your sections personally I really ever use it but if you wanted to it's available for you to use before we round this up I want you to pause for a moment and think of how you can create space between the customer testimonials text right here and then the borders of the actual testimonials themselves you can see it's way too close so pause the video for a second and try to figure out how you could create the space did you pause have you tried okay well I'm gonna continue right now so let's go back to the backend what I'm gonna do is I'm gonna go straight to edit the header go to advanced then very simply I'm going to add some margin at the bottom right there let's go with 25 pixels 25 pixels okay that should be enough let's go ahead and update and I think that should be good let's check this out let's go all the way down and there you go tuna five pixels of space between customer testimonials and the actual testimonials themselves so that's it thank you for watching and I will see in the next class all right we're getting to the finish line and the next section we're gonna add here would be a two column section within number counter on the left and also a powerful message on the right what am I talking about well let's go ahead and add our two columns section first of all all right now over here I'm gonna go and add a new element known as the counter I'm gonna drag that I'm gonna drop that in here so basically we can create this kind of effect where at numbers test form sets in right where the counter starts on a certain number and ends at a certain number as well so the second number is zero and the any number here would be 124 all right let's remove cool number we don't need that text let's go to style let's go to the typography we're gonna make this very big 200 pixels which is the maximum all right and then on the right we're gonna add the header and the text is gonna say the number of businesses attacked every hour and then we're gonna say don't be one of them right there you go so if you things to change in here let's go to style text color we're gonna go with white let's go back to the content I line that to the center go back to style go to typography the size what to pixels I believe should be enough let's go to the Edit column section right now for the actual header click in there and then the position of the content we're gonna go to middle okay and then let's go back to edit this section let's add some margin at the top let's one link this imaginary top here will be 25 pixels and I think that should be let's go ahead and update the number radda update our new section let's check out the changes and see what we have when I was scroll all the way down here make the team our clients cuz my testimonials and there you go okay alright so the number of businesses attacked every our don't be one of them let's add some animation in here for the section itself let's go to the engines animation and we're looking for one called the roll n which is a special animation and that's it that's how it rolls and rolls in from the left let's go ahead and update and let's take a look at what we have let's go all the way down here and there you go 124 the number of businesses attacked every our don't do one of them so that's how to make use of the number counter thank you for watching and I will see in the next class alright so we've come to the footer now for our website and this is the part where we're going to add some social media icons and we'll also provide an email address which potential customers can use to reach out to us so let's go over here to a back end and the first things first let's go ahead and add a spacer element so I'm gonna drop that into a new section we're good we're gonna go a bit more space here with 75 pixels 75 okay let's go back to our elements I'm gonna drag the header job that just beneath the spacer and either here will simply be contact contact let's give this an h5 tag make it small align it to the centre let's go to the style the text color we're gonna go with white in this case go back to the title go back to typography now for the size I'm gonna make this actual let's go to 12 pixels - of pixels actually that's small let's go to 20 actually 20 pixels let the space in let's paste this out as much as we can 6.5 should be fine okay see two point five nice next is we're gonna go back we're gonna add a second header just beneath the contact and for this one we're gonna say for inquiries please send an email to all right let's go ahead and Center this one go to our style and for the text color again we're gonna go with white for the actual size itself we're gonna go all the way with 65 pixels to make it really really big the weight we could go with 900 make it really thick as you can see right now I like so for inquiries please send an email to and then finally we're gonna add the next header just beneath the for inquiries and in here we're gonna simply add our email address is gonna be contact at wh h da comm contact at white hat hackers comm let's go ahead and add the alignment to the center and then we're gonna change the size as well topography signs let's go with twenty three pixels now we can space this one out a little bit more as well for the weight let's go with 300 so it's not too thick actually 300 is kind of small let's go with 400 how about that 400 okay that's better and that is it let me go ahead and update this let's see what this looks like let's go all the way down here contact for inquiries please send an email to contact edy wh h calm alrighty then so the last thing we're gonna add now would be the social media icons and we do have the element for that and where is it it's right over here social icons so I'm gonna drag that and drop that just beneath the contacts WHS calm so by default we've got Facebook we got Twitter we got Google+ but we can add some other social media platforms let's see what else do we have here we don't want WordPress let's click in here let's find a different I can we got YouTube okay so we can go YouTube possibly let's add another one and let's see what else do we have here let's look for a LinkedIn dangling that will be appropriate so we got LinkedIn alright so that's we've got Facebook Twitter Google+ YouTube and LinkedIn so if this was an actual real website you would have to click inside each icon and it can add your link right there and of course that will simply link the user to your Facebook page whenever they clicked on the Facebook icon alright let's go ahead now to the style so in here we could go with the official color but since we don't have a colorful website our website is basically just three colors we're gonna go with a custom color and the primary color in this case right now is gonna be black and let's go with a secondary color and just click outside in here secretary color would be a grace oh all right okay so there you go as you can see this is exactly how it's going to look like I like that that's great and then for the size let's go with Terry pixels that should be okay spacing we could add some space in this role to space them out a little bit more 20 pixels that's okay and then we've also got the icon hover so I'm gonna click in there so what will happen when we hover over the icons let's add an animation of grow so it's going to grow however for the icon hover the primary color will be black okay and then let's see what the secondary color is going to do let's go with our default Orange as a secondary color and there you go so that's exactly how it is going to look like and I like this alright let's go ahead and update and let's see what we have let's go all the way down here and contact frankerz please send an email to this and then we've got our social media icons right there so just to quickly bound this up I'm gonna add some space at the bottom right here just to push the social media icons a bit above the very bottom of a website so of course we're gonna go and use this spacer element let's just drop that right in there leave it on 50 updates and let's see how our footer looks like let's scroll all the way down here and there you go awesome awesome awesome so classes we've successfully created the footer for our website with an email and also some social media icons thank you for watching and I will see in the next class well well we've to the final section and here we're going to build the header for our website now once we are done once we finish building the header this is exactly how it's going to look like we're gonna have the logo on the left and we're gonna have our main menu on the right also note that this the main menu is gonna be built purely using elemental we're not going to use the default WordPress menu system to do this is gonna be purely from elemental I have also introduced and called links which means if i clicked on any one of the menu items in here it will take us straight to the section that contains that particular content so as an example if i clicked on the team it's gonna go straight down to the mid the team section if i click on 'contact it's gonna go all the way down to where we've got the contact section so that's what we mean by and call links and also note that the header is also gonna have the video background plane in its own background as well so I'm gonna show you exactly how we can create these kind of header so let's get started alright so the first thing we're gonna do right now would be to create they ankle links for our main menu and to do this it's very easy let's go ahead and edit the page with elemental now there is an element known as the menu ankle that's exactly what we're gonna use and it's right over here just under your general you will see down here it's called the menu and core element that's it so what you're gonna do very easily is just to drag the element above the area you want to make or you want to turn into an ankle link when I'm gonna do for the what is WH it because it's very very close to the top but we can start from services okay so I'm gonna drag the menu ankle and I'm gonna drop it just above the services area for the drop that in there now over here in other for the anchor to be effective you have to give it an ID so what I'm gonna do here is I'm gonna call the ID here services that's gonna be the ID for our services section let's go back to our elements scroll down here now I'm gonna do the exact same thing for y walk with us so I'm gonna drag the menu Hank or just above Y walk with us and I'm going to name this one y - us okay why - us let's go back to our elements that's good to meet the team again let's scroll down drag the menu ankle drop that above meet the team I'm gonna call this one the - team alright let's scroll all the way down again clients is next menu I'll call show Bertha both the clients I'll call this idea is just simply clients all right and then it scrolled down go back to our menu and call drop this one above the testimonials and we'll call this testimony else or we can even call this reviews lots of see reviews instead reviews reviews and last but not least we're gonna we're gonna skip the counter we'll just go straight to contact so let's drag many ranked or just above contact and we'll call this contact alright let's go ahead and now an update and now from here I'm simply gonna go ahead now and create the structure for our header so let's do this let's scroll down here let's add a new section is gonna be two columns and I'm gonna change the size of our columns we're gonna reduce the size of the first one all the way down to 25% for now I think eventually when I bring it down to 20 but we'll see so it's 25% for the first column 75% for the second column let's go back to our elements now I'm gonna drag the inner section element drop that into the second column so now we've got two columns for two menu items where we have six many items in total so we have to create four more so let's just right-click add a new column right click right there a new column right click at a new column right click add one more column all right so this is the structure and now for a header the left will have a logo and then we have our six columns for our six individual menu items now we're gonna do this we're gonna click on the edit section button if I go to drag this all the way up all the way oh the way the top of the hill right there let's jump that right there and there you go so that's it we've created our anchor links we've also created the structure for our head up and now what I'm gonna do is to simply add the logo so let's go to elements I'm going to drag the image over here to our logo that's right first column I'm gonna choose my logo which is the one right here insert that over there that's it for the logo and now for the individual menu items here's exactly what I am going to do I'm gonna go back to our elements I'm gonna drag the heading element I'll drag the first one drop that in there now take a look at this okay for the first one I'm gonna change the title obviously this is gonna be services ok services I will change the size from default we're gonna go with 16 pixels make it pretty small all right now here's the thing to create the actual link to the ankle I'm gonna go back to content and then over here where you have the link I'm gonna do is I'm gonna say hash tag and then I'm gonna use the ID that we use for creating its link which is services services and that is it I'm gonna go ahead now and update and now let's see if this would actually work let's go ahead now and preview our changes okay now if I click on services boom it takes us straight down to the services area so that's it we've the first ankle link let me go ahead now and quickly create the second one which I believe should be the one for the Y walk with us and never remember correctly the menu anchor here was y - us so again what I'm gonna do very simply I can copy the text in here go over here and then simply paste that and then we're gonna change this to Y w h h alright and then the link is going to be hashtag y - us again let's go ahead now and update let's check this out let's see if it works why WH H and there we go it actually works so what I'm gonna do right now is I'm gonna pause the video and I will add the remaining four menu items and there anchor links welcome back and as you can see I have successfully added the remaining four menu items and they all work if I click on reviews for example it goes all the way down to our testimonials if I clicked on contact it goes all the way down to contact and so on and so forth now let me quickly address this and I do apologize I probably should have mentioned this much earlier in the course you may have noticed that every single time we add a header we end up having this gray background at the very top of each particular header the reason why this has happening is because we are using the 2019 theme this particular theme automatically had this kind of border at the top of each header now the cost of me making this particular website I initially did not mind the head I even thought it was kind of cute the design but now it's kind of getting a little bit annoying especially now that we've added our menu items so I could use two or three lines of CSS code to get rid of this particular border but if you don't know how to use CSS what you can do very easily is simply to change the theme just change the theme okay so I'm gonna go to the back end that's good share parents go to themes and let's just go ahead and use the 2016 theme okay let's use 2016 as an example so let's active activate that it's active now let's go back in here let's refresh page and let's see well there you go no more borders for our headers and that is it and you can see right now that the structure hasn't changed at all there are some few changes for example our customer testimonials our clients also meet the team the text has become smaller but that's because we've changed the theme but it's very very easy to fix this all we have to do is to go back to a back-end let's refresh this so it will flex the 2016 theme so just to change the font size again it's very easy all we have to do is just go to let's say for example ah me to the team we'll go to style go to typography the size in here we can go all the way to let's see what do we have here let's I think 44 pixels will be fine and then I could do the exact same thing for our clients and customers smells and so on so no big deal there at all let me just update this and before we round this up I am gonna make one final change to the menu for the column the main column holding the six columns I'm gonna go there and click on edit column alright and then the current position I'm gonna switch that to the middle and that's it let's go ahead now and update and let's go to our blog let's refresh the page and now let's see what we have let's go to the top and there you go awesome so that's it for part one we've successfully added the anchor links we've added the menu we've added the logo in the next part which is coming up I'm now gonna show you how you can make it so that the video also plays as a background for main header I'll see you then I want to take a few minutes to introduce you to a particular theme known as the page builder framework and this is a theme that you absolutely must go for if you're using a page builder like elemental Divi beaver builder it doesn't matter this is a theme build specific to support page builders is a pity I only just discovered this particular theme a few days ago and that's kind of why I didn't know I did not start creating this course using this particular theme if I'd known about this thing before I would have started way from the beginning using this theme with elemental but why do I love this theme well it's extremely fast it provides you with lots of customizations aimed specifically at supporting page builders I'm kidding not this is probably one of the best themes you can use with any kind of page builder and best of all it's free you can go to WordPress and download it's called page builder framework by David Von Teese and as of today which is generated 13 2009 teen this only has eight thousand plus active installations which I feel is a crime because this theme is freaking amazing I'm actually going to make a full review describing what this theme can do plus the theme also has a premium add-on that will add even more powerful features don't worry again I will make a review video describing how you can use this theme and how you can make use of all the options and powerful features it provides I'll provide you with the link either in the description box below or in the resources depending on which platform you're watching this particular video on so look out for that video but for now if you're looking for a theme to use with your Elementor please go ahead download install and activate this particular theme you will not regret it so thank you so much and let's continue with the course welcome to part 2 and now that we've got the logo and the menu items all set up it is time to now implement some design and here's exactly what we are after we want to make it so that the video will also play in the background of our main header so how exactly are we going to achieve this magic well it's actually quite simple and to do this I'm going to introduce you to a fairly advanced CSS feature known as the z-index now you will find the z-index if you go to edit section of any element you go to advanced you will find the z-index value right here alright that's as Ian x2 explain what this does I'm just gonna do this right now okay just follow me I know this is this can get confusing but just follow me I promise you you're going to understand exactly what I'm doing in just a moment okay I'm gonna go to the edit section the one that contains the video has two background okay let's go over to advanced and then on the margin I'm gonna give this a negative values now note that as we're increasing the negative value the video is going up it's going up it's going up it's going up it's going up is going up let's take it all the way to the very top so all right so that's at negative 115 what's happened right now is that the video is basically now in front of our main header okay the main header is still there it's just behind the video so what are we gonna do now to get the video order to get the main header to display we'll have to give it a higher z-index value then this section that has the video plane as the background so I'm gonna give this particular section the one with the video back and I'm gonna give it a z-index of four okay now to get the section that contains our header to find it I'm gonna go over to a navigator let's go over to the first section right here there you go I'm gonna go to advanced and then for these index I'm gonna give you the value of five and that's it that's all that we needed to do to get our header to now display so basically the best way how I can describe this z-index is that it's useful in this kind of situations where you've maybe displaced the contents of a particular section because now you have another section being displayed in front of it so if you wanted to display the contents of this section behind simply give that section a higher value for the z-index over the one that's in front of it and that's pretty much how the z-index works if we gave this a value or four or anything less than four the section couldn't contain the video background will display insert because it's the one that in front but we give it a NE bulkhead and four and now the contents of a header now displays so that's exactly how you can make use of the C index don't worry I can understand if you're still in to be confused if you have any questions about this please do let me know autumn a bit my favorites to answer them for you but we're not done I'm still gonna make a few little changes in here let's go over to the section contain our header and what I want to do right now is to go to the layout and I'm gonna change the width to 1,200 right and then for the actual ahead of itself the one that says that don't get hacked what I want to do right now is to reduce the size make it so it goes into one straight line because I just feel it'll look better that way so let's go to style go to typography and then the size in here I'm gonna go down to one or forty all right and I'm also gonna go back to the content and I will remove the break tag that I added over here good and we move that so there you go it now goes on one line don't get hacked let's update and now let's see how this looks like and there you go don't get hacked and we also have our header with the logo and the menu item with the video as the background as well so that is it we have successfully built our website using elemental Germany in the very next video where we'll now take a look at responsive design alright so now that we finished building the website on the desktop it is time to now take a look at how the website it will look like when it's viewed either on a tablet or on a mobile phone keep in mind that more people now actually spend time surfing the internet on their mobile devices than they do on the computer so the way your website looks like on a mobile device is extremely important and thankfully Elementary is such a fantastic plug-in and it's so easy to see how your website will look like when it's viewed on a mobile device so to do this I'm gonna over here to my back end and now down here but you have the desktop icon I'm gonna I'm gonna click on it and then I'm gonna switch over to tablets and there you go so this is exactly how a website will look like when it's viewed on a tablet we can scroll down and for the most part it actually looks quite good why it's nothing seems to have really changed the structure looks good our cleanse looks good to someone else looks good everything still looks pretty good which is awesome I like that however let's now switch over to mobile which is probably more important and let me just scroll all the way over here to the top see what this looks like and okay so now we have a bit more of a challenge you can see right now that the text don't get hacked is way too big for our mobile phone so we're gonna have to make an edit to this but let me scroll down and see what else it looks like and for the most part this actually looks quite good it looks quite good when viewed on the mobile form which isn't too bad testimonials can be improved you can see it's a bit clunky the borders don't match off to each other but that's because of the margins that we added we'll fix that in just a moment let's scroll down and ok alright so we do have two main issues that we can work with with the mobile view testimonials and of course the header they don't get hacked head up alright so how can we fix this specifically on the mobile device first you know to let you know is that when it comes to the actual elements themselves like the headers the images the text you can choose to hide them when they're viewed either on a tablet or on a mobile device or on the phone how would you do that well if you go over to advanced you will see responsive again keep in mind this is specifically for the elements not sections or columns but for the elements themselves if you go to responsive over here you will see the option to either high tablet or even hide on mobile unfortunately Elementor cannot give us a live preview of what that will look like it would have to make the change here and then go to an actual phone and see the changes for yourself hopeful in the future elemental will be able to provide this particular future bot this is available for you you can choose to hide certain elements when if you don't set in screen sizes but if you wouldn't still show the text here's what we can do okay we can click on the text we can go over to style click on typography now note that in here we've got the three different views desktop tablet and then mobile phone mobile device note the mobile device is now highlighted in blue this lets you know that whatever change we make right now will reflect only when it's viewed on a mobile device on a mobile phone so for the size right now let's go ahead and choose something decent something that's not too big and let's stick with 60 pixels right 60 pixels so I'm gonna go ahead now and update this okay so we've reduced the size to 60 for the mobile phone if I go back to my desktop and i refresh this page you can see that this size hasn't changed it's still 1 foot I believe for desktop but now it's gonna be viewed on 60 pixels when it's been displayed on a mobile phone ok good however we still have some spacing issues too much of our black space between the menu above and below and the reason why is because this section has a minimum height of 640 pixels set to it on the desktop so to access this section continent this header I'm gonna bring up my navigator go over to the section and then in here for the main height I'm gonna change that from 640 which was set for the desktop and we're just gonna go with something that's doesn't that isn't too big and let's go with 390 pixels maybe 400 actually that's good 400 and there you go so let's go ahead and update that and that is it for the first section okay for the header that's it all right that's good not too bad not too bad at all let's now scroll down over to where we have the testimonials because we had some issues with the with the margins to be the borders right here so the reason why we have this is because remember we added margins of 16 pixels to divide for the first column and then 16 pixels has left for the third column so we're gonna fix this let's go over here to edit column and again note that the tablet view over the mobile view is highlighted let's go over to advanced alright and then for the margins I'm gonna make sure that the for the first one is set to zero and there you go alright let's go over to the third one go over to the margins and then left we're gonna set that to zero as well and oh I made a mistake I'm sorry I added the margins to the testimonials and not the actual columns let's go to column go to advanced ok margin to the left is zero okay so that's it I should have added the margins to the column and not the actual testimonial so that's it we've successfully fixed the testimonials section as well so that's basically one of the major tips when it comes to fixing little changes for the responsive design if you've added any margins or padding so you've changed the font sizes for some of your text and it's doesn't look too good and responsive just going and set the values back to zero or set the values back to the default and it should look good on your mobile device so that's pretty much it if there are other changes you want to make again remember that you can choose to hide elements when viewed either on the tablet or on a mobile phone you can increase the sizes specifically for either tablet or the mobile phone test to see how it looks like just make sure that over here you are actually editing using two kind of you remember if you choose table right now any change you make would only reflect when the website is viewed on a tablet if you switch over to mobile any changes you now make to your sections your columns your earnings basically anything a new page will only be reflected when the website is viewed on a mobile device so that is it for responsive as usual if you have any questions do let me know thank you so much for watching and I will see in the next class let's talk about one of the most powerful features of Elementor and I'm talking about features of blocks and page templates now at the bottom of your screen right here where you have the white folder icon if you click in there you will be taken to a page where you will have access to different kinds of pre-built templates over here you can see we've got designs for a home page a business page an app page interior design we've got so many of them now you would also know that some of them have the text pro this means you can only use this template I'll be the pro version of Elemental another reason why you might want to go for the pro version but basically you've have all these pre-built templates that you can just simply apply on to any particular page so as an example okay let's go over to our back-end and let's just say I wanted to add a new page so I'm gonna go over here let's add a new page and I'm just gonna go ahead now and edit with Elementor let's go over here to the back end and from here I'm gonna click on the template icon and take a look at this like I'm gonna go ahead now and simply insert the very first one in here click on insert now this will take a few seconds to maybe 1 minute depending on the amount of content that needs to be imported but there you go right now you can see that we have all the content from that particular template all the sections the columns the design everything has been inserted right there for us so this really is a very very quick way on how you can quickly just create pages for your website so you go back in here you have access to different kinds of templates whether it's a home page template a contact page template a services page templates you have so many of them available and elemental keeps on adding new templates every single time also you can actually save your very own custom templates so as an example right now now that we've built out our home page for the website which is practically the entire website itself I could decide to reuse this entire template but to do that I would need to save this page as a template and to do that come over here click on the save options and then click on save as template so I can come in here right now and just just simply say our front page template that's gonna be the name click on save and there you go it's now saved so if I go over to let's say a new page 12 on this existing page I could reuse the front page template by simply going back to the icon folder and then go over to my templates oh sorry let me I need to refresh this page let me just reload this alright so if I go back in here go all the way back down here go to the icon folder and we go to my templates now you can see it's available for us to use and if I go ahead and simply click on insert it says do you want to also import the document settings of the template attention important may overwrite previous setting so in this case right now you're basically saying yes we want the page to go full width we want to use the elements or canvas things like that so I'm gonna say yes let's go ahead and import all the settings and there you go we have all the content right there the text of course isn't white you can really see that and meet the team everything is in there so we'll just need to make the few changes like making the background for the page black so we can actually see all the text so that's exactly how you can make use of page templates and also save your own custom page numbers they can we use over and over again on different pages but we also have access to blocks so you've got if you go back to the icon folder and click on blocks right here you will be able to use pre-built blocks of content and over here we've got two categories so you can go with a 404 page an About section for example a call to action section or even a client's section let's check out the clients section so in here right now you can simply just go ahead now and insert this particular block and you'll have access to the design the section the columns the logos everything and of course you also have access to some but these are for the pro version of Elemento so again another reason why you might want to consider going for the pro version of Elemental and that's it so just like with the page templates you can simply click on insert and that's it so with Elementor you can very very quickly just build out pages add content add blocks of content and within an hour you could have like a full website and all you need to do is just edit the the text edit the images at your own custom styling and you are done so that is it for the page templates and blocks if you have any questions about this do let me know thank you for watching and I will see in the next class oh we've just about come to the end of this section about before we round this up I wanted to introduce you to one final tool known as the finder to with elementals right here so if you click on finder basically in here you can search for anything you can search for either an element or widget an image text anything it's basically kind of like the Google search engine for your website if that makes sense so as an example I can come in here right now and type in team all right and you can see right now that the word team appears on my home page it also appears on my front page template it also appears on a separate page which is the elemental hash tag 1 8 4 so basically whenever you type in a piece of text or anything basically elements all will show you the particular pages that might contain that particular text or element that you're looking for so that's one of the very cool features of elementa that they just recently are added that's it for the finder tool and before I round this up I know we did not make use of all the elements that you have available with elemental that will take way too long but you do have some really cool elements that you can make yourself such as the button element you've got Google Maps you've got the image box start waiting so feel free in fact I would recommend you spend time playing around with all these available elements whether you want to work with statistics you've got your progress bar you've got your icon lists accordions and so much more you've got everything available for you to test out to it so do spend some times you really make huge and try lots of all these elements that elemental has provided for you and keep in mind that elemental are constantly improving so don't be surprised if a month from now you go back in here and you see a new element that has popped up so that's it let's now round up this section all right so before we round up this section where we've built out this site using the free version of elemental I thought it best to now introduce to you the paid version of elemental and give you six reasons six reasons why you might want to construct going for the paid version of elements on the very first reason is a simple fact that with the paid version of elemental you now have access to an additional wide variety of elements so basically with the free version you only have access to the basic and the general as well as the WordPress widgets however with the pro version of elements you now have access to the pro element so you now have elements like posts you've got slides the login and with a headline price table call to action reviews in so much more it is amazing you're also gonna have access to a site element where you can now add your site logo your site title I don't have menu search form a menu cat it's so much more if you have our post if interested in creating posts maybe you have a blog you now have elements for your blog posts as well but you can add elements like the post head tool the featured image the comments post navigation and so much more if you have WooCommerce installed on your WordPress website you also now have bucum as elements lots of the products custom add to cats put our categories and so much more so basically with the paid version of Elemental you have access to so much more elements the second reason why you might want to go with the paid version of Elemental is the fact that with the paid version you now have access to global widgets and what do I mean here basically if you wanted to save a particular column or a section and we use that section or column over and over again on different pages you can do so using the page version of Elemental so as an example if I wanted to reuse the don't get hacked headline I could simply come in here right click and now you can see I have the option of save as a global so I can reuse this particular headline with all the design and functionality on auto pages this is a feature not available with the free version of elemental now reason number three is the simple fact that with the paid version of elemental you can now actually see your life changes whenever you're editing in a responsive mode remember when we walked with the free version of elemental and we tried changing the design either on a tablet view or mobile view we could not see the life changes right but with the paid version development or you can come in right now make some changes to your text and you would actually see the live changes ready so you don't have to go and take a mobile device and then see your changes you can see everything live and direct from the elemental back-end reason number four is the fact that with the paid version of elemental you now have access to all the page templates all the page blocks you're no longer restricted and with the paid version of Elementor you can quickly build out pages quickly build up websites you're no longer restricted everything right now is available for you from contact us templates to admitted team templates to home page templates everything will now be available to you and which number five is the fact that with Elementor pro you're gonna have access to the integrations where you can now integrate elemental with apps like a recapture with facebook mill chimp drip active campaign so if you use any one of these services you can now integrate them with elemental using the paid version of the elemental plugin and last but not least is the simple fact that the paid vision of elementary is actually cheap now licensed for one website is just $49 for a whole year this is not gonna cost you an arm or your leg it's it's cheap it's just $49 for the whole year and you have access to all the benefits of elemental pro and if you're a business maybe you in the business of building websites for clients you could consider going for either the business subscription which would be $99 for three sites or quite possibly the unlimited vision which would be a hundred and nine dollars and you can use elemental on as many websites as you want so elemental with all the fantastic features it provides it's actually really really cheap so those are the six major reasons why you might want to consider going with the paid version of Elementor it offers so much more power so much more customization and it's also really really cheap so hopefully i've been able to convince you now to go with the paid version of elemental although you have it we've come to the end of this first section where we've built out this full warm page website using the free version of elemental I am going to proceed now to using the paid version of Elementor to further enhance the design and functionality of our site if you're interested stick around but if you're like nah I don't want to use the paid version of elemental I'm happy with the free version you're more than welcome to stop watching now but before you go do consider subscribing to the channel I upload tutorials on YouTube as often as I can so please hit the subscribe button if you like this tutorial if you feel like you learned that thinner to hit the like button as well and if you have any questions or comments put them in the comments section below I would really appreciate that so if you're saying goodbye I'm saying goodbye to you from here but if you're interested in carrying on and learning about Elementor Pro let's get crackin the business might want to walk with us the white hat hackers also gonna make a few changes here and there but finally we'll also ReWalk the contact or section we're going to add the google maps and also a contact form using the full version of elementor's so if this sounds good to you and you're ready to learn how to use elements let's get started already so welcome to this brand new section where we're going to enhance our website using elements of element 2 pro and the very first part we're gonna walk on would be the header and with element or pro we do have access to two different elements we can use to build out the header the very first one here is going to be under the site category and it is the site logo it's right there now take a look at this if I drag the logo and drop it right here we cannot choose the image we want to use as the logo directly from this window in order for this to actually work we're gonna have to come in here you'll have to go to your parents customize under your WordPress back-end and then on the site identity you wanna go in here right now and choose your logo so basically Elementor will pull the logo from this particular location Selam do this really quickly I'm gonna choose my logo it's right there I'm gonna go ahead and select it and let me just grab everything right here I think this should be about this week fine all right let's crop the image all right so that's logo I'm gonna go ahead now and publish this awesome it's published so let me go back in here right now and delete this element I'm gonna go ahead now and refresh this page so that Elementor now knows that the logo has been uploaded on the back end and now for me I'm gonna scroll down let's go back to the site category try to set logo drop it underneath our main logo and there you go so now you can see that Elemento has pulled the logo for my WordPress back-end I'm gonna go ahead now and delete our elements here because we don't need that anymore so with the site logo elements you have access to things like become the image size fool you can go with the medium size thumbnail size so just I'll give it a very very specific size in this case right now I'm gonna give you the vase past specific size of let's say 240 by maybe 240 I guess let's apply that and see okay well yeah it's okay I mean this can always be a big change it's okay for now so on the style as well you can increase the leaf if you want to make it as wide as you want actually you know what I think this is fine 75% is okay I'm gonna leave it at that so there are other things you can do you can add your border radius add a box shadow things like that under advanced you have access to your scrolling effect so you can decide to make this sticky at the top which means if you now scroll down you can see that the logo doesn't shift it's right there it's always at the top in its position and then you can choose whether or not you want to make it stick on your desktop and your table to your mobile and it can also add an offset and also basically means how far would you displace it from the top so if I go with one two three four if I increase this you can see right under the logo stats dropping down from the very top of the screen I'm gonna leave it on zero and yeah I'm gonna I'm not gonna make it sticky because we don't need that so that's it I'm gonna go ahead now and update our page so that is it for the logo next is going to be the main menu and with elements of pro we do have access to a particular element known as the nav menu element right here so with this element we can actually display our menu however you need to create your main menu first from the WordPress back-end which I have already done it's right here I used custom links to create menus and of course the URL make sure it has the hash tag and then the ID that you used for your ankles make sure you do that so you can pause this video go ahead now and create your main menu I'm gonna go ahead now and simply save the menu for now and I'm gonna go back in here alright so let's do this alright I'm gonna go ahead now and simply drag and drop the nav menu just above in here and so right now you can see that automatically elemental has pulled my main menu from the back end if you have multiple menus you'll be able to choose it from the drop down box right here so before we start editing the menu let's go ahead and remove this particular section all right cool awesome so what can we do with the nav menu element lots of things all right first of all the layout do you want to go horizontal or do you want to go vertical vertical is not the best option in my opinion it really depends on the design of your website but traditionally you want to go with horizontal that's typically the better choice but you've also got drop-down which would be ideal for mobile devices where you have this hamburger icon and then the user would have to click on the icon and then the menu would expand so for the X star basically I'm just gonna stick with the traditional horizontal for now and then you've got the alignments do you want to go with send her eyeline to the left right and so on I'm gonna go with Center you've got the pointer which basically is what happens when you point your mouse on a menu item so right now you can see that we do have an effect the menu item turns orange and then there's a line underneath the menu item so it's right here the pointer is on the line but you have access to different types like background for example which I kind of like I love background more so you can play around with the options in here you've got the animation what happens will it grow will it shrink left let's try out grow and okay I like grow again no and none of these options is right along it all depends on your design your style what you like so I'll stick with the Grove for now submenu unfortunately we don't have sub menus but if you have so many on your own menu you have several options you can choose an edge to display that particular menu and then you've got the I'm sorry you got the mobile drop-down so in here you can indicate when you actually want to make your many responsive due to options in here our tablet and mobile before you decide in here you can always come down in here choose your responsive mode so let's go with table for now and see let's make this mobile first okay so with tablet it doesn't look too good all right and see right now that contact jobs down beneath it's a little bit it's not too neat so yeah I'm gonna go with a tablet from tablet wanna make it had a job down I wanna be the the hamburger menu icon so right now users will have to click on the hamburger icon to expand the menu that's okay I think we can stick with that for now let's go back to the desktop view let me click in here alright so basically what happens when it actually goes to the mobile view let me actually do that sorry I'm gonna go back in here to tablet okay so from here what actually happens do you want align it to the centre or aside so when you click drop down right now you can see the menu items are at the center or you can go with a side where it drags the menu items to the left I like center and then the toggle button traditionally it's always the hamburger this is the hamburger but you can choose not to have any which would be kind of odd so yeah you typically want to go with the hamburger option for this and then the toggle aligned you want to go with the left or right I like white for that for this one so I'm gonna stick with white and that's it for the content let's go over to style and again in here you've got so many options let's switch back first of all to the desktop view alright so again text call you can change the color to something else black red whatever you like you've got options for hover what happens when someone actually points the mouse in there you can choose your pointer colo at Pat in all sorts of different kinds of options for this for the for the main menu but what I really want to focus on right now is going to be the drop-down because as of now I don't like the way this drop-down excuse me I don't like the way this drop-down actually looks like let me click it's a little bit hard for me to click on the hamburger icon okay let me quickly do this let's go back to content and let me align it to the left okay so I'm sorry the the edit button was interfering with the hamburger menu I can so let's go back to style so from here how does this actually look like when we click on the hamburger menu and to chop down so I don't like this I don't like the fact that the background is and why it's a I will want to change this okay so from the drop-down the text color I'm gonna change this from black and I'm gonna go with my orange color which is that okay that's the orange color let me click outside okay background color I'm gonna go with black alright so this is what I like this so orange text color black background what else do we have your horizontal padding mmm no effects vertical pattern yes we can maybe put this down to eight so it's not too tall not too short alright and that is it okay so that's it for the drop down now the toggle bottom which is this big X right here the size we can make it like really big if you want it to you can give it a decent size of 30 pixels and then you can add a border radio at the border if you want to you can change the color at very specific background color for it as well but I like this I think this is this looks fine as it is and then finally under advanced in here just like with the logo you can add your cooling effect if you wanted to make it sticky at the top so basically if anyone's cooled down right now they will see the menu icon at all time so again this depends on your own style and what you like so that is pretty much it for the header building out the header using the element 2 Pro using the logo element as well as the nav menu element so if you have any questions about this do let me know thank you for watching and I will see you next class moving on and what we're gonna do next is we're going to change the headline that we have over here that says don't get hacked we're gonna add a new headline but it's going to be an animated headline and with elements of pro you do have access the element right here that's it it's called the animated headline so what I'm gonna do is I'm gonna drag this and I'm gonna drop this right there let's get weed off the old header we don't need that anymore all right so what can we do with these animated headline well first of all you've got two major styles highlighted all rotating so the major difference here is that we've highlighted you get to choose a particular piece of text and then you can choose how you want to highlight that text so you can go with a ship maybe circle or no double and in here you'll type in the highlighted text and then in here you'll type the text should appear before the highlighted text my preference do is devotes Hatem because we're rotating you can do things like add text that would rotate with our other types of text so as an example what I'm gonna do here is this okay let's do this the before text here is going to be defeat okay and then they were testing text here check this out I'm gonna go with defeat hackers and I'm gonna say to fit malware and defeat exploits all right so here's exactly what we're gonna do with the animation since we've chosen rotating there were different types that we can choose specifically for the rotating text so I can go with wave as an example so you can see how that will change my preference here is actually our clip I like the way the crystal-like moves and then changes you see you see that animation it moves to the left moves to divide changes brings out the new text I like that I like that a lot so here's what I'm gonna do I'm gonna stick with the before text defeats and then rotate in text should be hackers malware and then exploits awesome alright let's go over to style and I'm gonna choose the typography specifically now for the headline in general so let's make this like pretty big alright let's make this very big let's see how big do we want to make this 110 all right let's take with 110 for now the text Carl will be all inches that that that's for the headline and now specifically for the animated text I'm gonna choose a different color and I'm gonna go with the default red here let's see if we can make this a bit more pronounced let's come over here let's see and it's something very very red let me drag this up here and see red nope that's not gonna do let's come over here pink no we don't want to go with pink let's see okay this is more like it alright I'm gonna stick with this color let's go back in here and then for the typography you can actually choose a different kind or font family specifically for the highlighted text ah the weight in this case I'm gonna go with something very heavy in 900 so it's like very very pronounced maybe 900 is a bit too much let's go with 800 let's see 800 okay 800 is cool I like that and that let's go ahead now and update our head up and let's see how this is gonna look like and there you go so you can see how the animated headline now looks like it's so much better than the original static headline that we had I love this I like this a lot so that's exactly how you can walk with the animated headline you can get really creative you can even add some after text so some text will appear after the admitted headline you can add your links change the alignments go to style change colors feel free to play around with all these available options and you can really create a very very creative animated headline so that's it for the animated header I think if watching and also in the next class we are moving on and the very next element we're going to add will be the countdown elements basically we're gonna count down from 30 seconds and once 30 seconds has expired we're going to display a message what message well you'll just have to stick around and find out so let's do this I'm gonna drag the countdown over here let's jump that into a new section and from here I'm just simply gonna drag this let's take this all the way to the top just beneath the main slider let's jump that in there all right so what do we have over here first of all I'm gonna make the entire width for the section go full width okay that's the first change let's now go to the actual timer itself so what do we have here basically we've got two types I've got a due date and we have the Evergreen timer I'm gonna go with the evergreen timer because it works for our purposes the hours I'm gonna change this to zero because we want the timer to countdown 30 seconds just once and then display a particular message for minutes again we cannot specifically indicate we want to start the countdown from 30 seconds but what you can do here is we can say point 5 minutes which is basically half a minute which is 30 seconds so the countdown we start from 30 seconds so let's go ahead and hide the day's hide the hours hide the minutes so now you can see the counter essentially we start on 30 seconds so I'm gonna add a custom label which is going to be guess what happens every 30 seconds do you know what happens every 30 seconds well you're about to find out all right now the actions after the countdown has expired what do we want to happen well check this out right first of all we could choose to redirect the user to a different link a different page if you wanted to but we're gonna hide the timer first of all and then we're going to display a message what message it's a mystery but here it goes we're gonna say one company gets hacked every 30 seconds door thuds don't let it be yours so we're really trying to market our services we're trying to create this sense of urgency in our potential customers so by the way I don't know if this if this is actually true I'm just making this up so don't tell me that hey Alex you know I did some research and I found out that what you said is not true I don't I'm just making this up all right so let me just go ahead and update this and let's see how this will actually look like I let's go ahead and preview the changes and let's see I'm so excited and okay so here's the problem with doing the previews using the same browser I'm using cool man come seems to have stored my cookies so the countdown doesn't actually start from 30 seconds so what I'm gonna do here is simply I'm gonna open up a different browser which is very heavy I've got Firefox over here right so let's try with Firefox instead hopefully the kana will actually start and let's see awesome all right so this actually starts alright so you can see we have we've got the countdown right there and for some reason my internet service is slow today today Saturday you can see the image is just this image is just loading how atrocious I'm going to demand a refund all right so let's just see what happens once the countdown expires and really a lot of people will come to this site and it'll be curious like what actually happens when that countdown our expires am I gonna get a gift you know is a bomb gonna explode okay so there you go we've got the message one company gets hacked every 30 seconds don't let it beat your so you can see it actually works so one simple change we can make right now would be to make this text actually big bold and poonam so let's let's make that change all right I'm gonna go in here go back to the back and alright so from here we can go over to the style right we've got style so we've got the boxes we've got the content itself and then we have the message so right dealing with the message right now we're gonna go with topography and then the size let's see it's a shame I can't really see the preview from here all right let's go with 45 pixels let's update that and I will see let's just go straight to Chrome here because we don't need to City countdown anymore let's just see how this looks like okay so this takes it to two lines we don't want that so we may need to change the size a little bit make it a little bit smaller so let's go with let's say fully two pixels update that and let's see the change let's see how that looks like okay one company gets every 30 seconds don't let it be yours I like that I think this actually works so that's how to work with the countdown time I thank you for watching the video and I will see in the next class the next section we're working on is going to be the services section and while these actual looks quite good as it is this could be improved so much more and we're gonna make use of a pro element known as the flip box this is gonna change the way we display our services so let's do this alright first of all I'm gonna drag the inner section element our job that just beneath our services all right and then I'm gonna add an extra column so we've got three columns right now for our three different services so let's go ahead now and add the very first service which is of course consultancy with this particular image so let's go back to our elements now I'm gonna go over to the pro alright and here's exactly what we're gonna use we're gonna make use of the flip box element right there flip box let's drop that in here boom okay so right now you can see the immediate effect of using the flip box so here's what we're gonna do a cape on the front we're gonna display the background image and then when it flips over we will now display the text which represents the background image right so let's do this first of all right so France over here we've got content you can add content at the front or we can go with a background we're gonna go with the back and of course we're gonna go with an image so click on classic choose image and here's the image we're going to use the one with the silhouettes of people let's scroll down where is it here it is okay let's go ahead and use this one and set that as the media all right okay so there you go that's the image right there now for the content we don't need any content so we're gonna go ahead and delete the content for the front let's go ahead and remove that and the icon as well we're not using any icon we're only going with the background image now let's go back to background and from here I'm gonna make sure that the entire image actually shows so to do this we're gonna go over here to size under the image and we're gonna go with contain you can either go to contain all you can go with cover it really depends but in this case right now I think I'm gonna go with contain alright actually let's go with cover I'm sorry cover is a much better option I think yeah cover would be a better option in my in my opinion so that's it we've got the cover next let's now go to the back alright so that's for the front now let's go to the back like what happens when the image actually our flips so here's the content the kinda we're gonna walk with right now will be the consultancy so let me just go ahead right now and grab this text for our consultancy let's copy that let's go back to the flip box make sure we're editing the back and not the front so the content area right now let's go ahead and add that now for the head in obviously this is gonna be a consult and see we don't need any button but you've got the option right there I'm gonna go ahead and remove that all right so that's the content now for the background the background here is blue but we can change that let's go with black and I was like black so background type would go with the color instead but we'll go with black alright so that's it it's a black color okay I like this alright so for me we're gonna go over to the settings now and in here we can control the kind of animation that happens so by default we've got the flip to the right but we can go with slide as an example if you've got the slide where you've got the text just pushing in from the right I like this however if you're going to go with the flip there is a very interesting animation here which is the tweet 3d depth which kind of gives you some sort of extra 3d animation so you might actually like that animation I don't know if you can see it from here but it kind of like wobbles the image a little bit from the top anyway it's really up to you I'm gonna go with this slide I like slide and then to the light and that's it so I like this so the few last things we need to change it would be the size of our text and also the color so let's go over to style and France we're not dealing with the front we're dealing with the back specifically and the title in this case right now I'm gonna go with the traditional orange color for our title so let's scroll down here title text color we do have the orange color right there I mean move this up a little bit so it matches okay I like that that's for the color the size we can make the size a little bit bigger Consultancy so we go with 34 pixels should be fine so that's for the title and then of course we've got the description I like the default white color but we can change the size make it a little bit bigger I'm gonna scroll down here sighs let's see let me scroll back up actually a sigh sighs sighs sighs for the description I think 16 pixels might be okay 16 pixels let's do this 16 pixels okay I think we should be fine okay let me go ahead and update this and let's see how this would actually look like from the front and let scroll down here all right so I've got services and there you go consultancy Oh some all right I like this except the orange claw actually doesn't matter so lemme just quickly do this I'm gonna grab the color I can underscore this color little quick let's go back in here a title I'm gonna paste the color I just copied so it actually matches completely okay so there you go that's the real orange color all right awesome so that is it for the very first textbook I'm happy with what we have in there so what I'm gonna do very quickly as usual I'm just gonna copy the entire books and here I'm gonna go ahead and paste that in there and then paste that over here as well so I'm gonna pause the video right now and I'm simply going to change the image and the text to add the analysis and prevention services welcome back and as you can see I have added the additional services for analysis and prevention so this is the brand-new services section and as a result we no longer need the old section so let's just go ahead and delete that delete that and there you go let's update that once more let's go back to our front and and let's take a look at the newly improved services section OhLaLa look at that beyond consultancy analysis and of course prevention so that's exactly how to walk with flip boxes thank you for watching and I will see you in the next class now that we walked the services section we can now go ahead and rework the why walk with us section and yes I know this looks quite good but we can actually improve this by making use of a pure element known as the slides element it's right here so I'm gonna drag that I'm gonna drop that just beneath the title while walk with us let's trip that in there so with the slide element we can add headers text buttons background images background colors animations lots of really cool stuff so let's do this like I'm gonna click on slide one head in first of all on the background I'm gonna change the color from the purple to black all right and then for the image I do have an image in here which I'm going to use which is what we have over here I'm going to insert that alright and the text is supposed to be professionalism alright so let's do this we've got the size which is cover now over here look at this we've got an effect known as the Ken Burns effect and to be honest with you I never knew what this effect was until I actually started working on this course and it's actually a very very cool effect look at this my turn is on look at that it's zooming in and you can actually even change the direction of the zoom from in or out look at that oh I love that this is really really cool I like that alright let's add some background overlay we're gonna go with some black color so let me scroll down here alright so what do we get want to make it quite dark so that the text can be legible okay I think this is perfect as it is okay that's for the background overlay that's on the back alright so that's what the background overlaid not the size I'm gonna go all the way to 500 pixels I do have the benefit of hindsight of tested this I know 500 pixels is just about right alright so 500 pixels and cool alright so that's it for the design now what about the actual content itself let's go back over here so that's what the bad guy on next is gonna be the content right I'm gonna click on content and the very first reason here is I believe uh professionalism okay so let's add the head in right here Pro fresh knowledge them and I do have some text we're professional cyber security experts okay we don't need a button so I'm going to remove that and well that is it and finally we've got style and which style in here we can choose a very specific styling options for this particular slide so in this case we will click on custom and then from custom we can change the position of the content change the content color and so on what I'm gonna do here is I'm gonna keep this having consistent across all before slides so we don't need any custom styling for a professionalism alright so what I'm gonna do right now is I'm going to pause the video and I'm gonna add the remaining reasons for experience proven solutions and then affordability using the exact same way I created the first one for professionalism welcome back and as you can see I have added the remaining reasons which are prevent solutions experience and of course affordability all right now let's go ahead and add some actual style into our text because actually kind of small so I'm gonna jump over here to style and of course in here you can change the width of the slides to begin with we're gonna go all the way to a hundred so it expands to the extreme edges of our screen and then of course you can choose to add padding horizontal positioning for the content vertical position as well text align you've got all these options available that's four slides now for the title itself I think this size should be just about right the text color I'm gonna stick with the white I'm not gonna change that description on the other hand do we need to make this a little bit bigger so I'm so let's give it the typography all right so for size let's make something a little bit big maybe not too big 24 pixels okay this seems to be all K and all right so if you had a button in here you can change how the bottom would look like and then finally the navigation which is the arrows do you want to position position them on the inside or on the outside I kind of like them on the inside yeah let's give it outside actually let's give it outside and then of course you can change the size of the arrows add some text actually you know what let's change the color of the arrows they're gonna go with the orange color that we use regularly on our slides so let's do that I'm gonna go over here with orange and if I make this just a little bit lighter so it matches we have and okay I think this should be close enough all right we should be close enough okay let's go ahead now and update this and let's see how our new Y walk with this section and let's see let's go down and okay this looks good however we can mix them for the changes we can expand this to go full width so let's do this like I'm gonna go back to the back end and for the main section occupying or continually while walk with us I'm gonna click on in here and when the change the conduit from box to go full width let's go ahead and update this let's see the new change and see how it looks like let's go down and voila there you go pretty awesome like we've got the content going full with the background image expanding to the edges of our screen I like that I like that a lot a few things to point out really really quickly if I go back in here go to the slides you could make additional changes to the slider options so over here for example you can choose your kind of navigation you can choose to pause the slide on hover I'm gonna go with no actually you can also change the autoplay speed so maybe we can make this a little bit longer maybe go with 7,000 and then of course you've got the transition effect whether it's fade or slide you've got the transition speed the content animation all different kinds of options to choose from and then also with the slides themselves whenever you're trying to add a background overlay you may have noticed this option here known as the blend mode and whatever you choose in here will have a direct effect on how your bagging over there would look like so for example if you went with color take a look at that that's a whole new effect now you have some colors showing we do have another one like lighten which will bring out even more color as well you've got different types you've got the color burn which is again like a different kind of effect and so on so feel free to play around with all these available options really your limit is your your your creativity is basically your limit in this case so I'm just gonna stick with normal cuz I'm a bit lazy and I'm just gonna go ahead and hit update so well there you go we have successfully reworked the Y walk with us section and as usual if you have any questions do let me know thank you for watching and I will see in the next class all right so we've come to the final section of are going to improve with the element approach and that's going to be the contact section and over here that's pretty basic we've got a message and we've got an email address and some social media icons so we can definitely make this look a lot better and here's exactly what we're gonna do let's go all the way down here and with elemental Pro we do have access to a particular element specifically for forms it's right there but before we do this I'm gonna drag and create an inner section first of all so let's do this in a section I'm gonna drop that just beneath contact alright and now inside the very first column I'm gonna drag an actual basic element which is the Google Maps so let's drag that let's drop that in there so over here you obviously have the option of choosing your address if you have a physical address you can change the zoom the height and so on but we're not really concerned about that what we're really concerned about is gonna be in the second column and this is where we're gonna add our elemental pro element of form it's right there drag am I'm gonna drop that in there and voila just like that we have a cells of form now you can choose to change the form name so let's do this I'm gonna say this is the contact contact form and over here by default you've got three fields name email message if we click on an individual for texts you will have access to the content so you can change name for example to let's say an email you can change the label you can add a place older you can make it required if you wanted to and then under advanced you have access to things like the custom ID and then also the shortcode which we'll talk about in just a moment let me click outside so we've got email message you can add additional fields you click in there and then inside the field on the type you can choose whether it's a text area at your Val checkbox number date and so on and so forth we're gonna keep it simple we'll just stick with the name email and message alright that's it for the form fields not the submit button you can also customize the text I like send I think it's pretty standard you can you know change the text to something else if you wanted to now over here actions have to submit this is very very important what happens once the user has hit the send or submit button what happens you click in here and you have different kinds of actions by default you're gonna have email where you will receive an email but you can also add other things like add a secondary email you can redirect the user to some other page you can add a web hook and if you have like a mailing service like MailChimp active campaign you can include all of them in here if you wanted to so depending on how many options you choose in here you will see them stack just underneath email so if I let milchem so now we have access to the military option and with MailChimp we'll need to add an API key and then choose the list we want to add this particular email to but we're not gonna stick with MailChimp I'm gonna remove that we don't need MailChimp so I'm just gonna stick with the regular email alright and so for the email itself we can customize this where would you like to send the email to you can add your address in here and then you can change the subject the default subject so I'm gonna say new com tact from website as an example so every time someone sends me an email I'll get the subject new contacts on website now over here is the actual message you will receive now by default it's been set to all fields all fields mean the name the email the message will be displayed to you however you can customize how your message will look like by making use of the short codes you see every single field you have in here with its name email the text area they all have their individual short codes now how do you get the shot codes if you go back to the form fields say for example let's go to name on the name you want to go to advanced and then under advanced you will see the shot code here it is field ID equals name so I can copy this as an example I can copy this and then I can go back to my email and then in here I can customize the message and say this email is from and then I can piss a shot code so the person's name will be here and so on and so forth so you can customize your message by simply using the shot codes now over here as well from the email you also want to customize this so that they from email will be from the person's actual email address so to do this let's go back again to form fields let's go to email go to advanced and we're gonna grab the shortcode over here copy that go back to our email and now over here from the email which is the email of the person that sends the email I'm gonna go ahead now and paste that one over there and then of course the from name you can add the field ID equals name so that the person's name will be displayed as the name of the person naturally so you can add your CC your BCC if you wanted to you could also add some extra metadata such as the dates when the email will send the time what page URL the IP address and so on and so forth you can add all those in there and finally you've got these senders either in HTML or as a plain text alright so that's it for the email now finally additional options in here you could choose a unique from ID and then you've also got the custom messages what happens on the sets in kinds of scenarios like for example if the message was sent successfully by default this is the message that will be displayed you can customize that you can customize that for required message error message in phone message and so on and so forth ok last thing I'm gonna do here is to go to style and I will change the background color for our fields let's go to field a background color here I'm gonna make that black and there you go I like that I'm not gonna make any other change feel free to play along with typography I'll be the button you can add your background color text color and so on and so forth by now I'm pretty sure you already used to all these additional options I'm gonna go ahead now and update a contact form and let's take a look at what we have let's go all the way down here to the contact section and there you go awesome so I'm gonna make a few little changes I'm going to make the map a little bit taller so it matches the height of our contact form and I'm gonna remove this text because we don't need that anymore let's do this let's go back to the Google Maps so there Heights let's make this right actually matches okay there you go it matches now the height of the form let's scroll down we don't need this text anymore so let's go ahead and delete that or delete this one as well and that is it let's go ahead now and update and we will check this one more time one more time we're gonna celebrate oh yeah okay well there you go so that's the new improved contact form if you have any questions as always to let me know thank for watching and I will see in the next class whoa well there you have it we've come to the end of this long tutorial on how to use elemental and I sincerely hope that you've enjoyed the tutorial you've learned how to use elemental and you feel confident now that you can build your website using this amazing page builder if you enjoyed this tutorial please do consider hitting the like button it really does help you can subscribe to the channel I upload tutorials on YouTube as often as I can and if you want to go with the paid version of elemental once again please one of the best ways you can support me is by buying the pro version of elemental using my affiliate link in the description box below a plus also I do have a paid course on elementary you learn even more about elemental in the paid course I show you how to build posts using elemental how you can build login pages how you can work with pop-ups and so much more so if you're interested in taking your elemental skills to the very next level you can consider enrolling in the paid version of my elemental course I will have all the links in the description box below also don't forget I talked about a particular theme known as the page builder framework theme I will have a link in the description box below linking you to a video you can watch and learn how you can use this theme to work with either Elementor beaver build up whatever page builder you want to go with so once again it's been an absolute blast teaching you how to use elemental and I want to wish you all the very best for 2019 made this year be your best year ever and this is Alex signing off and I'll see you next time bye bye

Channel: undefined

Views: 1,373,128

Rating: 4.8536358 out of 5

Keywords: elementor tutorial, elementor page builder, elementor page builder tutorial, elementor pro tutorial, elementor wordpress, elementor 2019

Id: xYrvjaSJH_M

Length: 186min 34sec (11194 seconds)

Published: Sun Jan 13 2019