Crear un Header Hero con menú transparente con Divi

Publicado el 08/04/2021 | 2 comentarios

Mostrar un Header Hero en su página de inicio es una buena práctica para "anunciar el color". Y si el menú principal del sitio es transparente, se ve muy bien...

Esto es lo que te propongo realizar con este Tutorial de Divi fácil, accesible incluso para los principiantes...

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es un héroe de cabecera?

Un Header Hero es el término de diseño web para una imagen a pantalla completa que se muestra cuando se visita un sitio. Normalmente, un héroe de cabecera se encuentra sólo en la página de inicio, pero en última instancia, puede utilizarlo en cualquier página, ¡usted decide!

A menudo, el héroe de la cabecera va acompañado de un título (

marcado en ), un eslogan (marcado en

o en

) y un botón de llamada a la acción (CTA). Aprovecha para colocar algunas palabras clave, siempre es

bueno para su SEO.

Tenga en cuenta que el héroe de la cabecera debe ser inspirador y exponer claramente los objetivos de su sitio. Además, no es raro ver un vídeo de reproducción automática en lugar de la imagen a pantalla completa.

De hecho, el Módulo de cabecera a pantalla completa de Divi es perfecto para este tipo de diseño, pero en este tutorial, lo construiremos nosotros mismos porque no permite añadir un menú transparente dentro...

2 - ¿Por qué es mejor un Header Hero que un carrusel?

Mis alumnos o clientes me preguntan a menudo cómo crear un carrusel... Sí... No me gusta mucho.

Los carruseles son :

  • Malas para la experiencia del usuario: si están mal hechas o utilizan imágenes con un ratio diferente, la página a veces salta y es peor en versión móvil... Por no hablar de las imágenes que se desplazan demasiado rápido y que no nos da tiempo a leer...
  • Malo para el SEO: si cada diapositiva está mal marcada semánticamente, si los enlaces son irrelevantes y si las imágenes son pesadas, ¡no hay nada peor para tu SEO! No soy yo quien lo dice, leer esto.
  • Malo para la carga de la página: los carruseles pueden ser pesados de cargar y esto puede ralentizar la rendimiento de su sitio web.
  • Y por último, ¡los carruseles están anticuados! Y esto lo digo yo... ¡Esto ya no son los años 80 🤣 !

Así que hay varias buenas razones para construir un Header Hero con un menú transparente en lugar de comenzar su página de inicio con el viejo carrusel.

3 - Creación de una cabecera de héroe con un menú transparente

Ahora vayamos al meollo de la cuestión y creemos su hermoso Header Hero con su menú transparente...

3.1 - Cabecera global con el Constructor de Temas Divi

Vamos a utilizar el constructor de temas para crear una cabecera global que se mostrará en todo su sitio, veremos al final del tutorial cómo modificarla en las demás páginas.

Si quieres utilizar este diseño sólo en la página de inicio, entonces no crees la cabecera global, crea una plantilla única para tu página de inicio (haz clic en "+ añadir nueva plantilla" y asígnala a tu página de inicio).

Créer un en-tête global avec Divi
Crear una cabecera global en el Theme Builder
  1. Ir a Divi > Constructor de temas luego haga clic en Añadir una cabecera global.
  2. Se abre el constructor de temas. Haga clic en la rueda dentada de la sección (azul) para acceder a los ajustes. Ir a la Contenido > Fondo > Imagen de fondo para importar su foto.
Ajouter le menu principal
Añadir el menú principal
  1. A continuación, añada una fila (línea) de 1/1.
  2. Añade el módulo Menú.
  3. Seleccione el menú que desea visualizar. Especifico que debe ser creado previamente en WordPress, en el Apariencia > Menú.

3.2 - Añadir el logotipo y hacer que el menú sea transparente

A continuación, puede añadir su logotipo si lo desea.

Logo et menu transparent Divi
Añade tu logo y quita el color para que el menú sea transparente
  1. Todavía en la configuración del módulo de menú, vaya a la sección Contenido > Logotipo para importarlo.
  2. A continuación, vaya a la Contenido > Fondo para eliminar el fondo y obtener un menú transparente.
