Tell me, honestly, do you like designing pages with the WordPress editor?
I’m not referring to your typical blog post. I’m talking about Home Pages, Landing Pages, and Contact Pages.
If you’re like me, then you’re probably disillusioned after grappling with the limitations of Classic Editor, and the bugs within Gutenberg.
I much prefer using a page builder plugin to create my pages in WordPress. And judging by the explosive growth in the page builder plugin market, it looks like I’m not alone.
Previously we wrote about three premium page builders in our Big Page Builder Comparison.
In this post, we’re going to look at one of the newer page builder plugins for WordPress, called Elementor.
What is Elementor?
Elementor is a visual drag-and-drop page builder plugin for WordPress. The plugin lets you design and create pages using its built-in elements – called widgets – without the need to use code, HTML, CSS or shortcode.
And as it’s a front-end editor you can see your page as it evolves without having to hop backward and forward between the design and preview screens.
We’ll talk about the Pro version in a moment, but first let’s take a look at some of the main features.
You can download Elementor from the WordPress repository or install it directly via the WordPress admin panel.
Once installed you’re ready to go.
But before you start designing a page, it’s important to understand a few basic principles.
- Elementor pages are built in sections. A section is like a row. You can have as many sections on your page as you wish.
- Each section divides into one or more columns. You place widgets inside each column to create the overall design of your page. A widget is an element; e.g. an image, a text box, a list box, an icon, etc.
- A section can run across the whole width of a page, or it can be confined to a set box size.
OK, now you can start using sections, columns, and widgets to build a basic page with Elementor.
Designing a basic page
1. Start by adding a new page
Go to Pages > Add New.
You’ll notice you have an Elementor button now, as well as the standard WordPress editor.
2. Add a section
Press the ‘Edit with Elementor’ button to start designing your page.
Elementor opens with a Content Area and a list of Widgets on the left-hand menu. You have the option to add a new section or add a template to the main content area:
We’ll come back to the templates later, but for now, we’ll add a new section with two columns:
Now you have a new section with two columns. You can drag widgets from the menu into the columns:
Plus you also have the default option to add the next new section when required.
3. Add a background
When you design your page, you can edit the whole section or individual columns.
In this example, I’m adding a background color to the section.
On the layout tab, I’ve set the width to 1102px and the minimum height to 400px.
(You can see the faint dotted outlines of the columns with the blue background going across the section.)
On the style tab I’ve added a gray background color:
(You could add an image or a video background if you prefer.)
4. Add widgets to the columns
Next step is to add some content to the columns using the widgets.
(You can add multiple widgets to a column.)
I’ve added an image to the left-hand column, and a heading plus a text block to the right-hand column:
5. Perfect your design
Once you’ve added your widgets, you can edit their settings to perfect your design. Here are a few examples of what you can do:
- Adjust the Section Width and Height – This squeezes the columns together and leaves the background the same; eg. set the width to 800px and the height to 300px:
- Resize Columns – It’s easy to resize the columns in Elementor. You can grab one of the sides and drag it until it’s the right size; eg. set the image column to 40% and the text column to 60%:
- Position Columns and Content – You can position the content to the top, center, or bottom of a column. You can also position the column within the section in the same manner; eg. position the heading and the text widgets at the bottom of the column:
- Set Margins and Padding – You can set the padding and margin for sections, columns and widgets, using px, EM or %; eg. set the margins to 3% and the padding to 5% on the text column:
- Change Column Gaps – You can alter the gaps between columns to let your design breathe a little. Choose from no gap, narrow, extended wide, or wider. By changing the column gaps at the same time, you can decide which one is the best design; eg. increase the columns gap to wide:
- Add Shape Dividers – You can make your sections less rigid with a choice of shape dividers; eg. use the mountain setting:
That’s just a sample of the page building you can achieve with one section, two columns and three widgets in Elementor.
There are a load more design options available. For instance, you could add that special “designer touch” by including unique features like box shadows, hover and entrance animations, advanced buttons and more.
Responsive mobile design
Elementor is perfect for creating mobile pages as it lets you create a responsive website in a visual way.
- You can select from different font size per device, to reverse column ordering.
- You can even choose to show or hide specific widgets depending on a user’s device; i.e. desktop, mobile, or tablet.
The Full Range of Widgets
In our example, I used the image, heading and text widgets. But there are plenty more to choose from:
- Columns – Create inner columns within a column.
- Heading – Add eye-catching headlines.
- Image – Control the size, opacity and other settings of images.
- Text Editor – A WYSIWYG text editor, just like the WordPress editor.
- Video – Add YouTube or Vimeo to your page.
- Button – Add and design buttons to the page.
- Divider – Add a line that divides different elements in the page.
- Spacer – Add a space that divides the various elements.
- Google Maps – Embed maps into the page.
- Icon – Place one or more of 600+ icons.
- Image Box – Create a box that includes an image, headline, and text.
- Icon Box – Works the same as the image box, only with icons.
- Image Gallery – Displays your images in an aligned grid.
- Image Carousel – create a rotating carousel or slider of chosen images.
- Icon List – Displays a bulleted list with any chosen icon and text.
- Counter – Show stats and numbers in an escalating manner.
- Progress Bar – Include an escalating progress bar.
- Testimonial – Include customer testimonials for social proof.
- Tabs – Vertical or horizontal tabs that display different pieces of content.
- Accordion – A collapsable display of content.
- Toggle – Like Accordion, for FAQ pages.
- Social Icons – Display social icons for networks like Facebook and Twitter.
- Alert – Displays a colored alert box to draw the attention of the visitor.
- SoundCloud – Add audio clips from SoundCloud.
- Shortcode – Easily insert shortcodes from any plugin into the page.
- HTML – Insert code into the page.
- Menu Anchor – Link any menu to this anchor.
- Sidebar – Add any sidebar you create into the page.
These are just the standard widgets. There are more widgets available in the Pro version, which we’ll cover soon.
The template library
Starting with a blank page can sometimes be daunting. That’s why Elementor includes a growing collection of pre-designed templates:
There are templates for different industries:
- Law Firm
- Coffee Shop
- Interior Design
And different page categories:
- Landing Page
Elementor also allows you to store your own designs in the Template Library, so you can reuse them and save time.
Plus you can also export and import any template for use in other websites. This allows you to share your templates with other designers or reuse them yourself.
Elementor Pro is the premium version, and it extends the basic features even further.
You get all the same design and edit functionality from the standard plugin, plus exclusive pro widgets and templates.
Here is the current list of Elementor Pro Widgets:
- Posts – Display a list of any custom post types in various layouts.
- Portfolio – Display your portfolio projects in a unique and visual way.
- Form – Create a new form without leaving the page you’re designing.
- Price List – Create catalogs and menus that include pricing.
- Price Table – Create advanced price tables that display your products or services.
- Flip Box – Create animated boxes that flip to the other side (front/back), once the visitor hovers over them.
- Countdown – Add countdown timers to your page to increase sales.
- Slides – Create simple slides that work perfectly, without a fuss.
- Template – Embed Elementor templates in sidebars and footers.
- WooCommerce – Display and filter the exact products you want to display.
And you’ll find plenty of third party plugins that add extra elements.
Here’s a look at a few of the Pro Widgets in more detail.
The Form Widget lets you create a new contact form without leaving the page you’re designing. You can select your fields, increase the spacing, and set your columns and layout.
Here’s an example of a Contact Form found in one of the Pro Templates:
Note: if you don’t use one of the supported email marketing services, other providers can be integrated when the Form Widget is used in combination with Zapier’s webhooks.
The Posts Widget allows you to display a list of any custom post types in various layouts and ways. This is useful for displaying recent posts, or featured and popular posts.
You can use advanced filters that show the exact content you want your visitor to see first. For example:
- Display posts by Categories, Tags, and Author
- Order posts by Date, Title, or Menu (in ascending or descending order)
The WooCommerce Widget gives you a wide variety of options to display products from your WooCommerce store. You can create advanced filters to showcase your products in the best way possible.
Note: You’ll need the WooCommerce plugin for this widget to work.
The Countdown Widget lets you add a countdown timer to your page. Countdown timers can help to create anticipation or urgency on your site, depending on how you deploy them.
Simply set the destination date and time for your countdown and the widget starts ticking down.
Price Table Widget
The Price Table Widget lets you create advanced price tables that display your products or services. The widget gives you full control over the different elements of the price table, like colors, prices, text, buttons, and ribbons.
Here’s a basic Price Table I created:
Which brings us neatly onto the next section.
The basic version of the Elementor Page Builder plugin is free.
If you want to take advantage of the additional premium features in Elementor Pro there are three options:
- Personal: $49 for use on 1 website
- Business: $99 for use on 3 websites
- Unlimited: $199 for use on 1,000 websites
Each option includes unlimited free updates and one full year of support.
The documentation is excellent and includes some super video tutorials.
Elementor is also open-source. For updates on the plugin development, you can follow their Github.
Elementor pro’s and con’s
- Free and open-source
- Easy to use with instant, real time results
- Create high-end designs, without any coding
- Responsive mobile design options
- Includes 20+ pre-designed templates
- Compatible with most themes and plugins
- Create full-width pages with any WordPress theme
- Scale your content accurately with the dynamic size settings
- Zapier integration allows you to connect more email providers (but it’s not as straight forward to setup as a regular API connection)
- Editing the text boxes can be a little fiddly
- More pro widgets required to integrate with other services
- API integrations are limited to a handful of email marketing services
- Mobile settings can be fiddly to get right
- A few core elements look a little dated
Elementor is fun and easy to work with. And it’s also quick. There’s no time lag when you make changes – everything is instant, giving you the best possible design experience.
Since it was launched, the developers, Pojo, have continued to add more functionality making it even more attractive. The vast amount of features in the standard version alone is unbelievable. And you can expect more pro features to be released over the coming months.
Elementor is one of the best page builder plugins available. And it keeps on getting better.
Download it today, and start designing and building pages without losing your hair.