Elementor – WordPress Page Builder step by step Tutorial

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 do not have Elementor installed just yet to get Elementor super easy just go to plugins click on add new and then you could do a simple search for Elementor Elementor will pull right up just click on install 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 Generate Press 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 websitefor 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 featurethat 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 witha 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 previewof what the page looks like.

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 wecan 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 clickright 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 themodules by clicking on the dial pad right here now let’s go over some of our settingsthat 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 name edit Elementor what this is where you could change that if you wanted and you saw thatI 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 mobile 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 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 previewed 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.

You can download Elementor Pro for Free, Click to Download.

Leave a Reply