Elementor Pro Tutorial For Beginners

do you want to learn how to create a professional one-page website that you could potentially sell to clients well in this video course I will teach you how to do that with WordPress third element or pool hello I'm your host casino I'm a digital Alchemist and today I have the pleasure to publish this course on how to create a one-page wordpress website with elements of pro a few of you have been asking me in the comments for such a course and here it is now why another course I mean YouTube is full of great tutorials on the subject well first of all there are many bakeries and they sell bread right but for some reason some people would prefer the bread in one bakery and others in another one in other terms I am teach you my own subjective way of doing things next I think that quick website creation courses are great in some situations and there is definitely an audience for it but personally although I do believe in prototyping fast I do not believe in rushing your web design I believe beautiful design lies in the details and that's a reason why go into such details so if you're in for a quick fix I believe there are other videos and channels that would suit you better but on the other hand if you want to take it some and learn how to craft the beautiful one-page WordPress website that you could actually sell to serious clients as a freelance and this is the course for you enjoy this course now let's dive in okay so let's take a look at what we're going to build today so as you may know I like to create real-life projects so I decided to create a co-working space called cowork very original I know but the idea is to try to put yourself in the shoes of a potential customer someone that really needs something so you need to think about what you want to show on this page so first of all we have our branding with the logo we are navigation and we have a call to action to try a free offer then we have a title some text and a button and what are you click on the button or on the About section you'll end in the About section now here we have another title some text and a nice photo gallery and you can scroll through then we have our logo and a button and if if we go lower on the page you can see that initially the logo is hidden behind the button and as you move along it will reveal itself next we move on to our services section and when you hover over the various services you can see it grow and rotate effect and also change of color then if you move to our pricing section you can see that three tables here and we have one that's labeled popular now the next section is the practical info so the first column has a map it's a yeah it's a customized map and it's not a Google map this is really an image out of Photoshop or whatever software are you using but you could use a Google map if you want it now what are you click on the map or a click on the button open in maps it will open Google Maps in a new tab now the next column is for the co-workers access and the public access and the third column is the details now as you can see when I hover over the phone the email and the address the color changes but also you can click on those links so these are dynamic links from Elementor pro so if you're on the phone and you click on it it would take you straight to the phone app with the number ready to be dialed with just one press of a button same thing for the email address if you click it would open your email app or software and for the address it's the same behavior than we have for the map so it will open Google map but you could you know open ways or whatever other app you want to use now the last section is the free trial so if you click on do you want a free trial you can see here we have our forum with our offer and in the background we have an image with some parallax effect and last but not least if we scroll all the way to the bottom you can see our footer we have a logo here then we have some text in the middle and our social icons on the right-hand side and if we click on that button here I mean that texts here it opens an element or pop-up with any text we want to put inside so it can be legal text disclaimer it could be JD PR text if you're in the EU and so on so you can close that now let's take a look at what it looks like on mobile so let me refresh that okay so mobile of course we have the same sections so we can click on discover it's just of course laid out differently so here it's one column for the gallery then we have a services one after the other our pricing tables and we are the rest of the content with our map opening hours and so on now we can also open the legal text here and close it but more interestingly we have a different navigation so if I click on menu you can see I have a sliding navigation and when I click on it it would close itself and go to the correct section out of the box you can't really do that with elements or if you're using the regular nav menu item there are other ways to do it though so once again let's go to practical info and as you can see we go to the practical info section and the navigation closes itself so what do we need to complete this course well first of all we need a hosting and a domain name now about web hosting and domain names I'm not going to spend time on that topic in this course because there are many tutorials already on YouTube about that but if you need some help I will put a link in the description below now the next point we want to talk about is our branding if you look here I have a logo I have a couple of colors I have a color palettes and if you're a designer well obviously that's not going to be a problem but if you not too comfortable with design or you're just getting started I actually created a free brand guidelines template that you can download from my website now if you go to my website in the desktop version you will see the brand guidelines brand identity guidelines pop up here so you can just click on download and follow the instructions on screen now by playing you what's in the guide in the video I created this logo and with this color palette so basically this is going to be the foundation for a good-looking website now for this abuse Finiti designer which is a software i already talked about which is really cheap it's just a one-time payment and if you want to put the links in the description of this video but you can also use illustrator or there might be some free tools that I'm not aware of but you could also do this with tools like photo pea which I've already talked about also and which is completely free so it's photo pea calm but the difference is that it's going to be pixel based and here I'm using a vector based software so as you can see I can zoom in at will and it's gonna stay sharp and then I can use that and transfer transform it into a pixel based logo which is actually what I did but I prefer working in vector based software and one after extensively about that in that video are referenced about the free guideline template now going back to our project the next thing you want to take care about is the images now a great resource for free images is pixabay so pixabay.com or if i'm really quality images but what i really advise you to do is just take a time to really find the right image that don't just speak the first image that will come and that closely matches the industry you want to create a website about we need to spend some time trying to fine-tune and really find the the right image for the job another great resource is unsplash and i will not spend too much time on this today because I've referenced that in other videos but I just wanted to draw your attention to the fact that good branding and great images is really a must for a professional website so talking about images if you don't optimize your images that's gonna make the difference between a a quick professional website and a very slow loading website and nobody likes a slow website so luckily for you I created another video called optimizing images for the web actually the title is a bit different in in YouTube but I will put the link in the description of this video and in this video I'm just going to explain to you how to really go from a 5 megabyte images to a 200 kilobytes images and this is even more important in this project because we're going to create a one-page website which means all images are gonna load on the same page are as on a regular website you have 1 or 2 images per page then you know it's easier on the bandwidth that your your users are going to use when they browse your website now just a little word this video and other videos are actually part of the course it's free course here on YouTube it's called be your own boss series 1 it's actually a playlist and once again I'll put the link in the description below and basically that's gonna take you from you think you're thinking about quitting your job and maybe star your web design freelancing career all the way to actually launching your business so basically it's 30 episode so you don't have to watch all of it in one go you can just pick the one video you want but basically this is all I've learned in all those years of I've tried to put that in a course so it was impossible to do that in just one video so I really broke it down to 30 episodes and it's broken down in five five modules actually with six episodes per module so just go take a look I put the link in the description below now coming back to our project the one thing you need to actually complete this project these elements or pro now I'm well aware that you can create I mean you could create this kind of website with just free plugins but if you know anything about me and this channel I really think elemental Pro is a very good investment probably the best investment you can make if you want to create your own web design studio go freelance or even if it's just to create your own website for your own project and your own company especially when we look at the pricing so it starts at $49 per year for one side 99 for 3 and if you think you're going to create more than three web sites then you should be with the expert plan I mean it's $1.99 for one thousand website this is so cheap but as I always say understand that I might find it cheap but depending on your situation or where you live this might be a lot of money even the 49 bucks one so I'll always give the same advice if you don't have the money to pay for Elementor which I completely understand then what I would advise you to do is try to follow this tutorial and then try to sell the project before you make it of course but try to find a client that needs a website and try to sell it so that you can use that money to purchase the license for creating the project and even better if you can sell it for more than 200 200 bucks then you could I mean it would pay itself you do the website for it for a client that needs a website even if you make it cheap for the first time but try to recover those 199 dollars so that you can have 1,000 licenses so you get the idea so with that out of the way let's move into the WordPress admin and let's start creating that website so once in the WordPress I mean one of the first things you want to do is to add your image assets so I'm gonna go to media and new and I'm just going to select some files so I've already prepared some files so we can look here have this background of those images and the various versions of the logo of the map the favicon and so on so I'm just going to select all of those images and I'm just gonna add it to the WordPress admin once that's done we can move on to the following steps so go to appearance themes and we're going to add a new theme so for this course you can actually use pretty much anything that you want but I'm going to use the WordPress Astra theme so I'm going to use the free version even though I own the pro version but for this course you only need a free version anyway so if you're using hello or ocean WP or any other team we may use it but if you really want to follow along with me then I advise you just in style you just install Astra WP so first of all I'm going to get rid of those themes I don't need all of that I'm just going to keep the 20 20 so let me delete all of the other ones okay and now I'm going to click on add new then type Astra and as astronaut astral so Astra so that's the one so just click on install okay once installed just click on activate great so now it's activated so if I go back to the front and this was the initial website with the 2020 theme and now if i refresh okay so this is what we get for a start and this is what we want in the end so back to WordPress the next thing you want to do is go to plugins add new and I'm going to add Elementor so you can either type elemental here in the search bar but it's already here on the first page so let's click on Install Now then click on activate okay now back to plugins add new and once in here I'm going to click on the upload plug-in button choose file then I'm going to select the zip file with elements or pro that have previously downloaded from my account so next click on install now okay and click on activate ok so next what I'll do I'll connect and activate but before I do that I want to add one more so click on add new and I'm going to look for a plugin called sticky header effects for Elementor so that's the one sticky header effects for Elementor it's a free plugin but it's it's advised to use it with Elementor pro so you can you could you should be able to use it with a free version but as I said when you try to setup the options they advise you to use with the elemental pro so click on activate ok so now we have all our verb plugins so I'm going to delete those ones Akismet and hello dolly okay and this is what I have left so the next step let me open the dashboard the next step is to click on connect and activate and I'm going to connect to my element or account and once I've done that I will activate my license so click on login and click on activate okay let's license has been activated successfully that's fine next we're going to create our homepage we're not going to edit it yet but just create a home page so go to pages add new ok so let's close that and we're going to call it a home disable the title because we're using the Astra WordPress theme and if we don't do that there will be a title displayed no matter what on the page and we don't want that so if you're using a different theme you may have to look into the options but if you're using Astra just click on disable title so I'm just going to hit publish ok so that's fine now the next step is to go to settings permalinks and make sure we select our permalink structure so we want to use the post name structure this one here so I'm just going to remove all of that and custom its structure click on post name and that's the structure I advise so click on Save Changes ok next go to reading and for the home page we're going to select a static page and we're going to select the home page we just created so the page call home ok and now this is not a live web site but as a rule of thumb as a habit I always select summary for each post in a feed and initially what I'm developing the website I'm going to block it from the search engines because I don't want search engines see some dummy text lorem ipsum and so on so i'm just going to click on this courage the search engines from indexing this site now don't forget when you go live to untag that click on Save Changes next we want to create our navigation so go to appearance menus and if we take a look at our example we have home about services pricing and practical info so let's start creating that so let's call it main menu and then we're just going to use some anchor so these are not real pages so open the custom link tab here we're going to put the pound sign and then so the first one is going to be home so let's call it home and link text should be home so let's add that then the second section should be about so pound sign about and you'll understand that later these are for anchors so and when we click on it it goes smoothly to the appropriate anchor on the page so for the time being just follow along and write that you'll understand later so pound sign about and text is about next we have pound sign services and the text should be services add to menu next we have outside pricing and pricing as text then we have practical - info and it actually practical info so home about services pricing and practical info which is what we have here in the middle ok let's take the primary menu and let's click on save menu in this section we're going to set up our fonts and colors so let's go to pages as you can see we have our home page and a couple of other pages so let me just delete those ones for the time being okay so click on edits and like we saw earlier if you using the Astra theme make sure you click the disable title box here and once you've done that click on edit with Elementor okay so now we're in Elementor and the first thing we want to do is take care of our fonts so for this website we're going to use a couple of funds so at the bottom sorry at the top left corner just click on the hamburger icon and then we're going to go to default fonts so our primary Edline should be monsterettes 400 as a weight same for the second headline sorry now for body text we want to use a phone call varela and which would be 400 and the same for our accent x over Ella and 400 so click on apply next we want to add our color palette now if you remember at the beginning of this course we talked about branding and this is the color palette that we'll be using so we want to add those colors here so in order to do that we need some content on the page so we're just gonna add some random widget so we can just style the colors save it and apply it and then we can remove whatever widget we've used so let's go to the widget icon here in the top left of the window and let's add just some heading here okay so don't worry about the styling and everything we're going to delete that section after anyway so let's go to style text color and this is where we're going to add our our colors so the first color is going to our main color here and then we want to add another one so that's going to be our second color 4 6 3 4 4 e make sure you click on the plus sign to add it to our palette the next one is going to be 5 3 5 5 6 0 also click on the plus sign now the next one is going to be 9 d 8 d 8f and click on the plus sign to edit and the last one is going to be 9 B 7 8 6 F and click on the plus sign ok once you're happy with that just click on update to update the page and now these color palettes is well recorded and will be available for each and any page or theme parts that we're going to edit with elements or pro so with that done let's go back to the dashboard so click on the hamburger icon in the top left corner and click on exit to dashboard in this part we're going to create our pop ups so if we take a look at our example we have the first pop up which is in navigation so the slide in navigation and then we have our legal text or JD PR whatever text you want to add from the footer and we can also close it so you may be wondering why do we start by creating the pop ups before anything else well just because when we will be creating our header and our footer you want to already have those pop up so you can actually trigger those behaviors so that will make more sense in a moment so that's what we have for a moment let's go back to WordPress so first of all we're going to open templates pop-ups and we're going to create our first pop-up so let me call it pop up full screen nav click on create templates ok so we could use a template but we're not going to do that so just close that and we're going to create our own scratch so it's going to be a one column structure so first of all we want to click on the six little icons here to edit the section make sure you have edit section here on top and we want to make it full width we want the conga we're going to leave that a default and the height should be a minimum height of 100 VH okay next we want to move to the pop-up settings because right now we're adding the section within the pop-up and now we want to move to the pop-up settings so for that click on the gear icon at the bottom left corner of the window where it says settings and now we have a secondary navigation just for the pop-up I mean secondary options just for the pop-up so for the width we're going to select VW and make it 100 the heights we're going to select fit to screen for the position we want it to be in the center both horizontal and vertical we don't want no overlay but we do want a close button so for the entrance animation it's going to be sliding rights and for the exit animation is going to be slide out right and we want the animation duration to be zero point two so it's very fast very snappy okay and if we move on to the style tab we want to change the background tab to classic and select our main color okay let's publish our work just to be sure we can save our work we need to add a condition so we're gonna add it on the entire website we're not going to add any triggers or advanced rules so you can just click on save and close so okay this is now saved and this is very important just always make sure you save your work okay we're not going to use the full screen navigation in desktop mode so we might as well dive into the tablet mode first and the next thing we want to do once we're in tablet mode is to customize the close button so the size should be yeah 35 sounds about right and the color should be or purple or something their secondary color okay looking fine let's update next we want to add a nav menu so click on the widgets I can start typing nav and it's the second one we want we don't want the standard WordPress widget we want the element or pro so I'm just gonna drag and drop it in here layout should be drop down the alignment should be in the center and the toggle button should be set to none okay so let's start styling that move on to the style tab so our background color in the normal stage should be set to transparency total transparency so drag the opacity ruler all the way down the text color should be our second color here I mean the our purple color here next for the hover state we still want our background color opacity to be all the way down to zero and the text color should be white and we're not gonna touch on the on the active except for the background color you want the opacity to be all the way down and by default philippi like this is going to selects our normal text color next we want to change our typography settings so click on the typography icon and let's make it 30 pixels okay and for the vertical padding it's up to you really but let's make it okay 15 looks nice alright now move on to the Advanced tab and in the CSS classes we're going to write close - pop-up now you may be wondering why why we're doing that well by default I will try to show you that later but by d fault because this is a pop-up if we click on any of the items it's supposed to take you to a different page and then the Department closes but since these will only be anchors that just go down in the same on the same page actually they're now going to a new page then the pop-up will not close because at the time I'm recording this video the behavior is usually when you click on any of the links that you move to a different page and it closes the pop-up but here because it stays on the page he thinks you still need the pop up so we need a way to tell it to close now we if it was not a nav menu with other items within Elementor you can actually select that behavior you can you can tell those widgets to actually close the pop-up when you click on them now this might be a bit confusing but basically because we're using the knife the nav menu widget unfortunately there's no such option unless I'm aware of to automatically close the pop-up so we need to add some code now don't be scared JavaScript code all you need to do is copy and paste and you'll find the link to the companion blog post in the description of this video so you have nothing to worry but all you need to do is just copy and paste but in order for this code to work it's gonna check that there is an item with a class called close pop-up so that's why we need to reference that here so close - pop-up now for the code go to the widgets I can here and start typing HTML so you want to use the HTML from elemental pro in the custom HTML from WordPress so HTML and then I'm just gonna try it just below our navigation and then I'm just going to paste our code okay and now let's click on update so now basically when you'll be clicking on the navigation it's not going to work here because we're within the Elementor and min but when we will be watching the website lab when you click on any of the items it will take you to the right anchor on the page but it will also close the navigation which is the normal behavior any user would expect but you will make more sense later okay but we're not done yet because if you look at the example here we also have a call-to-action button and you want to take care of that before we move on to the mobile version so for that I'm just going to click on the widget icon and then I'm gonna drag a button just below the navigation and let's style it so first of all the text should be tried free the link should be pound sign free now we want to align it in the center and next let's move on to the style tab so the background color should be our secondary color the text color should be yellow and on the hover background color it's still our secondary color and the text color should be white okay next we want to change the hover animation to float okay and the border radius let's put in a hundred years just to make it well around and next for the padding we're going to unlink the values and want to make a custom padding so 15 pixels on the top 50 on the right 15 at the bottom and 50 left okay and one more thing let's go back to content and where it says I can click on the plus and we're going to look for an icon that shows the sign that is going down now what's going on with my okay my connection so we're going to select this one carrot down okay we want to show it after the icon position and you want a spacing of 10 okay so let's update to save our work and let's take a look at our example so yeah this is what we want now of course because this is uh this will be on a touch device you may think okay you're not going to going to see the the hover effects but bear in mind that when people touch it it will move and also people using for example the Samsung Note can have are very effects and other kind of tablets also have styluses so they would be able to see those effects and as you know myself the beauty of web design also lies in that kind of details okay so now let's move on to the mobile version and this is looking good in my opinion now let's take a look at our example let's select an iPhone 6 and the only difference is the button is way larger so we can make it larger by clicking here and let's select justified okay so looking good but actually it's a bit too close from the edges so you may want to add some padding here so click on the section then go to advanced and I'm just going to unlink the values so it's now is retouching the edges and I want to give it a rights padding of 20 actually 30 and left padding of 30 also so if you take a look yeah that's looking better okay so with that done let's move on to our second pop-up which is the pop-up for the disclaimer or any legal text that you may want to add and trigger from the footer let me go back into wordpress templates pop-ups click on add new and it's going to be pop-up and we're gonna call it disclaimer click on create templates now once again we could use a template but we're not going to do that so just close that so here we want to have a one column structure make sure you select the section and first of all we're going to make the heights minimum heights of 90 VH okay next move on to the style tab background type and we're going to select our main color okay then move on to the Advanced tab and we're going to give it a padding of 70 pixels top right bottom and left but as you can see even though we we said it was 90 VH now it takes the full height of the screen so we're gonna fix that so click on the gear icon in the bottom left corner and that we were going to edit our pop-up settings now so the width we can actually leave it like that now for the heights the select custom VH 90 so now whatever happens here we are sure that it's going to take 90 vho almost like 90 percent of the of the full height content position we can leave it on the top for the time being okay so next we want to add a title so I'm just gonna click on the widgets icon add a heading and there's gonna be some lorem ipsum and let's style that so text color should be white okay and next we want to drag a text editor and I'm going to paste some more lorem ipsum texts and let's start it so go to the style tab we want text color should be our second secondary color typography is going to be 16 pixels yeah so looking good let's check I was going to be in tablet mode so toilet mode is fine and on the mobile mobile is not that fine so make sure you select the section here okay so with the section selected go to the Advanced tab and we're going to change the padding here so unlink the values and as you can see now by default that's 0 padding and we want to make it 50 on the top 20 on the right 70 at the bottom and 20 on right so it looks much better but that we also want this to be fullscreen so on the mobile at least so move on to the Layout tab still with our section selected and for the height we're going to select the minimum height of 100 VH okay it doesn't show yet but weight and buried me click on the gear icon at the bottom left corner so that we can edit the pop up settings and for the height we're going to select 100 VH okay so looking good the last thing you want to do is change the size we want to style I mean the size and the color of the clothes button so let's go back into desktop mode style close button and let's also give it 35 and the color should be a secondary color okay now let's take a look tablet mode and on the mobile so it's looking good but maybe a little too little bit too close from to the edges so I'm just gonna make it 50 pixels from the top and 50 pixels and not % make sure except pixels 50 pixels from the right edge so looking much better same thing for the tablet and now for the phone for the phone it's um let's make it 30 and 30 actually 25 and 25 pixels yeah looking much better okay so once you're happy with that let's click on publish at the condition we want to include it on the entire website next saving clothes in this section we're going to create our header and our footer so in WordPress go to templates theme builder and now we're going to create our header so click on the header tab click on add new header and we're going to call it header 0 1 for example click on create templates and once again we're not going to use any of the templates here so just close that click on the plus sign and we're going to create a structure with three columns ok so first of all we want this to be full width we want the height to be a minimum height of 80 pixels now let's move on to the style tab so it's going to be transparent because if we look at our example here it's transparent then it moves on to our secondary color but for the sake of creating the initial elements we're going to add the purple color here next we want to make sure that each column is aligned vertically in the middle so middle middle and once again I click on the column icon and select middle now this is too close to the edges so I'm just going to click on our section here then move on to the Advanced tab and I'm going to unlink the values and I'm going to add a right margin of 30 pixels and a left margin of 30 pixels now so far in the course reviews we just click on the various section but one too I like to use is the Navigator so here for example I just clicked on the navigator or it's command and I on the Mac and I guess ctrl + I on the Windows PC ok so now we have our navigator and we can rename that section by double clicking on it so I'm just going to right that's top because as you may have guessed begun to have a different section for the tablet and mobile now as I've already mentioned in some other videos this may not be the best solution when it comes to SEO but Africa I've actually got some good results with website using that kind of technique because SEO is not just about the type of widgets or system you're going to use for the navigation it's about how you structure the content and there are also some plugins to organize the schema markup so it's a lot of different things beyond the scope of this course but I just wanted you to be aware of that okay so let's add our first element so let's go to the widgets I can and you could either add the site logo and I should have added the site logo within the Astra theme that I'm using here but you may use it be using a different theme so another trick you can use is to use just an image so I'm just going to drag and drop an image and then I'm going to select in the media library the icon I mean the logo that I previously uploaded so it's gonna be that version so let me click on that and now I want to style it so first I want to make sure it's aligned to the left then click on style and I'm going to give it a maximum width of 180 pixels okay let's take a look looking good then I want the navigation in the middle and I want a button on the right hand side in the third column okay next we want to add our navigation but before we do that we want to change the proportions of our columns now as you can see this would take more space than the individual elements on the edges so what we're going to do is select each column so click on the first column and then column width should be 20 then the last one click on it and it should be 20 so element R is going to calculate and by default this one is going to be 60 or 15 9.3 Ebola so you get the idea next let's click on our widgets icon and type nav for nav menu select our elemental pro nav menu widgets ok and let's start styling it so first we wanted of course to be a horizontal we want to align it in the middle pointer should be underlined animation fade that's fine we want to align it in the center and we want the toggle button to be set to none next you want to move on to the style tab and for the text color it should be whites so let's take a look it's white and when you hover over it should be our main color so on hover we're going to select our main color and for the pointer also so that's why we want it and for the active color we're just gonna use whites and the pointer color you want to make sure that it's set to zero opacity okay looking good next we want to add a button so I'm just gonna drag a button in the last column I want to align it to the right text to be try it free Oh try us free okay link should be pound sign free and when it comes to the style we're going to make it the background color should be a main color text color should be our secondary color the border radius should be 104 the padding I'm going to unlink the values and we're gonna style it so she do 10 on top 40 on the right 10 on top and 40 at the bottom with that out of the way let's publish this page so we want to add a condition to edit on the entire web side save and close okay so with our header published let's go and take a look at our current website so let me refresh the page and as we can see we have our navigation here looking good but as I told you before when we start we will start with an image so we won't actually this section to be see-through and then when once we scroll we wanted to change to our secondary colors so if you want this behavior we'll need to make some tweaks but for the time being we're going to leave it like that okay so let's duplicate this section here so in the Navigator I'm going to right click on the section name click on duplicate then I'm going to double click on the name and call it tablet mobile now let's click back on our desktop section then go to advanced responsive and you want to hide this on the tablet and the mobile because this is a desktop version and let's do the opposite for the tablet mobile section so click on the tablet mobile section here click on advanced go to responsive and we want to hide this on the desktop so I'm just going to click update to save our work ok and now let's move on to the tablet mode okay so in the tablet mode actually we don't need the second column so I'm just gonna right click on the column and just plainly delete it okay so that's working fine and now let's take a look at how it looks on the tablet here so on the tablet as you can see you have two columns and logo here and I have the menu and by the way something we should do is to make sure that the logo is clickable and sends back to the home page which we haven't done yet but we'll do in a moment so here it's different because if we take a look in the desktop version with a button that says trials free but here it's the menu button so we're going to style that and when you click on it it should trigger the navigation that we created earlier on so let's move back and before we go any further let's go back to our desktop version click on the image here go to the content tab and in the link we want to select custom URL and either you can type the URL or you can go dynamic and site URL okay so that's good let's do the same thing for for the tablet version but for that we need to be in tablet mode so let's go to the tablet and did the image link should be custom around and click on dynamic and select site URL next click on our button we're going to change the text to menu and in the link part we're going to remove that click on dynamic then select pop-up and click on the wrench icon and where it says all just click on it and we're going to start start typing pop-up and we have a couple that we created so we're going to select our full screen nav ok we also want to add an icon so this is the I can we use so click on the plus sign and then type lines and we're going to use those two lines here click on insert and we want to put it after with a spacing of 10 but as you can see here it's quite different for the text so we're just going to style that go to the style tab and for the typography just click on the icon we want the way to be bold and we want to transform it to uppercase okay and for the letter spacing let's try one yeah one should be fine okay so looking good and if I click on it as you can see it works it launches our full screen navigation now just for the padding I'm gonna change that so for the padding so click back on the button to edit it we're going to ugly unlink the values and let's make it 15 on top 13 to the right 15 at the bottom and 13 30 sorry pixels to the left okay so now let's move on to the mobile view okay so it's not quite the way we want it so let's take a look so this is what we want and currently this is what we have so make sure you select our section so here in the navigator I'm just gonna close all of that tablet mobile then go to the Advanced tab advanced margin should be 0 and our padding let's unlink the values and it's going to be 0 on top 21 right 0 at the bottom and 20 on the left now let's select our first column and it should be 50% and let's select our second column and it should also be 50% so slightly better but it's still some work to do so for the first one let's select our image so click on the Edit icon go to style and we want to make it 80% of of the spacing here and now click on the button and for the padding we're going to click on unlink the values and we are going to make it 20 pixels on top 20 on rights sorry it was 12 pixels on top 20 on the right 12 pixels at the bottom and 20 on the left-hand side so let's take a look and yet that's much much closer to what we want it okay so maybe um actually maybe a bit small here so click on the first column advanced let's make the padding:0 and yeah that's way better okay so let's update our page and let's preview it once again and when we click on the menu it works fine okay so far so good so as I said initially we don't want this to be with a color background if you look here it's completely transparent and then it moves on to two different colors so it's a bit tough to see now because we have no content on the home page so if I take our home page I'm going to refresh that see there's no content to be scrolling so it's hard to demonstrate right now but nevertheless I'm going to show you how we can take care of that so we're going to select our desktop version and we're going to make the background color transparent now that we know that it works we can make it completely transparent okay next move on to the Advanced tab and because we added that plug-in called sticky header effects we're just going to click on enable and as I mentioned earlier when you enable sticky header effects it's as important sticky header effects is best used with elemental pro sticky options enabled so let's move on to advanced actually motion effects and we want sticky on top and we only want that on the desktop because you're not going to use that on the mobile okay and let's go back to sticky header effect so we want to enable it once again only on the desktop here and we're not gonna change the scroll distance we want the header to be initially transparent and we want our header background to be our secondary color after scrolling so this is what we get once again I cannot demonstrate you right now because there's no content here but you will see it in a moment we don't want any bottom or border and we don't want to shrink it but feel free to change it if you wish to okay so now let's repeat for our tablet and mobile version so click make sure you select the tablet mobile version go to the Advanced tab so first of all motion effects we're gonna add sticky and it's just gonna be sticky on tablet and mobile and then move on to the sticky header effects section click on enable and once again we just want to enable on the tablet and on the mobile for these variation we want the transparent header and we want our header background to be our secondary color just like for the previous section okay so one thing we forgot we forgot to make the initial section transparent so with our section still selected go back to style color and drag the opacity all the way down let's update to save our work and let's make sure that stays the same in the mobile version so that's looking good now in our next section we're finally gonna start creating our website the wordpress admin go to pages all pages then we have our own page click on edit with Elementor so this is our home page and this is the section we create earlier so we're just gonna delete that one create one from scratch so click on the plus sign we're going to set the one column layout so let's start standing the section so it should be boxed the height should be a minimum height of 100 VH we want the column position to be in the middle okay next we want to add some padding so go to the Advanced tab and link the values and you want a 70 pixels right and 70 pixels left okay let's move to the style tab click on the background type and we're going to select an image so this is the image that I chose click on insert media if we want the repeat feature should be no repeats and the size should be set to cover okay we want to activate these scrolling effects and click on the yeah I can here for the vertical scroll and we want to change it to down the direction and we don't we're not going to going to touch the rest okay next move on to the background overlay section here we're going to add a gradient and the color will be our secondary color on the top and our main color at the bottom okay so let's take a look here and see how it looks okay so far so good next as you can see here we need to add a heading some text and a button so let's do just that so for the moment it's completely normal that you see the header here but don't worry about it because it's all gonna make sense when we publish and go live so click on the widgets icon and heading here and the text should be anything you want but it's gonna be lorem ipsum walkway okay and that should be an h1 so let's tile that should be white in the style tab and it should be a type they found forty five pixels next I want to add I want to drag a text editor so click on the widget icon text editor drag and just gonna paste that text here now it's a bit dark so I'm just going to go to style change it to white and give it some transparency so that it's lighter than the text just above okay and next I want to add a button so for the button I'm just gonna drag it here now let's take a look we can see that there's some spacing so we need to add some margin and then we're gonna style the button so this should be discovered so we discover we want it to be here on the left-hand side it's going to go to the anchor called about so pound sign about next we want to add our carrots down I can so click on insert you want to insert it after and spacing of ten okay next let's move on to the style tab typography is fine so the background color should be our main color and the text should be our secondary color cable radius should be 100 to make it nice and round and the padding I'm just going to unlink the values and make it 15 pixels on the top 50 on the right 15 at the bottom and 50 on the left on the left hand side now when we hover I want to add a float animation okay and if we look at the example here I'm just gonna change the text color so background color should remain our first color and the text color is going to be black okay and as I mentioned earlier there should be some spacing between the button and the rest of the elements here so with our button still selected move on to the Advanced tab we're going to unlink the margin values and give it a margin top of 80 pixels okay so let's update that and now let's take a look at our actual website so let's refresh the page okay much better and as you can see the navigation is transparent can't really see the scrolling yet actually we can as you can see here now we have our section here but it's still a bit transparent now let me show you quickly if i duplicate this section we're going to remove that in a moment but just to show you click on update and now if i refresh and if I scroll now it's fully taking our secondary color as a background you start transparent and then it's it just fades so that's the sticky effects for Elementor plug-in and kudos to them actually for the great work they're doing okay so we can remove that second section and let's click on update so it looks good but if we look at the initial example if i refresh you can see there's some animation going on so first the text appear then I'm in the heading then the text and then the button so let's go back let's select our heading go to advanced motion effects and the entrance animation should be fading which is the first one and we want to give it a delay of 100 milliseconds let's do the same thing for the second ones I'm just going to click on the text icon at and then go to motion effects entrance animations fading but this time is going to be 400 milliseconds and last but not least click on the button to edit it advanced motion effects and this time is going to be fading up and we want to delay of 500 let's click on updates so now let's refresh our page okay looking grades tablet mode is fine and just a couple of things we need to change here ok so let's go back move onto the mobile mode select our section then go to advanced and we want to give it a padding of 20 pixels all around okay next we want to change our our heading so click on the on the title here go to the style tab typography and let's give it a size of 30 pixels and last but not least for our call to action so I'm just gonna click on it to edit it go to the content tab and let's make it justified okay and maybe for the margins I'm going to unlink the values maybe just give it a top margin of 20 let's take a look yeah looking good okay so that's fine now let's move on to the next section which would be this section here so it's our About section okay so back in Elementor desktop so before we do that let's just rename our section here oh let's close that next click on the plus sign create a one-column section we want to go to the Advanced tab and the padding of 120 at the top 70 right 120 bottom in 70 pixels on left next we want to click on our column go to advanced 0 margin:0 padding:0 and we're gonna drag an inner section so our first intersection it's going to be a margin so go to advance it's going to have a margin of 0 padding of 0 also and I'm just going to delete the second column now if you look in the Navigator let's rename our section bound so that it's easier to navigate now we have this section then the columns and an inner section and another column within so no isten it's not the best scenario actually the best scenario would be to create pure HTML code from scratch but it comes with other downsides so as you know elemental is a very very powerful tool now there are all ways to create some different kind of layouts but this is the easiest way to do it for this particular type of layout we want to achieve so that being said within the column move so we want to click on the column here ok and we want to give it a padding of 0 ok next click on the widget icon and we're going to look for the anchor menu anchor so I'm just going to drag and drop that here and the name should be about which is what we reference from from here so if you look at the button it says go to about with pound sign and here in the anchor if you edit it we need to write about but without the pound sign next you want to go to advanced margin so we're going to unlink the values and we're going to give it a bottom margin of 50 pixels okay now we can duplicate this section I'm in this intersection and we can delete so right-click on the anchor and I'm just going to delete it and now so I'm just gonna click on the first column go to advanced and I'm just going to remove the padding's to leave it at default then I'm going to right-click on the column and duplicate it and if we look at our example we have some text here and some text there so here it's a h2 heading so I'm just going to copy the text click on the widgets I can drag a text widgets I mean they heading widgets I'm just gonna paste this this code here then move on to the style tab and change the text color to our secondary color and yeah that looks close enough okay next I want to add some text here so I'm just gonna drag a text editor widget and once again I'm just going to copy the code here and voila now as you can see there's a line here in between so for that I'm just going to select these the second column here first of all I'm going to go to style border I'm gonna select the border type should be solid then I'm going to unlink the values for the width and I'm going to select a left width of 2 pixels the color should be our secondary color and for the rest the border rate is 0 next move to the Advanced tab and I'm going to unlink the padding values and I'm gonna give it a left padding of 50 pixels okay so now let's take a look okay now don't be afraid you won't see the anchor in in the live version so next we have our gallery then we have our logo and our and the contraction button so we're just going to duplicate actually yeah we're going to duplicate this intersection so click on duplicate and we need to change a few things here so first of all make sure you have that's section selected and if we look here we only have one looks like we have four columns but actually it's just one column with a gallery widget so I'm just going to delete the second column which had the border and the different padding then I'm going to delete the heading and as you can see there's some spacing here between the two so with my intersection selected go to advanced I'm going to unlink the values here and give it a 80 pixels top margin next I want to drag a basic gallery image so it's going to be basic gallery and I'm just going to drag it here and then we're going to add those pictures here so with my gallery selected click on the no image selected plus button and I'm going to select the four pictures that are uploaded earlier on and I'm just gonna change the order around to match our demo so loading columns should be for going to have large images okay looking good fine next we want to duplicate this inner section and I'm just going to remove the gallery and as you can see here we have also one column the the logo and a button so let me go back here go to the widgets icon and I'm going to drag and drop an image widget so let's choose an image and if you look here it's that version here okay click on insert media but now it's way too big so click on so first of all let me align it in middle then click on style and we want to give it a maximum width of 200 pixels so that's looking good and if you look at the demo we need to add our button here but instead of dragging one and standing from scratch I'm just going to copy that one here so right click copy on the button then right-click on the image and I'm going to paste it okay so first of all let me make sure it's centered then move on to the Advanced tab and you want to give it a top margin of 20 and then some motion effects so motion effects you want to remove the fading up we we had initially and we're going to add a scrolling effects vertical scroll going down and let's change the speed to 2 okay so let's click on update okay next we want to change the content so click back on the button go to content and this should read our our services and you should go to pound sign services okay so let's click on updates great so now let's take a look let's refresh our page and it's looking great we could actually even add more padding if you on but it's gonna change when we have some more content underneath because it's gonna continue to scroll down on the page but that's the vertical parallax effect okay so now let's take a look at the tablet version and the mobile version okay so we have some work okay so back to the tablet mode let's select our section and we're going to give it a padding of 70 all around now let's move back to the mobile and we also have some work to do here so click on this section go to advanced and we want to give it a padding of 40 on the top 20 on the right 50 at the bottom and 20 on the left-hand side okay okay so next click on the first column here with the with the title and we want to give it a margin so we want to unlink the margin values and we want to give it a bottom margin of 30 then click on the second column advanced and this time we want to unlink the padding values and give it a bottom padding of 20 I'm actually sorry it left padding of 20 so that it breathed with the border here okay next click on the section here with the gallery go to advanced we're going to unlink the margin values and give it a top margin of 40 okay sounds about right and for the images we can actually keep it like that or actually we can reduce the padding so click on the column and we give it a padding of zero so that it's a bit closer to the edges while still leaving some air to breathe okay and for the rest it's looking good so let's take a look okay fine great so let's click on update now let's refresh our page and if you look at the mobile version looking good okay so let's take a look at our example now we need to create our services section so let's go back into element or go back to the desktop mode and we are going to add our next section so instead of recreating one we're just going to duplicate this section here so right click and then duplicate and let's take a look at our model here so first of all click on the section I can here edit section go to style background type and change the color to our main section next we want to edit our anchor so it should be services make sure it's it matches exactly the links you have so the button here is our services so pound sign services and the anchor here should be services without the pound sign so next we want to change the title to services and we want to Center it and we can just remove the second column okay so I'm just going to delete the second section but I'm going to I mean the third sector in a section but I'm going to duplicate the one with the title so let me remove the title and now we want four columns so I'm just going to [Music] duplicate each column so right click duplicate or you can do command D it will achieve the same thing but now it's a little too close from the title if you look here there's some space so let me select my inner section here go to advanced and link the values and give it a top margin of fifty pixels so that it's better okay next I want to add an icon here so let's click on our widgets icon and this is going to be on icon box so let me drag the icon box in the first column the text is going to be Epsom Lanai so we can choose pretty much any any icon that you want this one here was a clock okay well let me select a different one so I'm just going to insert that I'm going to remove the description title okay so let's keep on styling it so the view should be framed in a circle we want the time to be an h3 okay so that's fine style spacing 15 signs that make it 40 yeah that's about right and texts so for the content let's make it 18 pixels it's a bit small unless we make it bolder so let's go back in the way to be bold yeah that's about it now the color should be our secondary color and the same goes for our icon now on hover you want the secondary color to be white now actually you know should be transparent so let's sit on the normal state and on hover if you look here it's a bit lighter so I'm just going to select our secondary color and drag the opacity down okay let's do the same for the content oh no only the icon can actually switch there's no such option for the content now on the icon if we click on hover we want to add an animation and that's going to be grow rotate okay so it's really slight but that's what we want okay and the spacing between the text yeah that's fine so now I'm just going to copy paste paste and paste so let me switch icons here I'm going to select various icons just to make it look different okay and now I'm just going to hover over the intersection I'm just going to duplicate it but I'm going to with the second intersection selected I'm going to the Advanced tab and I'm going to remove the padding so actually let's make it at 20 pixels padding okay so that's looking fine and here we can see we have one button so I need to remove the image here so I'm going to right click and delete and then I'm going to style our button so select the button go to the style tab and I'm going to change the background color should be a secondary color while the text should be our primary color and when hovering should float and become the text really become white so still floating the background should still be our secondary color and the text color should be white okay so working great now let's take a look yes that's what we wanted now let's take a look at the tablet version and let's take a look here so our tablet version should look like that so that's fine and our mobile version should look like this so let's take a look yes looking great so one thing way to do is to change the content of our button because if you look at the demo here our next section is the pricing so let's go to the content tab on our button should say pricing and the link should be pound sign pricing okay so let's click on update okay so let's go back to the navigator and as you can see here still have the about name because we duplicated the About section so double click on it and we are going to change that to services and now we can actually duplicate the services and right away we're going to double click on the name and change to pricing so we know where we're working okay so with pricing selected which is here let me change the text to make sure we know where we're working go back to selecting the section and go to the style tab and we're going to invert the colors so for the color and we're going to select the secondary color but now as you can see we can't see anything here so we're gonna also use the navigator so the first column has our anchor here so we're gonna call it pricing because that's the name of the anchor we referenced in the previous button and but also in the header navigation okay next we want to change the heading color so click on the heading then style so that's going to be our main color here next we want to select our next inner cert intersection with all the icons if you remember and what we're going to do is actually in the first column we were going to delete the icon and same thing in the second in the third and actually we can remove the third column altogether because here we have three columns and then we just want the button here so we can remove the second inner section if you remember that was the second row that we can see here okay and since we duplicated this section we don't need that anymore so let's get rid of this one so now we need to change the styling of our button but instead of going manual I'm just going to go back up copy is a right click and copy on this button and then here right click and paste aisle and as you can see it works fine so we need to change the content of this button though so let me click on edit to edit the button and our next section is practical - info and the text should reflect that practical info okay let's click on update to save our work and now we need to create our table so click on the widgets I can type price table okay and now we need to make it look just like that so let's go back here so for a first text it's going to be as you may have guessed lorem ipsum second text I'm just gonna copy type anything you want but for example this is gonna be it's heading tag we will leave it like that now for the pricing first one it's gonna be $59.99 monthly the rest of the content doesn't change here except the button and the text here at the bottom so features okay and the footer it's going to be tried free we're going to link to free and the additional info is going to be any text long but here it's going to be if some coke way Liggett I'm becoming expert at that fake Latin language okay we're going to leave popular and you can decide where you want it on the left or the right hand side we're gonna leave it on the right hand side okay so next let's move on to the style tab actually let's move on to the Advanced tab first border and we want to give it a border radius of five so that the edges are rounded with matches more are styling okay that being said let's go back to the style tab of our price table and let's start styling it so for the header you can see here it's a main color so I'm just gonna change that to our main color the title should be the secondary color and for the subtitle let's use one of the other colors in our palettes yeah that's the one so five a fifty five sixty but you can use pretty much any other one you want in the palette make sure it looks contrast enough and it looks good enough next for our pricing we won't change the color to our secondary color okay the same goes for the the currency symbol yeah now for the period we want to change it to another color in our palettes now for the features features once again we're going to use the color we can use this one here okay for the divider let's use our secondary color but we dope acity reduced to a very light version oops okay and now for our button and go to the footer parts and we're going to change so text color sorry white but let's make sure we set it the background should be our secondary color border-radius let's type in 104 the padding let's do 550 sorry 15 pixels on top 50 on the right 15 at the bottom and 50 pixels left it's actually wider and then in the demo and I think it's a bit better this way okay and now for a ribbon we want the background car to be our main color here okay so looking great now before we move on let's see how it looks okay we need to change the proportions for the tablet but for the text it's looking fine and same here so back to our desktop mode let's copy and then paste the table in the second and third columns and looking at the example that's one it gonna be one oh nah 89 and 109 so 89 and for this one here it's going to be 109 now just for the sake of matching some of the element in the demo I'm just going to change the text but of course you don't have to do that let's update to save our work and let's take a look at the live version of our website and it's looking great now moving on to the tablet mode as you can see it doesn't look that good here so what we're going to do is click on the first column and give it 100% and let's review how we did it in the demo because there are actually several ways we can do it so here is just one column so it could be like that or it could be one column 50 and 50 for example that's an alternative but it would be interesting if the first one was the most popular then you could do it like this so let's click on the second one ribbon and we're going to deactivate and let's click on this one the third one ribbon and the activate that would make sense like this so you have the most popular one that takes most space and then the two other ones so that's one version you could do it the other version would be each has 100% so it's really up to you there you go in that case yeah you could also put the first one as most popular but let's imagine like in the demo that the most the one is the one in the middle so I'm just going to deactivate the ribbon here then click on edit for the second price table and I'm gonna show the popular popular ribbon here let's update to save our work and now let's move on to mobile okay so let me click on the column advanced padding is going to be zero the second column advanced padding is going to be zero also and as you may have guessed same goes for the third column so let's update our work let's take a look looking great so now let's see how it goes in actually this version here so let me refresh okay looking great as you can see there is still some transparency here but we'll fix that later on in this course but for the rest our tables are looking just great so next if we look at our example you want to create decks that section here so practical info and as you can see there's that's a background it's a parallax background it's really subtle I don't know if you can see the on screen now we show you how you can play with the transparency so for that let's go back to Elementor let's go back to the desktop mode and before we move on taking a last look at our tables here if we look at the initial example there's more spacing between the tables and I think it looks better so for that click on the intersection edit icon and where it says Collin gap choose wider that maybe be too big so let's choose wide okay so next we need to create our practical info section so for that I'm just going to duplicate our services section so right click and click on copy and then and it's going to be easier to do it here I'm just gonna collapse everything in the navigator I'm going to right-click on the pricing and paste okay so now I've created a copy of the services and I'm right away I'm going to change it to practical info all right so now we need to change that so text going to be practical info and of course we need to change our anchor so that's going to be practical - info okay let's take a look at the model here so click on the section edit icon then go to the style tab and we're going to add an image so this is a little trick that I like to use I've just created a PNG file with a transparent background you can do that in Photoshop if you have it or affinity photo which I love very much and if you don't have those two which we can get a free tool called photo P so P H OTO PE a comm which is kind of a free photoshop within the browser let me just insert that image and as you can see the image is in the background but right now it doesn't look that good so a few things we need to do first we need to change the repeat no repeats the size to cover okay next we want to add some scrolling effects then click on the vertical scroll and we're gonna change the direction to down okay but still there's too much information to me it's way too cluttered so we're going to add a background overlay so click on background overlay then background type classic and we're going to add the same color in the background and now it's better and you can play with the opacity so here it's 80% it's barely visible I don't know if you can see it on screen with the compression and you're going to see in the video player but the idea is there you can play to make it more or less visible so I'm just gonna leave it like that okay and click on update to save my work let's take a look now we have three columns with a white background okay so let me remove that row let me remove the third column next I'm going to remove the individual icon box widgets now before we move on so let's go back to editing our section layout and we're going to make it full width okay next go to advanced and we're going to change it from one-twenty top natty on the right hand side and 90 on the left hand side okay next we want to select our inner section section here and make it full width so we can use the yeah almost a full width of the page if you want to look that way okay so back in Elementor let's start studying the middle column so click on the column style then the background type should be whites and nothing's showing here and that's completely normal because there's no content yet so for that let's go to the widgets icon and we're gonna type price lists so it's not a price list but we're going to use the price list widget if you take a look we have a titled and we have the prices widget which actually is going to feature the opening hours and then we have a repetition here okay so let me go back to the widgets dry a heading okay so next we want to change some of the settings for columns so click on edit column then go to advanced and link the margin values and we're going to give it a 0 on top 20 pixels on the right 0 at the bottom in 20 pixels on oops on the left hand side so 0 20 0 20 we want to give it a padding of 70 pixels next you want to go to style border and you want to give it a border radius of 5 once again to match our design a little bit more than just square corners okay I don't want to are you still early around like the buttons cuz I don't think it really looked good but like this the 5 pixels border radius I think it looks really perfect I mean in my taste but I think it looks nice okay so fine for this console let's start changing the contents we should be public oops public access so let's make it an h3 for SEO let's go to the style tab text color should be our secondary color then for the price lists and this is what you want so mon-monday Friday 9 a.m. 5 p.m. so let me change that okay let's remove that and let's duplicate this one here so here it should be closed okay so now let's start all of that so for spacing that's let's make it 10 title and price we're going to select that color here so it's 90 AD 8f okay description we don't need and for the separator color we are going to use the same color so 90 88 F okay next we have no image so not relevant and for the Rose gap let's make it zero next we can just duplicate each widgets and we're going to drag the title here and this is going to be co-workers access and it's gonna be Monday Sunday 24/7 so I can remove one of the items in the list and it's going to be Monday Sunday 24 740 coworkers okay so it's starting to look like what we want here so here we have the contact details so we're gonna take care of this one first and then we move on to the map so contact details me copy that title and I'm gonna paste it here and actually what I can do is I can just right click on the column copy the whole column and then right click on the third column and I'm going to paste style and as you can see it's looking great and next so that's gonna be contact details and then we have a list here and a button okay so for the lists go to the widgets tab and it's going to be an icon list so I'm just gonna drag and drop it here so title should be contact details and for the list I'm going to remove all items but one so let's make it 2 1 2 5 5 5 5 5 5 and actually you can link as I explained earlier to that number so that when people are on the phone they can just tap that number and it's gonna go straight to the phone app so for that click on the dynamic link then just scroll down to contact URL then click on the wrench icon and we're going to select telephone hotel and then you can paste a number but it should be the international dialing code so for example for the US you should be plus 1 then the area code then the phone number and just apply the same principle to whichever country you live in ok so the next one so let's copy this one the next one should be an email so that's gonna be email cool work.com and by the way this is straight out of my mind you know a quick research I didn't find anything matching that so I hope that no one is using that branding but this is just for teaching purposes anyway ok so I'm just going to copy that fake email address and because I've just duplicated the previous one it's already here contact URL but we don't want a phone number so once again I'm going to click on the wrench I'm gonna change that to email okay and then the last one is the address so I'm just going to duplicate that one and it's going to be five Fifth Avenue New York City okay and for that I want to change also to contact URL so click on the wrench icon and I'm going to change that to actually I could change it two ways but then it's not gonna work on the desktop so I'm gonna do it differently so let's click on the cross to remove any dynamic link and then I'm just going to paste in Google Maps I can URL then click on the link options and you can open it in a new window so let's update to save our work okay so looking great but we want to change the icons and the colors also so let's click on the first one so the first icon should be a phone so let's use that one the second should be an envelope so envelope let's use that one and that third should be a location pin so location okay map marker that's the exact name okay so next we want to change the icon size so let's make it yeah I think it's 20s bit too small so let's make it 24 25 yeah 24 is fine okay and if I go back to list space between so that it breathe yeah much better okay next we want to change the icon color so it should be our secondary color and if we look here on Harbour it's our first our main color okay now for the texts we're going to select another color in our plaids 98d 8f and on hover it's going to be our secondary color yep okay so let's update to save our work once again and if we look here you want a button here and a button here but that would be for the last column so we need the button here so let me go back up and actually I can just copy that one so I'm just going to copy that button here by doing a right click and copy and here I'm going to do a right click and paste okay so star was it's fine but I don't want I follow here there's no parallax effects okay so let me select my button go to advanced motion effects and I'm going to switch scrolling effects to off then if I go to contents I'm going to align it to the left and I'm going to change the content to what was it one free trial okay and that's going to link to the free anchor so free okay that's a say once again now go to the widgets icon and then we're going to add an image and we're gonna drag it here and once again I'm going to copy the whole corner column the second column I'm just going to copy it then I'm going to right-click the first column and pays the start okay but since we're going to use an image I'm gonna slightly change the way the way it looks but we'll do that in a moment so first of all let me choose an image and I've created an image with a map now you may be wondering why don't I use Google Maps well it used to be pretty simple to add Google Maps just create your free API key and just throw it in there now you can still do it the same way but they've changed our business model when it comes to maps so they give you a free credit up to a certain amount of impressions but then you need to you need to input your credit card first because if you go over that amount of impressions they're gonna start charging you and I mean if you need it if your client needs it then it's fine but if you know it's just gonna be a simple website and you don't want to start paying to use maps that's a nice walk around you have a grayscale map then you can really brand it make it look really gorgeous and when people click on it they get sent to Google Maps and it doesn't cost you anything so that's one of the tricks now the padding ear is a bit off because then it makes them the map really small and if I look at the example here we want it to be different so let me click back on the column go to advanced and I'm going to unlink the padding value so if I look here 70 pixels on the top is rights but the rest is going to be 20 so it makes a map bigger okay so looking really good once again I want to copy and paste the URL for the Google Maps and I had it right here so if I go back to our icon list I'm just going to copy the same Google Maps address then go back to my map select custom URL as a link I'm going to paste the link click on the link click on link options and click on open in a new window okay next I want to add a button here that really tells people that actually clicking we send them to Google Maps I'm going to edit button they may not know it's working on the map that can be like in a little Easter Egg but as long as you put a button here people will know what to do so for that I'm just going to drag and drop actually I mean sometimes it's not that easy so I'm just going to copy that right-click on the image and I'm going to paste it here okay so then I can remove that intersection altogether so let's take a look yeah behavior is good so now I'm going to click on the button and I'm going to change the content so I'm going to remove the link to an anchor and I'm going to paste the Google Maps URL once again clean click on the link options I mean that's really tough to say click on the link options then click on open in a new window and I'm gonna change the text to open in Google Maps maybe a bit too long so open in maps you always need to think about how it's gonna look on an iPhone 5 for example with a small screen even though the more we go the more we get larger screens but still and we want to change the icon also so let me look for location okay so that's really easy for people to spot what's going on even before they click on the button ok great just seems like my parallax is not working so okay so let's select our section here style and yet we didn't we forgot to activate the is calling effect so within the section style activate scrolling effects then vertical scroll should go down yeah and for the rest we don't touch so let's click on updates so back to a lab version let's refresh the page okay so looking great so let's like look at the initial example and our current example yep looking great so let's take a look at the mobile version okay looking good except here not sure I want the button to move in maps let's look at the original example so see it should be moving you can change it here so click on the button advanced motion effects and there you go refresh and looking great now for the rest we need to do some tweaking here with the padding let's take a look at our iPad version it's completely messed up so this is what we want and this is what we currently have so let's go back into element or make sure you go into tablet mode by toggling the mode here in the bottom left corner then the first thing you want to do is click on the first column click on layouts and make it 100% and you want to repeat the operation for the second and third columns okay so once again we're gonna start from the middle comm so click on the second column here go to advanced and unlink the margin value so it goes to zero for each side now we want to add a fifty pixels at the bottom fifty pixels margin and the bomb so next we want to do the same thing for the first column so go to advance and link the values and we want fifty pixels at the bottom actually we could have copied and pasted the settings but because the first column is slightly different in terms of padding I didn't want to do that so let's repeat actually for the third column is exactly like the second column so we can right click on the second column click on copy and then we can right click on the third column and paste tile and as you see it's looking great let's take a look in the preview yeah looks fine to me next we want to go into mobile mode and with the changes we've made on the tablet version it looks fine to me so let's refresh our page okay now let's move into phone mode let's refresh to be sure maybe it'd be too much space between the first column and the title here let's go back I'm going to select the first intersection then go into advanced and I'm going to unlink the values so let's take a look let's give it a top margin of 20 mm too much 10 okay so now let's go back that's refresh and as you can see it's much much better and the last section is going to be this section here so let's recreate that so first of all we're going to just copy this section here so I'm going to actually duplicate it and as usual I want to make sure everything is neat and tidy in my navigator so I'm gonna call that our offer so first I'm going to change okay make sure you're always in the correct section so let's change the title first are we sure we edit in the right section if we look here it says get 1 co-working day free so I'm just going to copy and paste that text here so we know we're in the right section ok so let me click on the edit section style and then the color I'm going to select our secondary color and in the background overlay a secondary color also but here because the color is different you can see the the background much more so I'm going to change the opacity to 1 point yeah 0.93 seems about right okay so let's start styling and changing the content so click on the anchor and we're gonna call it this free because that's what we've linked to from pretty much everywhere on this page next let's take a look okay so we have our text here but now it's the same color so that's why you can't see it so it's our heading here so we are heading selected in the Navigator go-to style and we're going to change the color to our main color okay and then we can remove the first column we can remove the second column but now it's way too big so we're going to change that so click on the edit section at top level layouts and let's go boxed and let's give it a content width of 60 it's 600 pixels now it seems to be narrower compared to this one but that's because when to change the main padding if we recall for all the section we have the same padding except for this one here because we used a full width stretch section so let me select back my main section go to advanced and on the rights and on the left we're going to switch it change it to 70 pixels okay now let's select our section here go to advanced and the margin right it's going to be 0 and the margin that it's going to be 0 ok next if we look at the example here the background here should be yellow so with our column selected go to style let's pick our main color okay and then we can get rid of all that contents okay so next let's select our form widget so type form and we're just gonna drag and drop it here okay so starting to look the way we want and let's start editing the content so let's give our form name free offer form item should have a first name name phone number email preferred a message so I'm just going to duplicate this one here put it on top and it's going to be first name okay change the ID to first name it's important to change the ID if you want everything to go smooth so I like to really make sure it's customized so first name name if I go to advanced nano he's fine and then I'm just going to duplicate name and change it to phone and here phone then even email preferred in a message so let's pick a date so preferred date just copy and paste that here and also something important that I didn't mentioned yet is you need to tell if this is required or not so let's go back first name is required name is required phone number let's say that is required email is definitely required the preferred date is required and we don't we're not going to make the message required so we'll leave it like that leave it like that so preferred okay so we need to change some of the styling here so we don't want the labels to show because it looks too cluttered then we want to be really modern we want the input size to be large look yep okay and now we can move on to the style tab before we come back for the rest so style we want the fields the border width of zero okay and then we want to style our button so we want the text color to be white and our background color to be a secondary color okay and for the typography 20 seems about right and we want to change the border radius to match the rest of our styling so you want 20 on top and 20 at the bottom and just by security 20 actually 20 on each side okay so let's preview it pretty that yep looking good and we have a parallax working yep looking great so just for the parallax just make sure when you go to them to the Edit section if you go to style make sure that scrolling effects is on and vertical scroll is activated you just activate by clicking on it and make sure the direction is down and speed is 4 and I'm saying that because I just used the previous section I've just duplicated previous section but just in case you want to create a new section and you forgot how to do it this is how you do it if you have a background image then you select the parallax effect like that of course you can tweak it to your liking and change the settings Direction speed and so on okay so let's take a look at the tablet version [Music] looking great and now let's take a look at the mobile version not looking great okay so let's select our column then go to advanced and we're going to give it a padding of 20 then unlink the values and we're going to change so the top one should be 40 and the bottom should be 15 okay so let's update okay so let's take a look at the live version so if I become about works well services pricing practical info try is free okay so looking good now let's take a look at our tablet version so discover our services pricing practical info free trial okay looking good and let's try the phone version let's try the navigation so about services pricing [Music] practical info and try it free and try it free doesn't seem to be working so we'll have to fix that but for the rest it seems to be working fine okay so now we need to take care of our footer because we want it to look like this and currently it's looking like that so let's go back into WordPress then templates theme builder footer click on footer and then we're going to create a new footer and we're going to call it footer zero one click on create templates so once again we're not going to use any template so we can close that and let's create a three column structure so let me move that next click on the edit section icon so we want to make this full width so let's go to the Advanced tab unlink the margin values and Link the padding values and we want to add anyway 30 pixels right and 30 pixels left padding go to the style tab next check the background type and we're going to use our main color next let's add our site logo but depending on the theme you're using it might be better to use just an image so let's drag an image and let's select that one here next click on left alignment then go to style and let's make it a width of 100 100 and 40 pixels okay next we want to add that's going to be an icon list so go to the widgets I can and type I can and we're going to drag an icon list so let me remove the first two and keep the one with the round icon it's the same one okay so the first item is going to be cowork and he could link to pretty much anything you want so let's duplicate that and the second item is going to be it could be legal or disclaimer so let's make it disclaimer to be a bit different from the demo but the behavior is going to be the same so in terms of layout we want to have an inline layout then go-to style we want to align it in the center now if you look at the demo here should be our secondary color and then when you hover over it should be a white color so let's do that for the icon so our secondary color a normal state and on hover should be white and then for the texts let's select yeah it select this one so another color from applet 5 a 5 5 6 0 and when you hover let's make it our secondary color okay and now we want to change the content so if you open the disclaimer so the second item you go to name dynamic scroll down to pop-up okay and now we pop up selected you want to click on the wrench icon and where it says all you want to click and start typing the name of the pop-up you want to launch select the appropriate pop-up so now its disclaimer okay so let me publish that add a condition I want to add it on the entire website okay we seem to add the social icons but let's do a check first so I'm just going to refresh and now we have our footer and if I click on disclaimer as you can see it opens the pop-up created at the very beginning of this course and we can close it or we can hit escape on the keyboard or we can just click on the overlay of course you can also change that behavior in the public settings it's really depends on what you like what you prefer okay so recently to add our social icons and if I look at the demo yeah we have the regular three so let's click on the widgets icon and I'm going to type social and drag the social icons so for the shape I don't really care about the shape alignment so let's go to start right away color should be custom and we want to use our purple actually known for the first color you want to choose any color and just drag the opacity down and for the secondary color we're going to choose our second secondary color in our color palette okay now for the size we're going to give it a size of 20 and that's about it now for the icon hover we want to give it a float animation and if I look at the initial demo also a slight change of color so I'm going to once again add a transparent primary color and for the second color let's pick our secondary color in the palettes and to confuse you and I'm just going to drag the opacity down a little bit so that there's a slight change of well that's a change of color okay so let's click on update but now one thing I can see right away is that vertically it's not aligned so we're going to click on each column and vertically align to the middle okay so that's looking way way better and now if i refresh the page yep looking great one last thing we can do is add a link to the homepage on the logo here so cowork content link custom URL and then click on dynamic and select site URL okay click on update and now we have a link now let's take a look at how it looks on the tablets it looks fine to me and on the mobile doesn't look that good so first of all let's select our section then go to advanced and let's give it a 20 pixel all around okay next click on the logo selecting my center alignment so let me update first now let me refresh and there you go creating website is all about resolving these kind of bugs I mean it's almost never happened that you just create something and everything works out of the box but the thing is bugs is just part of the day-to-day routine so nothing is fun because it's not always fun but it's something you have to go through so you might as well enjoy fixing all that let's go back to WordPress and go to templates pop-ups and hover over the full screen a pop-up click on edit with Elementor and once inside Elementor so let's make sure we're in tablet mode let's try the navigation so about services pricing practical info and try it free and try it free doesn't seem to be working but actually it works I mean if I click on menu go back to services then I click on menu and click on try it free it looks like it doesn't work and nothing happy but look if I close this it actually went to the free section the thing is it did not close the fullscreen navigation and that's for a very simple reason is because you recall we had it some code here earlier on in this course it's a JavaScript code that you don't really need to understand where basically is telling the pop-up to close when you click on the navigation so that works for the navigation but this is a button it's not part of the navigation and if you remember what triggered this code was a CSS class so if I click on the navigation and go to the Advanced tab close pop-up is that class I'm just going to copy that and then I'm going to click on edit button go to advanced CSS class and I'm going to paste close pop-up click on update ok so now if i refresh the page okay so let's go back to about and now let's click and click on try it free it works because it's just a matter of clicking on the close up close pop-up class actually so now both the navigation and the button have the close up of class but there's something else that I spotted so let's go back into our phone version when we click on home ok not the good example let's say we're here let's click on a home it closes the nav but it doesn't go to home you know and that's for very good reason so let's go back into WordPress appearance menus if you recall very beginning of the course recreating the menu we created the menus and here it says you should go back to a home ok so now let's take a look at our section here so I'm back into editing our home page the only page we have on this website and this is the first section so let's go back to the navigate this is called hero and if I take a look here there is no anchor for all the rest we have anchors but of course when you click and then the browser is trying to go to home it doesn't find any anchor so instead of just adding an anchor like we did here we can do it a different way so I'm just going to select our hero section here by clicking on 6 dots or you can click on the hero section in the navigator go to advanced and then where it says CSS ID we're just going to type home click on update so basically it's the same as adding an anchor because basically an anchor is an ID so let me go back I'm just going to refresh the page first let's go to pricing and now let's click on home and it works fine so let's double check on the desktop version let's go to services and let's click on home and it's working fine but now if you close the navigation as you can see here there's no background behind the menu and the logo and that's not what we wanted and I've told you that we would fix this later on so for that let's go to WordPress and the dashboard go to templates theme builder then hover over a header 0 1 and click on edit with Elementor once you're inside Elementor the reason why we have this bug actually is because of something we did initially when we created the desktop version while I was doing this course I noticed that there was a bug when trying to implement this sticky header effect so we're gonna fix that it's very easy if you recall if you go to the desktop section here if you're going to sticky header effects I made you remove the enable on tablet and mobile because this is just the desktop version and we did the opposites in the tablet version we only enable on tablet mobile but not on the desktop well it seems that in order to fix that but all we need to do is go back to the desktop version edit section advanced sticky header effects and we need to add back tablets and mobile so now I'm going to click update now let's go back let's refresh our page and voila now you can see it works the way it was intended and let's double check on tablet let's refresh the page and yeah it works fine so before we end this let's make sure that everything's everything works as intended first the desktop version discover then let's go to our services however works let's go to pricing we have our tables practical info if you click it open it opens in maps same thing here ok want a free trial Texas where we want to go ok and then if I click on disclaimer it works ok let's have a look at the initial demo just to be sure so let me refresh that let me scroll quickly as you can see I forgot the animation here let's refresh as you can see fading fading and fading so let's go back let's select our first column advanced motion effects and I want to add a fade in with an animation delay of 100 then for the second one fade in 300 and for the last one fade in 500 milliseconds okay let's refresh the page and let's go straight to pricing and as you see it's looking very good we have our map okay we just need to fix that so it's always good to have a last look around the rice is looking fine so let's go back let's go into mobile mode click on the second column and we were gonna change the padding to 20 and Link the values this is gonna be 40 on top and 50 actually 40 at the bottom also so let's copy this column let's right-click on this column and paste the style okay let's update let's refresh and looking good okay one last word about the form here so let's go back because we style the form but I just want to briefly touch on some of the items that you may want to change here so first of all you may want to add a kind of security to that to that form the easiest one is the honeypot so basically what the honeypot does is going to input some dummy text when you see when robots are trying to fill in the forms these are programs and not human beings and they just fill in the forms and try to get information by sending you an email and they hope to get an email back and basically a robots gonna feel all the fields because only the it's going to see that field called the honeypot and it's gonna fill it with some mumbo-jumbo content so then the system will know that this is not a human that actually filled in the form so that's one way of securing the form but the problem with that is that if you use a browser that has automatic fill-in so for example if you always enter the same kind of information like your name your email address then your browser like Chrome would know about it and you can enable and for most people it's enabled by default they use that feature and it will behave as a robot so the problem is may fill in the honeypot field and you may be considered as a robot spammer so another thing you can do is to add reCAPTCHA this is from Google this is free there is not a learning curve but you need to set up an API key it's really not hard and if I'm correct you can add it straight from if you're going to Elementor let me have a look so settings or tools integrations if you click on reCAPTCHA or a capture 3 it's going to take you to a tutorial now it's taking you straight to reCAPTCHA so you're gonna have to learn how to install it but the documentation is really nice you might want to type how to install reCAPTCHA with the element or you're gonna find it anyway but it could be reCAPTCHA could be recaptured version 3 now another thing you may want to add is the acceptance box so for example if you subject to JD PR you may want to add some exception text like I agree that my data will be recorded in order to treat my request something like that you know I'm not a lawyer so don't take my word for granted just see with you with your lawyer or there are plenty of websites talking about that but you get the idea it's even if you not subject to JD PR it's better to be on the safe side so basically with people you can make this required but you cannot make it take by default you know specifically for JD PR that's about it there are many other types of elements that you can add in the former basically that's the way I would go about it next for the submit button so nothing here for the actions you can add now most of the time you will use email or you send it to a marketing list like MailChimp or some other similar products now when it comes to the email itself well first of all you got an input the email you want to send it to then you can set the message so it could be inquiry for free offer for example then you can select if you want to incorporate all fields in the email or not then which is which one is the from email and the reply to email and by default it will put the administrator of the website email but what you should do well what you could do is go to form fields right here email then go to the Advanced tab and you're just gonna copy that feel ID email that way when you get the message so let me go back in the email section here by tapping that here which I've just copied right up typing that here what happens is that let's say John Smith sends you a message from this form then in your email app you say the emails from John Smith and when you hit reply to it will reply to John Smith because otherwise if you take the administrator of the website address you will hit reply but you actually will reply to yourself so that's one way to do it there are other ways but usually that's the way I do it you can also add a see see email address or hidden email address if you wanna send to a business business partner or whatever usually I send a BCC to a very specific email address for JD PR purposes so that I can keep track in case someone says yeah I didn't want him to use my data well I have proof that I received an email with a timestamp asking me for this and this information with that data so it's - yeah to be on the safe side now in terms of additional options you can add a new for my team but this is beyond the scope of this course so basically that's the way you would go about it also one other thing you should really consider is the email deliverability so the first step is usually should use SMTP once again that's beyond the scope of this course but if you just google WordPress SMTP forms you'll get a lot of tutorials are free plugins and I would probably do a tutorial about it but there are already plenty tutorials and it's very straightforward so basically you install the plug-in and you're just gonna set the data that you get from your web hosting provider and that's going to increase the deliverability now if there is a problem with the server where your website is hosted then you might have other deliverability problems and for that one way to do it but it's gonna cost you some money is to use paid services so let's do one last tour of what we've built today so we have our heroes sections so let's scroll down we have a services our pricing and if i refresh yeah we have the animation then the practical info we link to Google Maps then we have a form for a free trial and we can read our disclaimer texts right here we can also click and go to social media okay let's quickly scroll through the iPad version or tablet version looking great and last but not least especially in this day and age the mobile version meat gallery the pricing congratulations you've created a one-page WordPress professional website you can use for your own business or that maybe you can sell to potential clients now if you're interested in purchasing elements of pro you'll find affiliate links in the description of this video to be crystal clear this is an affiliate link which means that I do get a commission if you purchase after clicking on the link but one if you know my channel you know that I love Elementor Pro and two commissions actually help me support this channel and create free content such as this course so you don't have to purchase through my link but if you do thank you now something I have to mention is the fact that the website creation process is just one part of the equation there are many other variables to take care of and luckily for you I've detailed the process in a check this video that you will find in the description below so well that you enjoy this course and that you now feel confident to create pretty much any one-page WordPress website with the help of elements or pro I create websites professionally and I could definitely sell the one we created today that's what I mean by professional pretty much anyone can create a website nowadays but that does not mean that the end result is always professional to me the word professional means that it is something that could be sold in a serious professional environment now of course for today's example you should adapt it to the specific industry that you're creating the website for but please don't just create dozens of identical websites make some changes be different colors fonts add custom icons you get the idea now if there are other wordpress and elements or topics that you'd like me to cover please let me know in the comments and by the way you find the companion blog post on my website casino comm and of course the direct link is in the description of this video now if you enjoyed this course please give it a thumbs up as it really really really helps growing this channel and if you know someone that could benefit from it please share it now if you're not a subscriber yet don't forget to subscribe to my channel and smash the notification bell so that you don't miss anything now if you want a brand market and grow your business in the digital age and make sure you subscribe to my email newsletter so that you never miss his share of digital alchemy as well as tips tools services and case studies that can help you grow your business online so that's it for today I hope that you enjoy the course and that it will really help you so I see you in the next video or in the next course and in the meantime don't forget to invest your success [Music] [Music]

Channel: Kaycinho The Digital Alchemist

Views: 16,132

Keywords: elementor pro tutorial for beginners, elementor pro tutorial, elementor pro tutorial 2020, elementor tutorial for beginners, elementor tutorial for beginners 2021, elementor pro, elementor pro wordpress, elementor for beginners, elementor 2021, elementor tutorial, elementor tutorial 2021, elementor wordpress, elementor wordpress tutorial, one page website elementor, wordpress elementor, wordpress elementor tutorial, wordpress tutorial, how to make a wordpress website

Id: plYZ6ufzvrU

Length: 156min 4sec (9364 seconds)

Published: Thu Jan 09 2020