Cómo usar Elementor desde cero: guía para principiantes

Cómo usar Elementor desde cero sin sentirte abrumado

La primera vez que abrí Elementor pensé que era complicado. Tenía decenas de botones, paneles que aparecían y desaparecían, ajustes anidados dentro de pestañas, y una cantidad de widgets que me parecía exagerada. Hoy me río de ese miedo inicial. Elementor es uno de los constructores más intuitivos que existen para WordPress, pero como todo lo intuitivo, hay que sentarse a entender la lógica que lo sostiene. Una vez que pillas esa lógica, todo el resto encaja.

En esta guía te voy a contar cómo aprendí a usarlo y cómo lo enseño hoy a mis clientes en Lima cuando me piden capacitación. Vamos a ir por partes. Instalación, interfaz, secciones, contenedores, widgets, responsive, plantillas, primer diseño completo y los errores que casi todos cometen al principio. Apunta a 2026, porque el plugin ya pasó por varias actualizaciones importantes y hay cosas que ya no se hacen como hace tres años.

Antes de empezar: lo que necesitas tener listo

Para usar Elementor necesitas WordPress instalado. Suena obvio pero lo aclaro porque muchas personas creen que Elementor es un sistema independiente. No lo es. Es un plugin que vive dentro de WordPress y necesita un dominio, un hosting y la instalación base del CMS funcionando.

Te recomiendo un hosting con al menos PHP 8.3 instalado, que es la versión que mejor rendimiento ofrece en 2026. Si tu proveedor todavía usa PHP 7.4, vas a poder usar Elementor pero notarás que la edición es más lenta. Pídele a tu proveedor que actualice la versión antes de instalar el plugin.

También necesitas un tema base. Lo ideal es usar Hello Theme, que es el tema oficial de Elementor. Es minimalista, pesa muy poco y está diseñado para ceder todo el control al constructor. Si usas un tema cargado como Avada o Divi, vas a tener conflictos de estilos y el sitio va a pesar el doble sin razón.

Con eso listo, vas al panel de WordPress, abres la sección de plugins, buscas Elementor, lo instalas y lo activas. Aparece un asistente de bienvenida que te ofrece crear tu primera página. Puedes seguirlo o cerrarlo y comenzar manualmente. Para aprender desde cero, prefiero el camino manual porque obliga a entender dónde está cada cosa.

La interfaz de Elementor por dentro

Cuando entras a editar una página con Elementor, ves dos zonas principales. A la izquierda, un panel con tres pestañas. Widgets, donde están todos los elementos que puedes arrastrar. Plantillas, donde aparecen las prearmadas y las que tú hayas guardado. Historial, con el registro de cambios y la opción de revisión.

A la derecha, una zona blanca que es tu lienzo. Ahí es donde aparece la vista previa de lo que estás construyendo. Lo que arrastras desde el panel izquierdo cae en el lienzo y se vuelve parte de la página.

En la parte inferior izquierda hay una barra con varias opciones. Configuración de la página, modo navegador estructural, historial de revisiones, modo responsive, ver previsualización en una pestaña nueva y publicar o actualizar. Esta última es donde la mayoría de principiantes se traba porque a veces hacen cambios y olvidan presionar publicar. El cambio se ve en el editor pero no en el sitio público.

En la esquina superior izquierda hay un ícono con tres líneas que abre el menú principal. Desde ahí puedes acceder a configuración del sitio, donde defines tipografías globales, colores globales, ajustes de fondo y otras decisiones que se aplican a todo el sitio. Este menú es uno de los más infravalorados. Usarlo bien te ahorra horas de trabajo repetitivo.

Secciones, columnas y contenedores: el corazón de Elementor

Para entender Elementor hay que entender su sistema de estructura. Durante años funcionó con el modelo de secciones y columnas. Una sección era una franja horizontal que ocupaba el ancho de la página. Dentro de la sección había columnas, y dentro de las columnas iban los widgets.

