¿Acabas de instalar Elementor y te sientes perdido? En este artículo te voy a enseñar cómo funciona el editor, qué puedes hacer con la versión gratuita y, sobre todo, por qué necesitas Elementor Pro si quieres una web que no sea cutre y sosa. Te explico todo desde dentro, como diseñador web profesional.

Yo, como diseñador web trabajando en una agencia de marketing digital en la parte de desarrollo, creo infinidad de páginas web para negocios, pymes, autónomos y empresarios. Todas las agencias con las que trabajo usamos Elementor Pro, y te voy a contar por qué. Yo no sé programar, ¿vale? Pero sé muy bien lo que hace falta para que una web funcione y venda, y eso es lo que te voy a contar.

De la pantalla de WordPress al editor de Elementor: el primer clic

Vale, ya tienes todo instalado. ¿Y ahora qué? Pues ahora toca editar. Te voy a guiar paso a paso en ese primer clic que parece tan simple pero que es donde mucha gente se atasca.

Cómo acceder al editor

Lo primero es irte al escritorio de WordPress, a la sección de «Páginas». Elige una, por ejemplo, la página de inicio. La verás con la interfaz clásica de WordPress: título, autor, URL, y si tienes algún plugin de SEO como Rank Math o Yoast, verás sus cajas también. Lo normal es que le des a «Guardar» o «Publicar» ahí mismo.

Pero para editar el diseño, no le des a ese botón de «Editar» normal. Justo al lado, o a veces en la barra superior, verás un botón que pone «Editar con Elementor». Ese es el clic mágico. Le das y se te abrirá el builder, el constructor visual.

La pantalla en blanco que verás

Al entrar, es muy probable que te encuentres con una pantalla completamente en blanco, con un gran símbolo de «+» en el centro. No te asustes, es lo normal. Es tu lienzo vacío, el espacio donde vas a empezar a construir desde cero. A tu izquierda verás una columna con iconos y arriba una barra negra. Puede parecerte abrumador al principio, pero en seguida le coges el tranquillo, ¿vale? Lo importante es que ya estás dentro del editor, que es donde pasa la magia.

Entendiendo la interfaz: las tres zonas clave para no perderte

Cuando te abres al editor, tienes que entender que se divide en tres zonas principales. No son veinte, son tres. Y si te aprendes estas tres, ya no te vas a perder nunca.

La barra superior negra (tu panel de control). Esta es la línea que ves arriba del todo. Si empiezas de izquierda a derecha, tienes el logotipo de Elementor (que te lleva de vuelta al escritorio de WordPress), el icono para añadir un nuevo elemento (aunque ya lo tienes abierto en el panel izquierdo), y luego unos iconos muy importantes. El más crucial es el de «Ajustes del sitio», que parece una rueda dentada. Luego está el de «Estructura», que parece un listado, y el de «Notas». A la derecha tienes los controles para cambiar la vista entre escritorio, tablet y móvil, y el botón grande de «Publicar». Esta barra es tu centro de mando para acciones globales.

El panel izquierdo (tu caja de herramientas). Esta es la columna que cambia. Por defecto, la verás abierta en la pestaña de los «Widgets», que son los bloques que arrastras para construir (encabezados, imágenes, botones…). Pero si haces clic en «Ajustes del sitio» de la barra superior, este panel se transforma y te muestra los colores globales, las tipografías, los estilos de botón… todo lo que define la apariencia de tu sitio entero. Es como el menú de configuración general de tu web.

El área central (tu lienzo). Esto es el espacio grande y vacío (o no tan vacío) donde vas a ver el resultado de tu trabajo en tiempo real. Aquí es donde arrastras los widgets, donde juegas con las columnas y donde ves cómo queda todo. Es tu zona de trabajo principal. Al principio solo verás ese «+», pero en cuanto empiezas a añadir secciones, se irá llenando.

Al final, son tres zonas: la de trabajo (el centro), la de herramientas (la izquierda) y la de control y vista (arriba). No tiene nada más. Parece mucho, pero en cuanto empiezas a trastear, ves que es muy intuitivo.

Elementor Free vs. Pro: la diferencia entre una web cutre y una profesional

Aquí está el meollo del asunto. ¿Por qué insisto tanto en que necesitas la versión Pro? Porque la diferencia no es de grado, es abismal. Te lo digo desde la experiencia de ver cientos de proyectos.

Lo que te deja hacer la versión gratuita (y es muy poco)

Con el Elementor básico, el que te descargas gratis, tu caja de herramientas es muy, pero que muy limitada. Según la documentación oficial, la versión gratuita de Elementor incluye widgets básicos como Encabezado, Imagen, Editor de texto, Vídeo, Botón, Separador, Espaciador, Google Maps e Icono.

