🌟 Elementor Pro Tutorial 2020 for Beginners | All Elements 🌟

hi i'm jack dewell with jackinthenet.com and in this tutorial series i'm going to show you how to use elementor pro and all of its element widgets if you want to see what they look like then go to elementor2020.co.uk i've laid them all out for you so you can take a look at them and to get elementor pro go to jackinthenet.com forward slash ep there you'll be able to get the membership you want download the plugin and then upload it to wordpress by the time we finish this tutorial series you'll be confident in using elementor pro to make a beautiful wordpress website that gets you the results you actually want so please like the video make sure to comment and subscribe now let's dive in elementor is the best page builder in the world and in this quick video i'm going to show you how to install it on your wordpress website the first thing you want to do is come on over to your plugins section when you're here go up to add new and then you can simply search for elementor this is going to bring up the free version for you now the free version is fantastic but pro unlocks so many more features if you want the very best website possible you want to upgrade to pro but in order for pro to work you need to have the free version installed on your website first i've already got this installed but you can click the little install now button that you'll see and then click activate the problem is you won't find pro on here so we need to go somewhere else for that in order to get it you can use my affiliate link which is jackinthenet.com forward slash ep stands for elementor pro that's going to take you straight through to their website and here you can choose the membership option that you want personal is great if you just want one site and plus allows you more site usage choose the one that you want down here and then you'll be able to go through the normal checkout process this is my affiliate link so if you buy it through this you don't pay extra but i get a small commission so thank you for that you can pay via credit card or paypal and when you're done click on checkout once you've done that you'll be redirected to your account page and you'll also be sent an email which you can follow at any time to come back here and from your account you can download the plugin here and you can also see your license key so let's go ahead and download the plugin there it goes head on back over to your wordpress dashboard go back to plugins come up to add new go to upload plugin and then what we want to do is click and drag this on into the page and then click install now there we go done straight away now we can activate the plugin and then it's going to prompt you to activate your license yours will just say activate license mine says reactivate as i've had it on here before so now all you need to do is click on activate and that's going to link it up for you so there you go elementor pro is now active and you are ready to start creating something beautiful okay before we get into looking at how to use all of the different pro widgets i wanted to show you a quick win and that's how to save something as a global item it's going to save you a lot of time because you're not going to have to keep redesigning the same thing over and over you can just do it the once save it as a global item and then you can reuse that across any of your pages so we can do this with virtually any element we can even do it with an entire section and the way you do it is for example this button i've designed it now i can come on over right click come down and go to save as global that's going to present you with this library template and now we can give it a name i'm just going to call this blue button click on save and now we see that the outline has turned this sort of orangey gold and it has appeared over here up in our global section so you've got your normal toolbar you've got your widget elements over on the left click on global and you're going to find anything that you've saved just up here so now if i come on down i can click and drag this into the page and there we go i've got an exact duplicate and i haven't had to redesign it from scratch and i could put this anywhere on the site okay in this one i'm going to show you how to use elementor pro's nav menu widget to create a menu around your site so the first thing that we're going to do is obviously put it into the page and i want to put it up here because there's two ways that we can use this we could use it to create an actual header menu and i've got a separate video which i'll link to where i show you how to actually build your entire website's header using elementor pro's theme builder and we make use of the nav menu in that but in this one i'm also going to show you how to do something a little bit different because this is the website that i'm using for these elementor pro tutorials elementor 2020.cod.uk you can go here and you can browse down you can look at how each of these different widget elements looks but i want to put in a little menu up here with shortcuts to each of these widgets so that you can just come in you can click the relevant widget that you want and it's going to automatically scroll down the page and it's going to take you to that particular widget so it's really useful and that's what i'm going to do with you here today so the first thing that i want to do is add in a section between this one and this one here so i'm going to press the little plus button here and then i'm going to go right ahead and i'm going to drag my nav menu into the page although what we could do if we wanted is create a couple of columns so actually i'm going to create one that looks like this and then i'm going to grab my nav menu and drag it on over here to the right now by default what this does is grab my main menu which is what i've got up here and it puts that in now i don't want it to do that but at the moment it's the only menu that i have of course if this is what you want really simple obviously you would position this so the columns are how you want them and then you've got your horizontal menu going across the page if we wanted we could change it to be vertical so then it's just going down and obviously we can align as well so we can have it on the right left in the middle you get the idea we'll go through more of these in just a minute but what i want to do is have a different menu so i don't want my main menu how do we do that well i will show you but in order to create one we actually need to have some links that our menu is going to take us to so let's say that i want it to take us down to the portfolio element effectively i'm creating a anchor menu here so what i'm going to do is come into my section settings where i have the portfolio element so i click into here and then under the advanced section i'm going to come down to css id and in here all i'm going to write is port folio hyphen widget so if you've got two words make sure you put a little dash between them and then what i'm going to do is copy this update and then we're going to head on back to our wordpress dashboard so exit to dashboard now what i want to do is come on down to appearance and go to menus and then i want to create a new menu so we click up here create new menu and i'm going to call this elements menu create menu and now we need to add some things but unlike a normal menu where we've got pages that we would add here i'm going to be using custom links so i click custom links and it gives us the url and link text so my link text i obviously want to call this portfolio now the url this is where we've got to be careful with what we put in here so because i'm creating an anchor menu on a page i need to put in the full website address in our custom link so https and it's elementor 2020 dot co dot u k forward slash and then i put in the little hashtag or pound sign that we've got there and then i'm going to paste in my portfolio widget so that's the text that i put in the css id the section settings as you just saw one final thing to note here the reason that i've just put in the website address and then forward slash and immediately followed it with this is because i'm doing this on the home page of the website if you're doing this on a separate page for example your about page then you would put about and then another forward slash okay that's what's going to tell this what page to find that css id on mine's on the home page so i don't need to do that i just leave it like this and then i click add to menu so it appears here i can then click save menu and now if we had on uh head on back so pages home edit with elementor here we go okay so i come back to our nav menu widget that we just put in there and now instead of it just having the main menu option we've got elements so if i click on elements menu there we go it's appeared there but i don't uh just want to have a horizontal or vertical line what i want to do is have a drop down so now we get this little hamburger toggle button which is what we have down here we could obviously turn it off but i want it on and i'm going to put this back so it's how i had it which i think was around 70 30. and now the idea is that when when somebody comes in they can obviously click this it comes up with this portfolio option and now if we click it fingers crossed there we go it scrolls us down to that part of the page so let's have a look at the posts widget first of all we're going to drag it on into the page now naturally your posts normally show up on your archive blog page but it could be great to show them off on other areas of your website as well that's where this widget element comes in and if you're in two minds over whether or not you should be using a blog websites that have them are proven on average to have over 400 percent more indexed pages and companies who blog get over 90 percent more links back to their website those stats come from monster they know a thing or two about conversion so i'm gonna believe them and it's powerful stuff so this is the post widget straight away i think this looks great but we can of course make it look a lot better naturally if you've dragged it in and you're not getting any content showing up it's because you've got to create your blog posts first now up here the very first option is the skin this is your classic layout we could also have full content if you just wanted to display each blog post in full but my personal favorite is cards it gives it this sort of box shadowy look we also get this gradient overlay it's very slight but as we hover over it we can see that it's changing and it's added a few extra elements in as well so i think that looks a lot better you can choose the amount of columns that you want over here so at the moment it's three if i change it to two that'll obviously switch and if you want to you could always duplicate the section and then change this so you could have a section where you've got two and then below it you've got three all you need to do is duplicate the section up here and then on your other section go in and change the amount of columns but i'm going to leave this at three now word of advice here you want to make sure that this is responsive so this is three columns on the desktop if we take a look at the tablet view so just click the little icon here come over to tablet we'll see that it automatically has this at two now i think that's best because for the size that's gonna look better on most tablets but if you want to you can then change it back to three or of course change it down to one if you want to just make sure that with any changes you're making it doesn't go and make the fonts too big so they don't fit on the screen and you can do the same for mobile as well switch it over to mobile and if we wanted we could have two columns here as well but we'd have to go in and start changing the size of everything to make it fit so i'm just going to leave it at one and head on back over to the desktop view but that's how you can change it just with this little icon here next up we've got the posts per page so i've currently got it set to six if we change this we can obviously add or subtract posts i'm going to leave it on six for the moment then you've got the option to get rid of the image if we didn't want that we can lose them but i like the images so we're going to leave those in if there are different sizes you can use masonry but these are all the same size which is why they're in line then we've got the actual image resolution size so i think this could be a little bit sharper i'm going to move it up to medium large that's just going to give us a little bit of a better clearer image but be careful you don't go too high because you don't need a full image or anything that's just going to slow down your website you can then change the image ratio if you want to but again i'm just going to leave it as the default setting next you can choose whether or not you want to display your title or hide it and what heading tag that title has i'm going to leave mine on heading 3 because i've already got a heading 1 and 2 further up the page but you can change this depending on how you've laid out your web page then below that of course you've got the excerpt so we can hide that if we don't want it or we can change the excerpt length again i'm going to leave it as it is for this and we'll move on to the metadata metadata is what you see down here if i click into the box we can add more things in for example author information date time and number of comments as long as you've got more than one thing in the box here we can then choose what the separator is going to be by default it's this little dot but if i change this to a plus we see that that's now appeared there instead so you can choose what you want for me though i'm just going to leave it with the author details what you see here is how you've named yourself in your wordpress dashboard profile so it could be your name it could be your email address or it could be the nickname i of course am using jack in the net as that is my youtube channel name and website then below that we have the read more button again you can make this disappear if you want to and if you've got it on you can change what the text actually says i could change it to learn more whatever it is that you might actually want it to be let's leave it at read more for now and then we can choose to open in a new window so when somebody clicks on the particular blog post it's going to take them to that in a new window and they can always come back to this content later i like that so i'm going to turn it on and then you've got your badge which is what this is just up here so the reason it says travel at the moment is because on my blog post i created a travel category and the badge taxonomy is a category you can have it as tags or formats if you want but i think categories is better because the larger your blog grows naturally the more categories you're going to be creating to put your blog posts into so we'll leave it as that for now and then lastly we have the avatar which is this little picture here again we can hide that if we want i'm going to leave it on if you want your own avatar you can get it by going to gravatar and you can sign up here for free and then your little gravatar avatar will follow you around the internet and as long as you're using the same email address for your wordpress website it's going to pop up there as well the next option is query so this is where you can choose what blog posts are actually going to be displayed now if you really wanted you could change this we could have pages being displayed instead of posts but seeing as how this is the posts widget i'm going to leave it on post for now you can choose whether or not to include or exclude certain posts and of course a date range so we could have only posts over the last week month or even a custom period so you can really use this to narrow down exactly which ones are being displayed here and of course the order as well at the moment i have it on date but we could always make this random if we wanted to and there we go we see that immediately that's changed and then below that we have pagination now on the face of it you might wonder what this does if i change this to say previous and next nothing happens but that's because we're currently displaying all of the posts on the page so if i go back up to layout change my post per page let's say to three suddenly we've got that previous and next appear because it's needing to go to the next section of posts naturally if you're displaying all of them on the same page then this is irrelevant but here we can actually choose what we want them to say so let's make this back you can limit the number of pages or if you want you can use numbers instead i'm just going to leave it like this actually no let's change it to numbers and we can then also choose where we want this to align so on the left the right but i'm going to leave it in the middle and now let's look at actually styling this up so come on up to the style tab we've got our columns gap and rows gap now for the rows to make sense i do need to put the other posts back in for a moment so let's do that and now we'll see that if i change the columns gap they're going to get closer here and the same with the rows for below again we've got an alignment option so if i go center i think that looks much better and once you've played around with that move on to the card option now where it says background color is talking about this section here so if i change this to a light blue we'll see that it changes but i'm going to leave it as it was you can also have a border as well so if we create a border that's going to appear you can come in and change the board of color if you want to but i'll again i'm going to leave it as it was and then we can start changing the border radius so if i bring this in you'll see that those corners are starting to curve so let's leave that around 50 and you can also change your horizontal and vertical padding so if i do this you'll see that it's going to bring it in at the sides and then we can do the same up and down it's going to create more space up at the top here but i want to leave that as it was and i'm also going to leave on the box shadow because if i take this off you see we lose that shadow from in between them but i think that gives it a little more depth and the same with the hover effect we could have no gradient if we wanted to and then nothing's going to change as i hover but i prefer leaving this on gradient and then we get that slight change as i'm moving over it then you have meta border color that is just down here i like the gray but you can change that too and of course we then have the image so if you start changing the image spacing it creates a gap between the actual content it won't move the avatar so if you don't want that you can just remove it as we already said and you can also add in css filters i think these look a little bit weird but i will show you if i go over to hover and let's say change the hue now when i hover over it we see that the picture colors are changing i don't like that so i'm going to leave it as it was but you can play around with that if you want to then we can alter the badge so at the moment it's up at the top right you can bring that over to the left if you want change the background color of it and we can also change the text color as well i'm going to leave mine on white but if we want we can also increase the size change the border radius from a square up to being curved and you can also play around with the margins as well and that way move it around the box so i think we'll leave it around 25 and last but not least you've got the typography so if we go in here we can change whether we want this to be uppercase lowercase you get the idea i'm going to leave it on default and we'll move on when it comes to the avatar size for this i'm going to move it right up to the top that's right i love myself that much i'm joking my ego's not that bad but i'm still going to leave it up there moving swiftly on let's go to content and this is where we can start changing obviously our title the excerpt and the metadata so title is this up here if i want i can go in change the size of this maybe around 27 change the color as well so i'll make it the light blue to match the badge and you can also change the spacing if you want exactly the same goes for the metadata you can change the color of the writing and also the separator color that was the little dot and the plus that i created but remember you do need to have at least two things in here in order for that separator to show up and again you can change the typography and the same for the excess as well if you're unsure about any of these settings and how they work check out my playlist on how to use elementor's free widgets i went through this in detail on both the text editor and the title headings so i won't bore them with you now but this is how you can change the look of everything here and you can do the same for pagination as well now for this bit i need to get rid of these three again because of course our pagination has disappeared so i head back over to layout under the content section change my post per page back to three then our pagination reappears and now we can hop on back over to style down to pagination and once again we can change the typography which does mean we can make them that bit bigger if we want to and we can also change the space between them now something i really like here is being able to change the normal hover and active colors so notice at the moment we are on page one and it's gray if i come on over to the active section go into color and change this to green that's going to change the color of the page we're currently on we can also change the normal color but i'll leave it as it is and then let's go to hover and let's say i want this to be red now when i hover over it we'll see that that changes from blue to red and that just adds a nice little extra touch down here that's almost it but there are a couple of extra things you can do if we go on over to the advanced tab if you come on down to background you can add in a background color here but it doesn't look very good for example if i just add in this green but it's not as good so a much better way to do this if i turn off the background again is actually to come up to our section settings go into style head on over to background now you've got a different choice of things you could use slideshow video image i'm just going to go with a gradient you can then add one in obviously change the angle and location and colors of our gradient and then if we want we can come back into our post settings go out to advanced and add in some padding so if i unlink these values let's give it 30 pixels at the top 30 at the bottom and now we can take a look so let's update and preview this okay so that's how you can add a background to this of different types personally i'm going to put it back to how it was because i just like a blank page background but it makes it really easy to style this up and get a lot more interest in your blog posts and you can put it anywhere on your site thanks to this widget just remember that when you finish designing go on over check the tablet mode check the mobile mode make sure that it's looking as you want it to look for me i don't like it like this so i would definitely want to go on in and make sure that on the tablet view i've got just two columns showing like that i think that looks a lot better so in the last video we took a look at the elementor pro post widget in this one we're going to be having a look at the portfolio and you can do something very similar with this widget so what we're going to do is come under the pro section grab the portfolio click and drag it on into the page and immediately that by default drags through your blog posts so if you don't see anything here it's because you haven't got any posts but i quite like this look it's obviously focused very much upon the images whereas this obviously is more upon the content and you could choose whether or not you wanted to have the images on or off so very similar like this we can change the amount of columns just as we did in the previous video so we can have two three four and whatever we choose we can then change it for our devices so the little icon here if i click over to tablet we can then take a look and we see that we've got two rows if i wanted i could just have the one three whatever it is that you want and you can do exactly the same thing for mobile as well to make sure that it looks good so maybe i still want two on a mobile when you've decided come on back over to the desktop view you can choose how many posts you want per page so i've currently got six we could obviously change that and you can also change the image size i'm going to leave it on medium i think that's fine for when we've got three side by side but if i just wanted to have the one showing then obviously the quality is not that good so at that point i would obviously bring this up make it a large image and then we can see that's a lot crisper and clearer so what you choose here completely depends on the amount of rows that you're going to be showing off you do also have the option for a masonry effect which means that if you've got different shape images for example maybe some that are portrait rather than landscape they won't all be in line now if i turn this on you won't see any difference because all of my images are 16x9 however in the next video where we look at the elementor pro gallery widget i'm going to be using lots of different shape images and we're going to go into this in detail once again we can change the image ratios if we want to but i'm going to leave them as they were we can also hide the title so you see that when i'm hovering over it we've got the title of our blog post showing i can turn that off and then we just get the gradient overlay or image overlay sorry it's not a gradient but i'm going to turn the title back on and of course you can choose what heading tag you want that title to have next we have query now this is where you can choose which posts you want to show or indeed if you want posts at all we could have pages and if we do that you'll probably get something like this where you don't see any images if that's the case really simple solution if i exit back to this page for a minute at the back end we see over here on the right underneath the document settings you have the featured image option so make sure that you do this for all of your pages set a featured image that way whenever you share it via social media or anything that image is going to be pulled through but also for what we're doing here that's how you get those images to show up under the pages section you've got a couple of other options here as well manual selection current query related but the one thing you're not going to see is a portfolio option this is quite annoying considering how this is the portfolio widget if you're a photographer and let's say you wanted to show off i know different types of shoots that you do maybe you do wedding photography and you also do i don't know family portraits animals nature photography whatever it is if you wanted to have a proper portfolio then the only real way to do it with elementor is to create those each under their own page now there's not a problem with doing that um but if you do want a proper portfolio there are plugins that can do it for you there are themes that have it inbuilt astra's got a really great add-on a wp portfolio but that is a premium plug-in i'm going to do a separate tutorial actually showing you how to create a full portfolio so i won't do that here because of course this is about elementor pro's default settings for now though i'm going to go back to posts and just as we had up here when we looked at the proper posts element widget you've got the option to include or exclude things do them via date range or a custom date range you can order them via different means for example a random order and that's obviously going to change the order we see these in and again have them ascending or descending when you've chosen what you want come on down to the filter bar if we turn this on we can then choose what uh what we want to filter this by because i'm using blog posts categories make sense so i have the one category which is travel which made sense for these example blog posts i did for this tutorial but that's why we've got just the one option that's appeared up here if i had lots of different categories then you would see them all along the top and i suggest you use that because it makes it easy for people to be able to get to the content that they want on your website now that we've done that we can head on over to the style tab and now we can change the column and row gap so at the moment we've got no gap here if i bring this up a little bit maybe around 5 pixels each we've now got some space in between them we can change the border radius so if i do this you're going to see that the corners curve on all of these images if you want you can unlink these and then i could always turn the bottom back to zero and the same with the bottom left and now we've just got curves up at the top and flat at the bottom so you can turn these into some interesting shapes below that you have the item overlay so at the moment we're getting this sort of gray overlay and i really don't like that especially since the typography is gray as well it's difficult to see so if i go to background color and let's say a light blue and i bring the opacity down that's going to make it fairly transparent now we've got that light blue and i can still see the image behind it maybe i want it a little less see-through though that's better i prefer that then you've got the color of the text so i'm going to switch this to white so that we can actually see it and below that we have the typography so i'm going to make this bold bring it up in size maybe around 30. that's good and i'm also going to increase the latter spacing so we've got a little bit more space there as well maybe 1.5 there we go i like that a lot but again when you do this make sure that you come on over and check what it looks like on other devices especially mobile if i switch over to that i don't really like having two side by side i would switch this back to one and then the writing is actually going to fit but if we wanted to we could now go into the typography change it for mobile and it won't affect what we just did for desktop so you can play around with that fully for me i do just want to put this back to one column on mobile and now that works a lot better for me so let's go back to the desktop view i really like that i think it looks great you can also style up your filter bar as well so that's what we put just up here you can change the color of your active and unactive categories so if i change the active color to green we'll see it changes to green and let's make the other one be a blue come into typography and bring up the size maybe around 20 i prefer 18 and then we are done okay you can always come under the advanced tab add a background if you want to we'll just go with a single one for now choose the color that you want i don't want one so i'm going to leave it alone but when you've done that you can come up under the advanced tab and then you can start changing the padding so i could put in more padding at the top and more padding at the bottom and then that means that if you do have a color behind it it's not going to be so cramped so it would look more like that the other final thing that you can do is make this full width so at the moment if we preview this we see that it's currently in line with our widget above which is what i personally like but if you wanted you can come up to the section settings come over to layout go to stretch section content width full width and now if we look at this we see that that's now stretching across the page from side to side so that's it for the portfolio widget but i really do like the way that you can create a post that looks a lot different or something that can link to other pages around your site is a really nice useful feature to have in this video i'm going to show you how to use elementor pro's gallery widget now this is a brilliant one in my tutorial series where i showed you how to use all of elementor's free widgets we took a look at the basic gallery which is here under the general section now it's great as part of the free plug-in but it's very limited and this pro gallery gives you so much more control over making your images look great so i'm just going to click and drag this on into the page and of course the very first thing we need to do is get some images here so come on over and click up here that's going to take you to your media library now if you don't have photos uploaded yet come on over to upload files you can either click to select them from your computer or you can simply click and drag so i'm going to bring this one in that loads it up and then what you can do is come on over add in your titles add in your alt text which you should be doing for good seo same as you should really be naming your files with something that's relevant to you obviously i haven't for this tutorial but you can also add in captions and a description here for the images bear this in mind because in a couple of minutes we'll have the option to actually make these visible on the front end of the site so this is where you can fill them in you can then select your images you can select them on mass by simply going to the next one holding down shift and then clicking or if you want to pick ones out at random hold down command and then click them or control on windows i believe so when we've chosen the ones we want come on over and click create new gallery from here what we can then do is click and drag these into the order that we want to have them this is if you do want to have them in a particular order alternatively you can make them appear at random as i'll show you in a minute if there's any that you've put in that you don't want you can click the little x's and that'll get rid of them and if you've forgotten you can come back to add to gallery and then put in any extras if you've already added captions in the previous screen you'll see them appear here alternatively you can add a caption here so let's put in a couple when you're done coming over to insert gallery and by default you'll see that they appear all in line now this is great if they're all the same image ratio but the ones i have here aren't so there's a couple of things you can do just underneath our gallery we've got the layout option so this is a grid if i change this to justified you'll see that we get these going off at different sizes to left and right but the heights are still all being forced to stay the same so what we can then do is go to the masonry option so this is the sort of thing you just can't do with the free basic gallery that comes with elemental you can start to create things that look a lot more interesting and as i mentioned you've also got the option to order these randomly so if i switch this to random we'll see that order changes and that'll change every time somebody visits your website i also suggest that you leave lazy load on because that's going to allow your page to load quicker and i'll show you that in just a moment down here we've got the columns option so this is where you can choose how many columns you want to show so we could have three two obviously just the one although that's not a very exciting gallery so i'm gonna go with three depending on what you choose here we'll change what you want for the image size so this is a little bit blurry i'm gonna change this up to medium large now that's already a lot clearer but if you're just showing columns of two you might want to make that a bit bigger again just don't go too big when it's not necessary as that will slow down the site now that we've done that let's update and take a look and you're going to see the lazy loading here as i scroll down there we go see the images pop in there so they're lazy loading as they come onto the screen and that's going to allow your web page to load faster i think it's great but if you don't like it then you can turn it off just up here next up we've got the spacing so if i change this you'll see that we get more space around these images i'm going to go with about five pixels i think but you can change this just as you can change your columns across devices so this is the desktop if i click on the little icon we can head on over to the tablet view by default that's got it on two columns if we wanted we could change that up to three and i think i'm going to do that and then for mobile let's have a look what does it look like with two looks okay so i think i'll leave it like that and again if we wanted we could also change the spacing but i'm going to leave that just as it was when you've done that come back down to your responsive mode here or on the little icons and switch back to desktop we see that's put us back to the three columns we've chosen from here we can decide what happens when we actually click on the images so under media file it launches a light box i really like this it also shows off the file name and then people can click through and view the different images when you're done click on out of it come back into the widget if you don't like that you can turn it off so down here we can change this to none then when somebody clicks on it nothing is going to happen or you can choose a custom url so if i do this and i need to turn that off because that's a little bit annoying while we're doing this tutorial so i'm just going to turn the order back to default for now that way it won't keep changing but at least you know what it does so with the link what happens now is if somebody clicks on any of these images it will take you to whatever web page link you put in here you can of course use the little link options and then you can choose whether you want it to open up in a new window or be a nofollow link but what you can't do is have one image linked to a different link than the next if that makes sense so if you're wanting that if you want to be able to click on this image and it takes you to one page and then to this image and it takes you to another you can't do that with a gallery what you need to do is either use individual images use an image box or best of all use this up here so in the previous video i showed you how to use the portfolio element you can have this link to posts or individual pages you can also have a masonry effect just like we are down here and that means that when somebody clicks on one of them it'll take them to different links all over the place so if that's what you're after i suggest using the portfolio but for just one link stick with the gallery for me i want to keep this one as being the media because i like the light box that appears when we click on it so i'm going to stick with that then we have the overlay so i quite like this overlay don't necessarily like the black we're going to change that in a minute if you don't want it at all you can turn it off and then it won't happen but i'm gonna have it on and you can also choose whether or not you want your titles or captions to show up so if i turn on titles for a minute we see that we then get my file name or title rather and then if i come down to description i can choose to have the description i could choose to have the alt text or the caption that i put in and this is where i said take care what you're putting in because that can show up on the front end to people if you've got these options on so i'll leave those on for now and next up let's take a look at styling this so come up to the style tab and here we can start adding in some borders if you want to so let's give it a three pixel border change the color to a gray or maybe a blue so you can see it a little bit better and then you've got the border width so again we can increase this or we can curve it if we want to so i'm going to go with that just for the moment you've got the hover option so if we come over here you can change what this looks like for hover you've also got the css filters so under the normal mode if we wanted we could have the brightness down so it's quite low for example and then if i come over to hover we could go into the css filters turn the brightness up and now when we hover over it we obviously get it changing like that which is quite nice i do quite like it but i'm going to leave it like it was for now what i do want though is a hover animation so i like it zooming in or zooming out if we go with zoom in for now it gives a lot more depth i think so i'm going to leave it at that but i will change the animation duration so it's quite quick at the moment if i just move it to a thousand milliseconds that means one second just going to slow it down that little bit more and i like that that looks good then we've got the overlay below this so that's obviously the dark overlay we've got there at the moment if you don't like it dark then what we can do is come over to the hover click on it i'm going to change it to white bring the transparency down though because at the moment we then won't be able to see anything so let's bring that down and then we get this sort of white overlay but then of course we can't see the text so what we can do is come down to content just here and under our content section you've got the title and description color so i could change this make it gray do that on both of them and now when we hover over it we see that it's gray still not showing up fully so i think we need to make it black let's do that quickly and there we go that looks a lot better of course the overlay doesn't need to be just for the hover section so you can have a normal overlay as well if we wanted if i put this to blue and then of course again you can bring the transparency down if you want to play around with it i don't want one so i'm going to leave it off but what is cool is the hover animation so at the moment where i've got that light overlay what i could do is have this sliding in so if i do slide in from left now when i hover over it we see that it's not immediately there it's getting that slide coming across it i really like that thing looks cool and again you can adjust the animation duration as well in this video i'm going to show you how to make a multi-step form with elementor we're going to design something that looks a bit like this so we've got an image behind it a slight background overlay and then we've got a stepped contact form so people can come in choose the options that they want and then move forward to the next step and that really breaks down a static form into something more interactive it's a lot more fun to use and we're going to look at all the settings and make sure that you can send to email properly so you're going to be able to get more leads from your website so let's get to it first thing i'm going to do is come up here press the little plus button because i want to create a section above this one and then i'm going to come over to the widget toolbar and under the pro section grab the form and drag it on into the page so by default that gives us this static form so if you don't want steps it's really easy you can just leave it alone looks pretty good to begin with to be fair over here is where you add in the content so when you want a new item we just click the add button that's then created one down here you can also go to an existing item click the little duplicate button and that'll copy it for you and if you don't want something you can press the x and that gets rid of it okay so this is just the basic part of it you can also give your form a name if you want to nobody is going to see this it's purely for your reference if you've got more than one across your site and when you've added an item this is where you can choose what you want it to be so under here you see we've got type at the moment it is text so somebody can actually write in it if we click on it we get a drop down box of all of these different options i'm not going to bore you with all of them you pretty much just pick the ones that you want for example down here these two are text boxes because they're for names this one is an email box and obviously that one is for a telephone number and if i go back to the first step you'll see that we had a selection box and also a date box so you can pick from a date range so there's lots of things you can do there when you have chosen what you want so i will go with telephone you've then got the label and the placeholder text so your label is what appears above the box and the placeholder text is what's inside so i'll just call this mobile cell and then in here what's your number when you've done that you can then choose whether you want it to be required if you turn this on that means somebody has to put in that information before they proceed with the form you can even come down just below this section and you'll have required mark if i turn this on you get the little star next to it that's useful because it tells people that they have to fill it in if you don't want the labels at all you can disable all of them that gets rid of all of them or we can leave them on and then individually with each step you can simply leave the label blank and then that will also make it disappear but keep it on the other ones when you've done that simply click and drag something into the position that you want so i want the telephone to come up above the message and i also want the email and the mobile to be side by side so i'll click into the email come down to column width and change it to 50 and i'm going to do the same thing for the mobile as well so change it over to 50 and if i want to add in a surname to this option i'll come up to name click copy click into my newly created field and i'll change this to say last name right surname change to 50 and change the first one to say first name so those are the basics that's how you add in the fields that you want and get them into the position that you want on your page now though let's add in some steps so what we need to do is come on down to add item and then under the type come down to step that's going to automatically create two steps for you so it's put one up here at the beginning and we've also got the one we just created which is now over here so if i come up to this first one that it's also created i can give this a label as well so down here i called it your vacation and then if we go to step number two i call that about you so let's place the text under here if you don't want text or you want to change this from being a number to just have text that's easy to do just scroll on down and you will find an option that says steps settings so if we click into this this is where you can choose what you want to be shown so i can have this as just a number i could have it as just an icon and if i do that then underneath our forms fields when i go into the specific step we can then choose our icon here you've got a vast icon library thanks to font awesome so you can go through and choose the one that you want but i am going to leave it as it was so steps settings number and text i prefer that you can also change the shape so i like a circle but you can have a square or a rounded option and then these other options i will come to shortly for the moment though let's just look at the button you'll see that at the moment it's justified and it's going the full width of the form if i center it up it'll center it across 100 of the form's width so if i change this to 50 percent it's going to place the button here because that is halfway of 50 of the page so i'm going to leave this on 100 leave it on justified and i'm not going to worry about changing the size of the button here because we're going to do that in just a minute under the style for now though underneath the form fields what we want to do is now drag some of these underneath our option two our step two so i'm gonna click and drag email underneath it click and drag the telephone underneath it and if you do this and you don't immediately see the change don't worry just come up here click back to our widget toolbar that refreshes it so we can see those options have now disappeared and if i move forwards with the next button we now find them here underneath step two so you can see this coming together already let's go back into the widget itself and now what i'm going to do is add in these extra fields and then i'll be right back with you so there we go i've added in those extra fields we've now got a departure and return date as well as the ability to choose a destination all i need to do now is put my departure date and return date on the same line so 50 and 50 for the column width and now i need a final third step because i want to put my message under the third step option so come down add new type change that to step that's now made a third step for me i'm going to label this as any extras and then i'm going to click and drag my message box down underneath that step so let's preview this take a look at how it's looking so it's getting there already as you can see we've added in our steps we've got the same ones there we can click the next button and it's going to take us through but i'm now going to show you how to style this and change the name of these buttons and of course add the background in behind them so you may have noticed while i was putting in these steps you can change the name of the previous and next button but if you do it here then you're going to have to do it individually for each and every step which is great if you want something different for each but if we scroll on down and go to buttons then you'll find this option where it says step button so here we can change it for the entire form so if i just change this one to say go you'll see that's switched it down here but i'll leave that one on next and i'm just going to change the previous to say back now i'm going to head on back up and go to the style tab and this is where you can start to change the spacing between your columns and your rows so if i increase the columns gap you'll see we get more space here and rows we obviously get more space there but i'm going to leave it on default i think it looks fine how it is you can also change the spacing of your labels which are up here and you can change the text color as well and you can even change the marker color so the marker is for your required fields you'll see up here it's currently red if i change this to blue then it switches so leave that on red i think and i'm going to go on down to the field so under field you can change the text color here so at the moment it's gray i can change that if i want to and i can go into the typography and i could increase the size of this change the weight make it bold make it uppercase lowercase capitalize all but i'm going to leave it on default again and then beneath that you have the background color so this is going to fill in your field section with a solid color now i'm going to put this to white because if we look at my example down here i've made it white because in a minute we're going to be putting this background image behind it so i've got it on white border color i've left that on the default gray but if you want to change the border color we can increase the width of it but i just want to curve it so i've got this curved look down here so under the border radius section i'm going to change this to 30 and then i'm going to come down to buttons and again underneath border radius down here i'm going to curve these up a bit and i want to change the color of these as well so i'm going to change my next button over to be green and i'm going to leave the the background one on a blue but i'm going to have a slightly different blue color there we go i like the text color being white but i am going to bold it up so under typography i'm going to change the weight to bold and then the next thing to do is make our steps look different as you can see down here i've got different colors as we go across the screen so i'm going to go to the step section and then we've got inactive active and completed so active is the one that you are currently on inactive is the one that you are yet to come to and completed is the one that you've already filled in so if i go to completed i can change the primary color to a lighter green if i change the secondary color it's going to change the number inside it so if i change that to red you see that changes but i'll leave it as it was put on white i'm going to make the active color turn to this sort of orangey gold so primary color go with about there and in active i'm just going to leave on gray because i think that looks best the last thing i'm going to do is just come under typography and increase the size of these just a little bit and also going to make them bold now we've done that it's time to put our image behind this to start making it look good so to do that i'm going to come up here to my actual section settings click into this come over to the style section and then under background i'm going to go for a classic background and a single image i'm going to go with my plain picture change the position to center repeat to off and size to cover we then need to give it some extra height so that it looks more like the one below it so i'm going to come over to layout and then underneath the height section i'm going to change this to minimum height and i'm going to make it 580. now that i've done that i want to put a slight gradient overlay over the top so it's back over to the style tab and then underneath background you have background overlay i'm going to choose a background type as gradient and then for my first color i just want white but then for my second color i want a sort of orange yellow again something to go with the sun in the background bring the opacity down a little bit so it's slightly more see-through i can change the angle if i want to so i think around there you can also change the opacity as a whole by using this slider and if i change the location you'll see that we start to get more white rather than orange so i'm going to go with something like this and then all i want to do is come back to my widgets actually under the basic section i want to click and drag in a title heading put that in the middle make it bold and i'm going to stick a spacer beneath it probably around 30 pixels and then if i come back over to our form widget i just want to make these labels turn to white so they're going to be easier to see so underneath label i'm going to go into text color make those white and i'm also going to make the typography slightly larger so it's easier to see maybe around 16. so there we go let's update and take a look at this there we are how much cooler does that look than when we first started a few minutes ago so people can now choose what they want click on next we've got our back button as well put in the information that's needed put in a number click on next and then we've got our message section at the end and you'll see that these have changed colors as we've gone along as well so that's cool i'm done with the styling i like the way that it looks now we just need to make sure that it actually sends an email to you so if somebody fills this in we need to make sure that you know about it so back underneath the content section of our form widget we need to come on down and you're going to find a couple of options here the first is actions after submit so if i click into this you can add different actions okay you can connect this up to an email marketing service if you've got one the way that you do that is go into your particular email marketing provider go into your account and find your api key that's going to be somewhere under your account maybe under an integrations page something like that it'll change for each one but when you've got that come on over here under your wordpress dashboard to elementor click into it and you're going to find the integrations tab so all you need to do is find your particular email marketing provider say mailchimp and copy and paste your api key in here and obviously validate it and that's going to mean that it then connects up with your form okay so you do need to do that first otherwise the form is not going to be able to connect with it quite understandably so what we want to do though for this is just send an email so i'm going to leave that just as email under actions after submit i then want to come down to the email tab put in the email address that you want it to send to you can change the subject line so i'll make this new inquiry under the message by default it is going to send you all fields i think this makes sense because of course if you put in a field here it makes sense that you'd want to know that information however if you only want to know some of the information what you can do is come into the particular field in question go over to the advanced tab and then there you will have some short code you can also change what this says so i can make it first name and that changes the short code down here we would then copy that and take it down here to our email section and then i would paste in here and i would simply paste in the ones that i want instead of having all fields but i don't really see the points of that i figure if you put a field in you're going to want to know about it so i'll leave it on all fields post in the comments if you think i'm wrong there if you can think of a different reason for that change the from email again and then under reply to you want this to be the email field because if you're going to reply to the message it wants to go to the email the person has put in on the form under metadata you can take out the bits you don't want so i don't need to know their ip address but i do want to know what date and time they made inquiry and what page it came from and lastly we can go under additional options and here you'll find custom messages if you turn this on you can change what people see after they've submitted the form so i'm going to make this thank you for your inquiry and you can also change the way that this looks as well so back up underneath the style settings you'll notice that you've got this messages option so in here we can change the color of our success message if we want to so if i make it green in a minute you're going to see that when i've submitted the form as a final thing if you're having difficulty with this if you're not getting emails sent through to you then it's probably because you're on a shared hosting plan and unfortunately wordpress does attract quite a lot of spammers and that might be why your emails aren't going through what you want to use is an smtp plugin so i'm going to do a separate tutorial on this so we can go into it in detail but just to give you the idea you want to come into plugins and search for smtp and my favorite one it's free really easy to use is wp mail sntp it's by wp forms okay highly trusted loads of active installs so if you put that on you're going to find that your email starts sending through without a problem hopefully though you won't need it let's find out let's go in and submit the form so i'm going to go on holiday to spain here are my dates next test message and send there we go there's our thank you for your inquiry i probably want to make it larger and obviously change the color so we can see it over the image but now let's check the emails and see whether it's come through okay so that email did come through but i have to be honest it took about 10 minutes before it turned up so that is one of the other reasons i suggest using an smtp plugin because i find that just really speeds up the process it's there in like 30 seconds but this is the information that's come through we've got our destination we've got our dates obviously the details of the person who's made the inquiry and we've also got that extra meta information that i talked about so there we go that is one of the best widgets in elementor so powerful easy way to create a contact form so we're going to design something that looks like this as our end result and the reason that you want to use a login section is so that uh if you place it on the front end of your site you could use it to log into your wordpress dashboard as could anyone else who's got access or if you're using a sort of membership site you can put this on the front of any page that you've password protected and then your members can log in and get access to the content that their particular membership level allows them to access now in this tutorial i'm just going to be showing you how to actually use the widget itself the login widget but if you would like to see how to make a membership site from scratch then post it on in the comments if enough people want it then i'm happy to do a tutorial on it so the first thing that i want to do is create a couple of columns so i'm going to come up here press the little plus button plus again and i'm going to go with a two-column structure just like i did down here and then the first thing i want to do is put in my background image so up here on the right underneath the column settings i click the column i change this over to 70 and that naturally takes this side over to 30 and then under the style section i'm going to go to background background type as classic and i'm going to choose my image which is of mr moose here and then down here under the settings i'm going to make the position center turn the repeat off and i'm going to change the size to cover now obviously this is very short at the moment there's no height but we're going to get that in a minute when we add in the extra content on the left so just before we get to the actual login widget what i want to do is search for icon and i'm going to grab my icon box and drag that on into the page because we're going to create this here so i change my icon over to a tree get rid of the descriptive text and change my title so that it says come in to the outdoors i'm then going to go up under style change my icon color over to green and under content i'm going to change my title typography so that it's bold then i just want to grab a spacer and put that above it so grab my spacer drag it on in and make this 30 pixels and then i want to change the background color that we have so i've got this sort of light blue so again i click on my column settings for this side go up to style background type this time i'm going to go with color and my color code that i've used for this is dbf4ff that gives us this light blue color i'm going to copy that because i want it again in a moment and now it's time to add in our login widget so underneath the pro section find login click and drag it on into the page and this is where we can now start to change the settings there aren't that many of them if you have the label on then it's going to double up the placeholder text basically says username or email address twice now i don't like that so i'm going to get rid of the label and i'm going to change the input size to medium so it's a bit easier to see my button i'm going to align to the center and then under additional options you've got the option for lost password remember me logged in message i want to leave all of those on if you want you can customize the label so you can change this text and what it says here and here if you want to but i'm going to leave it alone and then you've got redirect after login so if you have this option put in a link and when somebody logs in it's going to take them to that particular page so again if you've got a membership site you've got password protected pages or posts you can put the link in there and obviously the same for logging out as well so that is it for the settings really easy one now we just need to style it so underneath style i want a bit more of a gap between my rows i'm going to go with 20 pixels the link color we can change if we want so mine's blue and when i hover over it you see that it changes to orange yours might be different that's just my theme settings but i could change that so links hover color if i change that to green if i then hover over it you see that's changed so you can make it what you want there and then under the field section again you can change the text color from this gray we could also change the size of the text under typography but all i want to do is change the background color so you can see that it's white at the moment i'm just going to press clear and that makes it see-through which is what i want for my particular background you can then also change your border widths if you want we can make this bigger like this but i'm going to leave it just on one as it was and if you wanted to curve it more then you can but again i'm going to leave it as it is i am going to change my button though so underneath the button section i want to change my background color to the same green as my icon i have up there and i want to make the typography bigger so i want to make this size 18 and i'm going to bold it up as well and i want it to be more curved so i'm going to go with 35 that's curved the button and for text padding what i want to do is unlink the values and i'm then going to go with 15 40 15 and 40. and as a final touch what i'm going to do is come up to the text color because at the moment it's white so i'm going to go into that and i'm going to paste the same color code that i had for our background and now it basically looks like the button is a little bit see-through where we've got that text which i quite like and don't forget that you can also come underneath the hover section so we could change the background color if we wanted we could make it a lighter green then when you hover over it it turns to that and of course you can also change your text color and add in an animation if you want to what i want to do now though is add in some social icons so down here i've put in some social icons which i think looks quite good so again it's back up to the widget toolbar search for social icons and then click and drag them on underneath here i want to change them to be circles and then under style i'm going to change this to custom color i'm going to make the primary color white and my secondary color i'm going to go with another blue which is 97dff and i'm going to make the size 25 and i'm going to make the spacing 15. and now as a final touch it's back to the good old spacer widget drag this in give this 20 pixels of space and i'm going to duplicate that put it below maybe 30 pixels update and let's take a look what this looks like okay so scroll on down there we go so i'm currently logged in which is why we're seeing our logged in message but there's one thing i forgot to do and that was put the box shadow around the outside so i like this sort of effect so let's show you how to add that quickly what we want to do is come on up to your column section settings again and under style go down to border and then under border simply turn on box shadow you can play around with it here if you want i'm just going to use the default setting and i'm going to do exactly the same over on our other column so border box shadow turn that on and now what i'll do is i'll update and i'll log out so you can actually see the final result so there you go i've logged out and there we have it there is our final result and it matches what i said it was going to from the beginning i really like this widget it's very easy to use and again elementor how easy is it to style something out and make it look cool in just a few minutes okay time for us to have a look at the slides widget within elementor pro it's a really easy one to use this so it shouldn't take long first thing we want to do is come on up create a section find our slides widget and click and drag it on into the page now by default that is going to give you three options straight from the get go you can always add in another item or you can simply duplicate one that's already there and use the little x to get rid of them now we can change the height down here so i'm going to bring this up maybe to around 550 and then what we can do is click into slide 1 and you can change the background at the moment we have this purple color we can change that if we want to drag it around change it to blue or green whatever we want there it is or we can change it to be an image which is what i want so i'm going to choose this image and we can see that at the moment these slides are moving through really quickly so i'm going to change that because it's obviously quite difficult to show you what this is looking like when when it's changing so quickly so if i close down this slide come on down to slider options and this is our auto play speed and this is our transition speed but these are in milliseconds so a thousand milliseconds is one second and that is why this is currently changing so quickly so let's change that over to a thousand and then we can head back up to our slide when we're in the slide we can also have the ken burns effect i really like this one so it gives us this animation where it's now starting to zoom in or we can have it zooming out instead if we prefer i think i prefer it zooming in so i'm going to leave it on that and you can also have a background overlay and that makes the text easier to see but it's a little bit too dark so i'm going to bring the opacity down on that maybe to around there and then what we want to do is just copy that color code because we're going to want that again in a moment so now that i've done that i can delete my other two slides and now i can simply come up here and duplicate this one and then we've got a copy of this slide and then we can just change the image but before we do that let's change the text so underneath the content section i come on in and i'm going to change my title so this one's going to say shop women's and i'm also going to change the description so look cool and hot this summer then we have our button text i'm going to make this shop now so already that looks cool i can put in a link here so when somebody clicks this it's going to take them through to that particular page and what you can also do is come under style and if we turn on the custom option then we can customize this slider so we could move this over to the left or in the middle etcetera and we could do that for each slider individually so that each one is designed differently but i don't want this i want them all to be the same so we're going to style them up underneath the style tab in just a minute when we've got all of them for now though what i'm going to do is duplicate this so i've now got two i'm going to come in change my image over to the one of the man and then all i need to do is change my content so this says shop men's and then duplicate one last time come on into the third one choose my image and change the content there we go now what we can do is come back down to slider options so if you didn't want it to slide you could also have a transition where it just fades across instead so it gets that sort of effect for you personally i prefer slide so i'm going to leave it on that and we can also change the direction of the content animation so if we didn't want the text going up on load we wanted to go the other way i can change it to down now if i go to the next slide there we go we see that sliding down there's obviously a few different options you can have there but i'm going to leave mine heading up as default and lastly you've got the arrows and dots so we've got the little dots down here the arrows on the side if we wanted we could get rid of those but i'm going to leave it again as default i'm also going to leave auto play on same with uh infinite loop that way it's just going to keep going but i do always want to have pause on hover and interaction that way although it's going to still zoom in the slide isn't going to change when i'm hovering over it because of course if you've got somebody on your website you don't want it to switch before they can actually click the item that they wanted so i think that's really important i'd suggest that you leave those on now though we can head on up to the style section you can change the content width so if i bring this down you'll see that it's going to squash our content in the middle there but i'll leave it up around 70. you can change the padding if you want to and this is where you can change everything as a whole so if i move this to the left that's now going to do it for each of the slides instead of customizing each of them individually like i mentioned a minute ago so i prefer doing it so they look all the same you can come into title and you can change the spacing so you get more space between your title and the rest of the content and you can do exactly the same thing under description as well if you want to that's going to give you more space here between the description and the button well i'm going to leave it on default of course we can change our text color if you want to and the typography so we can make our text bigger but again i like it how it is so i'm just going to leave it on default but that's how you can change it and finally you've got the button so again if we wanted we could change the border radius that's going to curve up the button we can obviously make the border thicker if we want to i'm going to go with the default again and you can change what it looks like on hover so at the moment if i hover over it it stays the same but we could change that i can make the background color red now when i hover over it that's going to infill and then you've got the navigation so this is where we can change these arrows they're currently on the inside if i wanted i could move them to the outside of the box and then we've got them there and there so we can change the arrow size if we want to bring these up i think i'll have mine around 40 and then of course you can change the color of them as well if you want to same goes for the dots so we can increase the size of the dots if we want to if i bring this up you see those are increasing down at the bottom here so i think those can go around 10 and obviously you can change the color of your dots as well okay it's time to take a look at one of my favorite widgets in elementor and that is the animated headline so let's have a look at how to do it first thing we're going to do is come over to the pros section of our widget list and drag the animated headline over on into the page now by default it gives us the circle which is what i've gone with up here but we can change this so over here the first option you've got is to choose whether or not you want this to be highlighted or rotating so i tell you what i'll do i'll show you them both side by side let's have three columns here i'll drag this one in over on the left and we can get rid of that one so first of all let's go with the highlighted option shape you can see what the circle does up here let's go with curly we've got lots of different options here to choose from it's really really good and then we can change what we want this to say so we've got the before text the highlighted text which is the word that this is obviously highlighting and then you've got after text so i could type stuff after this and then it's going to appear there but for this one let's just put this as elementor is amazing because it is so let's do that and you can put a link to this if you want to if you want somebody to click on this and it takes them to a particular part of your site you can put a link in i'll leave it blank for this though and then you can choose the alignment so we can have it obviously over on the left or in the middle and you can change your heading tag that's going to completely depend on what else you've got on your page already for me i'm going to leave this on heading 3 i think that's absolutely fine and now what i want to do is just style this up a little bit more so if we come over to the style tab the first thing we can do is change the color so default is red if i click in here we can change this to blue so what we can then have is the width change so at the moment it's quite thick what we can do is bring that down so it's much thinner or obviously bring it up so that it's thicker so i think i'll go with probably the default actually just leave it like that if you've got things in front of it or behind you can bring it to the front round off the edges depending on the shape that you go for the headline is where we can then change the spacing so under typography what we could do is obviously change the size we could hold it up if we want to or what i quite like to do is just change the letter spacing so if we bring this down it obviously becomes much narrower we bring it up it's wider i quite like it about 1.5 so let's go with that and then what you can also do is change your animated text separately so if we wanted under our animated text let's say we wanted to change the color we could make this bit green and then we could also make that particular one uh all caps if we wanted you know it's all possible so play around with that and then what i'll do is i will copy and paste and let's do it again copy and paste and then on this one let's go with zigzag so now we've got that zigzag effect over here and then what we could do is go under style let's say that we wanted the underline on this one to be the green and then what we want is for our animated text to be blue so we can do that and we could also change the typography again we could say actually we want this just to be the default and then it's going to not be capitalized anymore so it looks like this and then the last one which i think is really really cool is under style instead of highlighted let's change this to rotating and now what we can do is actually have something like this happening which is just amazing so i love the typing option which is what this is but you can have it slide for example so then it just slides and whatever you write here are going to be the options that it's cycling through so for me i really like the typing one i'm going to leave it on that um and you know i can just put uh cool great awesome okay and uh then what i'll do let's go back to style let's change the typography just so that it's on default again so let's go with that option and then i'll change this to say jack in the net nothing like a bit of shameless uh egotistical self-promotion there but we'll go with that and i think it's awesome elementor makes it really easy to show off your products with their priceless widget so you'll find it under the pro section or we can just search for price there it is so click and drag it on into the page now just bear in mind this is to do with designing what your price list is going to look like if you want to actually link this up with woocommerce so you can sell your products i've got a different woocommerce tutorial i'll show you exactly how to do that but let's focus on making this look good first of all so you have three items in your list by default of course you can add more if you want to with a little add item menu or you can duplicate an existing one with the copy button just here but we'll stick with three for the moment when you click on a list item the first thing you can do is change the price so i can make my first item 25.99 change the title you can add in a description if you want to and then you can come in and add an image so i'm going to choose this one and then of course you can put in a link so you can take it through to a particular page if you're using woocommerce this would be your product page and as normal you can use the little link options to open this in a new window or use a no follow if you want to i'm going to leave this blank and then i'll just add in a couple of other items when you've added in the items that you want the next thing you can do is create a second column so we can come up here to our column settings i can right click and then just click duplicate and that automatically creates another column on the right for us and we can then of course go in and change these items so there's something different when you've done that and you've added in the items that you want just head on up to the style tab that we've got up here as usual and this is where you can change the title and the description so title and price we can change the color if we want to make it light blue make it red if you want all of these to be the same then you can obviously style them up before you duplicate the columns i'm doing it afterwards so you can actually see the difference you can also change the typography so we can increase the size if we want to make it bold obviously change the font family all the normal things you can do you do exactly the same thing with the description as well so we can make this green change the typography you can also change the separator so by default it is dotted which is this option here that you can see we can make that dashed or we can make it double then you get just this sort of solid line effect here or of course you can have none if you prefer i quite like it dotted so i think we'll stick with that one you can then increase the weight of it so you'll see that these dots are now bigger obviously than these ones over here so maybe around three or two that's probably better again you can change the color of them if you want to and then you've got the image options so by default it gives you the thumbnail size if i change this to medium you'll see that it obviously changes the ratio so the aspect ratio of the image and also slightly increases the quality of the image as well if i took it up to large it's really really clear but then it doesn't need to be that big because it's just wasting file size so i think we'll drop it back down to medium play around with the border radius if you want to this will curve the edges for us so instead of corners we've now got these slight curves you can unlink them if you want so if i make these all 50 and then unlink and got rid of these two you see we've now got sharp corners down at the bottom but curves up at the top and then after that you've got the spacing so if we increase the spacing we got more of a gap here between the image and the actual text and then last off you've got the item option so when i increase this you see that we've got more of a gap between our rows so between the items themselves you can also align it so let's put the text down there in the center or we can have it near the bottom or up at the top now i don't like the fact that our text is falling off the line here if we wanted to we could of course go into list go into typography and we could change this bring it down i lined it up properly but i do prefer it with our default settings in this instance so if i wanted to put them back i can just copy on this one over here come over right click and paste style and that puts everything back into the same style that we had over on this side and finally if you want to you can come up to actual section settings if you wanted to stretch it across full screen turn on the stretch section and also change content width to full width and likewise we can also stick a background behind it as well so other style and background we could obviously put in a solid color if we wanted one you can put in a gradient instead or you can put in a whole image a video or indeed a slideshow it's completely up to you now personally what i would do is actually just have this clear i don't want a background behind it but i do want a larger quality image without having the text fall off the page so what i mean by that is if we preview the changes quickly and i'll scroll on down the page so you can see what we've currently done i like the fact that we've got all of this on one line it's not too small but i don't like the image size i think it's low quality so what i would do is come over to our widget come under style and under the image changes up to maybe medium large and then i'm going to copy paste dial but this is why the full width option is great for me so under the section settings under layout i do want to have stretch uh stretch section on and also content width as full because when we take a look at this it's just going to mean that we can actually fit the the higher quality image and the text all on the same line okay in this video we're going to have a look at elementor's flip box element it's a bit of a weird one probably not one you're going to use very often but when you do it looks pretty cool so the idea is that when you hover over something it flips over and it obviously gives you different information don't worry they don't have to be circles in fact i usually just use a box but i was playing around with it and you know what i thought the circle looks pretty cool so i'm going to show you how to do that as well first thing we want to do of course is come over to the plus button and choose the amount of columns that we want i'm going to go with three like this example down here but of course you can go with whatever you want so there's my three columns come on up here over to our widget toolbar and under the pro section you are going to find the flip box wherever it has gone there it is so click and drag it on into the page and by default we're given this rather unattractive looking box so first thing you want to do is come on over and you've got a couple of sections the front and the back so under front first thing we want to do is change our icon you don't need to have an icon at all you can press the little trash can icon here and that will get rid of it like this but i do want an icon and i'm going to search for a plane so it's this one here that i went for there's our icon then what we can do is choose whether we want it to uh have a sort of background behind it and what shape you want that to be or whether we want to have it in a frame and again you can choose whether you want a circle or a square i'm going to go with the default setting we then can choose our title so the first one was visit new york and then down here we can have our description text so i put two week getaways from 8.99 per person completely make up the price no idea what it actually costs now that we've done that what we want to do is change the background okay we don't want this green color we want a nice picture with a an overlay so come over to background under background type we could have a gradient if we wanted to okay then it would just look like this or we could have a solid color if we wanted that but i don't what i want to do is have the image so i'm going to click on image choose my first picture which was this one here insert that in now we need to change the perspective because it's very zoomed in as you can see so we want to go for center no repeat and size is cover then we get that i want a slight background overlay so i'm going to go with black and then i'm going to bring the opacity right down so we can make the see through around about there i think that looks good and then when we've done that what we're going to do is just close it down for the moment we're going to come to changing the text in just a minute for now though we're going to go on to the back and once again we can see the other side of it so when i hover over this one down here when it switches that is the back so that's what we're now going to create just here so again i get a background choose my background type i want an image i've got my one here of time square so i'll insert that and again i want it to be centered no repeat and i want the size to be cover when we've done that again i want a background overlay but this time i'm going to go for white and i'm going to bring the opacity down to around there i think so it's quite light maybe a little bit up again i think i went for something around there we'll go with it looks good to me so when we've done that the next thing we're going to do is come down to this settings option now this is where you can change your shape quite a bit okay we could alter the height of it here so that's obviously changing the size of the box i'm going to leave it on on default what i am going to do though is change the border radius and this is how we can make it into a circle so i'm going to go with about that maybe increase the height a little bit that looks pretty good to me maybe 310 and then we can change our flip effect so by standard it's flip and looks like that you can have it slide do loads of different things with it zoom in zoom out fade we'll stick with flip just for this you can also change the flip direction so for example if i go for the right you see it's going to twist around that way i'll leave it on up though for for now and then we've got the 3d depth so look at the difference here so this is the default okay like that then look at this you see the difference there you've got more of a rolling motion the text is more involved with it it's 3d whereas that isn't that's very flat so i'm going to turn on the 3d depth effect that's what gives us that look which i really like and head on up to the style tab this is where we're going to change our typography so this is the icon we could obviously change the sizing of this if we wanted to or we could change the spacing between it and the text change the icon size again i'm going to leave all of that on default i think it looks fine but by all means play around with that you can look you can even rotate it so that's a plane that's flying along that's a plane that's about to have a nasty accident you can choose where you want it to be we've then got the title so title text color i want this to be white what i then want to do is go into typography and here of course we can change the size of our title as we normally do and i'll also bold it up maybe add a little bit of spacing between the letters so play around with that and then i'm going to do the same with the description so again we want it to be white typography definitely want that to be bigger so we can actually see it and what i want here about 28 probably what i want here is to change the line height so bring the lines a little bit close together and that looks pretty good okay i like that and now what we need to do is the same thing for the back so here obviously what i want to do is change the text color so that it's actually black that way we're going to see it do the same thing on the description so black like that again what we want to do is change the typography so i'll just make it a bit bigger and we also want to change the button so this is the button we could change the size if we wanted to here i'm going to make the text color black i'm going to make the border color black as well if we want we could have a hover effect so on the hover effect let's make it go completely black as the background color and we'll make the text turn white so if i do that now that happens which looks pretty good i can also change the border width if we want we can make the border really thick but i'll leave it around two and i'm going to bring the border radius up to around 30 30. that's going to curve it up for us which i quite like and as a last touch i'm going to take the typography i'm going to make that a little bit bigger as well so there we go there's our button that's looking pretty good now what we want to do is go back over to content and then instead of being on the front option i'm going to go over to the back and this of course is where i can now change this information that we're seeing here so what did i put down here for a trip of a lifetime and i put fly away with elementor airways so fly away with elemental airways so there we go you've then got your button text so i want to change that to say book now and of course this is where you can put in the link that you want it to go to when somebody clicks on that button so that that's really it we've just designed that quite nice and simply what we then want to do is just come over here right click and copy then come over to our other column right click paste right click paste now we've got our three and all we need to do is change the images and the information behind it but before we do that we're going to chuck in this gradient background so i want to come up to my section settings click on those head up to style and then what i want to do is have a gradient background so gradient first one i want a sort of light blue color around there the second one i'm going to go with a darker blue maybe around there that looks pretty good and then what we want to do is change the angle of it i think around 175 and i'm also going to bring the location up so watch this when i move this location see how the lighter blue is coming more across i'm going to put that around 20. the problem we've got though is it's all very narrow okay there's not space like there is here so what i need to do is still under the section settings come over to the advanced tab and we want to give this some padding i want to unlink the values and i'm going to give the top 75 pixels and i'm going to do the same thing for the bottom as well so there we go already that's looking much much better now what we need to do is change the images and the text on the uh the other two circles that we have here there we go so there's our flip boxes i think that looks great we've obviously got that 3d effect different image behind it different overlays and obviously we can click through and go to a particular page then that you're wanting to link to but i think that looks pretty cool please post on in the comments if you agree and make sure to use this widget on your site to give it that little extra zing that makes things look cool okay in this video we're going to take a look at the media carousel element this is a really really cool one so let's get straight to it first thing i'm going to do is come on down here press the little plus button and then i'm going to press it again i'm just going to choose a single column layout when i've done that what i'm going to do is come on over to the toolbar and under the pro section you are going to find the media carousel widget so just click and drag that on into the page and by default it's going to look something like this a little bit boring to begin with don't worry there are lots of different views to this so if you come on over here you see skin it says carousel if i go to slideshow it then gives us a big image up here and then we've got little ones along here so you can see them uh sort of the previews if you like i really do like this one and then you've got cover flow and then it gives it a sort of angle like this and there's even more that we can do with it for the moment i'm going to start with a slideshow and what i'm going to do is start choosing some slides so you can obviously get rid of ones that you don't want or you can simply add in an item or you can duplicate one that's already there so i'm just going to start off by clicking into one and then i'm going to click on the image and that's going to allow me to choose an image so for this what i want to do is have a few of the screenshots for my videos that i do and i'll show you why i want to do that so if i click insert media that puts it here into the page now the reason for that is this type is an image if i switch over to a video if i hadn't input the image here it wouldn't drag through the image from the video so what i mean by that is if i just come down here a second so we've got a blank one i go over to video i'll grab the url so let's grab this one and if i put this in now that's connected the video but the problem is that we don't see the screenshot so if i click this it will actually bring it up and it'll start to play it so let's pause that so you see it works but we don't have the the preview image that's the problem so that's why what you need to do with this is actually input the image yourself so select the video one but then click on the image and choose the one that you want so i think i'd choose that one insert media and there we go then you've got the little play button over and people know that it's actually a video so i'll do this again let's go with this one put it in click over the video grab my url which was this one and put it on into the page so i'm just going to add in a few more and then i'll be back with you to show you how we're going to style this up so there we go i've now added in all the ones that i want and i really do like this because obviously it switches through and we get to see a little preview of what's coming up down here at the bottom you've also got the arrows up here so if you want to you can manually click through forwards and backwards and then you can also select one down here so for example if i want to go straight to this one over here i click it it takes me straight through to that one and because we've loaded up our video link again you just click on this and it's going to load up that video that's how you use this to show off your videos it's a really really cool way of doing it again i'm just using the slideshow option we could also do this in a normal carousel if we wanted to if i do that it's going to look like this then we've got the little dots down here and again you can scroll through you get the idea i'm going to go back to slideshow for the moment and we will press on so down here you see that we've got the effector slide if i change this to fade then then when it switches in just a moment you're going to see that instead of it sliding across the screen it's actually going to fade so look if i click on them it's fading it's doing it really quickly so what we can do is come down to additional options and here you see we've got transition duration now this is in milliseconds so 500 milliseconds is half a second so if i wanted it to take a second i just need to change that up to a thousand and um you see down here it says auto play speed so 5000 milliseconds is five seconds that means that this is changing every five seconds so that might be a little bit quick i'd probably change that maybe make it every six seconds or something but just remember it is in the thousands so that's what you need to do infinite loop means it's going to start again from the beginning so when it reaches the end it's just going to go right back around let's start again from the beginning and this is what i really like pause on hover and pause an interaction okay so it's changed there you see that fade transition instead of the slide but i don't like the fact that um if you were trying to hover over it it would still move on okay that can be annoying think about customer experience here when somebody's trying to use the website they don't want to be trying to click on something and it switches to something else so that's why this pause on hover is really important if for any reason you don't want it then switch it off but i would leave it on we've also got down here image size so again i've got this on full that's why we've got the resolution up quite high if i move it down to large it gets a little bit blurry on this one up here so i think on this on the slideshow option you do want to have that on full but just bear this in mind because if you are using the carousel option then obviously it's that much smaller i'll show you how to adjust the height of this in a moment but you probably won't need it up quite that full resolution i'm going to switch this back to slide so on slides per view this will allow you to choose how many slides you want to show up here i've got three at the moment if we change it over to four funnily enough you see four i think you can work out how that's gonna go we're leaving on three and then slides to scroll so set how many slides are scrolled per swipe so if i change this to three we come through it's moving all three at a time okay so all three are moving on whereas if i move it just to one then when i click along didn't mean to click into the video sorry when i click along you see that it's just moving one at a time the others are still staying there instead of skipping past all of them so that's what that does and then you can of course adjust the height as well so if i do this you see it's going to change the height of it we can also change the width but again i really like the default settings okay elementor's got this set up great as it is i'm not going to mess around with it i think that looks perfect and the key thing here is that it looks great on other devices as well so if i uh switch over so you see up here we've got this little desktop icon if i click on this and go over to tablet let's take a look already that looks great it's set to change to two and again we can go in go over to mobile and it's automatically gonna bring it down to just the one because obviously on a mobile it's gonna be far too small if we try to have three in a row so that's how you can just check what it looks like and if you really really really want to you can start messing about with it uh per device as it were so anything i'm doing here is purely affecting the mobile but i don't want that so i'm going to put it back to how it was and go back to the desktop view so now you've got an idea of how we add these in it's all really quite simple it does change though depending on what skin you choose so if i change this now to slideshow and then go down you'll see that some of those options have changed so again we can change the height as i mentioned that's how we can do it so you can choose where you want that to be you can also change these thumbnails down here so slides per view if i change this to four now we've only got four that are being previewed and change it to three again you only see three i quite like five i think that's pretty good and then you can change the ratio if you want to so if i change it to 16 by 9 i think that looks a lot better because that is the ratio that my images were originally captured in and 16x9 by the way looks best for websites so i suggest you put your images into 16x9 if you're not sure how to do that it's really really easy if i come out here a second go back to the dashboard head on over to media library so click into media choose any picture that you like then what you can do is click on edit image and this one again it's already 16 by nine i know that because of these dimensions but if it wasn't i could come down here and under aspect ratio i put in 16 i put in nine i come over here i click and drag and it will only allow me to crop this into a 16 by 9 ratio okay but i'm going to cancel that because it's already 16 by 9 but that's how you would do it so now let's uh let's go on back to the site edit with elementor so let's go back into our widget so that's how these different settings work have a little play around with them get them how you like and something else that i forgot to mention was down here under the additional options i've just talked about auto play and everything else arrows we can turn those off and then you no longer see them i quite like having them on i think it's good for people to be able to flick through to the ones that they want and down here image fit is cover if you change it to contain then it's not going to fill the screen as much uh you can also do an auto mode but that i think makes it too big so i'm going to leave it on cover and we will move on so if we come on up to style here we've got the slide so space between if i increase this you see it's obviously changing it down there i'm going to leave it as it was which was probably around five we can go to the border size as well so if i start playing around with this you see that we're getting that border appear around here you can unlink it like this and then we could just have a border i know just at the top if we wanted to so if you want that you can do it i don't like it so i'm going to leave it off border radius though if you do that you can curve these so we can get rid of the corners and of course you can change the border color that you want here as you would normally you can also change the padding so for example if i unlink this i go to the top i give it 50 it's moving it down the page but we'll leave it as it was navigation if i come over to here this is where we can change these little arrows so if i wanted them bigger which i think i do i'm going to have them around 40 that's going to be easier for people to click on i can change the color if it's difficult to to see them i can make them black that's going to be easy for people to see but i don't like it so let's go with a sort of a grey let's go about that and then you've got the play icon so this is what we see here i quite like the white but again if we wanted we could change it make it red that probably goes more with the whole youtube thing so let's leave it on red and we can change the size of it as well so let's make it around 100. there we go and then lightbox so the lightbox is what appears when you click onto something so if i click onto this it obviously starts to play let me pause it when it begins so this is our light box if i come into color and i go green that's obviously going to change the background we can then change the opacity of that so that we can make it more see through ui color if i change this go blue that's changing the x up at the top right hand corner just up here so if i change it over to pink you'll see that has now changed that's how you can do that i'm going to leave it as it was with both of these and lastly video width so if i alter this you'll see that we're going to start changing the size of our video in the light box so we can have it filling the screen a little bit more so maybe around 90 i think that's good but you can see that we have got the slideshow going on in the background so all added to the depth and interest i really like it so once you've done that we are done and let's preview this before we move on to the next thing that we can do with this amazing widget so let's have a look yep i like it a lot if we wanted we could also make this um full screen so i think i would do that because my image has been cut off a little bit here so if i come back i can come up here to our section settings i can go to stretch section content width full width and under my actual widget i probably want to make this just a little bit bigger so under the content section i'm going to come down to height i'm going to give this a little bit more probably around there that looks good update preview and now let's see what this looks like there we go i think that's probably now a little bit too much i think maybe i just needed to adjust the height rather than the full width thing so i'll probably put that back to how it was before but you get the idea play around with it make it look cool how you like it now time for something else and i really really like this this is uh this is quite fun so let's do it again create a section find our media carousel widget there it is click and drag on into the page now what we can do here is under effect change this from slide over to cube so i told you about the fade one this one's quite interesting so here's our cube now we can change the height of this as we did before and we can also change the width so we can make it bigger or smaller for this i'm going to make it around 90 i think for this demonstration and the height let's put this around 500 i might come back and change this in a second now did you see that it flips around and it's a cube it's really really cool it's doing it a bit too fast for me so again i'm going to change this to a second as a transition duration i think that's a little bit better take a look at what that looks like and auto play speed of five seconds so again it's gonna switch every five seconds but that looks really cool doesn't that look great that cube and we've got a shadow going on underneath it as well and we've not had to design that all we've done is just uh clicked a different setting that's how cool elementor is so let's put in an image uh so we can actually see what this looks like um i'm just gonna make this four sides i think so item one i'm gonna leave it as a image this time rather than having a video so let's go with this one insert it in item number two paris number three london and finish up with manhattan there we go so we've now got our images again we've got our little dots down there at the bottom but now we've got a cool looking cube again pause and interaction all of that is exactly the same we can change our image size if we wanted so i can make this just large but we're going to lose some of the quality again on this one so i'm going to leave that as full image fit cover again and then we've got the overlay so we can have a text overlay if we do that it's going to ask us what we want as the text so caption is title so you see if i hover over this we've got the title which i have and you put this in when you upload the picture on your media library if we wanted we could have a caption or the description so those are all things that you add from your media library when you put in your image again we can have an animation but this animation is relating to that text so if i do slide up then when i go on to it you see that just slid up there again really really cool i don't want this though um although we could have an icon again if you want an icon come on in we can have a plus have an i can have a link i'm going to leave it off leave it exactly as it was before i think that looks good if we go into style over here uh you can then obviously again change background color change border size border radius that's going to look a bit weird with a cube but actually having said that i quite like it because look at that i've not noticed that before we've got the corners of the other option showing that actually it's pretty nice quite like it um but i'm gonna leave it off for now and then again you can adjust your your padding navigation these are all your arrows so again we need to come in change those like we did before um play icon etc if we had a video we'd have that on and then again our light box so you can change that just as we looked at before if we come into advanced then under background what we can do is go to a background type we could have a gradient if we wanted to so let's go with green to begin with blue to finish with and then we can obviously change the angle as we have done before but now we've got this background behind it you haven't got much space so under the advanced tab we want to change the padding so if i unlink this give it maybe 40 at the top maybe 50 actually and then 50 at the bottom you're starting to get more space and that's quite nice with the cube i think i think it's quite good to have a background behind it so let's preview this see what it looks like there's our first one that we had you could use images you can use a video whatever you want as you know we can click through get to the one that we want to get to you can change your animation speeds and then down here whoops sorry reloaded the page didn't mean to do that down here you have got your cube really really cool you've got the shadow that appears underneath it when it's twisting as we just saw and i learned for the first time you could also curve the corners there which i think looks quite interesting i might have a play around with that again and we can click through on our arrows and we can also use the dots as well okay in this video we are going to be looking at one of the best widget elements within elementor pro and it is the call to action i'm going to be showing you how to make something like this today so we've got a simple hero image simple text and a call to action with a button and we've also got animations look at this look at how the title increases followed by the description and then the button absolutely love that it's a great effect and you can also do something like this again you can have effects over if you want i haven't put any on this but instead i've used the ribbon and there's loads of different styles that you can use with this widget it's absolutely brilliant and make sure to stay around to the end of the video because i'm going to share with you one of the very simple secrets that multi-million dollar companies use in their call to actions to increase their conversions speaking of which i've also got a separate video where i go into the top five secrets of call to action designs that you can use elementor for to get more leads and more sales on your website but for now let's dive right in so i'll come on out of the preview and what we want to do as always is come on down here click the little plus sign and then what you want to do is under your toolbar under the pro section find the call to action widget and drag it on into the page now by default you have this classic skin up here so we've got an image that's very narrow and then you've got the box underneath it you can use the position arrows over here to move where you want the image to be in relation to the box so in that example you just saw i had it over here on the left but you can have it on the other side as well it's really really simple or you can just have it above if you do choose this option where it's above then underneath the style section you can come down to image and this is where you can adjust the height of that image because otherwise it's just far too narrow and you're not going to see it properly but the first thing we want to do is start off with the cover option so underneath the image under skin change this over to cover and that immediately puts your text over the image which is my personal favorite i love this so we come over here click on the image and i think it was this one i went for so we'll insert the media on into the page and because i want the image to be quite large i'm going to make the image size full so that we get a nice crisp image it's going to look really good and before we do anything with the content i want to make this bigger so come over to the style option and this time under the box section we're going to change the height i'm going to make it around probably five eight five i think is what i did before so that's how we've got our height and then what we want to do is move the content over here to the left but what you don't want to do is use the alignment because if i align it over to the left it's justifying it over on this side i don't want it to do that i want to stay with it being in the center but if that is the effect you want it's really easy you can also move it up to the top or the bottom like this but i'm going to leave it in the center and then i'm going to use the padding so i'm going to unlink this i'm going to change the right padding because i want to move it over to the left i'm going to make this 570 and then i'm going to change the bottom one to 75 because by changing the bottom margin i'm moving it further up now these hover effects you're seeing they're great and we are going to come to them in just a second but i am going to turn them off just for a moment so they're not distracting us while we're looking at these other bits so we've got our image we've got our text if i come back under the content section then again under content here this is where we can change what it's going to say so i'll put in learn to cook from home and then here i just think i had start your 30 day free trial cancel any time so there's our text put in whatever you want and you can also change your title tags here depending on what other headers you've got on your page already i will leave it on heading 2 but i do want to change the button text i'm going to make that get cooking of course here's where you put the link you want that to go to and as normal you have your link options for opening in a new tab or no follows that sort of thing below this you'll see you've got the ribbon option when you start to type something in for example sale that's going to make it appear but we will come to that in a minute i don't want it on this one we'll do it on the second example for now we want to come up to the style tab and then come on down to content this is where you can choose your typography so i'm going to make this a little bit bigger around 35. change this spacing change the description as well so let's make this 20 and we're going to make the space 20 as well so that's just changing the space that we've got here you'll see if i make it bigger we get more of a gap i want it at 20. and then here of course we can change our colors i'm happy with the title and the description in white but if you wanted you could make it a bit darker so let's go with around there do that for the description as well and then i want to change my button color so i have a color saved up here already come on in change the button or the other way of doing it if we wanted i can clear this and then come on down to the button section and that gives us a little bit more options so i could now just change the background color and we can do the border color separately i'm just going to make it the same for now and the text color as well we're just going to go with white i'm then going to change the typography make this a little bit bigger maybe around 20. change it to bold and i'm also going to capitalize this so under the transform section click on capitalize all the normal stuff we've been through this lots in other videos and then we can change the size of it here but when you start making alterations to the typography it then overrides it so what you want to do instead is change the border width so let's make this around five and then we can curve those corners which i prefer so i'm going to have the border radius around 30. now it's time for the cool bit we get onto the hover effect so first of all background hover animation there's loads of options here for example move right when i then hover over it it slides it over i want to have it so that it's zooming in though and what i also want to do is have a hover animation under the content section so at the moment you see when i'm hovering over this although it's zooming in this part is static i don't like the fact as well that the background is becoming a bit gray when i'm hovering so under the hover section come under the overlay color and i'm going to change this i'm going to make it the same red that i had before but i'm going to bring down the opacity so that it's very see-through maybe a bit more that's good i quite like that and then under the content i'm going to change my hover animation again loads and loads of options but i'm going to go with grow so now you'll see that that's growing as well but something else that's really cool is this sequenced animation so if i turn this on now when i hover over it you'll see that the title starts to grow before the description and then the button comes last like that if it's a bit too fast we can change the animation duration it's in milliseconds so every thousand milliseconds is one second i'm going to change this to 1500 that is one and a half seconds and now let's look again title description button i love that i think that looks so cool i don't know about you post in the comments if you agree and that is done i wouldn't mess around with that anymore a call to action needs to be simple and to the point with no other distractions so for me that is perfect now that we've done that i want to look at another option so i'm going to come up here i'm going to right click and duplicate this section now we've got the same thing down here so let's click on into this one and now i'm going to change the skin over to classic again by default it puts our content below and the image on top remember if that is what you want then underneath the style section this is where you can change that image height but i'm happy with it how it was because i want it to be on the side so position left looks a little bit funny at the moment because i duplicated the one above that's easy to rectify just come under the style section and get rid of this padding don't want that anymore there we go that looks sensible again we can change our image if we want to so click on the image i'll go for that one instead now this time you'll see that the zooming in only applies to the image so if we come under the style section come on down to the hover effects you'll see that we only have the options to do this with the image you can no longer do it with the content under this particular skin setting so that is another reason that i prefer this but it's all down to personal preference isn't it so i'm going to come under content we can change our title and let's change the button text as well to say start trial again remember to put in your link here you can also add in graphic elements as well so we could put in an icon if you wanted to or you could put in another image obviously just click on the image to choose the one you want i don't want either though so i'm going to have none and then up under the style tab again you can change the height of the box if you want to and that is also going to change the size of that image so maybe around 450 for this one you can also change your image width separately if you want to but i'm going to leave it how it was remember with all of this to click on the little icons that we have just here and make sure that it looks good on tablet and mobile as well as desktop this is a really good widget for actually doing that all for you so you shouldn't have to change it much but just make sure to double check and then we can come on down to the content section change the typography and spacing if you wanted to for me though i'm going to change some colors so if we go onto the background color this is where you can change that i'm going to go with the red that i used for the button before but now i'm going to change over the text so that it becomes white and then i'm going to come under the button section and now i'm going to change my background color over to white i'm going to do the same thing for the border but now i'm going to change that text color to the red so that it almost looks like a little bit of a see-through effect going on really like that sure you get the idea by now but as a final touch what we're going to do is come back under the content section and here we have the ribbon that i mentioned before so let's put in free trial you can change the position of this we can move it over to this side if we want to but that's not all so under the style section again find the ribbon and now you can change the distance so we can bring it further out i'm going to make the background color go to white again i'm going to change my text color to that red you can change the typography size if you want to bold it up i'll leave it as it is but i will add in a box shadow and i'm going to make this box shadow go to white ffff and i'm also going to increase the spread just a little bit so you see as i'm doing this it's making it bigger over there i just want it around four i think that's a really nice effect i love it and we're done so let's update this and preview it oh and final thing if you want to make this full width you can do so if you come up here come under your section settings go to content width change it over to full and change the stretch section so we turn that on and now let's preview this see what it looks like and there we go i think that looks absolutely brilliant i love this widget to bits make sure that you use this in your web designing whether you're trying to gain subscribers or whether you're trying to sell stuff whatever it is this makes it so easy now i promised you a simple secret that's used by million dollar companies to increase their conversions at the beginning of this video and if you'd like to learn more of them then check out the video that i have done and it reveals some of the simplest but also the best top tips that are genuinely used by some of the biggest companies in the world and they've spent so much money on researching them and yet you can do it all with elementor so check out that video but the first one i've been doing right from the beginning here and it is a use of color i've been using the same color for the button as i have been for the woman's apron and if i was using this as a landing page call to action again i've got a separate video on how to build landing pages with elementor which you should be doing then i would also be getting that button to match up the same color as the logo on the page and those are the only colors that are popping out from the call to action but your call to action button should be matching the logo if you have one and one more key color from your background image in this case the apron it's a subliminal thing but it works so that's tip number one for you there's loads more where that comes from check out the video the link is in the description below and please let me know how you use the call to action in the comments okay guys got a nice couple of simple ones for you today no prizes for guessing what it is we're going to look at the testimonial and review carousel elements within elementor pro now you do have the basic testimonial widget so if we search for testimonial that's this one up here but what happens as standard if we drag that on into the page you just have the one of them if you wanted to have them side by side then you'd need to sort of set up different columns like this and you then have to drag it in and long story short you can't scroll through them or have them auto playing so that is what we're going to be looking at today so testimonials under the pro section you'll have the testimonial carousel so click and drag that on and then by default we get something like this but you'll see that we've got several slides that have appeared over on the left hand side now and it switches between them just like that so what we can do first of all is just down here underneath the slides per view and slides to scroll i'm going to change this to three and you'll see that we then get them side by side like this and then you've got slides to scroll so if we leave this on let's say three because i've just put three in the row then when it changes and it slides over like that it switches all three of them at the same time whereas if i switch it over just to one then when it changes in a moment you'll see that it's just going to switch one at a time it's a little bit difficult as they all say the same thing at the moment i know but as we click along you see it just goes along one at a time it's not flicking through all of them so let's make them look a little bit different what you want to do is come under the slide section click into one of them this is where your content goes so let's have oh my god this is like so amazing i don't speak like that honestly and i very much doubt ceo would either but let's just go with it and choose an image this one will do uh better make that say jane doe so you've got your image here and then you've obviously got the content which is the testimonial which you've been emailed by a customer or maybe on social media something like that so you can do that with each of them slide two slide three and you can of course add in items like this delete them with a cross and of course you can duplicate them like this with a little copy button so i can duplicate her three times we can get rid of the other ones so now that we've done that what you can do is change the skin format so this is default and it's quite nice but if we change it to bubble gives it an almost sort of text sms look to it and then here under layout you can change where the image is so for example if we put the image above i do like the fact that the little pointer then sticks up towards the image that's quite cool and of course you can change that over to default stays above you just don't have the little surrounding there and then you can put it over on the left or wherever you want it so play around with that i'll just leave it in line for the moment you can of course align all of them over to one of the sides but again we'll leave it in the center and then lastly you can change the width as well so we can bring these in i will leave it on default for us then you have the advanced options so you can choose whether or not you want these little arrows to be showing so people can click left and right i like them so i'll leave them on you can also choose whether you want these to be dots or something different i will leave them on dots but i will change the transition duration okay if you've watched the other videos you'll know that this is in milliseconds and 500 milliseconds is half a second that is why this is switching so quickly so let's change that up to maybe a second and that's going to make that uh duration just a little bit slower and easier on the eyes and then you've got auto play so nobody has to click it it just does it by itself auto play speed every five seconds that's fine infinite loop so it never stops what i would do is recommend leaving on the pause on hover or interaction okay if somebody hovers over it that stops it from sliding onto the next one because of course if somebody's reading it you don't want it to disappear before they've had the chance to finish then down here you'll notice we've got image size so this is the little photo we've got here and it's currently on full you do not want that okay it's obviously very small on the page it's silly to have a full sized image so i'm going to drop that down to medium that's going to make the website load quicker for you and then what you can do up here underneath the style tab we can always go down to the image we can then find the image size and we can bring it up and obviously if you take it up really really big like this and you think actually i don't like the quality now of the image you can go back to content and then you come down to additional options and you can obviously change the image size and that way improve the quality but i do not want it to be that big so let's just bring it back down again to around there that'll do you can then change the gap here between the picture and the titles and you can also change the border radius but i want to leave it as a circle if you want to change it into a square bring it along and you can do that then if we come back up under the slide section this is where we can actually change the space between the slides themselves you can also change the background color so we could change it over to red and it does this or any color that you want border size let's add in a border maybe around seven pixels you can then change that border radius curve it up at the corners and you can also of course change the border color so we can change it over to blue and it looks like this the padding that will change where the content is inside our little rectangles at the moment so if i unlinked this for example and gave it 20 padding to the right it's going to move it over but i don't want that so we'll leave it back as it was what we can then do i'll also get rid of this background color because i don't like that so let's leave it like that for the moment and then what we can do is come down to content and this is where you can style all of this up so again you've got your text color if we wanted to change that we can and you can change the typography as well so you can increase the size of this and you can also make it bold and do all the normal things that we've been over lots of times before so i won't bore you with it now you can do that for the name you can do it for the title uh which is the ceo section just here you can do that for all of it and you can also change the navigation arrows so we can increase the size of those we can change the color of them make them dark gray that way they can be easier to be seen and you can also change the pagination the pagination circles easy for me to say as well so we can change the size of those and again you guessed it we can change the color so play around with that really nice and simple one and exactly the same goes for our next widget so if we come back over to the widget dashboard and search for reviews star rating that is a free one part the free elementor version but reviews takes it one step further of course so we'll click and drag that into the page and it does a very similar thing to what we've just looked at above so again we've got our different slides and once again we can go in choose an image and that way we've got the person's face on there change the name again change it over to jane and then this is where it's a little bit different we can add in a username so at the moment it's showing twitter we've got a little twitter icon over there if we want we could change that i know facebook whatever it is that you might want then you can change the handle and then this is where you can select the rating so for example 4.5 and it's going to give us four and a half stars out of five which is pretty cool and then again this is where you would leave the review so put your text here and that's what's going to appear and then what you can do is obviously just copy that again as we did with the previous ones or add them in as necessary again you've got the same slides per view or slides to scroll exactly the same as what we just looked at and exactly the same with the additional options as well so i'll slow that down like we did the previous one and then you can come up to style and very similar again a few more options on this one all of this is exactly the same so you can change your border sizing your spacing your padding etc uh this is the separator so this is the little line that we see here so we can choose not to have that or of course we can choose to show it and then you can change the color and change the thickness of it it's completely up to you and again go into your text this is where you can change the color and typography of the review title name and again we can change the image size bring that up change the gap and change the border radius as well so again we can have those in squares we can have it in circles completely up to you you can also add in the icon so over here you see that we've got it as the official color you can customize that if you want to we could then make it something else let's say the red again and that'll change it but i'll leave it on the official color and maybe just bring the size up a little bit as well so we've got it over there rating again you've got the font awesome i like this it's my personal preference but you can change it over to unicode makes them a little bit sharper instead of being more rounded but i prefer font awesome you can choose to have them as an outline instead so you'll see now we haven't got the fill click on that one it's dark gray just on the edge there sorry it's not very easy to see because i almost filled all the stars up but you get the idea and again you can change the size of that change the spacing between them and obviously you can change the color as well so you don't have to have it as gold you can come in change the color choose what you want and also change the unmarked color as well so instead of it being gray you can change the unmarked color that changes just over there so really really nice and simple couple here but if you're selling stuff or you've got a service it's great to add these in gives people a little bit more confidence when they are looking at buying something from you or hiring you so i suggest adding that into your site uh and just add maybe a little uh button with a contactors form down underneath and it you know it can say something like leave us a review and then people can just type in a review it sends it to you as a contact form and then of course you can just put that onto the site so that's what i would personally do hello i am jack with jack in the net welcome to another elementor pro video in this one we are going to be having a look at the lotty elements now this one adds quite a lot of interest to your page but i don't think that many people are using it yet adds in cool looking animations like this you can do it as a media file or an external url i'm going to be showing you how to use both and how we can actually style this up and change the colors so that you can make it match your own design so grab a drink grab a snack anything else that makes you feel warm and fuzzy and we will dive on in so there are two ways that we can use this we can either have a media file which is ultimately what we're going to be doing or you can use an external url to pull this information from somewhere else on the web now you can get these in different places but the best one is from lottie files lottiefiles.com you can do cool things like getting this animated banana going along here don't know how you would use that on actual website what the context would be but hey i like it it's trending so what you want to do is search up here for the type of animation that you want i'm going to search for delivery we'll go with food delivery as you can see there are lots of different options that we've got here some of them will be premium so you can select the little free option under type and that means that only the free ones are going to be shown so let's just go with this one here for the moment and what you can do is you can actually change the animation speed here uh so if we click down here it goes faster you can see these little lines are appearing more quickly and just keep clicking and you can cycle around to get it to where you want you can also change the background color make it green blue there's a few options here or of course you can put in your hex code and change it as you like it and there's something else that we can do before we actually download it um but just so that you know this little code that we've got here if you want to copy and paste that that is what we can put up here in the external url section and that's just going to automatically pull it through so let's do it copied head back over click put it in there and there we go it's appeared on our page uh when we've done that what we could do is come over to style we can change the width that's going to bring it down and obviously you can size it from there or if you wanted to we could naturally create different columns such as a three column layout and then you could pull it into one of those columns and you know change it around we could stick backgrounds behind it obviously make it integrate fully with the rest of your web page and generally you look cool but we're not going to do any of that for the moment because i want to show you how to do this as an external media file so let's put it back in here head back over to lodi files and now let's look at actually changing the design so if you come down here you'll see that you've got a button that says edit layer colors if we click this it takes us straight through to the lottie editor now don't worry this probably looks a little bit complicated but actually it's really quite nice and simple so these are the different layers that our image is made up of you've also got the duration over here and you can edit all of it so just for example if i head over to the pizza outlines you've got all of our different colors here now look at this it's all red at the moment this guy clearly works for a pizza company that loves the color red but uh he or she uh could be either uh doesn't light red gonna be a rebel so if we click on our red color up here let's change it to a blue maybe around here click on update look at that they've got a blue moped motorcycle whatever this thing is so that's what you can do we could also go to the box outlines we don't want this dark blue box we want a nice pink box and it's going to have a different colored lid to it let's go with sort of a turquoisey greeny blue i don't really know what color that is but we'll go with it so it's that simple and you can do that with all the different layers and when you're done you've played around and you've made it match up with your design then uh you can obviously come over here and you can export this as a lottie file so if i click on this button click on allow it'll download it for us and then what we can do is head on back over to here and now what we can do is as long as we've got the media file we can actually upload one so if you've never done this before when you click on this little upload button it will probably come up with a pop-up saying do you wish to enable this type of file because they can be unsecure on wordpress that is why i'm suggesting that you only get them from the likes of lottie files you know official places that way you can be fairly comfortable that they're not going to contain any malicious content but just do be wary of that click on the little enable button and then you want to come on over to upload files and then what i can do is click and drag my file on into the page there it is insert media and there we go our newly changed color design has just appeared and once again what we can do is come on over here change the width bring it down a little bit under content if we wanted to link this somewhere we can do that you can add in a custom url link and then if somebody actually clicks on this it's going to take them to that url destination you also got different settings so we can choose to loop the animation so if i turn this on it's just going to keep playing over and over again once more we can change the play speed see that's going quite a bit faster so let's just drop that back down to one and you can also change things like the start point and end point of animations uh so let's grab another one so you can have a look at this a little bit more clearly so i've just grabbed a different url so let's come up here i'll change this to url to make it nice and quick and we'll put this one in so now we've got this one under settings if you see down here start point and end point if i change this it's going to change what the animation is actually doing so if i set this to 30 and then bring this one down to say i don't know 50 about there you see that our animation is now stuck purely between those two points now if i release it again bring this back down to zero and this one up to 100 we then got those different changes in the animation okay so you know slow pedaling fast pedaling that's what this does here uh again i've got it on loop which is why it's just playing over and over and what i really suggest that you do is switch on the lazy load because that way this is only going to start uh you know playing loading when it comes into the screen view okay onto your viewport and that's going to make your website load quicker effectively what you can do is change that so instead of having the viewport as the trigger you could have the trigger as on click and there nothing's going to happen until somebody actually comes over and clicks on it like that and then it's going to start playing or we could do it on hover so again it's not doing anything until somebody comes over hovers on the page and then it's going to start playing so you've got quite a few different options that you can play around with there completely up to you of course what you choose i'm just going to leave it on viewport for the moment and then the other thing is you can reverse it as well if you reverse it it effectively plays it backwards so now you can see that the wheels are spinning backwards and indeed he is cycling backwards which looks a little bit weird in this instance but hey you can do it it's really cool the elementor gives you all these options here and once again you can come into style you can change the width of this make it bigger or smaller and you can also play around with css filters as well which means that for example when we have it on normal mode it looks like this but if we switch over to hover we could change the opacity maybe to around here and then you get this sort of effect so one minute it's solid then it's slightly faded you've also got css filters as well so you can change things like the saturation or the hue but i'm just going to leave it as it was okay we don't want to mess around with that one thing that i do want to do though is add a little bit of final movement um now what you can do is come over under the advanced tab and instead of just having uh him stay in the same place while he is cycling we can have him move across the page um so if we come on down to motion effects turn on scrolling effects uh in this case i want him to go from left to right so that is horizontal rather than up and down which is vertical so i'm going to turn on horizontal direction well it's heading to the right so i'll leave it on right but you can obviously change that if you want to changing the speed if we make it really quick then it will effectively zip across the page very very fast so let's just leave that around five in the middle uh the viewport uh if we change these settings it effectively means that um it won't start to move until uh it's coming to view on the page by a certain amount i'm going to leave it at the sort of far left and far right because what i want to happen is that this is going to start moving the moment that it comes into view and is going to finish across the other side of the page the move at the moment that we come down out of view um i've probably not explained that very well let's just show you what it looks like and then hopefully you'll understand what i mean there so i'm going to update preview the changes and let's take a look at this um so we'll just have to scroll on down past the other elementor pro elements that we've been having a look at throughout the tutorial series so come on down past those almost there here we are right so as it comes into view it's starting over on the left okay so the further that we scroll down it comes over to the right so that's the sort of movement that you can add in on your page and obviously it just makes it that much more entertaining you've got some movement in there already thanks to the lottie image but due to those advanced settings with elementor you can actually move stuff around the page as well so i think that's really cool and hopefully now that you've seen the lotte editor you know that you've got lots of different options there so pretty much no matter what you're looking for there is an option you can change the colors of things as well as i showed you it's all possible so have some fun with that one i think that's what this one's all about good fun and i really just want to thank you for watching the this video and obviously any of the others that you've seen in this elementor pro series any questions any other way that i can help post in the comments and uh yeah i will do and i look forward to seeing what you can achieve using all these different widgets thank you for watching the video i really hope that it's helped you make sure to post any questions or suggestions that you've got in the comments like the video and subscribe i look forward to seeing you on the next one

Channel: Jack in the Net

Views: 6,387

Keywords: elementor pro tutorial, elementor pro tutorial 2020, elementor pro, elementor pro tutorial for beginners, elementor pro widgets, elementor pro widgets explained, elementor pro all, elementor pro all elements explained, elementor page builder, elementor tutorial, elementor pro 2020 tutorial, wordpress elementor tutorial for beginners 2020

Id: lRHG1uCu0io

Length: 142min 7sec (8527 seconds)

Published: Thu Oct 01 2020