Desde hace un par de años Elementor empuja un modelo nuevo basado en contenedores con tecnología flexbox. Un contenedor es más flexible que el viejo sistema porque puedes anidar contenedores dentro de contenedores, orientarlos en horizontal o vertical, definir cómo se distribuyen los elementos dentro y crear layouts complejos con muchísimo menos código.

Mi recomendación clara para quien empieza en 2026. Aprende directamente con contenedores. Olvida las secciones y columnas. Los contenedores son el futuro del plugin y todas las plantillas nuevas vienen armadas con ese sistema. Para activarlos, vas a la configuración avanzada de Elementor y verificas que los contenedores estén habilitados. Por defecto ya vienen activados en las instalaciones más recientes.

Para crear un contenedor, en el lienzo presionas el botón con el signo más. Te ofrece varias estructuras predefinidas. Una columna, dos columnas, tres columnas, con distintas proporciones. Elige la que más se acerque a lo que quieres y luego ajustas. Dentro de cada contenedor puedes arrastrar widgets o anidar más contenedores.

Los widgets esenciales que vas a usar todo el tiempo

Elementor tiene decenas de widgets, pero al inicio vas a usar siempre los mismos. Te paso los que más uso yo y los que enseño primero.

El widget Título permite poner encabezados H1, H2, H3 con opciones de alineación, color, tamaño, sombras y efectos. El widget Texto editor es el más básico y se comporta como un editor enriquecido común. El widget Imagen sube fotos y permite añadir enlaces, captions y bordes. El widget Botón crea llamados a la acción con texto, color, hover effect, iconos y enlaces. El widget Iconos pinta íconos individuales con tamaño y color personalizables.

Después están los widgets de medios. Video acepta YouTube, Vimeo o archivos propios. Galería organiza fotos en formato grid. Carrusel de imágenes muestra un slider con varias fotos.

Y los de contenido más complejo. Espaciador deja vacíos entre elementos. Divisor crea una línea horizontal. Mapa de Google embebe un mapa. Acordeón muestra contenido colapsable. Pestañas organizan contenido en pestañas horizontales. Para los formularios básicos puedes instalar WPForms Lite, que se integra bien sin pagar Pro.

Cada widget tiene tres pestañas de configuración. Contenido, donde defines qué muestra. Estilo, donde defines cómo se ve, colores, fuentes, tamaños. Avanzado, donde controlas margen, padding, animaciones, efectos de hover, visibilidad responsive, ID, clases CSS y otros ajustes finos. Esta lógica de tres pestañas se repite en todos los widgets y entenderla es clave para no perderse.

El modo responsive: diseñar para todos los dispositivos

En 2026 más del 70 por ciento del tráfico web viene desde dispositivos móviles. Si tu sitio no se ve bien en celular, perdiste la batalla antes de empezar. Elementor incluye un modo de previsualización que te permite ver y ajustar el diseño para escritorio, tablet y móvil.

En la barra inferior izquierda hay un ícono con la silueta de un monitor. Al hacer clic se despliegan las opciones de dispositivo. Al cambiar al modo móvil, el lienzo se reduce al tamaño de un celular y puedes ajustar tamaños de fuente, padding, márgenes y visibilidad de cada elemento solo para esa vista.

Los cambios que hagas en el modo móvil no afectan a las otras vistas. Esto es importante. Si reduces el tamaño de un título en móvil, en escritorio sigue con el tamaño original. Es un sistema de capas que respeta cada pantalla.

Mi consejo. Diseña primero en escritorio, ajusta luego en tablet y termina afinando móvil. Pero cuando ya tienes experiencia, te recomiendo invertir el orden. Diseña primero en móvil y escala hacia arriba. Te obliga a priorizar lo esencial y termina dando resultados más limpios.

Plantillas: el atajo que cambia todo