Es decir, puedes poner un título, una foto, un vídeo de YouTube, un texto, un botón, una línea separadora, un espacio en blanco, un mapa y un icono. Punto. Con eso no puedes hacer una web profesional. Te va a quedar algo muy estático, muy simple y, siendo sincero, muy cutre y sosa. No tienes formularios de contacto, no tienes menús avanzados, no tienes galerías, no tienes testimonios, no tienes tablas de precios… ¿Ves por dónde voy? Es como si quieres montar un restaurante y solo te dan un cuchillo y un plato. Puedes apañar algo, pero no es serio.

El mundo que se abre con Elementor Pro

Ahora, con el Pack Pro, la lista se multiplica. No son 8 widgets, son decenas. Y no son solo widgets, son funcionalidades completas. Para que lo veas claro, te pongo una comparativa:

Característica Elementor Free Elementor Pro
Widgets básicos Sí (8-10 widgets) Sí (todos los free + más de 50 adicionales)
Formularios de contacto No Sí, avanzados y con integraciones
Diseño de menús Muy básico Sí, menús mega, estilos avanzados
Plantillas profesionales Muy pocas y genéricas Cientos, por sector y actualizadas
Diseño de temas completo No Sí (encabezados, pies de página, archivos)
Contenido dinámico No Sí (para WooCommerce, blogs, campos personalizados)
Pop-ups y elementos emergentes No Sí, con lógicas de visualización
Soporte prioritario No Sí

Con Pro puedes hacer de todo: carruseles de imágenes y testimonios, tablas de precios comparativas, formularios de suscripción, zonas de acceso privado, integrar WooCommerce al detalle… Es la herramienta que usamos en las agencias porque nos permite entregar un producto profesional, no un apaño. Sin Pro, estás jugando en la liga infantil.

Más allá de los widgets: ajustes del sitio y estructura

Construir una web no es solo ir arrastrando bloques. Hay una capa de configuración que es crítica y que mucha gente que empieza pasa por alto: los ajustes globales. Si no los tocas, vas a estar repitiendo trabajo constantemente.

  • Configurar los colores y tipografía globales. Esto es lo primero que deberías hacer. En la barra superior negra, haz clic en el icono de «Ajustes del sitio» (la rueda dentada). Se te abrirá el panel izquierdo con opciones de «Color Global», «Tipografía Global», «Estilos de Botón», «Estilos de Formulario» y «Estilos de Imagen». Aquí defines, por ejemplo, que el color primario de tu marca sea un azul concreto. Luego, cada vez que añadas un botón y le des a «Estilo», podrás elegir «Primario» y automáticamente tendrá ese azul. Lo mismo con las fuentes. Es la manera de tener coherencia en todo el sitio sin estar copiando y pegando valores de color en cada elemento. Hay dos formas de tener esto: o lo creas tú desde cero, o se importa automáticamente cuando usas un kit de plantillas profesional (que es lo que yo recomiendo).

  • Usar la vista de estructura para navegar páginas complejas. Otro icono de la barra superior es el de «Estructura» (parece un listado). Al hacer clic, aparece una ventana flotante que actúa como un índice de tu página. Si estás trabajando en una página larga con 20 secciones, en vez de hacer scroll eterno, puedes hacer clic aquí en «Sección 15» e ir directamente a ella. Es una navaja suiza para no volverte loco buscando un elemento concreto entre decenas de contenedores y columnas. Es como tener un mapa del tesoro en vez de ir a ciegas.

  • Ajustes de página: título, ancho y vista responsive. El último icono importante en la barra superior es «Ajustes de página» (un engranaje más pequeño). Aquí no configuras el sitio, sino esta página en concreto. Puedes cambiar el título que se muestra, el slug de la URL, ocultar el título, elegir el tipo de ancho (normalmente «Ancho completo de Elementor») y cosas técnicas como el estado o si permite comentarios. Pero lo más útil de esta sección son los tres iconos que suelen estar a la derecha: el de escritorio, el de tablet y el de móvil. Siempre, siempre, tienes que revisar tu diseño en las tres vistas. Lo que queda bien en ordenador puede ser un desastre en el móvil, y ahí es donde Elementor te deja ajustar el diseño específicamente para cada dispositivo.

Cómo empezar a construir: tu primera sección y widget

