Show Header Hero en su página de inicio es una buena práctica para "advertir el color". Y si menú principal del sitio es transparenteEl renderizado es hermoso...
Esto es lo que te propongo lograr con esto tutorial Divi fácil, accesible incluso para principiantes...
- 1 – ¿Qué es un héroe de cabecera?
- 2 - ¿Por qué es mejor un héroe que un carrusel?
-
3 – Creación de un héroe de cabecera con un menú transparente
- 3.1 – Encabezamiento global con Divi Theme Builder
- 3.2 – Añade el logotipo y haz que el menú sea transparente
- 3.3 – Reducción de los márgenes internos
- 3.4 - Añadir títulos y llamadas a la acción
- 3.5 - Add Overlay
- 3.6 - Central Menú principal
- 3.7 - Añadir una forma separada
- 3.8 – Fijar menú principal
- 3.9 - Cambiar imagen de fondo a página
- 4 - Para concluir: otros recursos...
1 – ¿Qué es un héroe de cabecera?
Uno Header Hero es el término utilizado en Diseño Web para describir un imagen de pantalla completa que se muestra al visitar un sitio. Como regla general, Header Hero situado en la página de inicio sólo, pero finalmente se puede utilizar en cualquier página, es usted quien ve!
A menudo, el Header hero acompañado un título (marcado en ), tagline (marcado en o ) y botón de llamada (CTA). Aprovecha para poner algunas palabras clave, siempre es bueno para su SEO.
Note que Header Hero debe ser inspirador e indicar claramente los objetivos de su sitio. Además, no es raro ver un video jugando automáticamente en lugar de la imagen de pantalla completa.
Moreover, the Módulo de cabecera de pantalla completa es perfecto para realizar 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 héroe que un carrusel?
Mis estudiantes o clientes a menudo me preguntan cómo crear un carrusel- Sí. No me gusta mucho.
Los carrusels son:
- Mala experiencia para el usuario: Si están mal hechas o usan imágenes con diferente relación, a veces sopla la página y es peor en la versión móvil... Sin mencionar las imágenes que se desplazan demasiado rápido y que no tenemos tiempo para leer...
- Mal para 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 su SEO! No lo estoy diciendo, Lea esto.
- Mala para las páginas de carga: los carruseles pueden ser pesados y esto puede frenar rendimiento de su sitio.
- Y finalmente, ¡Los Carousels son obsoletos! Y eso es lo que estoy diciendo... ¡Ya no estamos en los 80!
Así que aquí hay varias buenas razones para construir un Hero con un menú transparente En lugar de comenzar su página de inicio con el buen carrusel viejo.
3 – Creación de un héroe de cabecera con un menú transparente
Ahora vamos a entrar en el corazón del tema y crear juntos su superb Header Hero y su menú transparente…
3.1 – Encabezamiento global con Divi Theme Builder
Vamos. use builder theme crear un global header que se mostrará en todo su sitio, veremos al final del tutorial cómo modificarlo en las otras páginas.
Si su deseo es utilizar este diseño en la página de inicio solamente, en este caso no crear el encabezado global, crear una plantilla única para su página de inicio (haga clic en "+ añadir un nuevo modelo" y asignarlo a su página de inicio).

- Ve. Divi Theme Builder entonces haga clic en Add Global Header.
- El tema del edificio se abre. Haga clic en la rueda dentada de la sección (azul) para acceder a la configuración. Vaya a la pestaña Sumario > Antecedentes Antecedentes para importar tu foto.

- A continuación, añadir una fila 1/1 (línea).
- Añadirlo Módulo de menú.
- Seleccione el menú para mostrar. Especifico que debe ser creado río arriba en WordPress, en la pestaña Apariencia > Menú.
3.2 – Añade el logotipo y haz que el menú sea transparente
Puede añadir su logotipo si lo desea.