Elementor incluye una biblioteca de plantillas que te ahorra horas. Para acceder, presionas el ícono de la carpeta gris en el lienzo. Se abre una ventana modal con tres pestañas. Bloques, que son secciones individuales como encabezados, equipos, precios, testimonios. Páginas, que son layouts completos para landings, sobre nosotros, servicios, contacto. Mis plantillas, donde guardas las que tú creas.

Las plantillas gratuitas se pueden importar al instante. Eliges una, le das insertar y aparece en el lienzo lista para editar. Cambias los textos, las imágenes, los colores, y la conviertes en tuya. Es la forma más rápida de aprender porque ves cómo profesionales armaron cada estructura.

Te aconsejo no importar plantillas y dejarlas tal cual. Pierde la gracia. La idea es usarlas como base, entender cómo están armadas y luego personalizarlas. Si copias tal cual, vas a tener un sitio idéntico a miles de otros.

Tu primer diseño completo paso a paso

Voy a guiarte por un ejercicio práctico. Vamos a armar una página simple de presentación, con un encabezado, una sección sobre ti, tres servicios y un formulario de contacto.

Paso uno. Crea una página nueva en WordPress, dale un título y al lado del editor encuentras el botón Editar con Elementor. Presiona y entras al constructor.

Paso dos. Crea el primer contenedor con una columna. Dentro arrastras un widget de título y escribes algo como Bienvenido a mi web. Lo configuras como H1, tamaño grande, color oscuro y alineación centrada. Debajo del título, arrastras un widget de texto editor con un párrafo breve de presentación. Y debajo, un widget de botón con el texto Contáctame.

Paso tres. Creas un segundo contenedor con dos columnas. En la izquierda colocas una imagen tuya. En la derecha, un título con tu nombre y un texto editor con tu historia profesional. Esto se vuelve la sección Sobre mí.

Paso cuatro. Creas un tercer contenedor con tres columnas. En cada columna colocas un ícono representativo, un título corto con el nombre del servicio y un párrafo breve describiendo lo que ofreces. Esta es la sección Servicios.

Paso cinco. Creas un último contenedor con una columna. Dentro va un título Contáctame y debajo un widget de formulario, ya sea de WPForms Lite o de algún otro plugin compatible.

Paso seis. Publicas. Antes de eso, revisas la vista en tablet y móvil, ajustas tamaños de fuente y espaciados, te aseguras que todo se vea ordenado y luego presionas publicar.

Felicitaciones. Acabas de armar tu primera página completa con Elementor. La lógica que aprendiste aquí se repite en proyectos mucho más complejos.

Errores que casi todos cometen al principio

El primer error es usar márgenes en lugar de padding. Margen es el espacio fuera del elemento, padding es el espacio dentro. Para separar contenedores entre sí, usa padding del contenedor padre, no margen del elemento hijo. Te ahorras pesadillas responsive.

El segundo error es no usar los estilos globales. Si defines tipografías y colores en la configuración global, cualquier cambio se propaga a todo el sitio. Si por el contrario asignas colores y fuentes en cada widget individual, cambiar la paleta más adelante te puede tomar días.

El tercer error es sobrecargar la página de animaciones. Es muy tentador animar todo cuando descubres que Elementor lo permite. Pero un sitio con efectos por todos lados se vuelve cansador y lento. Usa animaciones con criterio, en elementos clave, no en todos.

El cuarto error es ignorar la vista móvil hasta el final. Empieza pensando en móvil desde el inicio. Y revisa la versión móvil cada vez que terminas una sección, no al final del proyecto.

El quinto error es instalar demasiados addons de terceros. Hay plugins como Crocoblock, Essential Addons o Ultimate Addons que añaden funciones, pero cargan mucho código. Si solo necesitas un widget extra, busca alternativas livianas o aprende a hacerlo con lo que ya trae Elementor.

Cómo seguir aprendiendo después de esta guía

Una vez que tienes la lógica básica, lo siguiente es practicar. Replica diseños que te gusten de otras webs. Toma un sitio que admires, abre Elementor en una página en blanco y trata de recrearlo. Vas a aprender mucho más copiando con tus manos que leyendo tutoriales.