Vale, teoría vista. Vamos a la práctica. ¿Cómo se empieza a construir algo en esa pantalla en blanco?

  1. Elegir entre Flexbox y Grid. En el área central, haces clic en el gran símbolo «+». Lo primero que te preguntará Elementor es si quieres usar un contenedor «Flexbox» o «Grid». Sin entrar en tecnicismos, Flexbox es el más común y flexible (valga la redundancia) para la mayoría de diseños. Grid es potente para estructuras más complejas tipo cuadrícula. Para empezar, elige Flexbox. Verás que aparece un rectángulo con otro «+» en su interior. Esa es tu primera sección o contenedor.

  2. Arrastrar y soltar tu primer encabezado. Ahora, en el panel izquierdo, busca el widget «Encabezado». Haz clic sobre él, mantén pulsado y arrástralo hasta soltarlo dentro del contenedor que acabas de crear. Verás que aparece un texto de ejemplo, «Add Your Heading Text Here». Ya tienes algo en pantalla.

  3. Las 3 pestañas de configuración: Contenido, Estilo y Avanzado. Aquí está el corazón de la personalización. Haz clic sobre el encabezado que acabas de poner. Verás que a la izquierda se abre un nuevo panel con tres pestañas.

    • Contenido: Aquí pones el texto real de tu título, eliges la etiqueta HTML (H1, H2, H3…), añades un enlace si lo necesitas.
    • Estilo: Aquí le das forma. Cambias la tipografía, el tamaño, el color, la alineación, la sombra… Si has configurado antes los estilos globales, aquí podrás aplicar «Primario» o «Secundario» con un clic.
    • Avanzado: Esto es para ajustes más finos: márgenes, relleno, bordes, fondos, animaciones y reglas de visualización responsive. No te abrumes, al principio juega sobre todo con Contenido y Estilo.

Así funciona el ciclo básico: añades un contenedor, arrastras un widget dentro, y lo personalizas en esas tres pestañas. Es así para casi todo.

Mi consejo profesional: no empieces desde cero, usa plantillas

Te voy a dar el consejo que le doy a todo el mundo y con el que ahorro semanas de trabajo: no construyas tu web arrastrando widget a widget desde un lienzo en blanco. Usa plantillas.

Los bloques y páginas predefinidas de Elementor. En el mismo menú del «+» del centro, hay pestañas que dicen «Bloques» y «Páginas». Son plantillas gratuitas que vienen con Elementor. Están bien para aprender y salir del paso, pero son las que usa todo el mundo. Tu web tendrá un aire «de serie» que se nota. Además, Elementor es el constructor de páginas más popular de WordPress, con más de 12 millones de instalaciones activas, así que esas plantillas gratuitas están muy vistas.

Por qué las plantillas de terceros (como Envato) son la mejor opción. En ese mismo menú, verás una opción que pone «Envato». Esto es el kit de plantillas de Envato Elements. Sin duda, esta es la opción que más te voy a aconsejar. Yo, como diseñador web en una agencia, creando webs para todo tipo de negocios, te digo que todas las agencias con las que trabajo usamos este kit. ¿Por qué? Porque tienes un sinfín de posibilidades: plantillas modernas, por sectores (restaurantes, abogados, coaches…), con diseños probados y que se actualizan. Ya he hecho webs de todos los colores y sectores con ellas.

Cómo importar y trabajar con un kit de plantillas. Normalmente, desde el propio menú de Elementor puedes instalar el kit de Envato si tienes una suscripción. Una vez instalado, en vez de empezar con un «+» en blanco, puedes ir a la pestaña «Plantillas» y ver páginas completas de inicio, sobre nosotros, servicios, etc. Importas la que te guste y, lo más importante, se importan con ella todos los ajustes globales de color y tipografía ya configurados. Luego, tú solo tienes que cambiar los textos, las imágenes y adaptarlo a tu gusto. Es cien veces más rápido y el resultado es profesional desde el minuto uno.

Siguientes pasos y errores que debes evitar

Para cerrar, te dejo tres consejos clave que son errores muy comunes y que tú puedes evitar desde el principio. Te cuento un error que veo mucho: clientes que se pasan semanas desde cero, y al final la web no tiene coherencia y no se ve bien en el móvil. Es un error mío si no se lo advierto a tiempo, ¿vale?

  • No te quedes solo con la versión gratuita. Si tu proyecto es serio, aunque sea un blog personal con ambición, la versión Free te va a frenar. La inversión en Elementor Pro es una de las más rentables que puedes hacer para tu web. Sin ella, estarás luchando con las manos atadas.
  • Configura primero los ajustes globales. Antes de ponerte a poner títulos y botones, ve a «Ajustes del sitio» y define tu paleta de colores y tus fuentes principales. O, mejor aún, importa una plantilla profesional que ya lo traiga hecho. Esto te ahorrará horas de trabajo de ajuste fino y dará una coherencia visual a tu sitio que marca la diferencia.
  • Revisa siempre en móvil y tablet. Nunca, nunca des por terminado un diseño sin haber hecho clic en los iconos de tablet y móvil de la barra superior. Ajusta los tamaños de fuente, los márgenes y la disposición de las columnas para cada dispositivo. Una web que no se ve bien en el móvil hoy en día está muerta.

Si quieres profundizar más y ver todo esto en acción, tengo un curso completo donde lo explico paso a paso. Puedes suscribirte al curso aquí y si te surge cualquier duda, ya sabes, me escribes un comentario.

Sigue leyendo

Herramientas y recursos que menciono

Algunos de estos enlaces son de afiliado: si compras a través de ellos me llevo una pequeña comisión, sin coste extra para ti.