Learn how to build custom pages in WordPress with Elementor, one of the fastest page builder plugins for WordPress.
Have you ever worked an entire week on a single landing page? Adhering to all the requirements of the client, thinking up drafts, creating the photoshop image, cutting it to HTML, adding effects and functionality… The list goes on and on.
A month ago, we introduced a new plugin, a page builder that promised to cut down the design process considerably. We call it Elementor, and it's the fastest page builder for WordPress, released as a free and open source plugin for all to enjoy.
Since its release last month, it has been downloaded by over 16K customers, and has been updated with more and more widgets. It currently offers 27 different widgets, a number never before seen on a free page builder.
Table of Contents
Meet Elementor WordPress Plugin
Elementor is a frontend drag and drop page builder for WordPress. This means that instead of designing with code, or just relying on the default design of your theme, you can design a whole new page using drag and drop widgets set across a column layout.
Instead of using code, creating a new page with Elementor is much easier. Anyone can create a page design with Elementor.
Getting Started Elementor
To get started with Elementor, you will first need to install it on your WordPress website. Elementor is available to download and intall for free from the WordPress repository.
Go to the plugin section, click on “Add new plugin“, and search for “Elementor“. Now click on install, and then activate.
Now, head over and create a new page. You will see a button “Edit with Elementor”. Once you click on that button you will be transferred to the Elementor platform, where you'll be able to start designing your page.
How the page design is built in Elementor
Before you can start designing complete web pages, it is important to understand about the basic layout of a page in Elementor.
Each page is made up of sections. You can think of them as separate rows that combined add up to a whole page. Each section is divided into one or more columns. Sections can run across the whole page width, or be confined to a certain set box size.
By placing widgets within columns, you gradually fill up the page with content, images, videos, buttons and more widgets, eventually ending up with a complete web page design.
Let's see exactly how a section gets filled
To help you understand just how fun it is to use Elementor, I want to show you how to do a basic design of a section. Once you understand this, designing a whole page will be a breeze.
1. Let's go ahead and add a new section, and have it include 2 columns.
2. I now want to add a background color to the section. You can just as easily set the background to be any image or video, as well as add a background overlay. At this point, I also set the section minimum height to be 640.
3. Now, I add an image to the left column, as well as a heading widget and a text widget to the right column.
4. After adding the image, text and heading content, I can now start and play with the style, and change it to fit my exact needs.
Several widgets in Elementor
There are currently 27 widgets inside Elementor. Just this week, we added 4 additional widgets.
Just to compare, one of the most popular WordPress page builders has only 5 widgets. You can't be expected to produce a quality pixel perfect web pages with only 5 widgets.
Here is the list of Elementor widgets, that I most commonly use:
1. Heading. Add eye-catching headlines.
2. Image. Control the size, opacity and other settings of images.
3. Text Editor. A wysiwyg text editor, just like the WordPress editor.
4. Video. Add YouTube \ Vimeo to your page.
5. Button. Controlling every aspect of the button design.
6. Image Box. A box that includes an image, headline and text.
7. Testimonials. Customer testimonials that show social proof.
8. Icon. Place one or more of 600+ icons available.
9. Icon box. Works the same as the image box, only with icons.
10. Social Icons. Icons to your social pages like Facebook / Twitter.
11. Image Gallery. Displays your images in an aligned grid.
12. Image Carousel. A rotating carousel or slider of chosen images.
13. Icon List. A bullet list with any chosen icon and text.
14. Counter. Show stats and numbers in an escalating manner.
15. Progress Bar. Include an escalating progress bar.
16. Tabs. Multiple tabs that display different pieces of content.
17. Accordion. A collapsable display of content.
18. Toggle. Like Accordion, for FAQ pages.
19. Alert. A colored alert box to draw the attention of the visitor.
20. HTML. Insert code into the page.
21. Menu Anchor. Link any menu to this anchor.
22. Sidebar. Include any sidebar you create into the page.
23. Google Maps. Embed maps into the page.
24. Soundcloud. Add audio bits from Soundcloud.
25. Divider. A line that divides different elements in the page.
26. Spacer. A space that divides the various elements.
27. Columns. Create inner columns within the column.
To make the most of Elementor you can use several Elementor friendly WordPress themes. You can check out few themes from Pojo, built by the same team that brought you Elementor.
Pojo WordPress themes are 100% Compatible and come with additional Elementor widgets to help you create additional forms, galleries, sliders and post carousels.
Final Note on Elementor
Elementor took our team of developers an entire year to develop. When you first download a free WordPress plugin you normally don't consider how much effort it took to create.
For a visual page builder, that is used every day to design different pages, the thought process that it took to create the panels, widgets and controls is crucial, and what makes for a great user interface. A security plugin, in contrast, is much less dependent on the user interface being friendly.
We are glad to see this investment in a user-friendly and easy to learn UI paid off, as we get a lot of great feedback from users complimenting on how easy it is the design with Elementor.
Download Elementor now and try to design your first page.
Whether you're a professional web designer or a novice making your first steps in building a website, I'm sure you will find Elementor useful.
Let us know what you think of Elementor in the comments below.
Ben Pines, a WordPress user and Blogger is currently the CMO at Elementor / Pojo. In addition to WordPress, he loves to read, write and drink Italian coffee.