Elementor Tutorial: How to Use Elementor Step by Step
Elementor is undoubtedly one of the most popular page builder plugins for WordPress out there. If you’ve been thinking about getting started with it but don’t know where you should start, this guide is for you.
In this post, we’ll look at how to use Elementor to build web pages just as you want them. We’ll go through the step-by-step process so that when you’re done, you get to start using Elementor right away.
You can check out Elementor Pro here to see the additional features worth having when using Elementor Page Builder.
What is Elementor Page Builder Plugin?
Before we get into the page-building process, it’s only fair that we share a brief introduction of Elementor. It’s a very useful visual page builder plugin for WordPress released back in 2016. By visual, we mean you can design your pages by simply dragging and dropping the elements onto your page.
Since its release, Elementor has been a very popular choice for the WordPress developers out there. You have a wide variety of options that enhance your user experience over the default WordPress page builder by a lot.
How to Use Elementor Page Builder
The learning curve for this innovative WordPress plugin is quite flat. It means that it’ll take very little time for you to understand how everything works.
So, here are the steps to using Elementor for the newbies.
Installation
Very similar to any other platform or program, Elementor requires you to install the plugin to your WordPress dashboard. However, if you are an absolute beginner in the WordPress space, you should know the difference between WordPress.org and WordPress.com before you go ahead and install the plugin.
WordPress.org is generally where most developers invest their time. It’s an open-source platform and totally free. However, you need a third-party hosting plan for your websites. One of the main reasons why people tend to use this one more is that it gives you absolute control over your website and you own it as well. You are free to add any plugin and any theme that’s compatible with your plugins.
WordPress.com, on the other hand, has a free version but if you want the most out of it, you need a paid plan. You are not in control of your websites entirely. In case you violate any of the guidelines, you stand at risk to lose your websites. You cannot use custom plugins as you would do with the org version.
The bottom line is, using WordPress.org is going to be the right decision for you.
To install Elementor, you need to visit Elementor.com and press get started on the top right corner of the website. From there, you’ll be asked whether you have a website or not. You simply press the option that applies to you.
If you don’t have a website yet, Elementor will help you chose the hosting plan for your website. Once you decide on which hosting to go with, you can pay for the hosting and start building your first page. In general, Elementor recommends Bluehost and SiteGround hostings.
After completion of the registration process, you will have a website hosting that you can build upon. And when you log into your website, you’ll find Elementor ready to go.
If you already have a website, you can seamlessly install Elementor on it. When you press the option that you have a website, you will need to enter your full website URL and click install. It will redirect you to your website where you will be asked to click the ‘Install Now’ button.
Once installation is done, you will need to activate the plugin for your website, just as you would do with other WordPress plugins.
These are the ways you can install Elementor for your websites. And you can do the same in your WordPress dashboard as well. It will enable you to use the page builder tool for all future ventures. Simply go to your WordPress dashboard and go to plugins. Click Add New and search ‘Elementor’. Let it install and then activate it. If you’ve invested in Elementor Pro, you need to navigate to Elementor>License to activate it.
Creating Your First Page
Just as you would create a new page for other plugins, go to WordPress dashboard, click Pages and Add new. Then, name your page and click publish. Make sure that you keep the visibility of the page private so that you don’t accidentally get the website live before it’s ready.
On the preview page, you’ll find an option called ‘Edit with Elementor’. That’s what you need to click to get started with the drag and drop page builder tool. Keep in mind that if you don’t name your page before you click it, your page will display a default name given by the plugin.
On the editing panel, you’ll find a sidebar that contains all the tools on the left-hand side of the page. The area on the right is your editing area where you get to add new sections, templates, or any other elements you want from the side panel.
Styling the Sections
One of the biggest advantages of using the Elementor page builder plugin is that it allows you to style the sections independently. You can use the options menu on the Elementor side panel or simply right-click on the section that you want to edit.
When you press the right-click, you get features like edit section, duplicate, copy, paste, paste style, reset style, save as template, navigator, and delete. All of them refer to different attributes of your section that you have control over.
Under the edit section option, you can change the layout and the style. For example, you can change the width of your content. It’s as simple as selecting the area and sliding the width bar to get it to your desired width. No complex coding or manual inputs required.
You can do the same with height as well. Choose between Fit to Screen and setting a minimum height for your section. Once you set the minimum height, you get a very similar slider to tweak the final results.
There are other options like vertically aligning your section with the content, content overflow management, stretching the section, adding HTML tags, and so on.
Under the style option, you can select any background type you want. Depending on your needs, choose between classic, Gradient, video background, or image slideshow. The classic background is perfect if you want to add a simple color or an image. The Gradient does exactly what it sounds like. It allows you to set a gradient of colors as your back. Finally, the video background and image slideshow options are self-explanatory.
You can even use background overlay in the Elementor page builder plugin. All you have to do is select your preferred background style and give a proper blend mode to get the desired results.
If you’re a fan of borders on your webpage sections, you can simply create and modify them from the border menu. You can set a border type, radius, and shadow.
Similar to borders, you can create any shape divider you want. Just select the type of divider style, color it as you want, set a width and a height, flip if needed, and control whether you want it on the foreground or not.
Moving on to the advanced features, you can set a margin on your webpage, add padding if you want, set a Z-index, CSS ID, and CSS Classes.
If you go ahead and decide to invest in Elementor Pro, you get more features like adding motion effects to your webpage, add custom attributes and custom CSS styling.
The most popular motion effects include sticky, scrolling, and entrance animation. When you apply the sticky effect on a section, it will stick to where you want on the webpage. No matter how much the users scroll up and down, the sticky section won’t budge.
With scrolling, you are in control of how the webpage reacts when the user scrolls through it. You can add a variety of animations to give your users a more interactive and engaging experience.
The custom attributes function in Elementor Pro allows you to edit your section, column, or any widget in a very unique way. Although it requires knowledge of web development, you can master it in no time and give your websites a unique creative touch.
To access the attributes menu, you need to right-click on a section and click the edit section. From advanced, go to attributes and add the code for your custom attribute. It follows a key/value format for the codes which is the standard among developers.
The Templates
Templates are one of the main reasons you would go for a third-party page builder plugin. The WordPress default page builder is very good, but it’s surprisingly limited in terms of templates.
Elementor comes with plenty of templates to work with it. It includes templates for your sections, the content, and the global widgets.
Your first task is to access the Elementor Template Library to access them. There is a handy ‘Add Template from Library’ icon on the page from where you can add page templates, your saved templates, or blocks.
If this is the first time you’re trying to add a template using the Elementor page builder plugin, you’ll need to connect your account with the library. When you’re in the library, you can click the zoom icon to enlarge any of them and take a closer look.
Once you select a template from the library, click insert. It will be imported to your Elementor dashboard. If you plan to use the template for the future as well, just give it a love react and it will be saved as one of your favorite templates.
When you design a page from scratch and want to use the same layout for further projects, you can easily convert the page into a template as well. Just click the little white icon beside the ‘Publish’ button at the bottom of the page. You’ll find an option called ‘save as template’.
Moreover, you can save individual sections from your page as templates as well. All you have to do is right-click on the section you want to save, name it as you want, and save it.
Elementor page builder plugin also lets you import templates you’ve saved or downloaded from elsewhere. To do it, you need to go to Templates > Theme Builder. From there, you can click on the ‘Import Templates’ button to upload the zip file of the template.
Colum Styling
The column styling options are very similar to the section styling feature in Elementor. You just right-click on the column that you want to edit and select to tweak alignment, background style, HTML tags, borders, etc. And when you invest in Elementor Pro, you unlock the features like column attributes, motion effects, and so on.
Previewing and Publishing Your Page
Once you’re done with the design of your page, you may want to go ahead and publish it. But it’s always a good idea to take a look at the preview before you make it live for the internet.
Elementor page builder plugin for WordPress has a very handy preview option to let you see how your website will look like before you publish it.
On the bottom of the editing panel, you’ll find an eye icon. When you hover your mouse cursor over it, it will say preview. If everything looks right and nothing needs changing, simply click on the green ‘Publish’ button to make your website live.
However, if something seems off or a section doesn’t line up properly, close the preview and open the Elementor editing panel again. Fix the issue and repeat the entire preview process.
Once a website is live, it doesn’t mean your access to edit it is gone. You can update your web pages anytime you want without impacting the main page.
All you have to do is save your work as a draft while you’re updating. Once, you are done, you can click the green ‘Update’ button, where the Publish button was before. As soon as you hit update, the main website will show the changes.
How to Get Elementor Pro
When you want Elementor on steroids, you go for Elementor Pro. While it’s very similar to how the free version works, it integrates some amazing tools to speed up your workflow. There are a total of 5 packages you can choose from.
They start with 1 website and go all the way up to 1,000 websites! You get all the pro features we talked about across all of your websites when you decide to get Elementor Pro.
But how do you get it?
First of all, you must have Elementor installed in your WordPress dashboard. You can select the ‘upgrade to pro’ option from the dashboard. After you select your plan from Essential, Advanced, Expert, Studio, and Agency packages, it’s time to provide the payment information.
Elementor asks for your email address, your first and last name, your country of residence, state or province, zip code, your company’s name (if applicable), etc. After you complete the payment, you can download the Elementor Pro zip file and install it.
Click here to check out Elementor Pro
Elementor Page Builder Plugin FAQ
Can I make a slow website faster with Elementor?
Answer: You may or may not. There are various reasons for a website’s inefficiency. First, you need to diagnose whether it’s the servers, the media you are using, the external scripts, the plugins, or the theme. Elementor can help you optimize your site load speeds but if the servers or the media are at fault, Elementor can’t do anything.
Is Elementor Pro worth it?
Answer: If you’re a professional working in the website development industry, Elementor Pro can open many new doors for you. It has integrated tools to make your website even more unique. You get more optimization options as well. All of it translates to better ranking in search engines.
Can I use Envato elements with Elementor?
Answer: Yes, you can. Envato may be a new plugin for innovative themes, but it has many templates specially designed for Elementor and Elementor Pro. You can seamlessly import any of the Envato elements into your Elementor templates library.
Can I do A/B testing with Elementor?
Answer: At the time of writing, neither Elementor nor Elementor Pro has support for A/B testing. However, you can find many third-party plugins that work well with the page builder.
Will Elementor be compatible with my other plugins?
Answer The plugin has been developed very carefully not to interfere with other plugins. But in case it does, you’ll receive a notification immediately. This way, you get to save a lot of labor and time. You will also get a list of plugins that are causing problems to your Elementor experience.
Last Words
WordPress developers are always on the hunt for a new and improved plugin. Whether it’s for SEO or simply page building, the space is constantly evolving. Elementor has introduced a new dynamic to the page builder plugin industry and it’s only getting more popular. So, get started with your Elementor Pro experience right now!