Luego, profundiza en temas específicos. Aprende sobre tipografías y combinaciones de fuentes. Investiga sobre teoría de color y paletas. Estudia los principios básicos del diseño web como jerarquía visual, espacio en blanco y contraste. Elementor te da las herramientas pero el diseño lo pones tú.

Y cuando sientas que el plugin gratuito te queda chico, da el salto a Pro. Vas a notar el cambio. Theme Builder, popups, widgets dinámicos y formularios avanzados abren posibilidades que no existían antes. Pero hazlo solo cuando lo necesites, no por moda.

Preguntas frecuentes sobre cómo usar Elementor

¿Necesito saber programar para usar Elementor?

No. Elementor está pensado para personas sin conocimientos de código. El editor funciona con arrastrar y soltar, y las opciones se configuran desde paneles visuales. Si conoces algo de CSS te ayuda a personalizar detalles, pero no es indispensable para construir webs profesionales completas.

¿Elementor funciona con cualquier tema de WordPress?

Funciona con la mayoría de temas, pero los resultados varían. Lo recomendable es usar Hello Theme, que es el tema oficial diseñado para Elementor. Temas pesados como Avada o Divi pueden generar conflictos de estilos y ralentizar el editor. Hello Theme es ligero y deja todo el control al constructor.

¿Puedo importar plantillas de Elementor a mi sitio?

Sí. Desde el editor presionas el ícono de la carpeta gris para abrir la biblioteca, eliges una plantilla, le das insertar y aparece en tu página. Las plantillas gratuitas vienen incluidas. Las plantillas Pro requieren la licencia activa para poder importarse.

¿Qué diferencia hay entre secciones, columnas y contenedores?

Las secciones eran el modelo antiguo basado en franjas horizontales con columnas dentro. Los contenedores son el modelo nuevo basado en flexbox, más flexibles y livianos. En 2026 conviene aprender directamente con contenedores porque las secciones están en proceso de retiro.

¿Cómo hago para que mi diseño se vea bien en móvil?

Usas el modo de previsualización móvil que está en la barra inferior izquierda. Ahí ajustas tamaños de fuente, padding y visibilidad de los elementos específicamente para móvil. Los cambios no afectan a las vistas de tablet y escritorio. Conviene revisar móvil después de cada sección, no al final.

¿Puedo guardar mis propios diseños como plantillas?

Sí. Cualquier sección, contenedor o página completa puede guardarse como plantilla y reutilizarse en otras páginas del mismo sitio. Para guardarla, haces clic derecho sobre el elemento, eliges guardar como plantilla y le pones un nombre. Después aparece en la biblioteca de Mis plantillas.

¿Elementor hace mi sitio más lento?

Si no se configura bien, puede sumar peso. Pero usando contenedores flexbox, un tema ligero como Hello Theme, PHP 8.3 y limitando los addons de terceros, el impacto es mínimo. La velocidad depende más del hosting y la optimización general que del constructor en sí.

¿Cómo cambio la tipografía y los colores del sitio entero?

Desde el menú principal del editor abres Configuración del sitio. Ahí encuentras secciones para definir tipografías globales y colores globales. Los cambios que hagas ahí se aplican a todos los widgets que usen los estilos globales. Es la forma más rápida y limpia de mantener consistencia.

¿Cuánto tiempo tarda alguien en aprender Elementor desde cero?

En mi experiencia, una persona dedicada llega a un nivel funcional en una semana de práctica diaria. Para un nivel intermedio cómodo, dos o tres semanas. Para dominio avanzado, con Theme Builder y diseño dinámico, varios meses. Lo más importante es practicar replicando diseños reales.

¿Puedo usar Elementor en español?

Sí. El plugin viene traducido al español por defecto si tu WordPress está configurado en ese idioma. La documentación oficial también tiene secciones en español, y la comunidad hispanohablante es muy activa con tutoriales, foros y cursos accesibles.