Performance and main benefits of Elementor page builder
As we have already seen, Elementor page builder that gives us a completely independent interface to the template you are using in WordPress.
Some of the most prominent features and benefits of Elementor page builder are:
- It allows you to create pages, posts, and custom post types with the interface and UI of the plugin, which includes different widgets, design, and structure options.
- It is a visual editor, that is, you edit in real-time on the front end and at the same time see how the page is looking.
- Regardless of which template you are using, it allows you to create any type of structure, the layout you can imagine. There are no limits.
- It is compatible with 99% of WordPress templates
- It does not require you to have prior knowledge of programming or Web development.
- The designs that you can create with Elementor page builder are really impressive visually.
The problem with backend editors
For a long time, I was using editors such as Visual Composer, King Composer, FusionBuilder, and OptimizePress, very good options but they are back-end and do not represent drag-and-drop editing and experience, which is much more intuitive, fun, and efficient.
With Visual Composer and other backend editors, any change, even if it was a color, image, or font size, required updating both the backend module, updating the page in the normal WordPress editor, and finally refreshing the page in “live” mode to see the changes.
Very tedious and exhausting.
This causes the user to tire much faster and the experience to be unattractive and efficient.
Elementor page builder – a visual, intuitive, and even fun experience!
The Elementor page builder experience is totally different.
To make changes to any page or add widgets, everything is done “live” and on the front end.
When selecting any section, the design, style, and advanced options are displayed where editing is done in real-time.
Widgets in Elementor page builder
To add content to the page, we have the widget panel, where we can find different content modules such as headings, text block, interior section, images, videos, buttons, etc.
The free version comes with a large number of options, enough to create a complete and functional website.
If you decide to invest in the PRO version, you will have access to other exclusive widgets such as forms and slides.
To add a new widget, all you have to do is drag it to the section where you want it to be displayed and that’s it.
The widgets included in the free version of Elementor page builder are:
- Inner section
- Header
- Image
- Text editor
- Video
- Button
- Star rating
- Divisor
- Google Maps
- Icons
- Picture Box
- Icon Box
- Gallery
- Image carousel
- Icon list
- Contador
- Spacer
- Testimony
- Tabs
- Accordion
- Toggle
- Social media icons
- Progress bar
- Soundcloud Shortcode
- HTML Menu Anchor
- Sidebar Alerta
The Elementor page builder interface
To give you a better idea, we are going to review below what the screen of a newly opened page with Elementor page builder looks like.
- Content area. This part is where you create all the content of the page
- Widgets and widget options. These are all the elements that you can add to the page. Elementor free and pro include several and you can also add more with plugins from external developers
- Settings. This is where you can make reviews of the changes made, preview the design, review it on different devices and other options.
How the structure and layout of a page works in Elementor page builder
The content in Elementor page builder is divided into sections, which in turn are divided into columns.
There can also be interior sections within the main section.
Editing Widgets and content in Elementor page builder
When adding a widget to any section and column, you will notice that on the left side there are 3 columns:
- Content. Where you can change the main widget options. For example, for the text editor widget, in this column, you can compose the text or choose the images if it is a gallery or a slider. Let’s say this column corresponds to the options that make that widget unique.
- Style. Everything related to fonts, colors, sizes, borders, shadows, spaces between elements, and design aspects are edited in this part.
- Advanced. To change things like margins, paddings, effects, mobile compatibility, effects, and custom CSS.
Once you have a few hours using the plugin, you will realize how easy it is to edit the widgets and you will perfectly locate the sections.
Inline text editing
Unlike other page builders that use a pop-up with a WYSIWYG editor, editing text with Elementor page builder can be done directly in the content area, a much more intuitive, efficient, and fun experience.
On the left side of the widget options, you can also add and edit the text when necessary.
Templates and blocks
One of the best ways to learn to use Elementor is by using the template and block library that is included with the plugin, both in the free version and in the PRO version, which has exclusive options.
When you are going to add content in the space on the right, you have two options:
- Add a section with a specific structure: two 50/50 columns, two 75/25 columns, three 33.3 columns, four 25 columns, etc.
- Import a template or a block
Gallery of templates and blocks
When we choose the templates button, we have three options:
- Blocks Specific sections of a page. For example call to action, frequently asked questions, contact, services, testimonials, team, etc.
- Pages. Unlike blocks, they are full pages focused on different niches and categories as well. For example, you can choose Home pages, About pages, Services, Contact pages, etc. They can also be chosen according to the niche: for agencies, interior design, restaurants, products, apps, wellness, etc.
- My templates. Any design you make can be saved as a template to be used in that same site or to export it and use it in another domain with Elementor.
Shortcut to master Elementor page builder faster
One of the techniques I used to learn how to use Elementor in a few days was to import templates and review the structure and how they were created and formed in a matter of sections, interior sections, columns, and elements.
Let’s say I study the templates thoroughly and break them down into parts to see how they were formed.
This will help you a lot to be able to create structures and pages from scratch much more quickly and to have much better practices and order in your layouts.
Standalone Mobile Edition with Elementor
Web traffic on mobile devices has risen exponentially in recent years and one of the most important priorities when creating a website is that it is fully responsive and looks perfect on mobile phones and tablets.
When you use Elementor you will realize that all the templates and blocks included are responsive and adapt excellently to any phone.
When you make your own structures and templates, you may notice that some elements may require a touch-up and improvement.
For that, we have the mobile edition option, where the menu on the right changes to mobile view to show how the template adapts to cell phone screens and also to tablets.
Exclusive Elementor Options for Mobile Edition
When you are creating a page or layout in a web or desktop version and you switch to mobile mode, several things can be messy, for example:
- Wrong column order
- Very large headers
- Margins and fills in the wrong proportion
- Incorrect images and spaces
Fortunately, with Elementor we have exclusive options for mobile that help us modify and make our pages excellent on any iPhone, Android, or iPad.
In most templates, editing in the mobile part requires CSS or other advanced settings.
With Elementor it is VERY EASY to get your website optimized and perfectly designed for mobile-ready.
General Elementor Options
In addition to the 3 columns with which we edit widgets, each Elementor page has general options that can be seen by clicking the menu button in the upper left corner
The options are:
Style
- Default colors
- Default fonts
- Color picker
Settings
- Global settings. To change generic default fonts, content width, spacing between widgets, stretch to fit section, etc.
Desktop settings. The options that come by default in Elementor
Go to
- Seeker
- See page
Elementor PRO in depth
Seeing as the free version of Elementor has so many options and doesn’t feel like a demo or incomplete, is the PRO version worth investing in?
Let’s review the exclusive benefits of the PRO version of Elementor:
exclusive widgets
- Posts (for blog or portfolio)
- Portfolio
- Slides
- Contact and subscription forms
- Login
- Navigation menu
- Animated headers
- Price list
- Pricing table
- Flip box
- Call to action
- Media carousel
- Testimonial
- Carousel
- Countdown
- Buttons to share on social networks
- Blockquote
- Reviews (2)
- Facebook button
- Facebook Embed
- Facebook page
- Template (to import)
- Facebook Comments
Templates to edit every imaginable section of your site
Elementor PRO takes the template part to the next level, including the option to create headers, footers, blog posts, category archive pages, products, and much more.
This gives you full control over how you want the pages of your ENTIRE site to look.
Header and footer creator
Are you frustrated because you can’t adapt your header or footer exactly how you want? Or maybe you want to add a button, an extra text, or one that has a shadow, but it is very complicated with your current template.
With Elementor Pro you can create unlimited header and footer templates with the same visual editor. This means that you can add any widget you want and the options are unlimited.
You can also use one of the templates that are included and start editing it from its design.
Design your own blog post layouts
If you have a blog or want to create one, your content should look flawless, clean, and with an attractive layout for your readers.
With Elementor PRO you can create the template of your blog posts with the visual editor and dynamic fields such as Title, date, content, description, extract, etc.
Design your page files
Just as you can create blog post templates, you can also create templates for category archives pages, tags, authors, and much more.
With Elementor’s display conditions you can choose and customize the elements that are dynamically displayed.
Create contact forms and opt-ins
With Elementor PRO you have access to the shapes widget, which can perform different functions:
- Traditional forms of contact
- Subscription forms (opt-in forms) that synchronize with autoresponders such as Mailchimp, Drip, Convertkit, etc.
- Create polls with multiple-choice questions
Read more: Hire a hosting: how to choose the best hosting without being teased
Pop-ups with advanced rules
All the advantages of using the visual editor specifically focused to create all kinds of pop-ups with advanced rules and conditions.
You can also make them pop up by clicking any text or button and other advanced options.
Buttons to share in networks
If you want more Web traffic, users who consume your content must have an accessible way to share it on their social networks.
With these buttons, you can add any social network to your content and blog posts.
Widgets de Facebook
Facebook is the largest social network in the world and with these widgets, we can make it easier for users to comment, share, and like our content.
It includes a Facebook comment widget that you can put anywhere on your blog or website, posts, videos, your page feed, and much more.
Price Tables
If you are going to sell your products or services, you may have different pricing options with certain unique characteristics.
With Elementor PRO you have access to attractive tables with a great design that allows you to display your pricing options and increase your sales.
Widgets globales
One of the best features of Elementor Pro is the ability to design custom blocks and sections and save them as widgets. In this way, they can be added with a couple of clicks to any section of your website.
You can also use global widgets from third-party developers.
Motion and parallax effects
To give more life to your website and the elements of your design, we have the option of adding vertical and horizontal parallax effects. You can also add transparency, rotation, scale and blur effects and scroll-down
Exclusive Woocommerce tools
If you are going to create a virtual store with WordPress and Woocommerce, Elementor Pro includes exclusive widgets and the option to create all eCommerce pages in a personalized way with the visual editor of the plugin.
You can create an individual product page, catalog page, category page, etc.
All with Woocommerce widgets, which include:
- Product title (dynamic)
- Gallery
- Images
- Price (dynamic)
- Qualification
- Short description (dynamic)
- Description (dynamic)
- Add to cart buttons
- Additional Information
- Much more!
How much does Elementor PRO cost?
As we can see, although Elementor in its free version is very complete and can be enough in many cases depending on the website and project to be created, it is very clear that Elementor PRO includes functions, exclusive widgets, and features that make it worth 100 % worth investing in the license.
The cost depends on the number of sites that you are going to create with the page builder.
For website maintenance service contact us.