Qué es Elementor y cómo usarlo: guía para empezar

Si has buscado cómo diseñar una web en WordPress sin escribir código, la respuesta que más veces habrás encontrado tiene nombre propio. Pero, ¿qué es Elementor exactamente y por qué está instalado en más de diez millones de webs? Se trata de un constructor visual (page builder) para WordPress: un plugin que sustituye el editor estándar por un lienzo donde arrastras y sueltas elementos (títulos, imágenes, botones, formularios) y ves el resultado exacto en tiempo real, tal como lo verá tu visitante. Su éxito se explica por una combinación difícil de igualar: una versión gratuita muy capaz, una curva de aprendizaje suave y un ecosistema enorme de plantillas y complementos. En esta guía vamos a ver cómo funciona su editor, las diferencias reales entre Elementor Free y Elementor Pro, cómo diseñar tu primera página paso a paso, y también sus inconvenientes (que los tiene, empezando por el rendimiento) para que decidas con conocimiento de causa si es la herramienta adecuada para tu proyecto.

Qué es Elementor y cómo encaja en WordPress

WordPress trae de serie el editor de bloques (Gutenberg), que permite maquetar contenidos apilando bloques. Elementor va varios pasos más allá: es un editor de páginas completo que funciona por encima de tu tema y te da control visual sobre prácticamente todo: márgenes, tipografías, colores, fondos, animaciones y diseño responsive, sin tocar una línea de 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.

La estructura de todo diseño en Elementor es una jerarquía de tres niveles que conviene entender desde el primer día:

• Secciones (o contenedores): las franjas horizontales que dividen la página. Desde 2023 Elementor usa contenedores basados en flexbox, más flexibles y ligeros que las secciones clásicas.
• Columnas: divisiones internas de cada sección para organizar el contenido en rejilla.
• Widgets: los elementos finales que el visitante ve: título, texto, imagen, botón, vídeo, mapa, formulario…

Cada nivel tiene tres pestañas de ajustes: Contenido (qué se muestra), Estilo (colores, tipografía, bordes) y Avanzado (márgenes, animaciones, visibilidad por dispositivo). Cuando interiorizas ese patrón, sabes usar el 90% de Elementor.

Elementor Free vs Elementor Pro: qué incluye cada uno

La pregunta inevitable. La versión gratuita no es una demo: incluye el editor completo, más de 40 widgets y las herramientas responsive. La versión Pro (desde unos 59 $/año para un sitio) desbloquea lo que convierte a Elementor en una herramienta profesional:

La frontera práctica es clara: con Free diseñas páginas sueltas estupendas (una landing, una página de servicios), pero el header, el footer y las plantillas del blog siguen dependiendo de tu tema. Con Pro, Elementor pasa a controlar el sitio entero gracias al Theme Builder: diseñas visualmente la cabecera, el pie, la plantilla de las entradas y hasta las fichas de WooCommerce.

¿Necesitas Pro? Si es tu primera web o una landing puntual, empieza con Free; siempre puedes ampliar. Si vives de hacer webs o quieres control total del diseño sin depender del tema, Pro se amortiza en el primer proyecto. Alternativa intermedia: mantener Free y cubrir los huecos con un buen tema (los formularios, por ejemplo, se resuelven con un plugin gratuito de formularios).

Cómo usar Elementor: tu primera página paso a paso

Vamos a lo práctico. Con Elementor instalado y activado:

1. Crea la página: Páginas → Añadir nueva, ponle título y pulsa “Editar con Elementor”.
2. Elige plantilla de página: 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. Añade el primer contenedor: 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. Arrastra los widgets: desde el panel izquierdo, arrastra un widget Título al contenedor y escribe tu mensaje principal. Debajo, un widget Texto con el subtítulo y un widget Botón con tu llamada a la acción.
5. Dale estilo: selecciona el contenedor y, en la pestaña Estilo, añade un fondo (color, degradado o imagen). Selecciona cada widget y ajusta tipografía y colores en su propia pestaña Estilo. Los cambios se ven al instante.
6. Duplica para crear las siguientes secciones: clic derecho sobre el contenedor → Duplicar, y modifica el contenido. Duplicar y editar es mucho más rápido que crear desde cero, y de paso mantiene la coherencia visual.
7. Revisa la versión móvil: en la barra inferior, activa el modo responsive y comprueba la página en tableta y móvil. Puedes ajustar tamaños de letra, márgenes e incluso ocultar elementos por dispositivo (pestaña Avanzado → Responsive). No publiques sin este paso: más de la mitad de tus visitas llegarán desde el móvil.
8. Publica: botón verde “Publicar”. Para seguir editando después, entra en la página y pulsa de nuevo “Editar con Elementor”.

El atajo de las plantillas

Si el lienzo en blanco te bloquea, usa la biblioteca: el icono de carpeta en el lienzo abre decenas de plantillas de páginas y bloques prediseñados que insertas con un clic y adaptas a tu contenido. Es la forma más rápida de conseguir un resultado profesional mientras aprendes. Elementor también permite guardar tus propias secciones como plantillas reutilizables: diseña una vez tu bloque de testimonios y úsalo en todas las páginas.

Cinco buenas prácticas que marcan la diferencia