- Siempre en la configuración del módulo Menú, vaya a la pestaña Sumario Logotipos para importar.
- A continuación, vaya a la pestaña Contenido > Antecedentes para eliminar el fondo y obtener un menú transparente.

- Siempre en la configuración del módulo Menú, vaya a la pestaña Estilo Dimensiones para reducir el tamaño del logotipo.
- Vaya a la pestaña Estilo Modelo para elegir la plantilla del menú: izquierda alineada, Centered (con logotipo arriba) o inline centeredElegí este para mi tutorial.
3.3 – Reducción de los márgenes internos
Por defecto, las secciones y líneas de Divi tienen márgenes internos. Esto entonces impacta la altura de tu cabecera.
Idealmente, el menú no debe ser demasiado ancho (alto) porque no es genial visitar un sitio con un tercio de la pantalla utilizada por el menú!
A continuación, editar los elementos para eliminar estos márgenes predeterminados incluidos.

- Editar configuración de la sección (azul), vaya a la pestaña Estilo Spacing y agarrar Margen interno 0px arriba.
- A continuación, editar la configuración de la línea (verde), ir a la pestaña Estilo Spacing y agarrar margen interno 10px en la parte superior (10px es un ejemplo, pero si pones 0px, es posible que el logotipo se adhiera a la parte superior de la pantalla).
3.4 - Añadir títulos y llamadas a la acción
Finalmente, tu Header Hero no sólo puede mostrar un menú transparente y uno imagen de fondoNo tendría mucho interés. A continuación, agregue lo que desea, por ejemplo:

- Añadir a Módulo de texto para poner un título H1 y un subtítulo (tagline)
- Añadir a Módulo Button para mostrar una llamada a la acción en su tienda o formulario de contacto, por ejemplo.
Te dejo configurar el diseño de estos dos módulos con las opciones nativas de Divi: selección de fuentes, colores, tamaños, márgenes (para hacerlo aire), altura de línea, etc.
¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"
3.5 - Add Overlay
Si encuentras que el texto en tu imagen no es lo suficientemente legible, debido a los colores que mezclan, entonces sería interesante añadir un "superposición". Es decir, un color semitransparente que se coloca entre la imagen de fondo y el texto:

- Editar configuración de la sección (azul), vaya a la pestaña Sumario > Antecedentes Degradado. Elige 2 colores (esto puede ser los mismos dos) y añade transparencia.
- Un poco más bajo, activa la opción Imagen de fondo del título. Esto permite que el gradiente de color se posiciona en la imagen de fondo.

¡Ese es el resultado! Elegí un gradiente en los tonos de blanco porque mis textos son negros. Pude haber hecho lo contrario con un overlay oscuro y textos blancos.
Advertencia: opción Imagen de fondo del título no funciona en combinación con la opción parallax. Si desea utilizar estas dos opciones al mismo tiempo, lea este tutorial que explica cómo añadir una superposición a una imagen de eje paralelo.
3.6 - Central Menú principal
Finalmente, es posible que tu menú transparente no está centrado. Si es así, así es como:

- En la administración de su sitio, vaya a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional y añadir el siguiente código:
/* --- centrer le menu --- */
.et_pb_menu .et_pb_menu__menu > nav > ul {
justify-content: center !important;
}
Bueno, eso debería solucionar el problema...
¡No te demores! Descubre el tema Divi aquí. !
3.7 - Añadir una forma separada
Para refinar su diseño Header Hero, posiblemente se puede añadir un formulario de separación en el fondo de la sección, también llamado Divider.

Para ello, vaya a la configuración de la sección (azul) y luego a la pestaña Estilo > Separador > para elegir la forma ideal. Si es necesario, añadir 50px o 100px de margen interno en la parte inferior de la sección, para ampliar la imagen y la altura de la Header Hero.
3.8 – Fijar menú principal
Tu Header Hero Ahora está acabado, tiene una buena cara, ¿verdad?

