Tutorial de Elementor en español: guía desde cero (2026)
Casi todos los tutoriales de Elementor en español que vas a encontrar todavía enseñan “secciones y columnas” — el sistema que Elementor sustituyó hace años y que está en retirada. Si aprendes con un tutorial desactualizado, vas a tener que reaprender la interfaz real en cuanto abras el editor de verdad. Esta guía usa la interfaz actual desde el primer paso.
Llevo más de 10 años enseñando WordPress y Elementor a alumnos que parten de cero, y el bloqueo más habitual no es el editor en sí — es intentar aprender con una guía que muestra una interfaz de hace tres versiones. Por eso esta guía está construida sobre la versión que vas a ver tú al instalar hoy.
Qué es Elementor y qué puedes hacer con la versión gratuita
Elementor es el maquetador visual (page builder) más usado de WordPress: según el repositorio oficial de wordpress.org, supera los 10 millones de instalaciones activas y va ya por la versión 4.2.1. Funciona por “arrastrar y soltar” — construyes la página moviendo bloques con el ratón, sin escribir código.
La versión gratuita no es una demo limitada: incluye más de 40 widgets (texto, imagen, botón, galería, testimonios, contador, tabs, acordeón, mapa de Google…) y es suficiente para montar una web completa de varias páginas. La versión Pro añade el Theme Builder (cabeceras y pies personalizados) y widgets adicionales, pero no la necesitas para este tutorial.
WordPress 6.8 o superior y PHP 7.4 como mínimo — aunque se recomienda PHP 8.3+ para que vaya fluido. Si tu hosting es de los últimos 2-3 años, cumples de sobra.
Instalar el plugin de Elementor en WordPress paso a paso
Entra en Plugins → Añadir nuevo
Desde el escritorio de WordPress, en el menú lateral izquierdo.
Busca “Elementor” e instala el oficial
Verifica que el autor sea “Elementor.com” — hay plugins de terceros con nombres parecidos.
Actívalo y sigue el asistente inicial
Te pedirá tu nombre y si quieres suscribirte a novedades — ambos pasos son opcionales, puedes saltarlos.
Crea una página nueva y pulsa “Editar con Elementor”
El botón aparece justo debajo del título de cualquier página o entrada nueva.
La interfaz del editor: panel, widgets y navegador de capas
Al entrar al editor vas a ver tres zonas: a la izquierda, el panel con los widgets disponibles para arrastrar; en el centro, el lienzo, que es la página tal y como se va a ver; y en la parte inferior del panel, un icono de capas (el “navegador de estructura”) que te muestra el árbol completo de contenedores y widgets de la página — muy útil cuando la página crece y te pierdes entre bloques anidados.
Cada elemento que seleccionas en el lienzo abre tres pestañas en el panel: Contenido (el texto o imagen en sí), Estilo (colores, tipografía, espaciados) y Avanzado (márgenes, animaciones, CSS personalizado). El 90% del trabajo diario ocurre en las dos primeras.
Tu primera página: contenedor, título, imagen y botón
Aquí está la diferencia real frente a un tutorial antiguo. Desde la versión 3.6, Elementor sustituyó las “secciones con columnas” por el Container: un único bloque flexible (basado en CSS Flexbox) que puedes organizar en fila o en columna sin anidar secciones dentro de columnas dentro de secciones. Es el sistema por defecto hoy, y el antiguo está en retirada progresiva.
Añade tu primer Container
Pulsa el icono “+” en el lienzo vacío. Elige la dirección: “fila” (elementos uno al lado del otro) o “columna” (uno debajo del otro).
Arrastra el widget “Título”
Escribe el titular de tu página y ajusta el tamaño de fuente desde la pestaña Estilo.
Añade el widget “Imagen” dentro del mismo Container
Como el Container es flexible, la imagen se coloca automáticamente al lado o debajo del título según la dirección que elegiste — sin tener que crear una columna aparte.
Cierra con el widget “Botón”
Define el texto, el enlace de destino y el color desde Estilo — es el elemento que va a convertir visitas en clics.
Widgets básicos que vas a usar en el 90% de tus páginas
De los más de 40 widgets gratuitos, estos son los que vas a repetir en casi cualquier página:
| Widget | Para qué sirve |
|---|---|
| Título / Editor de texto | El contenido escrito de la página: titulares y párrafos. |
| Imagen / Galería | Contenido visual, con opciones de recorte y enlace. |
| Botón | La llamada a la acción — el elemento que convierte visitas en clics. |
| Iconos con texto | Listas de características o servicios con apoyo visual. |
| Testimonios | Prueba social — reseñas de clientes o alumnos. |
| Acordeón / Tabs | Condensar información (como una FAQ) sin alargar la página. |
| Google Maps | Ubicación física, útil en páginas de contacto de negocios locales. |
No necesitas memorizar los 40: con estos siete resuelves la mayoría de páginas de una web de servicios, portfolio o pequeño negocio.
Elementor y rendimiento: lo que sí depende de ti
Una crítica habitual a los page builders es que “ralentizan la web”. Es cierto solo en parte: Elementor genera algo más de código que escribir HTML a mano, pero en la mayoría de webs reales el cuello de botella real está en otro sitio — imágenes sin comprimir, demasiados plugins activos a la vez, o un hosting con recursos justos. Con Containers en vez de secciones anidadas, además, el HTML generado es más ligero que en la interfaz antigua, así que empezar hoy con la versión actual ya juega a tu favor.
Errores típicos de principiante (y cómo evitarlos)
Lo que más se repite en los primeros proyectos
- Anidar demasiados contenedores: cada contenedor extra añade peso y complejidad. Si puedes resolverlo con un solo Container en fila, no crees tres.
- No revisar el diseño responsive: Elementor muestra iconos de escritorio/tablet/móvil arriba del editor — actívalos antes de dar la página por terminada, porque lo que se ve bien en escritorio puede romperse en móvil.
- Subir imágenes sin comprimir: una imagen de varios MB sin optimizar es la causa más común de que una web hecha con Elementor vaya lenta — no es el plugin, es el peso de las imágenes.
- Mezclar secciones antiguas con Containers nuevos en la misma página: funciona, pero complica el mantenimiento. Si empiezas un proyecto desde cero, usa Containers en toda la página desde el principio. Si heredas una web antigua con secciones, Elementor ofrece una conversión oficial: pasa el ratón sobre la sección, pulsa el icono de editar, despliega “Layout” y elige “Convert”. Genera una copia en formato Container justo debajo de la sección original, para que compares los dos antes de borrar la vieja — es un proceso de un solo sentido, así que revisa bien antes de eliminar el original.
- No guardar como plantilla los bloques que vas a repetir: si vas a usar la misma cabecera en varias páginas, guárdala como plantilla reutilizable en vez de reconstruirla cada vez.
Preguntas frecuentes
¿Elementor gratis es suficiente para una web completa?
Para la mayoría de webs de pocas páginas, sí. La versión gratuita incluye más de 40 widgets y el sistema completo de Containers. La versión Pro solo se justifica cuando necesitas Theme Builder (cabecera/pie personalizados sin código) o formularios avanzados integrados.
¿Qué diferencia hay entre Container y las secciones antiguas de Elementor?
Las secciones necesitaban anidar columnas dentro de secciones para organizar el contenido. El Container hace lo mismo con un solo bloque flexible (Flexbox), controlando fila/columna, alineación y espaciado desde un único panel — menos anidamiento, menos código generado y mejor rendimiento.
¿Elementor funciona con cualquier tema de WordPress?
Sí, es compatible con cualquier tema activo, aunque los temas ligeros y orientados a page builders (como Astra o Hello Elementor) suelen dar mejor rendimiento porque no cargan estilos propios que compitan con los de Elementor.
¿Necesito saber programar para usar Elementor?
No. Todo el editor funciona por arrastrar y soltar, sin escribir una línea de código. Solo hace falta código si quieres personalizaciones muy concretas que los widgets no cubren, y eso es opcional.
¿Cuánto cuesta Elementor Pro?
Tiene varios planes según el número de sitios donde lo vayas a usar, con renovación anual. Antes de pagar, valora si de verdad necesitas el Theme Builder o los widgets Pro — con este tutorial y la versión gratuita puedes construir una web completa sin gastar nada.
En resumen
- Instala el Elementor oficial desde Plugins → Añadir nuevo, sin coste, en menos de 5 minutos.
- Aprende con Containers, no con secciones/columnas: es el sistema por defecto desde la v3.6 y el que vas a ver al abrir el editor.
- La versión gratuita (40+ widgets) es suficiente para una web completa de varias páginas.
- Activa la vista responsive antes de dar cualquier página por terminada.
- Comprime las imágenes: es la causa más habitual de que una web con Elementor vaya lenta.
¿Quieres ir más allá de lo básico?
Curso de Elementor
De los Containers a las plantillas globales, con proyectos reales guiados paso a paso.
Respuestas