What is Elementor and how to use it: a getting started guide

If you've searched for how to design a website in WordPress without writing code, the answer you've most often found has a name of its own. But what exactly is Elementor and why is it installed on more than ten million websites? It is a visual builder (page builder) for WordPress: a plugin that replaces the standard editor with a canvas where you drag and drop elements (titles, images, buttons, forms) and see the exact result in real time, just as your visitor will see it. Its success is explained by a combination difficult to match: a very capable free version, a gentle learning curve, and a huge ecosystem of templates and add-ons. In this guide, we will see how its editor works, the real differences between Elementor Free and Elementor Pro, how to design your first page step by step, and also its drawbacks (which it has, starting with performance) so that you can decide with full knowledge if it is the right tool for your project.

What is Elementor and how it fits into WordPress

WordPress comes with the block editor (Gutenberg) by default, which allows you to lay out content by stacking blocks. Elementor goes several steps further: it's a complete page editor that works on top of your theme and gives you visual control over practically everything: margins, typography, colors, backgrounds, animations, and responsive design, without touching a line of CSS.

Técnicamente es un plugin más: se instala desde el repositorio oficial (Plugins → Añadir nuevo → “Elementor”), y a partir de ahí cualquier página o entrada muestra el botón “Editar con Elementor”. Al pulsarlo se abre su editor propio: la página a la derecha, y un panel de widgets y ajustes a la izquierda.

The structure of every design in Elementor is a three-level hierarchy that is worth understanding from day one:

• Sections (or containers): the horizontal strips that divide the page. Since 2023, Elementor uses flexbox-based containers, more flexible and lighter than classic sections.
• Columns: internal divisions of each section to organize content in a grid.
• Widgets: the final elements that the visitor sees: title, text, image, button, video, map, form…

Each level has three settings tabs: Content (what is displayed), Style (colors, typography, borders), and Advanced (margins, animations, device visibility). When you internalize this pattern, you know how to use 90% of Elementor.

Elementor Free vs Elementor Pro: what each includes

The inevitable question. The free version is not a demo: it includes the complete editor, more than 40 widgets, and responsive tools. The Pro version (starting from about $59/year for one site) unlocks what makes Elementor a professional tool:

The practical boundary is clear: with Free you design great standalone pages (a landing page, a services page), but the header, footer, and blog templates still depend on your theme. With Pro, Elementor takes control of the entire site thanks to the Theme Builder: you visually design the header, footer, post templates, and even WooCommerce product pages.

Do you need Pro? If it's your first website or a one-off landing page, start with Free; you can always upgrade. If you make a living building websites or want total design control without depending on the theme, Pro pays for itself in the first project. Intermediate alternative: keep Free and fill the gaps with a good theme (forms, for example, can be solved with a free form plugin).

How to use Elementor: your first page step by step

Let's get practical. With Elementor installed and activated:

1. Create the page: Páginas → Añadir nueva, ponle título y pulsa “Editar con Elementor”.
2. Choose page template: en Ajustes (icono de engranaje, abajo a la izquierda), selecciona “Elementor Canvas” si quieres un lienzo en blanco sin cabecera ni pie (ideal para landings), o “Ancho completo” para conservar el header y footer de tu tema.
3. Add the first container: pulsa el “+” del lienzo y elige la estructura de columnas (una sola, dos al 50%, tres…). Este contenedor será tu sección de portada (hero).
4. Drag the widgets: from the left panel, drag a Title widget to the container and type your main message. Below, a Text widget with the subtitle and a Button widget with your call to action.
5. Style it: select the container and, in the Style tab, add a background (color, gradient, or image). Select each widget and adjust typography and colors in its own Style tab. Changes are visible instantly.
6. Duplicate to create subsequent sections: right-click on the container → Duplicate, and modify the content. Duplicating and editing is much faster than creating from scratch, and it also maintains visual consistency.
7. Review the mobile version: in the bottom bar, activate responsive mode and check the page on tablet and mobile. You can adjust font sizes, margins, and even hide elements by device (Advanced tab → Responsive). Don't publish without this step: more than half of your visits will come from mobile.
8. Publish: botón verde “Publicar”. Para seguir editando después, entra en la página y pulsa de nuevo “Editar con Elementor”.

The template shortcut

If the blank canvas blocks you, use the library: the folder icon on the canvas opens dozens of pre-designed page templates and blocks that you insert with a click and adapt to your content. It's the fastest way to achieve a professional result while learning. Elementor also allows you to save your own sections as reusable templates: design your testimonials block once and use it on all pages.

Five good practices that make a difference