No es muy malo, pero puedo verte venir! Me dirás que el menú no está fijo Y así, tenemos que subir a la parte superior de la página para encontrarlo... Y eso es verdad...
Veamos cómo corregir esto:

Ir a la Ajustes del módulo de menú entonces ve a la pestaña Avanzadas √≥ Puesto ( significa "posición"). Elija fijada y colocar la ubicación En el medio.
Hay otras formas de hacer el menú Divi fijo, pero éste se ajusta a nuestras necesidades así que es perfecto... La entrega final es la siguiente:

¡Ahora está mejor!
3.9 - Cambiar imagen de fondo a página
Y aquí también, te vi venir. Estaba convencido de que ibas a hacerme esta pregunta en comentario: ¿Cómo lo haces si quieres cambiar la imagen sólo en ciertas páginas?
¡Sí! Global header usos Función del elemento mundial. Esto significa que si cambias la imagen Header Hero en su página de contacto, por ejemplo, cambiará a través de su sitio! Y sí, el color verde indica que estos elementos son sincronizados juntos…
Así es como:

- En Divi Theme Builder, agregue un nuevo modelo.
- Asignarlo a una página específica, por ejemplo el About...
- Cuando haga clic crear una plantilla, el encabezado global se duplica inmediatamente en este nuevo modelo.
- Simplemente haga clic en las opciones adicionales y seleccione Disable Global. El encabezado está ahora en color gris, indicando que los encabezados ya no son sincronizados.
- Ahora puede hacer todos sus cambios: texto, botón, imagen, separador, etc.
Aquí tienes:

4 - Para concluir: otros recursos...
¿Te gustó este tutorial? No hay nada de hechicero ahí, pero este artículo muestra que todo es realmente posible con Divi! Todas las opciones están ahí, solo utilízalas para realizar los diseños que necesitamos...
Otros recursos conexos son:
- Cómo crear una navegación vertical transparente que superpone su sitio web Divi
- Cómo crear una barra de menú flotante y transparente con Theme Builder
- Cómo hacer que su encabezado sea transparente y cosquilleo al pergamino
- El plugin de Divi Switch también ofrece muchas opciones para crear un menú transparente
Y finalmente, aquí hay un video de Joshhall que ofrece otra forma de Crear un menú transparente con Divi :
¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos! O aprender cómo utilizar eficazmente este tema a través de mi entrenamiento Divi !


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.
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…
Bonjour Lycia,
Merci pour ce tuto qui ma bien aidé.
J’aimerais dans la barre de menu mettre l’icône facebook ?
Quand je fais fixer le menu selon votre tuto le menu disparait à moitié…
Bonne journée
Philippe
Ah il faut peut-être ajuster le code à vos besoins
Bonjour,
Je suis entrain de suivre votre formation ebook divi et pas encore à l’aise avec le code.
Il est important pour mon site de mettre le logo FB dans le menu.
Cordialement
Philippe
Bonjour Philippe. Il y a plusieurs solution. En utilisant le Thème Builder, vous pourrez mettre tous les icônes sans coder. Sinon, il y a une autre solution expliquée au chapitre 6 de cet article : https://astucesdivi.com/icones-menu-divi/ mais mon conseil serait de vous pencher sur ce détail vers la fin de la création de votre site. Bon courage 😉
Bonjour et merci,
J’ai fais avec le thème builder, j’ai du louper un truc… j’y retourne
Philippe
Bonjour Lycia,
je construit un nouveau site avec Divi, avec des header hero
J’ai une question au niveau référencement…
Sur l’image de fond du header hero, il n’y a pas la possibilité d’indiquer des attributs (comme sur le module image par exemple) et dans la bibliothèque media j’ai bien renseigné l’attribut ‘alt’ et le Title, mais ça n’apparait pas dans le code source de la page…c’est très embêtant pour un site de photographe…
Vous avez une idée pour résoudre ce problème ?
Merci d’avance !
Salut Alain, tu as regardé dans les options avancées du module ?