Módulo 6.2 Elementor: Primer contacto con el editor de Elementor
Duración estimada: 2 horas
Objetivo: Conocer y practicar la interfaz del editor visual de Elementor.
📋 LECCIÓN 2.1: LA INTERFAZ QUE VAS A ENCONTRAR
Crea una página nueva con el nombre que quieras y publícala.
Una vez publicada, edítala con Elementor:
- Bien desde «Paginas – Todas las páginas – Editar con Elementor».
- Bien desde la parte publica, en la página que quieres editar y en la barra superior hacer clic en «Editar con elementor«.
Cuando entres por primera vez al editor de Elementor, verás esta distribución:
🔝 BARRA SUPERIOR NEGRA (Tu panel de control principal)
[☰] [➕] [⚙️] [🕒] | [🖥️] [💻] [📱] | [📋] [🆕] [🔍] [📐] [👁️] [🎯]
Explicación de cada elemento:
Izquierda →
• ☰ Menú – Muestra/oculta el panel de widgets.
• ➕ Añadir elemento – Acceso rápido a widgets.
• ⚙️ Ajustes página – Configuración general.
• 🕒 Historial – Control de versiones.
Centro →
• 🖥️ Escritorio – Vista para ordenadores.
• 💻 Tablet – Vista para tablets.
• 📱 Móvil – Vista para móviles.
Derecha →
• 📋 Lista comprobación – Herramientas de optimización.
• 🆕 Novedades – Actualizaciones de Elementor.
• 🔍 Buscador – Buscar widgets y ajustes.
• 📐 Estructura – Ver jerarquía de elementos. Es una lista con todas las columnas, widgets, etc.
• 👁️ Previsualizar – Ver como visitante.
• 🎯 Publicar – Publicar/actualizar página.
⬅️ PANEL IZQUIERDO (Tu caja de herramientas)
Aquí encontrarás TODOS los widgets organizados por categorías:
🔍 Buscar widget... ─────────────── 🏗️ ELEMENTOS BÁSICOS • Encabezado • Imagen • Editor de texto • Vídeo • Botón • Separador • Espaciador • Google Maps • Icono ─────────────── 🚀 ELEMENTOS PRO (Si tienes la versión Pro) ─────────────── 📁 MIS ELEMENTOS (Tus plantillas guardadas)
🎨 ÁREA CENTRAL (Tu lienzo en blanco)
Este es el espacio donde construirás tu página. Al principio verás:
╔══════════════════════════════════════════╗ ║ ║ ║ 🎯 ÁREA DE TRABAJO ║ ║ ║ ║ [ ➕ ] ← Haz clic aquí para comenzar ║ ║ ║ ║ Tu diseño aparecerá en esta zona ║ ║ ║ ╚══════════════════════════════════════════╝
➡️ PANEL DERECHO
Sólo flotará el panel «Estructura» si lo seleccionas en la barra superior, hacia la izquierda. Es útil tenerla siempre activa para poder ubicarte esquemáticamente en que widget estás y para re ordenar Elementor arrastrando y soltando.
🎯 LECCIÓN 2.2: CÓMO COMENZAR A CONSTRUIR
PASO 1: CREAR TU PRIMERA SECCIÓN
- 🖱️ Haz clic en el botón ➕ grande del área central.
- 🏗️ Selecciona la estructura de «2 Columnas» (50% | 50%).
- ✅ ¡Listo! Ya tienes tu primera sección con dos columnas.
Lo que verás:
┌───────────────────────────────────────┐ │ SECCIÓN (con borde gris claro) │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ COLUMNA │ │ COLUMNA │ │ │ │ 1 │ │ 2 │ │ │ │ │ │ │ │ │ │ [+] │ │ [+] │ │ │ │ │ │ │ │ │ └─────────────┘ └─────────────┘ │ └───────────────────────────────────────┘
PASO 2: AÑADIR TU PRIMER WIDGET
Vamos a añadir un Encabezado en la columna izquierda:
- 🧰 Abre el panel izquierdo (clic en ☰ si está cerrado).
- 🔍 Busca el widget «Encabezado» en «Elementos básicos».
- 🖱️ Haz clic sobre él y mantén presionado.
- ➡️ Arrástralo hacia la columna 1.
- 🖐️ Suelta el botón del ratón.
✨ ¡Felicidades! Acabas de colocar tu primer widget.
⚙️ LECCIÓN 2.3: CÓMO EDITAR ELEMENTOS CORRECTAMENTE
ERROR COMÚN DE PRINCIPIANTES:
❌ NO hagas doble clic sobre el texto para editarlo.
❌ NO busques botones de formato como en Word.
MÉTODO CORRECTO:
- 🖱️ Haz clic UNA VEZ sobre el encabezado que añadiste
- 👁️ Observa lo que pasa:
ALREDEDOR del encabezado aparece icono:
[✏️] ← (para editar)
Con botón derecho encima del lápiz encontrarás opciones como:
[📋] ← (duplicar) [🗑️] ← (eliminar)
En el PANEL IZQUIERDO, con el widget seleccionado, ahora verás:
┌────────────────────────────┐ │ 🎯 ENCABEZADO │ │ │ │ CONTENIDO ESTILO │ ← Pestañas principales │ AVANZADO │ │ │ │ - Título: "Este es el..." │ ← Tu texto aquí │ │ │ - Etiqueta HTML: H2 │ ← Tipo de encabezado │ │ │ - Enlace: │ ← Para hacerlo clicable └────────────────────────────┘
PARA EDITAR EL TEXTO:
- 👉 Ve al panel izquierdo, pestaña «Contenido».
- 🖱️ Haz clic en el campo «Título».
- 🗑️ Borra el texto predeterminado.
- ⌨️ Escribe: «Bienvenido a Mi Sitio Web».
- 👀 ¡Mira! El cambio es instantáneo en el área central.
🎨 LECCIÓN 2.4: LAS 3 PESTAÑAS DE CONFIGURACIÓN
Cuando seleccionas CUALQUIER widget, en el panel izquierdo verás estas 3 pestañas:
1. 📋 CONTENIDO (Lo que dice)
Aquí controlas el contenido del elemento:
- ✏️ Textos – Lo que se lee.
- 🖼️ Imágenes – Lo que se ve.
- 🔗 Enlaces – A dónde lleva.
- ⚙️ Opciones – Comportamiento básico.
Ejercicio práctico:
- 🖱️ Selecciona tu encabezado.
- 👉 Ve a pestaña «Contenido».
- 🔽 Busca «Etiqueta HTML».
- 🖱️ Cambia de «H2» a «H1»
2. 🎨 ESTILO (Cómo se ve)
Aquí controlas la apariencia visual:
- 🎨 Colores – Paleta cromática.
- 🔤 Tipografía – Fuentes y tamaños.
- 📐 Alineación – Posición del contenido.
- ✨ Efectos – Sombras, bordes, etc.
Ejercicio práctico:
- 👉 Haz clic en pestaña «Estilo»
- 🎨 Busca «Color del texto».
- 🖱️ Haz clic en el cuadro de color.
- 🎯 Elige un color que te guste.
- 🔤 Prueba cambiar el tamaño a 48px.
3. 🚀 AVANZADO (Control técnico)
Para ajustes más específicos:
- 📏 Márgenes – Espacio exterior.
- 🛡️ Relleno – Espacio interior.
- 🎭 Animaciones – Efectos de entrada.
- 🛠️ CSS personalizado – Para expertos.
Ejercicio práctico:
- 👉 Haz clic en pestaña «Avanzado».
- 📏 Busca «Márgenes».
- ✏️ Escribe en «Superior»: 20.
- ✏️ Escribe en «Inferior»: 20.
- 👁️ Observa cómo el encabezado gana espacio arriba y abajo.
🏗️ LECCIÓN 2.5: COMPLETAR TU PRIMERA SECCIÓN
Vamos a terminar de construir nuestra primera sección completa:
EN LA COLUMNA 1 (Ya tenemos el encabezado):
- 🧰 Busca widget «Editor de texto».
- 🖱️ Arrástralo DEBAJO del encabezado.
- ✏️ Edita el texto para que diga:
«Este es mi sitio web creado con Elementor. Estoy aprendiendo a diseñar páginas web de forma visual y profesional.» - 🎨 Ve a Estilo > Alineación > Justificado.
EN LA COLUMNA 2:
- 🧰 Busca widget «Imagen».
- 🖱️ Arrástralo a la columna 2.
- ⚙️ Configura:
- Haz clic en «Seleccionar imagen».
- Elige una imagen de tu ordenador o de la biblioteca.
- Clic en «Insertar».
- 🎨 Opcional: Ve a Estilo > Borde > Radio: 10px
Debajo de la imagen:
- 🧰 Busca widget «Botón».
- 🖱️ Arrástralo debajo de la imagen.
- ✏️ Configura:
- Texto: «Ver más información».
- Enlace: «#» (sin comillas).
- Alineación: Centro.
📱 LECCIÓN 2.6: VISUALIZACIÓN EN DIFERENTES DISPOSITIVOS
LA MAGIA DE ELEMENTOR:
Puedes ver y ajustar tu diseño para móvil, tablet y escritorio por separado.
CÓMO FUNCIONA:
En la barra superior, en el centro, haz clic en:
- 📱 MÓVIL – Para ver en teléfonos.
- 💻 TABLET – Para ver en tablets.
- 🖥️ ESCRITORIO – Para ver en ordenadores.
EJERCICIO PRÁCTICO:
Vamos a optimizar nuestro encabezado para móvil:
- 🖱️ Haz clic en 📱 MÓVIL.
- 🖱️ Selecciona tu encabezado «Bienvenido a Mi Sitio Web».
- 👉 Ve a pestaña «Estilo».
- 🔤 Busca «Tamaño» en Tipografía.
- ✏️ Cambia de 48px a 32px.
- 👁️ Observa cómo solo cambia en vista móvil.
✨ IMPORTANTE:
Los cambios que hagas en 📱 Móvil solo afectan a móviles.
Los cambios que hagas en 💻 Tablet solo afectan a tablets.
Los cambios que hagas en 🖥️ Escritorio solo afectan a escritorio.
💾 LECCIÓN 2.7: GUARDAR Y PUBLICAR TU TRABAJO
DIFERENCIA CLAVE:
- 👁️ PREVISUALIZAR = Ver cambios sin publicar.
- 🎯 PUBLICAR = Hacer cambios visibles para todos.
PASO A PASO PARA PUBLICAR:
- 🔝 Mira la esquina superior derecha.
- 🖱️ Haz clic en el botón 🎯 PUBLICAR.
- ✅ Mensaje: «Página actualizada» (éxito)
PARA VER COMO VISITANTE:
- 🖱️ Haz clic en 👁️ PREVISUALIZAR.
(junto al botón Publicar) - 🖥️ Se abre nueva pestaña del navegador.
- 👀 Puedes ver tu página exactamente como la verán tus visitantes.
CONSEJO IMPORTANTE:
Usa 👁️ PREVISUALIZAR frecuentemente mientras trabajas, y «solo» usa 🎯 PUBLICAR cuando estés satisfecho con el resultado.
🛠️ LECCIÓN 2.8: HERRAMIENTAS ÚTILES DE LA BARRA SUPERIOR
📐 ESTRUCTURA – Tu mapa de navegación
- 🖱️ Haz clic en la barra oscura superior, a la derecha, en 📐 ESTRUCTURA.
- 🗺️ Aparece un panel con todos tus elementos organizados.
- 🖱️ Puedes hacer clic en cualquier elemento para seleccionarlo.
- 🎯 Útil cuando tienes elementos superpuestos o difíciles de seleccionar y para arrastrar y soltar cambiando de ubicación los contenidos de forma esquemática.
🕒 HISTORIAL – Tu seguro de errores
- 🖱️ Haz clic en 🕒 HISTORIAL.
- 📜 Verás lista de todos los cambios recientes.
- 🖱️ Haz clic en cualquier versión anterior.
- 🔄 Se restaurará esa versión automáticamente.
- ⏰ Elementor guarda hasta 50 cambios recientes.
🔍 BUSCADOR – Encuentra lo que necesitas
- 🖱️ Haz clic en 🔍 BUSCADOR.
- ⌨️ Escribe el nombre de cualquier widget.
- ⚡ Encuéntralo instantáneamente.
- 🎯 También busca ajustes y configuraciones.
🏆 EJERCICIO PRÁCTICO FINAL
OBJETIVO: Crear una sección «Servicios» completa
PASO 1: Añadir nueva sección
- Desplázate al final de tu página.
- 🖱️ Haz clic en «➕ Añadir nueva sección».
- 🏗️ Elige estructura «3 Columnas» (33% | 33% | 33%).
PASO 2: Columna 1 – Servicio 1
- 🧰 Arrastra «Icono» a la columna.
- ⚙️ Elige un icono que te guste (ej: ⭐).
- 🧰 Arrastra «Encabezado» debajo.
- ✏️ Escribe: «Diseño Web».
- 🧰 Arrastra «Editor de texto» debajo.
- ✏️ Escribe: «Creación de sitios web modernos y responsivos».
PASO 3: Columna 2 – Servicio 2
- 📋 Selecciona toda la columna 1.
- 🖱️ Haz clic en duplicar, haciendo clic derecho en el icono del lápiz y elegir 📋 (duplicar).
- ➡️ Arrastra la columna duplicada a la columna 2.
- ✏️ Cambia los textos a tu gusto.
PASO 4: Columna 3 – Servicio 3
Repite el proceso para completar la tercera columna.
PASO 5: Título de sección
- 🖱️ Haz clic en el ➕ ARRIBA de las 3 columnas.
- 🧰 Arrastra «Encabezado» ahí.
- ✏️ Escribe: «Nuestros Servicios».
- 🎨 Estilo: Centro, tamaño 42px, color destacado.
PASO 6: Optimizar para móvil
- 🖱️ Haz clic en 📱 MÓVIL.
- 🔍 Revisa que todo sea legible.
- ⚙️ Ajusta tamaños si es necesario.
- 📱 Verifica que las 3 columnas se apilen verticalmente en móviles.
PASO 7: Publicar
- 🖱️ Haz clic en 🎯 PUBLICAR.
- 👁️ Haz clic en 👁️ PREVISUALIZAR.
- ✅ Verifica que todo esté correcto.
🚨 ERRORES COMUNES Y SOLUCIONES
«No puedo seleccionar un elemento»
SOLUCIÓN:
- Usa 📐 ESTRUCTURA para navegar.
- Haz clic en áreas vacías cerca del elemento.
- Asegúrate de no estar en modo 📱 MÓVIL si quieres editar versión escritorio.
«Los cambios no se aplican»
SOLUCIÓN:
- Verifica que has hecho clic en 🎯 PUBLICAR, no solo en 👁️ PREVISUALIZAR.
- Limpia la caché de tu navegador.
- Revisa que no tengas conflicto con otros plugins.
«No veo el panel izquierdo»
SOLUCIÓN:
- 🖱️ Haz clic en ☰ MENÚ (esquina superior izquierda).
- O haz clic en ➕ AÑADIR ELEMENTO.
- O presiona la tecla ESC en tu teclado.
💡 CONSEJOS PROFESIONALES
- Guarda versiones – Usa 🕒 HISTORIAL antes de cambios grandes.
- Tlf móvil– Revisa siempre en 📱 MÓVIL durante el diseño.
- Nombra elementos – En 🚀 AVANZADO > CSS, pon nombres descriptivos (si sabes css).
- Usa atajos – Ctrl+S guarda, Ctrl+Z deshace.
- Experimenta sin miedo – Siempre puedes usar 🕒 HISTORIAL para volver atrás.
✅ RESUMEN DE LO APRENDIDO
En este módulo has dominado:
- ✅ La interfaz completa de Elementor.
- ✅ Cómo añadir secciones y columnas.
- ✅ Cómo arrastrar y soltar widgets.
- ✅ Cómo editar contenido correctamente.
- ✅ Las 3 pestañas de configuración (Contenido, Estilo, Avanzado).
- ✅ Cómo trabajar con vistas responsive.
- ✅ Cómo guardar y publicar tu trabajo.
- ✅ Herramientas útiles como Estructura e Historial.
🎉 ¡EXCELENTE TRABAJO!
Ahora tienes las bases para construir una página web con Elementor. En el próximo módulo profundizaremos en widgets específicos y técnicas avanzadas de diseño.
