Elementor is a drag-and-drop page builder plugin for WordPress.
This means a couple of things:
- Elementor lets you create good looking posts and pages.
- You get a 100% separate interface to work on your posts and pages — the bulk of your work doesn’t happen in the standard block editor that comes with WordPress.
- It doesn’t require any coding skills — everything can be done through a drag and drop interface.
- Edit in a what-you-see-is-what-you-get manner.
- You can use it to create any content layout or page layout you can imagine.
- It works with all WordPress themes.
Features and Benefits
Elementor comes with a handful of useful elements
- The main page building functionality… (More no that)
- There are more than 90 content elements/modules to choose from
- Most things work with drag-and-drop — you can take any element and move it to a new spot simply by dragging it across the screen.
- The pages are mobile-responsive and SEO-friendly.
- There’s a library of pre-made page templates that can be imported and modified.
- If you’re on the Pro version of Elementor, you can use the Theme Builder feature, which allows you to modify your theme’s core elements, such as the header, footer, single post template, or your blog archives.
- A completely new WooCommerce Builder module. It’s similar to Theme Builder, but this one allows you to redo all of your default WooCommerce pages, such as your single product page or product archive.
Elementor is a WordPress plugin, to get it working, you’ll first need to install and activate it. After that, there’s a settings panel that you can visit if you want to, but that’s not mandatory. You can head straight to your WordPress pages and create a new one. Right away, you’ll see the option to ‘Edit with Elementor’, After clicking on this button, you’re going to see the Elementor user interface.
- The main canvas. This is where you can put your content blocks and adjust them.
- The content elements that are available.
- This is where you can access the settings of Elementor’s (colors, fonts and so on).
- This is how you come back to view the content elements.
- The global settings of the page you’re working on.
- The revision history of the page.
- Switch device (desktop, tablet, mobile).
- Preview changes.
- Publish the page.
To build a basic page with Elementor, you first need to understand the page structure hierarchy that it uses:
- A page can have any number of sections in it.
- Each section can have one or more columns.
- Each column can house one or more content elements.
- Lastly, each content element can be styled individually.
So, we have:
Page → Sections → Columns → Content → Styling
To get started, you can either add a ready-made template or include a blank section:
Within that new section, you can add new columns, and then populate these columns with content by simply dragging and dropping specific blocks from the sidebar. And, of course, you can rearrange sections with drag-and-drop as well.
Once you have a content block in place, you can click on it to adjust the fine details of what’s in it, as well as its presentation. There are three main tabs available for that: Content, Style and Advanced.
Just like that, one by one, you can work with individual content blocks until you have the whole page ready.
Overall, Elementor is very easy to use and fairly intuitive. Once you grasp the page/structure hierarchy and get to know all of the content elements, working with your pages becomes rather fun. Especially when you start getting into some of the more advanced features, for example:
- experimenting with the Z-index of elements (to bring stuff forward versus putting it in the back)
- customizing the on-hover state of elements (changing their appearance based on the cursor position)
- setting transitions between sections