Hi guys Luis here and in this video We’re going to be taking a look at Elemental this is primarily a free page Builder and it’s one that everyone seems To be talking about lately so I’m gonna Walk you through the Builder and show You some of the things that it can do so First of all this is the side panel over Here this is basically where everything Is controlled and you can drag this out You can expand it which is great if You’re working with text we’re getting Into that a bit more soon and you can Also contract it to give yourself more Screen space and this is useful for me Especially because I’m on a MacBook 13-inch which you know sometimes it can Cause problems with page builders and You know I’d actually like if this went Into some kind of list mode and I could Shrink it even further that would be Good but as it is it’s nice to it’s nice To be able to have control over this Anyway one really nice addition here is That you can actually slide this away by Clicking the little arrow here and that Puts you into a preview mode too you can You cannot make any edits this is Showing you exactly how it will look you Know on the front end so just the Simplicity and speed of that is Something that I’m you know I’m Definitely a fan of so let’s bring that Back out let’s look at the layout
Settings so I’m gonna add a new section Here and as you can see it asked me to Select a structure these are basically Just different column settings so let’s Say I want a two column layout that puts That in there for me and I can go ahead And drag stuff in these columns now if I Wanted to make this a three column Layout all I would need to do is click The column tab here and press the plus Symbol and that would add in another Column for me now another thing you can Do is read rag these to arrange the Sizes and it also gives you a little Percentage up here which is useful I Would like if this snapped into place I Don’t know if there’s a short key you Haven’t found it but yeah that would be Nice to just have it snap into certain Percentages but as it is it’s still Quite good and keep in mind you don’t Always need to add a section from here If you just wanted an element and you Didn’t need any columns you could simply Just go in and drag the element into This box and it would create a single Section for you and Finally you can actually use the columns Widget if you drag that in it will Automatically give you two columns which Again you can you know add your own Columns in if needed so there’s really Multiple ways to achieve the same thing When it comes to creating different
Layouts so let’s talk more about the Elements or the widgets and you’ve seen Me use a few of them here but Elementor Has quite a generous library I mean it’s Not the most comprehensive when it comes To page builders there’s definitely some Things missing here and I’ll get into That but you know it does the basics Really well and one thing I liked is That it gives you WordPress widgets as Well so anything that would naturally Show up in your wordpress widget area Will be here and also third-party Widgets show up as well so for example We’ve got ad inserts a maogong we’ve got Some Drive widgets here so you know you Can drag these in and they wouldn’t Actually show up inside the Builder Which is I think is really cool In terms of what’s missing for me There’s there just seems to be a lack of Like marketing type elements so you know Things like star ratings are not there Things like tables you know if you’re Creating a best X or Y article and you Want to have a comparison table that’s Going to be very difficult with Elemental widgets you know and even Something as simple as a table of Contents it’s not in there and you know I know that these elements are being Worked on new stuffs coming out all the Time so I’m sure that will be fixed and I know people are constantly asking for
For things like tables specifically so Again I’m sure that will come out Eventually but as it stands there are Some things missing that I think as Marketers we’re going to struggle with Now let’s talk about global widgets so If I drag something onto the page here I’m gonna drag let’s see I’m gonna drag This icon box in now let’s say I want to Make some changes to this so I don’t Know let’s change let’s change the color Of it to this orangey red and I like how This is now and I want to be able to use This again on any page now what I can do Is I can hover over the element and I Can click this little Save symbol here And I can save it as I can give it a Name obviously in this case I’m just Going to call the element now you’ll Notice that Elementor has taken me to The global tab here and the element that I just saved appears under here as well So anything under this global tab is Obviously a global element that means Whatever page you use this on it can be Updated from a central location and that That change will be affected across all Those pages so for example if I drag This on the page here you’ll notice as Well that it has a yellow border which Tells me it’s a global element I’m gonna I’m gonna actually drag to on here just To just to show you how this works so Let’s edit this one I’m going to unlock
This widget by editing and I’m gonna Have a couple of exclamation marks in Here you’ll notice that it changes on Both of these and this works across all Pages across your entire site as I said Now for example you might not always Want to use this as a global widget Maybe what you want to add it to a page And make some independent changes and if That’s the case you can click this you Can click the element you want to change And you can unlink it and that will give You a little notification and you can Unlink and you’ll notice that this one Still has a yellow border because it’s Still a global widget but this one is Unlinked and I get all the controls back I can make I can delete text it doesn’t Affect this global widget as you can see So this is a really really useful Feature I’ve had a lot of fun playing With this and I’m still trying to wrap My head around the different ways I can Use this and benefit from this feature Ok so let’s talk about section templates And a section is a group of elements so This is one element this is a second This is a third and the section Incorporates all of those so you can see The dots the dashed border around the Side here and we can actually save that Section by clicking the Save icon here I’m gonna call this section save and This brings me to my library now to get
Back to this if you’re on another page Or you know you need to get back to it Later you just click the add template Button and click my templates up here And I can just go ahead and insert that Into the page again and it works pretty Much as you would expect now there is a Difference And this is not a global element this is A static section we do have a global Element inside this section but the Section itself is static I can go ahead And make changes to this as I see fit And it won’t be reflected anywhere else On my site now if I wanted to use a Global section there is a way you can do This it’s a bit counterintuitive is it Took me a while to figure this out but All you need to do is go to your widgets Library finally template widget drop it In and select your template in this case Section from the sidebar you may need to Refresh the page to get this to show up In this case I’m going to click this and You’ll see that it pops up with my Section now this is this behaves very Differently in a sense that I cannot Actually edit this I cannot go in and Change the text here this is treated as A single block and even though it Doesn’t have a yellow border it is a Global section so slightly Counterintuitive it doesn’t work the Same way as global widgets I think a lot
Of people get confused by this I know I Did but at the moment that’s essentially How it works so one more thing on Templates and that’s page templates now The first thing I’ll say is that before You bring in a page template that you’re Probably going to want to clear all the Content on the page if there is any and The reason I say that is because when Loading a page template with Elementor It can crash if you have content on the Page at least that’s what I found so the Best thing to do is click this little Hamburger icon and go to delete all Content and delete and then what you’ll Do is click Add template and that will Bring up the page templates library they Do have a pretty good selection here There’s there’s quite a few templates And a lot of them are also free you can See which ones are it has the little pro Icon in the corner we also have some Landing pages and and product pages here But I do think that elements of spreads Itself thin it’s trying to is trying to Cater for everybody there are definitely Some templates here That I’d use and probably tweak because At the moment it’s just like I said it’s Very general and there’s also there’s Also no filter ink so I can’t I can’t do A search for landing pane and just see All the landing pages I actually have to Scroll through this and find them myself
So that’s slightly annoying so I’m gonna Insert this landing page here and you’ll See another issue that we’ll run into Okay so I’ve cut this but I’ve actually Been waiting for a good minute and this Is still loading even though I’ve Deleted the content I’ll still have a Problem here so what I’m gonna have to Do is close this save the page refresh It and try again so I just wanted I just Wanted to highlight that there’s Definitely a bug here this has happened To me multiple times so I’m gonna cut it Again and hopefully I’ll work okay I Gave it another go this time it worked What you’ll see here is that we we don’t Actually have a true page template What’s happening is it’s it’s been Imported into the content area it hasn’t Taken over the whole page which is Really what we want this to do so what We’re going to have to do is go back to The hamburger icon and click page Settings and you can change the template Here to elemental canvas which is Essentially just an entirely blank page And if we preview that you’ll see that This is exactly what we needed Actually the elemental canvas is a very Recent addition it came out just a few Days ago as I’m recording this and Before that you had to you know go Through some crazy steps to get a blank Template so it was nice to see that they
Implemented this it would probably make More sense if it was an automatic Setting whenever you load a page Template I can’t imagine anyone would Want to have an entire page template Within it within their content area but I don’t know that just it just seems a Bit odd to me regardless the page Templates work well like I said you have A good library and you know if you don’t Like any of the templates there you can All you can definitely create your own And save them and the way to do that is To head down here I believe it’s this One yep Save template and that will that will Save your entire page and it Go into your templates library okay Let’s move on to responsiveness and Elementor is responsive by default which You probably expect but what you can do Is preview for each individual device so If I head down here I can click this and I can see what this looks like in mobile And this alone is you know a massively Useful feature but it actually goes one Step further than just being able to Preview it you can actually make Independent changes for each device type So let’s say for argument’s sake you Know I don’t like the margin between These two I want to create a bigger gap So I can click this drag drop design I Can add a bottom margin say 50 and what
You’ll see here is that we’ve actually Selected the mobile icon which means These settings will only apply it to Mobile if I head back to my desktop view You’ll see that the the margin hasn’t Been applied there so these are very Independent changes this is useful if You’ve had trouble in the past with Getting things to look just right on Mobile and then when you do you go back To desktop and it’s not quite right There and it’s a constant balancing act This really solves that problem so I’m a Massive fan of this feature and one Final thing you can do here is actually Hide elements and entire sections on Different devices so let’s say I want This image here to be hidden on mobile I Can click advanced I can go to Responsive I can hide on mobile so if I Preview this now but what I need to do Is click this arrow here and you’ll see That it disappears this is this is Exactly how it will look on the front End Okay revision history this is a big one So if you make a mistake within Elementor and I’m just going to switch Back to the desktop view if you make a Mistake let’s say you delete something Move something around you can’t quite Get it back the way that it was and you Just want to undo the action well Unfortunately Elementor doesn’t have an
Undo button and what they have instead Is a revision history manager so I’ll Show you what I mean here if I go back To the hamburger menu and I click Revision history you’ll see that every Time I’ve saved this page it’s created a Revision and if I click back it will Review that revision and show me what That looks like see here we go This is what I deleted earlier and as Useful as that is and you know I can see This being insanely useful for some People it just isn’t a replacement for An undo button but this is something That’s being requested a number of times But it just seems odd to me that it’s Come so late and if they’ve given Priority to something like this which is You know a lot more advanced than just Being able to undo a simple action okay Let’s talk about the fact that this Plugin is open source now open source Means that the source code of the Software is freely available and I’m Gonna be honest I don’t know a lot about How this works But I know that other developers will Contribute and make changes to the code There are a bunch of third-party plugins That have already been developed that Help enhance elemental and I’m going to Show you if we go to the plugins Repository you’ll see here I have Searched elemental and I’ve got some
Third-party plugins here now this one is Made by Elementor it’s the actual page Builder but these here are created by Other developers and they help to Improve the plug-in they give it Functionality that’s not in there by Default so I’m sure you can see that There’s a ton of potential here and Again I really I’m not 100% sure on how This works but they also have a github Page where you can submit issues or Suggestions it just seems to be a much More combined effort when it comes to Improving this plug-in and making it the Best that it can be so for me this Really adds something new to this page Builder specifically and it’ll be Interesting to see how it develops as a Result now I want to quickly touch on Support this is always a big thing when It comes to software and one of the Biggest draws of Elementor is the the Community that surrounds it it has an Active Facebook group with a couple Thousand members at the moment but it is Growing you wouldn’t believe how active That group is considering it’s still Quite small and considering that you Know this is a free plugin people don’t Get paid to help you but they’re really Really interested In helping each other and on top of that You have the YouTube channel where they Wear elements or post detailed tutorials
Highlighting different things and Features about about the the page Builder itself and they have detailed Documentation if you need that so that’s A quick overview of Elementor I hope you Enjoyed this video and I will see you in The next one