Réduire la taille du logo
Reducir el tamaño del logotipo y elegir el estilo de visualización
  1. Siempre en la configuración del módulo Menú, vaya a la pestaña Estilo > Dimensionamiento para reducir el tamaño del logotipo.
  2. Ir a la Estilo > Modelo para elegir la plantilla del menú : alineado a la izquierda, centrado (con el logo de arriba) o en línea centradaHe elegido este para mi tutorial.

3.3 - Reducción de los márgenes internos

Por defecto, las secciones y filas de Divi tienen márgenes internos. Esto afecta a la altura de su cabecera.

Lo ideal es que la ubicación del menú no sea demasiado amplia (en altura) porque no es bueno visitar un sitio en el que un tercio de la pantalla es utilizado por el menú.

A continuación, edite los elementos para eliminar estos márgenes incluidos por defecto.

Supprimer les marges internes du menu
Eliminar los márgenes internos de la sección y la fila
  1. Editar la configuración de la sección (azul), ir a la Estilo > Espaciado e introduzca 0px de margen interno en la parte superior.
  2. A continuación, edite la configuración de la línea (verde), vaya al Estilo > Espaciado e introduce 10px de margen interno en la parte superior (10px es un ejemplo, pero si pones 0px, es posible que el logo se pegue a la parte superior de la pantalla).

3.4 - Añadir títulos y llamadas a la acción

Por último, su Header Hero no puede limitarse a mostrar un menú transparente y un imagen de fondono sería muy interesante. Así que añade lo que quieras, por ejemplo:

6 menu transparent
  1. Añade un Módulo de texto para poner un título H1 y un eslogan
  2. Añade un módulo de botones para mostrar una llamada a la acción a su tienda o su formulario de contacto, por ejemplo.

Te dejaré configurar el diseño de estos dos módulos usando las opciones nativas de Divi: elección de fuentes, colores, tamaños, márgenes (para que quede aireado), altura de líneas, etc.

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

3.5 - Añadir una superposición

Si ves que el texto de tu imagen no es lo suficientemente legible, debido a los colores que se mezclan, en este caso, sería interesante añadir una "superposición". Es un color semitransparente que se coloca entre la imagen de fondo y el texto:

Overlay pour améliorer la lisibilité du texte
Añade una superposición para mejorar la legibilidad
  1. Editar la configuración de la sección (azul), ir a la pestaña Contenido > Fondo > Degradado. Elige 2 colores (pueden ser los mismos dos) y añade transparencia.
  2. Un poco más abajo, active la opción Imagen de fondo del título. Esto permite colocar el gradiente de color sobre la imagen de fondo.
Résultat de l'overlay
El uso de una superposición hace que los textos sean más legibles

Aquí está el resultado. He elegido un degradado blanco porque mis textos son negros. Podría haber hecho lo contrario con una superposición oscura y textos blancos.

Advertencia: el Imagen de fondo del título no funciona en combinación con la opción parallax. Si quieres utilizar estas dos opciones al mismo tiempo, lee este tutorial que explica cómo añadir una superposición en una imagen de paralaje.

3.6 - Centrar el menú principal

Por último, es posible que su menú transparente no esté centrado. Si este es el caso, aquí se explica cómo hacerlo:

Centrer le menu principal
Centrar el menú principal
  1. En la administración de su sitio, vaya a la sección Apariencia > Personalizar > CSS adicional y añada el siguiente código:
/* --- centrer le menu --- */

.et_pb_menu .et_pb_menu__menu > nav > ul {
    justify-content: center !important;
}

Eso debería resolver el problema....

No esperes más. Descubra el tema Divi aquí !

3.7 - Añadir una forma de separación

Para refinar el diseño de su Header Hero, puede añadir un divisor en la parte inferior de la sección, también llamado Divisor.

Ajouter un séparateur en bas de section
Añade un separador en la parte inferior de la sección de héroe de la cabecera.

