Diseño de portada profesional con Elementor

Diseñar una página de inicio profesional en WordPress con Elementor es más simple de lo que parece, incluso si recién empiezas. Aquí aprenderás a configurar la portada, ajustar el menú con Astra, crear secciones con Flexbox y agregar fondos de video que transformen tu sitio en pocos clics.

¿Cómo cambiar la página de inicio en WordPress?

Cuando instalas WordPress por primera vez, la portada muestra tus últimas entradas y eso casi nunca es lo que quieres para un sitio profesional. Para cambiarlo, ve al panel de administración, entra a Ajustes y luego a Lectura. Ahí selecciona la opción que indica mostrar una página estática en vez de las últimas entradas y elige la página que diseñaste, en este caso Manos del Monte [01:00].

¿Por qué no veo los cambios después de guardar? Porque los navegadores guardan en caché una versión local del sitio para cargarlo más rápido. Agrega /?cache al final de la URL y verás los cambios actualizados al instante.

Este truco del caché te ahorra horas de frustración cuando estés probando ajustes en vivo.

¿Cómo personalizar el menú de navegación con Astra?

Aunque Elementor tiene opciones potentes para encabezado y footer, casi todas son de la versión paga. La buena noticia es que el tema Astra te permite editar estos elementos gratis desde el Customizer de WordPress, accesible en Apariencia > Personalizar [01:55].

Dentro del Customizer puedes ajustar:

• El tamaño del logo, haciéndolo más compacto para que respire mejor.
• La tipografía del título del sitio, controlando el tamaño desde la sección de diseño.
• La descripción del sitio, que puedes mostrar u ocultar según convenga.
• La vista responsive, con íconos específicos para escritorio, tablet y móvil.

Un detalle clave: si el título se ve enorme en celular, haz clic en el ícono de teléfono móvil junto a tamaño de la fuente y define un valor específico, como 14 píxeles, para que se ajuste solo en esa versión [02:50]. Así mantienes el diseño limpio en todos los dispositivos sin afectar la versión de escritorio.

¿Cómo crear secciones atractivas con Elementor y Flexbox?

Una vez en el editor de Elementor, lo primero es ocultar el título duplicado. Ve a Ajustes de la página y activa la opción Esconder título [03:35]. Luego elimina el contenido importado de Gutenberg para empezar con secciones nuevas más visuales.

¿Por qué usar Flexbox en lugar de Grid?

Flexbox te da más flexibilidad para acomodar elementos en columna o fila, ideal para encabezados y bloques de contenido apilados. Al crear una nueva estructura, elige Dirección Columna hacia abajo y configura el ancho completo [04:20].

Si ves que el bloque no ocupa toda la pantalla, el problema está en el tema. Ve a Personalizar > Global > Contenedor en Astra y selecciona Ancho completo. Recarga el editor y notarás que tu sección ahora se pega al menú y se extiende de borde a borde [04:55].

¿Cómo agregar un video de fondo en el header?

Este es uno de los trucos más vistosos. En la sección de estilos del contenedor, busca Fondo y elige el tipo Video. Pega la URL de un video de YouTube relacionado con tu marca, por ejemplo buscando manos del monte naturaleza video corto [06:30].

¿Puedo usar cualquier video de YouTube como fondo? Solo si tienes derechos de uso. La alternativa segura es generar un video con inteligencia artificial y usarlo libremente en tu diseño.

Para que el texto sobre el video se lea bien, edita el encabezado y cambia el color de texto a blanco u otro tono claro que contraste con la imagen de fondo. También define una altura mínima de 300 píxeles en el contenedor para que el header tenga presencia visual.

¿Cómo controlar espaciado entre secciones en Elementor?

Cuando agregas un párrafo debajo del encabezado, suele quedar demasiado pegado. Tienes tres formas de solucionarlo [08:00]:

• Agregar un espaciador desde el panel de elementos, igual que en Gutenberg.
• Usar un separador, que añade espacio más una línea decorativa.
• Editar el relleno (padding) del contenedor en la pestaña Avanzado.

Si quieres espacio solo en la parte superior, haz clic en el ícono de cadenita junto al padding para desbloquear los lados y editar únicamente el valor de arriba. La diferencia entre padding y margen es importante: el padding crea espacio dentro del contenedor, el margen lo crea hacia afuera.

¿Cómo combinar imagen, botón y texto en una misma fila?

Elementor ofrece estructuras predefinidas como una sección grande junto a dos pequeñas. Arrastra una imagen al bloque grande y selecciona una de tu biblioteca. En los bloques chicos coloca un botón que herede los estilos globales y un párrafo con el editor de texto [10:15].

Para centrar el botón, ve al contenedor (el cuadradito gris) y en justificación y alineación del contenido elige centrar. Si después decides que el botón se ve mejor debajo del párrafo, simplemente arrastra la sección hacia abajo y el orden cambia al instante.

Ahora te toca a ti: explora los bloques de Elementor, prueba composiciones distintas y comparte capturas de tu diseño en los comentarios.