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

Un 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

Vamos a explorar los 9 widgets que usarás en el 90% de tus páginas.

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:

1. Añade un Encabezado a tu página.

2. Ponle texto: «Servicios Profesionales».

3. Cámbialo a Etiqueta H2.

4. En Estilo, alinéalo al centro y dale color azul.

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:

💡 Práctica rápida:

1. Añade un Editor de texto.

2. Escribe un párrafo de 3-4 líneas.

3. Pon en negrita una palabra importante.

4. Añade un enlace a «#» en otra palabra.

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:

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:

• Separar un título de una imagen.

• Crear respiración entre secciones.

• Ajustar diseños para móvil.

💡 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:

1. Añade un widget Icono.

2. Busca «phone» (teléfono).

3. Añádelo antes de tu número de teléfono.

📱 LECCIÓN 3.3: AJUSTES ESPECÍFICOS POR DISPOSITIVO

Cómo funciona:

1. Haz clic en 📱 Móvil en la barra superior.

2. Selecciona cualquier elemento.

3. Los cambios que hagas solo aplican a móvil.

Ejemplos comunes:

🚫 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:

1. Selecciona el elemento

2. Ve a 🚀 Avanzado.

3. Busca «Adaptabilidad».

4. Desactiva el dispositivo donde no quieres que aparezca.

⚠️ Precaución: No ocultes contenido importante solo porque «no cabe».

💼 LECCIÓN 3.4: PROYECTO PRÁCTICO – PÁGINA «SERVICIOS»

Vamos a crear una página completa usando todo lo aprendido.

📋 OBJETIVO FINAL:

Crear una página de servicios con:

• ✅ Cabecera hero (cabecera grande que ocupa de lado a lado, se suele usar como portada) con título y descripción.

• ✅ 3 servicios en grid responsive.

• ✅ Sección de testimonios.

• ✅ Llamada a la acción final.

🏗️ PASO 1: ESTRUCTURA BASE

1. Página nueva > «Nuestros Servicios».

2. Abrir con Elementor.

3. 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:

1. 🧱 Encabezado: «Soluciones Profesionales para Tu Negocio»

   • Etiqueta: H1.

   • Alineación: Centro.

   • Tamaño: 52px (escritorio) / 36px (móvil).

2. 🧱 Editor de texto: (debajo del título)

   • Texto: «Ofrecemos servicios especializados diseñados para impulsar tu crecimiento y optimizar tus operaciones empresariales.»

   • Alineación: Centro.

3. 🧱 Botón: «Descubrir servicios».

   • Enlace: «#servicios» (sin comillas).

   • Color: Azul corporativo.

💡 Truco: En Estilo de la sección, pon un fondo degradado suave.

📊 PASO 3: SECCIÓN DE SERVICIOS

1. Nueva sección: 3 columnas (33% | 33% | 33%).

2. Título de sección: (arriba de las columnas).

   • 🧱 Encabezado: «Nuestros Servicios Principales».

   • Etiqueta: H2.

   • Alineación: Centro.

Columna 1 – Servicio A:

1. 🧱 Icono: ✨ (elige uno relacionado con diseño).

2. 🧱 Encabezado: «Diseño Web».

   • Etiqueta: H3.

   • Alineación: Centro.

3. 🧱 Editor de texto: «Creamos sitios web modernos, rápidos y optimizados para conversiones.».

   • Alineación: Centro.

4. 🧱 Botón: «Más información».

   • Tamaño: Pequeño.

   • Alineación: Centro.

Columna 2 – Servicio B:

1. Duplica la columna 1 (click en columna > duplicar).

2. Cambia icono, título y descripción.

3. Asegúrate de que todo esté centrado.

Columna 3 – Servicio C:

1. Repite el proceso.

📱 PASO 4: OPTIMIZAR PARA MÓVIL

1. Haz clic en 📱 Móvil.

2. Revisa cada sección:.

   • ¿Los textos son legibles?

   • ¿Los botones son fáciles de tocar?

   • ¿Las columnas se apilan correctamente?

3. Ajusta lo necesario:

   • Reduce tamaños de fuente.

   • Aumenta relleno en botones.

   • Verifica que no haya elementos superpuestos.

💾 PASO 5: GUARDAR Y PROBAR

1. 👁️ Previsualizar en escritorio.

2. 👁️ Previsualizar en móvil (usa el selector de dispositivo del navegador).

3. 🎯 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:

1. En vista 📱 Móvil.

2. Selecciona cada columna.

3. Ve a 📋 Diseño > Ancho > pon 100%

4. O usa la función «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:

1. Selecciona el widget.

2. Ve a 🚀 Avanzado.

3. Revisa Márgenes y Relleno.

4. Reduce valores muy altos (más de 100px suele ser excesivo).

3️⃣ «No puedo alinear verticalmente»

Causa: Estás intentando alinear el widget, no la columna.
Solución:

1. Haz clic en la COLUMNA (borde).

2. Ve a 📋 Diseño.

3. Busca «Alineación vertical».

4. Elige: Arriba, Centro, Abajo.

4️⃣ «El diseño se ve diferente al publicar»

Causa: Caché del navegador o plugins.
Solución:

1. Limpia caché (Ctrl+F5).

2. Desactiva plugins de caché temporalmente.

3. Regenera CSS en Elementor > Herramientas.

💡 CONSEJOS PROFESIONALES DEL MÓDULO 3

🎯 PLANIFICA ANTES DE CONSTRUIR

1. Define jerarquía: Qué es H1, H2, H3…

2. Elige colores: 1 principal, 1 secundario, 1 de acento.

3. Selecciona fuentes: 1 para títulos, 1 para texto.

⚡ OPTIMIZA PARA VELOCIDAD

1. Comprime imágenes antes de subirlas.

2. Limita animaciones (ralentizan la página).

3. Revisa en móvil con conexión 3G simulada.

🔧 MANTÉN CONSISTENCIA

1. Mismos márgenes en todas las secciones similares.

2. Mismo estilo para todos los botones del mismo tipo.

3. Mismo padding en todas las tarjetas de servicios.

4. Mismos colores para todos los enlaces.

📱 TESTEA EN DISPOSITIVOS REALES

1. Tu móvil (el que más usas).

2. Tablet de un familiar.

3. Ordenador con pantalla grande.

4. Navegadores diferentes: Vivaldi, Opera, Firefox.

✅ RESUMEN DE COMPETENCIAS DEL MÓDULO 3

Ahora sabes cómo:

1. ✅ Usar los 9 widgets básicos con maestría.

2. ✅ Controlar secciones y columnas a nivel profesional.

3. ✅ Crear páginas complejas con estructura lógica.

4. ✅ Solucionar errores comunes de estructura.

5. ✅ Aplicar consejos profesionales de optimización.

🏆 RETO FINAL DEL MÓDULO 3

Crea una página «Equipo» con estos requisitos:

📋 REQUISITOS TÉCNICOS:

• 1 sección hero (cabecera grande que ocupa de lado a lado) con título, descripción y fondo.

• 4 perfiles en grid de 2×2 (2 columnas, 2 filas).

• Cada perfil: foto, nombre (H3), puesto, breve bio.

• Sección secundaria con 3 iconos + estadísticas.

• Botón final «Únete a nuestro equipo».

• Perfectamente optimizado para móvil.

🎯 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? 🚀