Elementor – WordPress Page Builder Tutorial (2018)

In this WordPress page builder tutorial I'm in a show you how to get started using Elementor so let's jump right on it so here I am logged into WordPress and I do not have Elementor installed just yet to get Elementor super easy just go to plug-ins click on add new and then you could do a simple search for Elementor Elementor will pull right up just click on install now now that it's installed go ahead and click on activate to activate Elementor on your website now before we jump into Elementor I just want you to know that Elementor is compatible with every WordPress theme however there are certain WordPress themes that have better specific integration for some to go to appearance and then teams and share with you four different themes that are specifically made to accommodate Elementor however whichever WordPress theme you are using I'm sure Elementor will work fine but here are the top four themes for Elementor there's the Astra Theme the GeneratePress theme OceanWP and page builder framework theme and those are in alphabetical order to go ahead and activate the first one which is Astra now that aster is activated let's go ahead and take a look at the settings panel for Elementor by clicking on Elementor in the menu here when you first click into Elementor it takes you straight to the template area one of the power features of Elementor is that you can save things so that you can reuse them you can save entire pages and you can save sections of pages for easy reuse and all of the different pages on your website for the Elementor settings will go ahead and click on a settings right here this is going to provide some settings with how Elementor will work on your website next we have a role manager this is very good if you are making websites for people or you're going to have people logging into your website and you want to control what they can and cannot do with Elementor next we have the tools panel and this is where you have some options here one of them being version control if you ever wanted to Beta test the future version of Elementor this is where you would enable it or if you wanted to roll back to a prior version this is how you would do it and we also have maintenance mode this is a very nice feature that allows you to use Elementor to create a under construction or a coming soon page that will show when someone visit your website if it's not ready just yet lastly we have a helpful link right here that says knowledge base this will take you over to Elementor's website for any how-to articles that they might have their that interest you so now that we've gone through the settings in the back end of Elementor let's go ahead and create our first page using Elementor I'm in a go to pages click on add new and I will name this Elementor next out click on publish to publish this page and then I'll click on the button here that is says edit with Elementor this will open up Elementor and we now are in the Elementor interface and we can begin assembling the content on our page but before we do that I want to show you a couple helpful settings in the backend of Elementor in the basic Elementor interface right here we have a hamburger icon and we click on this it will take us to some of the specific Elementor settings right now were looking at the view that shows us all of the useful modules that we can use when assembling our page if we ever want to get back to this we can click on the dial pad icon right here down on this bottom row we have several other icons that will go over in a moment and we also on some areas we have tabs here so you see words as elements and then we have global and with a growing list of useful widgets there is a search option here to quickly get to the widget that you want to use on your page and let's not forget we can make this panel completely disappear when were previewing our page by clicking right here and we get a full preview of what the page looks like so now let's take a look at some of those settings by clicking on the hamburger icon in the top left so first is it default colors and this is where we can choose the default colors that Elementor modules will use when you are starting to drag and drop those on your page so we have primary secondary text and accent and you can set these colors to whatever you want by clicking on it and choosing the color that you want or putting in a color code also there are several different color palettes here that you can use if you prefer them to go back into the settings panel by clicking on the hamburger icon you can also set default fonts so these would be your headline font your secondary headline font body Texan accent text you can click on any of these and set what you want those fonts and the font wait to be I'll go back to settings and we also have an option to change the color picker colors so everything you use in Elementor when you're selecting a color there's a color picker on the bottom with eight color slots this is where you would set what you want those color slots to be and will go back to the Elementor settings next we have this global settings option right here where we can set some default to generic fonts for our Elementor pages also the width of the content area of our page and also some various spacing items let's go back into our settings if you click right here it's gonna take you back into the WordPress dashboard and when you are done in a page you can click this button here that's is exit to dashboard so I'll get back to the modules by clicking on the dial pad right here now let's go over some of our settings that we have down here on the bottom first we have the settings and when you click on this these are mostly BPH settings so you saw a moment ago how I created a page named it Elementor what this is where you could change that if you wanted and you saw that I publish this page this is where you can change it to draft or something other you can set a featured image for this a piece of content and if you wanted to start your page with a fresh slate when you click on advanced you can click this delete button here and it will delete out all of the content on this page next you can click on this style icon right here in this where you could set a background color or a background gradient color you can manipulate some of the padding and spacing and also for Pro users you can add custom CSS let's go ahead and get back to our module list next we have this icon here which is responsive mode one of the power features of Elementor is you can see exactly how your pages going to look like on a desktop on a tablet or on a mobile device and you can make settings to the way it looks so you can get your designs pixel perfect on every device next we have this history option right here where every change you make to your page will be recorded so that you can easily go back in time also if you want to go back to a previous save there's a revisions tab right here or you can go back in time to any prior time that you clicked on the save button you can go here and go right back in time next we have this I write here which is to preview the page that you are building so when you click on this your pages can open up in a new tab outside of the Elementor interface and give you a chance to view the page to see how it's going to look to your website visitors and lastly we have this update or save a button right here and it will turn green whenever there is some content that needs to be saved so now that we've gone over those basics let's start building a page out so when you first jump into Elementor in your pages blanked you have these two options one of them is to add a new section and the next one is to add a new template now the way that every webpage that you go to in visit there all structured the same it's simply a series of sections and a section will have columns in it and those columns will have elements like text or images or videos that is all any webpage actually is in a section you can set different background types it could be a background color a background gradient background image or a background video and we can do all of those things very easily with Elementor so first you would click on add new section and you can choose you want that section to just be one block or you wanted to be two columns or three columns or any of these various column layouts now don't worry you can easily adjust the size or the width of each of the columns in your sections so first I'm going to choose this one right here so now when I hover my mouse here you can see this blue bar and that will take me to the settings for this particular section so I can click right here where it says edit section and then I have all of my section settings so remember moment ago I said in your section you can have colors and images and videos those are to be in these style options right here and so for background type I can click right here it says classic and then right here I can choose a color and here are those color picker colors that I talked about a moment ago so if I wanted this color to be the background color simply clicking on that color will change the background to that color you have the option for gradients you also have the option for background videos now each of the modules sections and columns are typically going to have these three tabs appear at the top layout or if you're editing a module it will say contents style and advanced so now that we have our section set up let's go ahead and put two columns in it so my click on the dial pad and here's a columns option right here I can drag and drop it right there and now I have these two columns but they don't have anything in it so many click on the dial pad again and let's put some text in this column right here I'll let go in there is our text and let's go ahead and put a video in the other column so I will just go to the video element right here drag and drop it right there so now what I want to do first is let's go ahead and put our link to our video summit click on the video here and then right here we have our content options and replace that URL with the different one that might be a little more appropriate for this video and it's my Elementor review video we have some options here for the video if I wanted it to autoplay if I wanted to have the suggested videos just various settings that we have specific to the video they're all right there now one of the nicest features of Elementor's most the areas that have text it has a feature called in-line text editing and what that means is I can just click and I can start editing my text visually now you always have this option here in the settings panel to start editing your text as well so go ahead and put a headline in here okay we have a nice headline there and I can choose my alignment right here some of the properties of the text right here let's go ahead and change the color of the font so I can go ahead and click in their highlighted and then we have these options here in this let me put bold or underline or italicize this but what I want to do is change the colors on the click on style and then here's my option for the text color to go ahead and choose this a white because that just works better for the background I hope you're starting to see how easy it is to build a page on your WordPress website using Elementor so next let's take a look at some of their templates that come for free with Elementor that was this option right here that says add template now when you click on this it's going to pull up the template library I want to draw your attention to words as blocks pages in my templates so blocks are these sections but they're predesigned and you can easily just click on any of the predesigned sections that you want now they are organized by categories and you have all these options here to choose from you can even put a heart next to the ones that you like and favorite them there is a wide variety of blocks for all kinds of different purposes right here adding a block to your website is very simple you just hover over it in they'll be an insert option click on that and it will download and be inserted right into your design building websites is never been this easy let's quickly take a look at some of the page templates that were available click on add template to pull that up and I will click on pages right here and we can see a wide variety of page templates now any of these thumbnail images that have a little Pro badge in the top right those are for people that have Elementor Pro which is an add-on to Elementor to give it additional modules and features that help you take your web design even further and for any of these you can simply find the template that you want and then click on insert in it will download and it will insert this into your page and there you have it it went ahead and inserted that design right here into my page now before we go I want to show you how to save section so that you can reuse them later so if you notice I'm hovered over a section we have this blue bar here at the top these are section settings panels there's going to be this little floppy disk icon and when you click on that we get the option here to name this section were about to save I named it my first save section and then we can click on save in it has now saved this section to the library so that I can use this over and over again on any page that I create using Elementor and you can see it took a straight here to my templates so now whenever you see the option here to add a template and you click on it and you click on my templates right there you're gonna see your various saved sections right there simply click on insert right here and that will be inserted into your page let's click on the X here to leave that menu now I want to show you how would you add content in between this section in this section whenever you hover over a section and you have your section options there's this little plus when you click on that it will reveal the add new section and add template so that's how you can later on add content in between existing sections you can also move these sections around by a hovering over to the leftmost icon clicking holding your mouse and then dragging and then dropping that section wherever you'd like to reposition it on your page so I'm in a go up to the top and remove these two sections that I created I'm did click on the X right there click on the X right there and they are now removed I'm in a go ahead and click on the update button right here and let's go ahead and preview this page I'm in a click on the preview changes icon right there it's going to open up into a new tab and you can see were already well on our way to having a beautifully designed websites so that is the full beginner's guide to using Elementor the WordPress a page builder I'm going to have a link in the video description box to a playlist of tutorials that I have created that are here on YouTube covering Elementor and you can work your way through those if you want to advance in further your training and understanding of Elementor so that you can build beautiful websites for yourself also if you're new here I should have in and introduce myself in the beginning my name is Adam and I'm from WPCraftercom where I make WordPress tutorials for non-techies I try to make this stuff makes sense I hope you'd consider clicking on that subscribe button if you want more tutorials like this there's also a little bell when you click on that you two will let you know when I have a new tutorial video if you found any value in this video I just want to ask you to give it a thumbs up and if you have any questions I'm more than happy to answer them for you in the comments section down below I want to thank you for spending this time with me thank you for watching and I'll see you in the next Elementor tutorial video

Free Email Updates
We respect your privacy.

wordpress themes for amazon

affiliate marketing