1. Define los ajustes globales antes de diseñar: en el menú del editor (☰) → Ajustes del sitio, configura los colores globales y las tipografías globales. Si luego cambias el color corporativo, se actualiza toda la web de una vez. Saltarse esto condena a editar página por página.
2. Menos secciones y más limpias: las webs profesionales no llevan quince animaciones. Espacios en blanco generosos, dos tipografías como máximo y una paleta corta ganan siempre. Si necesitas inspiración sobre qué tema base combinar con Elementor, mira nuestra guía para elegir el tema perfecto para tu web WordPress (con Elementor, cuanto más ligero el tema, mejor: Hello Elementor, Astra o GeneratePress).
3. Optimiza cada imagen antes de subirla: los diseños de Elementor son intensivos en imágenes, y ahí se juega la velocidad. Redimensiona a las medidas reales de uso y convierte a WebP con nuestro conversor de imágenes a WebP gratuito antes de subirlas a la biblioteca de medios.
4. Usa contenedores flexbox, no las secciones antiguas: si tu instalación aún ofrece ambas, actívalos en Elementor → Ajustes → Características. Generan menos código y dan más control.
5. No mezcles constructores: elige Elementor o Gutenberg para las páginas de diseño, pero no alternes ambos en la misma página. Y para las entradas del blog, el editor de bloques normal es más que suficiente (y más rápido).

Los inconvenientes de Elementor (sí, existen)

Elementor no es gratis en términos de rendimiento, y es honesto decirlo:

• Peso extra: un constructor visual carga CSS y JavaScript adicionales en cada página. Una página hecha con Elementor siempre pesará más que la misma página en Gutenberg puro. Se mitiga con un tema ligero, imágenes optimizadas y un buen plugin de caché como WP Rocket, pero el sobrecoste existe.
• Dependencia (lock-in): si algún día desactivas Elementor, tus páginas no desaparecen, pero pierden todo el diseño y queda el contenido con restos de maquetación. Cambiar de constructor implica rehacer las páginas.
• Coste anual de Pro: la licencia es de suscripción; si dejas de pagar, los widgets Pro dejan de recibir actualizaciones (el diseño ya creado se conserva).
• Exceso de libertad: en manos inexpertas, tanta opción de diseño produce webs recargadas e incoherentes. Los ajustes globales y la contención son el antídoto.

La alternativa a considerar antes de decidir: el editor de bloques de WordPress ha mejorado muchísimo y, con temas de bloques modernos, cubre diseños sencillos con mejor rendimiento. Elementor gana cuando necesitas control visual fino, plantillas complejas o construir sin limitaciones el sitio completo. Para profundizar en el editor nativo, la documentación oficial de WordPress en es.wordpress.org es un buen punto de partida.

Elementor y la velocidad: checklist de optimización

Como el rendimiento es la crítica número uno, aquí va una lista concreta para que tu web con Elementor cargue rápido:

• Tema ligero pensado para Elementor (Hello Elementor es el oficial).
• Contenedores flexbox activados y el mínimo de secciones anidadas.
• Imágenes en WebP, redimensionadas y con lazy loading (activo por defecto en WordPress).
• Plugin de caché configurado (caché de página + minificación de CSS/JS).
• Tipografías: máximo dos familias, y si es posible alojadas localmente (Elementor → Ajustes permite desactivar Google Fonts externas).
• 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).
• Mide antes y después con PageSpeed Insights; los ajustes de PHP para acelerar WordPress también ayudan si tu hosting va justo.

Con esta lista aplicada, una web con Elementor puede puntuar perfectamente en verde en Core Web Vitals. Sin ella, es fácil acabar en los 4-6 segundos de carga que espantan visitas.

Preguntas frecuentes

¿Elementor es gratis?

Sí, la versión base es gratuita y sin límite de páginas ni de tiempo: editor completo, más de 40 widgets y diseño responsive. La versión Pro, desde unos 59 $/año, añade Theme Builder, formularios, popups, WooCommerce Builder y widgets avanzados. Muchísimas webs funcionan solo con la versión gratuita.

¿Elementor hace la web lenta?

Añade peso, eso es un hecho, pero la lentitud no es inevitable: con un tema ligero, imágenes en WebP, contenedores flexbox y un plugin de caché bien configurado, una web con Elementor carga en menos de dos segundos sin problema. Las webs lentas con Elementor suelen sumar tema pesado, addons a mansalva e imágenes sin optimizar.

¿Puedo usar Elementor con cualquier tema de WordPress?

Con casi todos, sí, pero no todos rinden igual. Los temas pensados para convivir con él (Hello Elementor, Astra, GeneratePress, Blocksy, Kadence) son ligeros y no interfieren en el diseño. Los temas multipropósito antiguos y pesados pueden duplicar estilos y ralentizar. Si empiezas de cero, elige uno de los ligeros.

¿Qué pasa si desinstalo Elementor?

El contenido (textos e imágenes) no se pierde: queda almacenado en WordPress. Lo que se pierde es toda la maquetación: las páginas se mostrarán como texto corrido con el diseño del tema. Por eso conviene decidir el constructor al principio del proyecto y no como experimento a mitad de camino.

Conclusión

Sai già cos'è Elementor: il costruttore visuale che ha reso il design web professionale alla portata di chiunque sappia trascinare e rilasciare. La sua versione gratuita è sufficiente per creare pagine accattivanti dal primo giorno; la Pro trasforma WordPress in uno studio di design completo con intestazioni, modelli e popup personalizzati. In cambio richiede due compromessi: un sovrappeso tecnico che si controlla con buone pratiche (tema leggero, WebP, cache) e una dipendenza che conviene assumere consapevolmente. Se la tua priorità è la libertà creativa senza codice, è la migliore porta d'ingresso che esista; se il tuo sito web è semplice e le prestazioni sono tutto, valuta prima l'editor di blocchi nativo. Qual