Elementor Pro Wordpress Tutorial - The basics in 20 minutes

in this video I'm gonna show you the basics of element of bro I use this plug-in on every single client website that I deliver I love it I've already made a video about the free version of Elementor but in this video we're going to dive into Elementor Pro and see how it works I upgrade up my version of Elemental for free to Elementor Pro as soon as I realized that I really needed elemental Pro to work for clients because the features that most clients want are impossible to do with the free version for example creating your own header and footer design with drag-and-drop is possible within a pro version and not in a free version using different headers on different pages using custom fonts that clients will sometimes send you by creating a blog and adjusting the design of that block working with dynamic pages for example a project page that your clients can easily fill in feeding backend of WordPress when they log in designing the product page and archive page for a webshop add a sign-up form for an email list for example to milchem global widgets that will allow you to display one specific part on different pages and on top of that it has a feature that is literally made for working with clients it's called a roll manager where you can limit the editing capabilities of your clients so they cannot mess up your design that you made in elements or and there are also some workflow features that you can use to speed up your workflow like the pro templates and the blocks that you can insert on any page that you want and it is way you can really quickly build up a page and then change the design and this all sounds super nice but it took me a few months to understand all the different parts that Pro offers and why it's so more relevant than the free version of Elementor and that's why I'm making this video because I don't want you to spend a lot of time searching for the answers when everything can just be in one video so how does elemental Pro works from a business perspective for you because elemental Pro costs money and we need a way to justify that investment right so Elementor Pro costs money but I kind of pay nothing for Elementor and I get it for free and I will show you how this is a little business trick that I use which I will show in this video so for now let's see the options this is the version that I use for my client websites they are listed right now for $49.99 and $1.99 per year but these prices sometimes change so if you want to see the current price the first link in the description will lead you to this page so like I said I don't pay anything for Elementor Pro because I use a little business trick and this trick is perfect if you want to sell websites to clients so here's what I do I bought the $1.99 package and I charged most of my clients every month for maintenance so for example I will sell one website to someone and charge them at $20 a month for websites maintenance for this money they get to use the Elementor pro license and i update their plugins every month and i make a backup of the website and these few extra things only cost me a few minutes per month for them it's nice because most of them don't want to do it themselves and in this way I only have to have one client paying me $20 a month to pay for my yearly subscription because $20 times 12 is already 240 dollars right so you're giving them Elementor Pro the license to keep their website life but you also help them with updating to plugins and making a backup and freedom that's just a very nice small little service that you offer besides of course the cost of your website because this can also be an option if you don't want to sell monthly packages to your clients what you can also do is just sell websites for a flat fee so for example for $1,000 and then you only have to sell one website per year in order to pay for Elementor my advice would be to never sell a website for less than $1,000 this of course is different in every country around the world but at least $1,000 I would say is good for most of America and most of Europe so yeah that's just a business insight that I wanted to give you that you can use for your own web design business so my advice would be to go for a flat fee let's say a thousand or two thousand dollars plus the monthly fee if the clients are interested in the maintenance package because then you know that you will always profit if you buy that $1.99 package and why do you need the $1.99 package well all the packages are the same but as you can see the only difference is the amount of websites that you will get and if you sell for websites then you already need this package and that's why I have the expert version and I think that every web designer who sells websites will need the expert version alright let's now dive into the functionality of Elementor Pro and let's start with the installation the installation process of Elementor pro is pretty easy you just have to pick a package from the pro page and then you will get an email with your login and then you can log into your my Elementor comm account and here you can download the plug-in so if you download the plug-in you will get a zip file and you can just upload that zip file on on a new website where Elementor free is already installed that's important Elementor free you need to install that plug-in first and then you install Elementor pro if you don't have this version of Elementor free you can download that here on my website live from pixel comm slash links and you can get the free version out here you will also get a zip file and you upload that in the plugins section and after that you upload the plugin for Elementor pro then the last thing that you need to do is copy your license key that you can find in your account and you can paste that inside of WordPress or you just log in as I'm doing right here that's also a method and then it's automatically synchronized with your account and then everything is set up and if you've installed Elementor pro you will get access to the team builder as you can see right here and this is a very powerful tool because you can almost design every part of your website with this so right now I'm locked in here on my personal website now let's just create a header for now so what you want to do is you want to go to team builder as you can see I've already created one header so if you want to create a header you just click on add new so for example code the header version 3 or version 1 and then you can do two things you can import one of the headers that they offer because now you have access to all these pro headers but I like to design the head of myself I have different tutorials on my channel about working with element but now I'm just gonna show you the functionality so let's just say you have a very simple header like this with a logo and a button like this so now what you can do with Elementor Pro is you can click on publish so here you need to tell Elementor where you want to show this header so for now you can say two elements or I want to show this header on the entire site and now if I click on save and close and I just go to my home page you can see that my new header is now here and if I go to the portfolio page the new header is also here so this is how the conditions work and this also works the same for the footer so as you can see right here I'm on another website one of my clients website and here I've created a food a template with the footer option so if you want to create a footer you're still in the team builder here you just click on footer and you just add a new footer so I'm here inside of the footer I've created two sections with a few items in it an image a logo a few social media icons and here I've also set up the display conditions as I want to show this footer on the entire site and as you can see right here it doesn't matter on which page I am I will always see this footer so here I'm on another page and I'm also seeing this footer so this is of course great for the header and footer but this is also very powerful for a blog for example so let's just go to another website that I've also created for one of my clients and that is this website and air hi FA block so this is a blog post and I want the same design for all of my blog posts so what I did is I went to the team builder so I'm here inside of the team builder I went to single so if you want to create a blog or a portfolio page for example I had this falls into the single page category so if you want to create a blog you just click on add new and here you can select I want a single and I want to create a design for all of my blog posts so as you can see right here and then you give it a name and then you can create another template so here's the template that I've created I've inserted a title as you can see I didn't type this title inside of elements or now this title is just part of one of the blog posts that my client has created here impose because this is the blog post section in WordPress so as you can see he has created this blog post perfect outdoor activities and that is what what's generated now so as you can see this is the final blog post and then if I go to another blog posts it has the same design and image on top and then a title a date and then the actual blog content so in this way you can design your own blog but this also works if you want to have your own portfolio for example so on my website if we go to single I don't have a blog but I have a portfolio page so as you can see I've created the portfolio template over here so I've just done the same thing I clicked on add new and I set to element or I want to have this template for all of my portfolio projects I've created this tab with another plug-in because that is not something you can deal with element or I think is element or is the page builder so you need to create this step so you can create separate kind of block items I will make a separate video about this so I will show the inside of this single page template so as you can see this is the inside of one of my portfolio items it's just the same idea as a blog post but then it just has different content which I didn't type in element or but the content is actually inside of here which is the same technique as for your blog posts so here I've set up the conditions like this I said I want this design to be displayed for all of my portfolio items as you can see right here so now this design is being used for every portfolio item again I've created this single tab with another plug-in which is called CP tu I custom post type UI which I will make a separate video about if you also want that but like you can see it's the exact same technique as I use for my blog post as for my portfolio items for example or maybe your client wants to have a separate page for his cars or is it art or whatever you can all do that with the single page template and if you have a webshop inside of WordPress you can also do this for your product pages so for this client he has a web shop inside of this website WordPress has a free web shop plugin that you can use so I've created a template for all of his products he only has one product but if he wants more products in the future I already have a template so I just clicked on single product and I clicked on add new and I will show you the inside as you can see right here this is a page the product image will automatically load the title will automatically load the description and the display settings for this single product page is for all products and that's it and then you can also go to saved templates and this is also one of those features that I think you really need because for this website for example you have this sidebar over here and this sidebar has some information about the magazine it has an Instagram feed and this sidebar is displayed on a lot of different pages so for example if you go to subcategory you can see that the same sidebar is here so this sidebar is on a lot of pages and I don't want to change my design on ten different places if my clients wants a change of course so here is where the templates feature comes in so for example if you think that this part of your website you want to save that because you want this part to be on every part of your web site you can save this part as a template so if you click on save as a template and you give it the name then the template will pop up in this menu and what's nice about this is now you can import this template on every single page you want and if you want to edit the inside of the template you just go to you save templates you just click on edit you make your edit you save it and then it saves on all these places so as you can see on this page if we open this page with Elementor as you can see right here I've imported a template so I cannot change the inside of this part over here because of imported the template so Elementor Pro has a template feature so if you just type in template then you can drag in a template and you can choose one of the templates that you've saved so again this is super powerful if you're building a bigger web sites with recurring elements and this is also the same for the pop-up builder Elementor has a pop-up builder so let's go to my website right now and you can find the pop-ups over here now you can create a pop-up for your website some web shops have a pop-up but you can also use a pop-up for full screen menus but let me first show you what I mean so I'll call this pop-up one and I create the template and now Elementor pro will give you a lot of recommendations that you can use these are all pro elements so you only only will get these if you have the pro version but like I said I don't use the templates because I want to design something myself but you will get a simple pop up like this so now I've simply added a title and a form in this pop-up and now I can save this pop-up like this and for the pop-up you have a lot of condition options so you have your basic options over here but you also have triggers so let's say you want to show the pop-up after someone moves their Mouse out of the screen or they scroll to a certain element on the page you can set that up right here or you can link this to a button for example so if somebody clicks on a button you can show the pop-up and it is way they will stay on the page they don't have to load a new page because a pop-up is loaded and like I said before I like to design everything myself but if you do not have design inspiration you can use one of their templates and they have a lot of templates that you can use full screen templates as you can see right here full pages and everything with this proofing over here has is only for pro users they have full websites that you can use so for example if you want to build a website for a a sports club you can preview it right here you can insert this whole design so let's just try this for now if I click on insert I need to connect it to the template library so that's just one click I just click on connects and now we've all load again and as you can see right now this whole page is inserted into my website and I can change the style I can change the colors if I wants you so if you click on an element you can just change the text you can change the space and you can change anything that you want so this is absolutely amazing but these are full and realistically oftentimes you will work on a design and you will build up the page within sections so this is great to get some inspiration for the stell but I do not use this feature but but what I do use is the blocks so you have the full page templates over here but you also have the blocks so let's say that your client says I need a page for my pricing right because I have three pricing packages they have blocks over here which are just sections of a page so if you go to category you can go to pricing for example and they have a lot of pricing blocks that you can choose from most of them are pro as you can see so let's say I want to insert this one I just click on the preview and this looks good to me and I click on inserts I've inserted this pricing section and now if I want to add another section I can just add another block so maybe I want at the bottom of the pricing page I want to have a call to action right so I just insert this box for example and now you can see that that I've inserted two sections and these templates are most of them are just black and white so you need to tell them to make them fit your brand but it's a super quick way to build up a page because they have a lot of categories that you will oftentimes use on a website so for example you almost always have to design it about page so usually go to the blocks you go to about and here you can see all the about templates that they offer so you just insert a few you try a few and then you have an about page for the website and what's also really cool is that they have built-in motion effects for your website so on corporate websites you won't use this but if you really want to create a website you can use their motion effects to spice up the website and make it really creative as you can see in this example right here from the Elementor team this is an amazing design and you can have mouse over effect you can have scroll effects inside of your website and this is also one of those features that they only offer with pro then there's another thing that I want to show you and that is that they offer more widgets so if you have the free version only the basics tap over here so you have a button heading and all of those things but if you have Pro you have a lot more elements that you can insert for example the animated headline that's a popular one so if you want a more creative title like this with an animation you can do that with the animated headline or if you want to add a Facebook button a countdown a flip box this is a popular feature that you will see on a lot of websites that if you mouse over you will see something different behind the block and there's a lot more to explore here I won't go over every element if you want me to make a video of every Pro element please let me know but there's one more that I want to show and that is the slider because the slider is one of those elements that a lot of clients will ask for it's one of the older website features but it's still a feature that a lot of clients wants here you can set up these sliders you can set up an image for all of your backgrounds you can change the titles you can change the animation so there's also pro feature that i oftentimes use on real client websites and then there's two more things that i want to show you and one is the role manager so if you're working with a client and you want that clients to fill in the content themselves because sometimes they will have a lot of changes to the text or to the images and it costs you a lot of time or you give them a discount for filling in the content themselves right so you just put lower epsom in your website and then you let them edit the text and here you have a feature that's called the role manager so I'm here on a client website you can go to Elementor and then role manager and then you can make a wordpress user for your clients so you just fill in their email and their name and you create a user for them I'm not gonna click on this right now because they say this is a real client and I don't want to show their personal info but you can create a user for them and then you you don't create an admin user you create an editor user so inside of WordPress you create the editor user and then you say inside of Elementor that every editor user only has access to the edit content and this means that they cannot that change the layout of everything that you have designed so they only have access to the text layers and the image layers that they can change and this is a very safe way to work with a client and in this way you don't have to worry that they mess up your design that they delete important parts and all of that and then the last thing that I want to show you is custom fonts so I'm here on a client website as you can see a slider again but this font is a custom font this is not part of Google font so all the google fonts you can use them inside of Elementor but if you have a font that it's not a Google phone because sometimes a client will send you a custom font and they will say like hey you need to use this font because this font is part of our brand and then you have a problem if you have elemento for free so here instead of Elementor under custom fonts you can upload your own fonts and as you can see this font is the font that I use for these titles so this is also one of those features that you really want if you're gonna work for clients because sometimes they have their own brand font and you want to use that on the website so that's the last thing of the functionality that I wanted to show you and now as you can see there are a lot of reasons why Elementor is the most popular page builder in the world right now and I heard that our team is growing so I hope that they will keep the price as it is on the page right now but we will never know so again if you want to check the current price it's in the description but to be honest even if they increase the price a little bit I would still buy it because if you just do the monthly payment with your clients then it's not gonna be a problem now if you want to learn more than this video about Elementor Pro then you might also want to check the description because my plan is to work on a course if you guys want to for Elementor Pro so if that's done I will put that link also in the description so again thank you and if you have any questions leave them down below or watch some of my other videos and then I hope to see you in the next video [Music] you

Channel: LivingWithPixels

Views: 138,607

Keywords: livingwithpixels, living with pixels, elementor wordpress, wordpress elementor, elementor tutorial, elementor pro tutorial, elementor pro wordpress, elementor wordpress tutorial, elementor pro for free, elementor pro, elementor pro footer, elementor pro crack, elementor pro blog, elementor product page, elementor, elementor tutorial for beginners, elementor pro for beginners, elementor pro basics, elementor basics, wordpress tutorial, how to use elementor, using elementor

Id: hNP6HOC1c-0

Length: 22min 8sec (1328 seconds)

Published: Thu Mar 12 2020