Módulo 6.2 Elementor: Primer contacto con el editor de Elementor
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.
