Objetivo: Conocer en profundidad los widgets básicos y aprender a controlar la estructura de tus páginas con Elementor en WordPress.
📋 LECCIÓN 3.1: WIDGETS, LOS BLOQUES DE CONSTRUCCIÓN
widget en Elementor es un bloque funcional que realiza una tarea específica. Si tu página web fuera una casa, los widgets serían los ladrillos, ventanas, puertas y muebles.🏗️ LA JERARQUÍA DE CONSTRUCCIÓN
Para entender cómo funciona todo, es crucial conocer esta estructura:
1. 📄 PÁGINA (tu lienzo completo)
↓
2. 🏗️ SECCIÓN (áreas horizontales principales)
↓
3. 📊 COLUMNAS (divisiones dentro de cada sección)
↓
4. 🧱 WIDGETS (contenido específico dentro de cada columna)
Ejemplo visual:
[🏢 SECCIÓN 1: Cabecera Hero]
├── [📊 COLUMNA 1 (60%)]
│ └── 🧱 Widget Encabezado "Bienvenidos"
│ └── 🧱 Widget Texto "Descripción"
│ └── 🧱 Widget Botón "Ver más"
│
└── [📊 COLUMNA 2 (40%)]
└── 🧱 Widget Imagen (foto principal)
🎯 LECCIÓN 3.2: LOS WIDGETS BÁSICOS IMPRESCINDIBLES
1. 🏷️ ENCABEZADO (Antes «Título»)
¿Para qué sirve? Para títulos y subtítulos de cualquier nivel (H1, H2, H3…)Configuración esencial:- 📝 Título: El texto que se mostrará.
- 🏷️ Etiqueta HTML: H1 (principal), H2 (secciones), H3 (subsecciones).
- 🔗 Enlace: Si quieres que sea clicable.
- 🎨 Estilo: Color, tipografía, alineación, sombras.
💡 Práctica rápida:-
-
-
-
2. 🖼️ IMAGEN
¿Para qué sirve? Para mostrar fotografías, ilustraciones, logos…Configuración esencial:- 🖼️ Seleccionar imagen: Desde tu ordenador o biblioteca.
- 📏 Tamaño: Miniatura, Medio, Grande, Completa.
- 🔗 Enlace: A dónde lleva al hacer clic.
- 📝 Texto alternativo: Importante para SEO y accesibilidad.
💡 Truco profesional:
Siempre añade Texto alternativo descriptivo. Para una imagen de oficina: «Oficina moderna con equipo trabajando» en lugar de solo «oficina.jpg».
3. 📝 EDITOR DE TEXTO
¿Para qué sirve? Para párrafos, listas, textos largos…Diferencia con Encabezado:- Encabezado: Títulos cortos (1 línea).
- Editor de texto: Párrafos largos (múltiples líneas).
Controles de formato:✏️ Negrita | 𝒞 Cursiva | 🔗 Enlace | 📋 Listas | 🔄 Alineación💡 Práctica rápida:
-
-
-
-
4. ▶️ VÍDEO
¿Para qué sirve? Para insertar vídeos de YouTube, Vimeo o autoalojados.Configuración esencial:- 🔗 Enlace: URL del vídeo (YouTube/Vimeo).
- 🖼️ Imagen de portada: Lo que se ve antes de reproducir.
- ⚙️ Reproducción: Autoplay, controles, loop.
⚠️ Importante: Vídeos autoalojados (subidos directamente) pueden ralentizar tu sitio. Mejor usar YouTube o Vimeo.
5. 🔘 BOTÓN
¿Para qué sirve? Para llamadas a la acción (CTA).Partes de un botón efectivo:[🎨 COLOR ATRACTIVO] [✏️ TEXTO CLARO] [🔗 ENLACE RELEVANTE]Configuración esencial:
- ✏️ Texto: «Descargar PDF», «Solicitar presupuesto», «Ver catálogo».
- 🔗 Enlace: A dónde lleva el botón.
- 🎨 Estilo: Colores (normal y hover), bordes, sombras.
💡 Psicología del botón:- Texto en primera persona: «Quiero mi presupuesto» vs «Solicitar presupuesto».
- Urgencia: «Oferta termina en 24h».
- Beneficio: «Descargar guía gratuita».
6. ➖ SEPARADOR
¿Para qué sirve? Para crear líneas divisorias entre secciones.Tipos de líneas:- Sólida: ───────
- Doble: ═══════
- Punteada: ┈┈┈┈┈┈
- Decorativa: ~~~ ~~~~ ~~~
Configuración:- 📏 Ancho: 100% (todo el ancho) o personalizado.
- 🎨 Estilo: Tipo de línea, grosor, color.
- ✨ Efectos: Sombras, animaciones.
7. ⬜ ESPACIADOR
¿Para qué sirve? Para crear espacio vacío (márgenes personalizados).Casos de uso:💡 Truco: Mejor usar Espaciador que márgenes grandes en widgets individuales.
8. 🗺️ GOOGLE MAPS
¿Para qué sirve? Para mostrar ubicaciones geográficas.Configuración esencial:- 📍 Dirección: Tu dirección física.
- 🔍 Zoom: Nivel de acercamiento (10-15 para calle).
- 🎨 Estilo: Colores del mapa.
⚡ Optimización: En versiones recientes, puedes activar la carga diferida para que el mapa no ralentice la página inicial.
9. ✨ ICONO
¿Para qué sirve? Para iconos decorativos o informativos.Fuentes de iconos disponibles:- Font Awesome: 1,500+ iconos gratuitos.
- Tu propia biblioteca: SVG personalizados.
💡 Práctica:-
-
-
📱 LECCIÓN 3.3: AJUSTES ESPECÍFICOS POR DISPOSITIVO
Cómo funciona:-
📱 Móvil en la barra superior.
-
-
solo aplican a móvil.
Ejemplos comunes:| Elemento | Escritorio | Móvil | Razón |
|---|
| Título H1 | 48px | 32px | Mejor legibilidad |
| Columnas | 3 | 1 | Mejor uso del espacio |
| Márgenes | 40px | 20px | Pantalla más pequeña |
Truco: si aplicas cambios a tablets, esos cambios solo se aplicarán desde los tablets hacia abajo (es decir, tablets y móvil) y si aplicas a móviles, sólo se aplicarán los cambios a los móviles. Por lo que, si en tablets y móvil se ve algo mal, con ajustarlo en tablets puede que se vea ya bien en móvil sin tener que hacer modificaciones en la vista móvil. Digamos que los cambios heredan de las vistas superiores: PC > Tablet (hereda de PC) > Móvil (hereda de tablet).
🚫 OCULTAR ELEMENTOS EN CIERTOS DISPOSITIVOS
Cuándo usarlo:- 🖼️ Imágenes decorativas no esenciales en móvil
- 📊 Widgets complejos que no funcionan bien en móvil
- ✨ Elementos puramente estéticos
Cómo hacerlo:-
-
🚀 Avanzado.
-
«Adaptabilidad».
-
⚠️ Precaución: No ocultes contenido importante solo porque «no cabe».
💼 LECCIÓN 3.4: PROYECTO PRÁCTICO – PÁGINA «SERVICIOS»
📋 OBJETIVO FINAL:
🏗️ PASO 1: ESTRUCTURA BASE
- Página nueva > «Nuestros Servicios».
- Abrir con Elementor.
- Sección 1: 1 columna (para la cabecera hero, cabecera grande que ocupa de lado a lado, se suele usar como portada).
🎨 PASO 2: CABECERA HERO
En la sección de 1 columna:- 🧱 Encabezado: «Soluciones Profesionales para Tu Negocio»
- 🧱 Editor de texto: (debajo del título)
- 🧱 Botón: «Descubrir servicios».
💡 Truco: En Estilo de la sección, pon un fondo degradado suave.
📊 PASO 3: SECCIÓN DE SERVICIOS
- Nueva sección: 3 columnas (33% | 33% | 33%).
- Título de sección: (arriba de las columnas).
Columna 1 – Servicio A:- 🧱 Icono: ✨ (elige uno relacionado con diseño).
- 🧱 Encabezado: «Diseño Web».
- 🧱 Editor de texto: «Creamos sitios web modernos, rápidos y optimizados para conversiones.».
- 🧱 Botón: «Más información».
Columna 2 – Servicio B:- Duplica la columna 1 (click en columna > duplicar).
- Cambia icono, título y descripción.
- Asegúrate de que todo esté centrado.
Columna 3 – Servicio C:-
📱 PASO 4: OPTIMIZAR PARA MÓVIL
-
📱 Móvil.
- Revisa cada sección:.
- Ajusta lo necesario:
💾 PASO 5: GUARDAR Y PROBAR
- 👁️ Previsualizar en escritorio.
- 👁️ Previsualizar en móvil (usa el selector de dispositivo del navegador).
- 🎯 Publicar cuando estés satisfecho.
🚨 ERRORES COMUNES Y SOLUCIONES
1️⃣ «Mis columnas no se apilan en móvil»
Causa: No has configurado bien el responsive.
Solución:-
📱 Móvil.
-
-
📋 Diseño > Ancho > pon 100%
-
«Apilar verticalmente» si tu versión la tiene.
2️⃣ «Los widgets se salen de la columna»
Causa: Márgenes o rellenos muy grandes.
Solución:-
-
🚀 Avanzado.
-
Márgenes y Relleno.
-
3️⃣ «No puedo alinear verticalmente»
Causa: Estás intentando alinear el widget, no la columna.
Solución:-
COLUMNA (borde).
-
📋 Diseño.
-
«Alineación vertical».
-
4️⃣ «El diseño se ve diferente al publicar»
Causa: Caché del navegador o plugins.
Solución:- Limpia caché (Ctrl+F5).
- Desactiva plugins de caché temporalmente.
- Regenera CSS en Elementor > Herramientas.
💡 CONSEJOS PROFESIONALES DEL MÓDULO 3
🎯 PLANIFICA ANTES DE CONSTRUIR
- Define jerarquía: Qué es H1, H2, H3…
- Elige colores: 1 principal, 1 secundario, 1 de acento.
- Selecciona fuentes: 1 para títulos, 1 para texto.
⚡ OPTIMIZA PARA VELOCIDAD
- Comprime imágenes antes de subirlas.
- Limita animaciones (ralentizan la página).
- Revisa en móvil con conexión 3G simulada.
🔧 MANTÉN CONSISTENCIA
- Mismos márgenes en todas las secciones similares.
- Mismo estilo para todos los botones del mismo tipo.
- Mismo padding en todas las tarjetas de servicios.
- Mismos colores para todos los enlaces.
📱 TESTEA EN DISPOSITIVOS REALES
- Tu móvil (el que más usas).
- Tablet de un familiar.
- Ordenador con pantalla grande.
- Navegadores diferentes: Vivaldi, Opera, Firefox.
✅ RESUMEN DE COMPETENCIAS DEL MÓDULO 3
Ahora sabes cómo:- 9 widgets básicos con maestría.
- secciones y columnas a nivel profesional.
- páginas complejas con estructura lógica.
- errores comunes de estructura.
- consejos profesionales de optimización.
🏆 RETO FINAL DEL MÓDULO 3
Crea una página «Equipo» con estos requisitos:📋 REQUISITOS TÉCNICOS:
🎯 CRITERIOS DE EVALUACIÓN:
- Consistencia: Mismos estilos para elementos similares.
- Jerarquía: Títulos H1, H2, H3 usados correctamente.
- Responsive: Funciona perfecto en móvil y tablet.
- Espaciado: Márgenes y rellenos consistentes.
- Performance: Imágenes optimizadas, sin exceso de efectos.
🎉 ¡FELICIDADES! Has dominado la esencia de la construcción con Elementor.
En el Módulo 4 aprenderás a crear headers y footers profesionales que se mantendrán consistentes en todo tu sitio.¿Listo para el siguiente nivel con el Módulo 4? 🚀
1 Comment
[…] 17. Módulo 6.3 Elementor: Widgets esenciales y dominio de la estructura. […]