Are you a business owner/blogger/graphic designer/marketer, looking for a website to show off your stuff and promote your business?
Well, WordPress is definitely the best option out there; however, it is still really tricky to build pages the way you like with WordPress default editor.
You need a Page Builder like Elementor, to design pages and post however you like with ease.
In this article, we will learn How to use Elementor to design the complete website and specific pages. I will share everything you may need to get started.
- What is Elementor?
- How to install Elementor?
- Elementor Pro:
- How to install Elementor Pro?
- How to use Elementor
- Creating your First Page with Elementor
- How to add a blog to WordPress Elementor?
- Best Themes for Elementor:
- Elementor Best Practices:
- Final Words:
What is Elementor?
Elementor is one of the most advanced frontend drag & drop page builder for WordPress. It provides exceptional design flexibility, letting you control every part of your website design from creating stunning websites to highly converting specific landing pages quickly.
Why use Elementor:
1. The best part of Elementor is that you can see what you build.
Typically, you would work on your website’s backend, but you can not see the final design as you do. You would have to save the edits and browse the live page URL to see if the changes have taken place properly.
2. With Elementor, you can see the changes as you build the site.
3. Elementor works with any theme, any page, any design.
4. You can copy-paste sections, columns widgets within the same page or on a different page. To copy designs on a different website, you have to save the design and layout as a template, export it.
How to install Elementor?
Installing Elementor is straight forward.
- Login to your WordPress Dashboard > Go to Plugins menu > Add New > search for “elementor” > Install the plugin called “Elementor Website Builder” by Elementor.com
- Click on Activate.
Alternatively, you can go to WordPress plugin repository, download Elementor which will be .zip file. Then go to your WordPress Dashboard > hover over Plugins menu > Add New > click on Upload Plugin > Choose File from your computer or drag the file and drop it on the box provided > click on Install now > Activate Plugin.
Once activated, you will see Menus called Elementor and Templates right above the Appearance menu.
So this installs Elementor Free plugin, which offers
- Drag and Drop Editor
- 40+ Basic Widgets
- 30+ Basic Templates
Elementor Free is more than enough to get you started designing beautiful websites. But if you want to go really advanced and be more flexible with designing, you should consider going for Elementor Pro.
The real advantage of Elementor Pro over its Free counterpart is that you can design
- blog archive pages
- single posts
- category pages
- header and footer
- contact forms and popups
- WooCommerce pages
Other than that, the Pro offers – 50+ Pro Widgets, 300+ Pro Templates, 10+ Full Website Template Kits and so on.
How to install Elementor Pro?
- Make sure the free version is installed
- Make the purchase of Elementor Pro
- Go to Elementor Account and Download the Elementor Pro plugin
- Open you WordPress Dashboard > Plugins > Add New > Upload Plugin > Choose File (Elementor Pro .zip file that you have recently downloaded) > Install Now > Activate Plugin
- Copy the License code from your Elementor Account > In your WordPress Dashboard go to Elementor > License > Paste the License in the field provided > Click on Activate button.
Elementor Pro is installed on your WordPress website.
How to use Elementor
With Elementor, you can design whatever you imagine. Visual Editing makes the process painless and quick.
Once you Install and Activate Elementor, you will see an Elementor menu item in the left side. Hover over it to expand other options like Settings, Role Manager, Tools, Custom fonts and icons etc.
Or, you can create a page or a post and click on Edit with Elementor, it will open Elementor Editor. You can see the Canvas, and it looks exactly the same how your live page will Look.
There are three types of Canvas’s (depending on the theme there might be more):
- Default: This will retain the theme’s default layout. Themes header, footer, sidebar, will be present. You can only edit a small portion.
- Elementor Canvas: This will be a completely empty canvas
- Full Width: Here the header and footer section will be brought from theme
To Switch canvas, click on the Gear icon at the bottom > Page layout.
In the bottom, you also have options for a navigator, revision history, responsive mode (you can choose to edit desktop, tablet and mobile design), preview, update.
The update button will make the current changes live.
Widgets are your design elements in Elementor. There are widgets for Headings, Texts, Images, Buttons, Spacing, Gallery, Image Carousels, Videos, Maps, Icons, Ratings, Testimonials, Tabs, Accordions, Shortcodes, HTML, Social Media Icons.
You can click to the top right corner widget menu on the left sidebar, to make the widgets available.
To use a widget, drag and drop one on the canvas.
To edit the widget, select a widget in the canvas, on the left sidebar all details will appear, which can be edited. Every widget has three sections to edit different stuff – Content, Style, Advanced.
Play around to explore more, every widget is different, explaining each one is beyond this tutorial’s scope.
One of the responsive options is available under the Advanced section.
Elementor Pro comes 50+ advanced widgets. Also to extend your design freedom, you can install 3rd Elementor extension plugins like Essential Addons for Elementor, Unlimited Elements for Elementor, Premium Addons for Elementor and so on.
Elementor comes with many pre-made templates that you can use to make your job quick and easy. Here is how to use Elementor templates in WordPress.
Click on the Add Template button beside the “+” sign (this adds new section) on edit canvas. You will find templates for Pages and so many useful blocks.
Again you can extend the collection by purchasing Elementor Pro or Installing add-ons like Envato Templates.
Creating your First Page with Elementor
To create a new page with Elementor, go to Pages > New Page > Edit with Elementor.
Now you can Decide the Page Layout, by navigating to Setting and selecting a Page Layout. I personally use Full Width most of the time as I want the headers and footers to the same, but need to use the canvas’s full width and avoid sidebars.
You can decide the width of any section. So select the section, on the left bar you can see the edit area. Select Full Width, Select Stretch, or decide the width and type the width in the pixel field.
Drag and drop any widgets that you need to design your page. Edit the widgets as you need.
For your first page with Elementor, you will learn much faster if you use Templates for Sections or full pages, then click around each widget and reverse engineer to figure out how they have designed it.
Or you find a suitable template just use it to create a beautiful page with ease.
How to add a blog to WordPress Elementor?
There are two popular approaches to add a blog Elementor website.
- Avoid Elementor here, but have a theme with the right blog design, and tweak it to make it as you like. If you do not own Elementor pro, this is the way to go. I prefer to take this approach, I design my blog using GeneratePress premium.
- Use the theme builder with Elementor Pro. In the Template menu, find the Theme Builder option. You can find Header, Footer, Single and Archive tabs, where you can design the respective things. For the blog, you will be interested in Archive and Single Pages.
So, archive pages are for creating a Blog page (where all the posts will be listed), Categories and Tags pages design, etc. A single post is for the individual blog articles design.
There is a better way to design the blog. Simply create a page on URL like domain.com/blog/. In that page use Posts widget, which is available under the Elementor pro group. Now you can design what to show, how the list looks and so on.
Best Themes for Elementor:
Here there are a few approaches to go about choosing a theme.
- If you want to just create a few landing pages, but the entire website will be the theme, then you can choose any theme that has the features and design you need. This is a very common practice to buy your themes from the Envato market and use it, but need Elementor only for landing pages.
- You want to utilize the power of a theme as well as Elementor, then I suggest you use some light themes like GeneratePress, Astra, Genesis. These have a very minimal style, design for flexibility and performance. You can design the pages with it, then Blog Archive, Header footer comes from the theme itself.
- Another approach will design everything from scratch with Elementor. In that case, use a very small lightweight theme that doesn’t have much design will best. Hello by Elementor is the best candidate for that.
Elementor Best Practices:
Here are some best practices for using Elementor:
Delete the default themes, which are hard to manage the design with Elementor. Install Hello theme, or refer the Themes section of this post.
Make sure you have an SSL certificate installed on the website.
If you prefer to control Fonts and Styles through the theme, make sure to disable default font and colours in the Elementor Settings. To do that go to Elementor menu > Settings > Check Disable Default Colors and Disable Default Colors > Save changes.
Don’t add too many addons. For new developers, it is tempting to add all cool Elementor addons out there. But extra unnecessary code will bloat your website. As a result, your site will load slowly and will be sluggish. You may create a test site for testing those out, but on live site install only the ones you need absolutely.
Does Elementor slow down your site?
Elementor is well-coded, so it should not slow down your website. But in general, if you make a complicated design and a good number of design elements.
Is Elementor SEO friendly?
Elementor is absolutely SEO friendly. Normally most of the SEO setting you do, you do it with SEO plugins like Yoast, so Elementor should not interfere there. Also, in Elementor, you can use SEO design elements, use Schema markups, and so on.
Is Divi better than Elementor?
It is a personal preference, both are industry standard. But there are few things that can be done only with Elementor. Elementor also has a Free version which is great.
There are infinite design possibilities with Elementor. It does not require prior knowledge. So consider giving it a try.
I hope this beginners guide to using Elementor was helpful. Let me know if you have got any queries.
Who is Elementor for?