1. Define global settings before designing: in the editor menu (☰) → Site Settings, configure global colors and global fonts. If you later change the corporate color, the entire website updates at once. Skipping this condemns you to edit page by page.
2. Fewer and cleaner sections: professional websites don't have fifteen animations. Generous white spaces, a maximum of two fonts, and a short palette always win. If you need inspiration on which base theme to combine with Elementor, check out our guide for choosing the perfect theme for your WordPress website (with Elementor, the lighter the theme, the better: Hello Elementor, Astra, or GeneratePress).
3. Optimize every image before uploading it: Elementor designs are image-intensive, and that's where speed is played. Resize to actual usage dimensions and convert to WebP with our image to WebP converter free before uploading them to the media library.
4. Use flexbox containers, not the old sections: if your installation still offers both, activate them in Elementor → Settings → Features. They generate less code and give more control.
5. Don't mix builders: choose Elementor or Gutenberg for design pages, but don't alternate both on the same page. And for blog posts, the normal block editor is more than enough (and faster).

The drawbacks of Elementor (yes, they exist)

Elementor is not free in terms of performance, and it's honest to say it:

• Extra weight: a visual builder loads additional CSS and JavaScript on each page. A page made with Elementor will always weigh more than the same page in pure Gutenberg. This is mitigated with a light theme, optimized images, and a good cache plugin like WP Rocket, but the extra cost exists.
• Dependency (lock-in): if you ever deactivate Elementor, your pages don't disappear, but they lose all their design and the content remains with layout remnants. Changing builders means redoing the pages.
• Annual Pro cost: the license is subscription-based; if you stop paying, Pro widgets stop receiving updates (already created designs are preserved).
• Excessive freedom: in inexperienced hands, so many design options produce overloaded and inconsistent websites. Global settings and restraint are the antidote.

The alternative to consider before deciding: the WordPress block editor has improved a lot and, with modern block themes, covers simple designs with better performance. Elementor wins when you need fine visual control, complex templates, or to build the complete site without limitations. To delve deeper into the native editor, the official WordPress documentation at es.wordpress.org is a good starting point.

Elementor and speed: optimization checklist

Since performance is the number one criticism, here's a specific list to make your Elementor website load fast:

• Lightweight theme designed for Elementor (Hello Elementor is the official one).
• Flexbox containers activated and the minimum of nested sections.
• Images in WebP, resized, and with lazy loading (active by default in WordPress).
• Configured cache plugin (page cache + CSS/JS minification).
• Fonts: maximum two families, and if possible, hosted locally (Elementor → Settings allows deactivating external Google Fonts).
• Desactiva los widgets Pro que no uses y evita apilar addons de terceros (cada paquete de “200 widgets extra” es peso que cargan todas tus páginas).
• Measure before and after with PageSpeed Insights; the PHP settings to speed up WordPress also help if your hosting is just enough.

With this list applied, a website with Elementor can perfectly score green in Core Web Vitals. Without it, it's easy to end up with 4-6 second load times that scare away visitors.

Frequently Asked Questions

Is Elementor free?

Yes, the base version is free and without page or time limits: full editor, more than 40 widgets, and responsive design. The Pro version, starting from about $59/year, adds Theme Builder, forms, popups, WooCommerce Builder, and advanced widgets. Many websites run only with the free version.

Does Elementor make the website slow?

It adds weight, that's a fact, but slowness is not inevitable: with a light theme, WebP images, flexbox containers, and a well-configured cache plugin, a website with Elementor loads in less than two seconds without a problem. Slow websites with Elementor usually combine a heavy theme, tons of addons, and unoptimized images.

Can I use Elementor with any WordPress theme?

With almost all of them, yes, but not all perform equally. Themes designed to coexist with it (Hello Elementor, Astra, GeneratePress, Blocksy, Kadence) are lightweight and do not interfere with the design. Old, heavy multipurpose themes can duplicate styles and slow things down. If you're starting from scratch, choose one of the lightweight ones.

What happens if I uninstall Elementor?

The content (texts and images) is not lost: it remains stored in WordPress. What is lost is all the layout: the pages will be displayed as plain text with the theme's design. That's why it's advisable to decide on the builder at the beginning of the project and not as a mid-way experiment.

Conclusion

You already know what Elementor is: the visual builder that has made professional web design accessible to anyone who knows how to drag and drop. Its free version is enough to create attractive pages from day one; the Pro version turns WordPress into a complete design studio with custom headers, templates, and popups. In return, it demands two tolls: a technical overhead that can be controlled with good practices (light theme, WebP, cache) and a dependency that should be consciously assumed. If your priority is creative freedom without code, it is the best entry point available; if your website is simple and performance is everything, consider the native block editor first. Whatever your choice, the method is the same: global settings first, content design afterward, and mobile always verified before publishing.