Para ello, vaya a la configuración de la sección (azul) y luego a la sección Estilo > Separador > Fondo para elegir la forma ideal. Si es necesario, añada 50px o 100px de margen interno en la parte inferior de la sección, para ampliar la imagen y la altura del Header Hero.

3.8 - Configuración del menú principal

Tu Héroe de Cabecera ya está terminado, tiene buena pinta, ¿verdad?

11 header non fixe

No está tan mal, ¡pero te veo venir! Me vas a decir que el menú no es fijo y que, por tanto, hay que volver a la parte superior de la página para encontrarlo... Y es cierto...

Veamos cómo corregir esto:

Fixer le menu en haut de l'écran
Arreglar el menú de Divi en la parte superior de la pantalla

Vaya a la configuración del módulo Menú y luego vaya a la sección Avanzado > Posición (esto significa "posición"). Elija el posición fija y establecer la ubicación en la parte superior central.

Hay otras formas de hacer el menú Divi fijopero este se adapta a nuestras necesidades así que es perfecto... Aquí está el renderizado final:

11 header fixed ok

¡Ahora es mejor!

3.9 - Cambiar la imagen de fondo según las páginas

Y ahí también te vi venir 🤣🤣🤣 ... Estaba seguro de que me ibas a hacer esta pregunta en los comentarios: ¿cómo se hace si se quiere cambiar la imagen sólo en algunas páginas?

¡Y sí! La cabecera global utiliza el funcionalidad del elemento global. Esto significa que si cambias la imagen Header Hero en tu página de contacto, por ejemplo, cambiará en todo tu sitio. Y sí, el color verde indica que estos elementos están sincronizados entre sí...

Así es como se hace:

Changer l'image du header hero
Cambiar la imagen de cabecera del héroe
  • En el constructor de temas Divi, añada una nueva plantilla.
  • Asignarlo a una página específica, por ejemplo, la página Acerca de...
  • Al hacer clic en crear una plantillala cabecera global se duplica inmediatamente en esta nueva plantilla.
  • A continuación, basta con hacer clic en las opciones adicionales y seleccionar Desactivar global. La cabecera es ahora gris, lo que indica que las cabeceras ya no están sincronizadas.
  • Ahora puede realizar todos los cambios: texto, botón, imagen, separador, etc.

Y ahí lo tienes:

Header Hero avec menu transparent
Resultado final del Header Hero con menú transparente

4 - Para terminar: otros recursos...

No hay nada de ciencia espacial en este tutorial, pero este artículo demuestra que todo es posible con Divi. Todas las opciones están ahí, sólo tenemos que utilizarlas para hacer los diseños que necesitamos...

Otros recursos relacionados son

Y por último, aquí hay un vídeo de Joshhall que muestra otra forma de crear un menú transparente con Divi:

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficiente con mi formación en Divi !

Header Hero et menu transparent avec Divi
Header Hero Divi
Transparent Divi menu

1.777 palabras

7

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

Effet zoom sur image avec texte cliquable

Efecto de zoom en la imagen con texto clicable

En este artículo se explica cómo se puede conseguir fácilmente un efecto de zoom al pasar el ratón por encima de imágenes con texto y un enlace en el que se puede hacer clic. No hace falta una extensión, ¡Divi lo hace fácil!

2 Commentaires

  1. GADEK

    Bonjour,

    j’ai suivi votre tutoriel avec attention et j’obtiens bien le même résultat. J’ai combiné le menu transparent avec un mega menu pour la gestion de mes sous-rubriques. Toutefois, l’arrière-plan de mon mega menu reste transparent.
    Je ne parviens pas à le modifier via css personnalisée (malgré balise « !important »). Divi vient systématiquement « surcoucher » mes instructions css. Auriez-vous une solution ?

    Merci d’avance.

  2. Lycia Diaz

    Gadek, regarde bien dans les options du module Menu (onglet Style) et là tu peux définir la couleur de l’arrière-plan du menu déroulant. Elle est bien cachée mais tu devrais la trouver si tu cherches bien. J’en suis sûre puisqu’il y a 3 jours j’ai aidé en visio-formation un internaute qui avait le même problème que toi et nous avons trouvé l’option…

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto