Los encabezados y las áreas principales son lo primero que ven los visitantes cuando se carga el sitio web. Esto hace que su diseño sea crucial. La mayoría incluye los elementos básicos como botones de navegación, contacto y seguimiento social, imágenes, video, controles deslizantes, etc., pero diferenciarlos de la multitud es otra historia. En este artículo, veremos 15 sitios web de Divi con diseños de encabezados y héroes poco convencionales para ayudarlo a inspirarse para su próximo sitio web de Divi.
Los encabezados y las áreas principales son dos cosas completamente diferentes, pero los diseños a menudo se combinan para crear un solo elemento. Por esta razón, he combinado los dos en un solo artículo. Algunos solo tienen un elemento único que se destaca de la multitud, mientras que otros son únicos en su diseño general. Muchos contienen elementos que normalmente no se encuentran en un encabezado. Voy a señalar lo que me parece interesante acerca de ellos.
Espere hasta el final para ver algunos enlaces a los tutoriales de Elegant Themes y un par de paquetes de diseño gratuitos de Divi 100 para ayudarlo a construir su encabezado o área principal con Divi.
Ahora, pasemos a los sitios web, que no están en ningún orden en particular…
Este tiene un menú interesante con un CTA de contacto y botones de seguimiento social que se muestran dentro de cuadros junto a un menú de hamburguesas. La sección de héroe solo usa texto grande en dos colores sin nada más que se interponga en el camino. El rojo resalta lo que necesita saber. Me gusta la línea que separa el menú del área principal.
Ver sitio web
2. Marcos Hendriksen
Este usa una llamada a la acción interesante sobre el encabezado. Esa área también incluye seguimiento social y enlaces de cuentas. Las líneas punteadas alrededor del CTA lo ayudan a diferenciarse de los demás sin volverse desagradable. El encabezado incluye un CTA con degradado de fondo y el área principal incluye un formulario de suscripción, ambos con flechas que dirigen la atención hacia el CTA.
Ver sitio web
3. parrilla mongola de bd
Este sitio web tiene dos menús de navegación con CTA en ambos. Los CTA no luchan entre sí por tu atención. Sin embargo, lo que realmente se destaca es el buscador de ubicación dentro del menú principal. Me gusta el degradado detrás de ese menú y la línea amarilla que separa los menús principal y secundario. También me gusta cómo se superpone el logotipo desde el menú superior hasta la sección del control deslizante.
Ver sitio web
4. Apertura explosiva
Este utiliza una imagen de fondo que se convierte en el fondo del resto del sitio web. Esta imagen se utiliza como imagen principal. En lugar de colocar texto sobre la imagen, el título del sitio web es parte de la imagen misma. No utiliza otros botones o enlaces dentro del área principal, por lo que se destaca muy bien.
Ver sitio web
5. Hannah Gruber
Este usa un hermoso patrón de fondo con navegación debajo del área del héroe. La imagen del héroe permanece en su lugar en el desplazamiento. El menú es parte de la siguiente sección y se desplaza hacia arriba a medida que se desplaza. Una vez que el menú llega a la parte superior de la pantalla, se vuelve pegajoso y agrega el logotipo y los botones de seguimiento social a ambos lados.
Ver sitio web
6. Fábrica de peleas de Londres
Este coloca el encabezado un poco más abajo de lo normal, lo que permite que parte del área del héroe con un CTA viva sobre el encabezado. El área del héroe incluye un diseño diagonal que continúa con el resto del diseño. La parte del engranaje del logo gira mientras el texto permanece en su lugar.
Ver sitio web
7. Habilitar el diseño web
Este sitio web utiliza un fondo de video con superposición que incluye un eslogan, información y CTA. Incluye dos menús de navegación con un CTA en el menú principal. Sin embargo, lo que se destaca es ese pequeño botón en el extremo derecho. Al pasar el cursor sobre él, se expande ligeramente y se reproduce una versión a todo color del video de fondo, dentro del botón. Al hacer clic en el botón, se abre el video en un modal como se esperaba.
Ver sitio web
8. RVFTA
Este sitio incluye un enlace de imagen a las notas del programa de podcast y audio incorporado dentro del área de héroe, que se coloca sobre una imagen de fondo con una superposición de color marrón oscuro que funciona perfectamente para el tema del sitio. El reproductor de audio incorporado muestra el logotipo del sitio y enlaces a las notas del programa, descarga, RSS y botones para compartir. El reproductor de audio de podcast funciona con Blubrry.
Ver sitio web
9. Web nórdica
Este sitio web tiene una función de control deslizante única impulsada por Slider Revolution . El control deslizante desvanece el texto y los elementos en la pantalla mientras una animación de nieve mueve la nieve de abajo hacia arriba. A medida que se desplaza, el texto y la imagen de fondo vuelven lentamente a su lugar, independientemente el uno del otro.
Ver sitio web
10. Diseños de pozos
El área principal de este sitio web utiliza un bonito fondo estampado con gráficos de dibujos animados y texto con efectos de sombra. Tiene un separador de secciones para separarlo de la cabecera. Sin embargo, lo que destaca son las nubes. Están animados, se desplazan de izquierda a derecha y se mueven frente al árbol y detrás del cohete. Nada más en la imagen se mueve.
Ver sitio web
11. Museo Nacional de Infantería
Este incluye un gran logotipo superpuesto, un menú principal, una barra de mensajes sobre el menú, un control deslizante y luego una llamada a la acción de donación debajo del control deslizante. Lo que es único es la fila de botones sobre el menú principal. Los botones verde y rojo cambian de color al pasar el mouse y se vinculan a otras páginas del sitio web. Los botones azul oscuro te llevan a las distintas redes sociales.
Ver sitio web
12. Cooperativa de crédito financiera Power
Este es todo negocio. Incluye un formulario de inicio de sesión bancario seguro integrado con pestañas para elegir entre cuentas personales y comerciales. Las pestañas incluyen navegación que crea un mega menú con opciones bancarias. La pestaña Negocios incluye un control deslizante. El menú secundario incluye una función de chat y un número de teléfono con íconos, redes sociales y una CTA de suscripción.
Ver sitio web
13. Salón Ob’Art
Este es uno de los diseños más exclusivos para un área de encabezado/héroe. Tiene un logotipo grande que se conecta con el mega menú y el control deslizante. Encima del menú hay un título de página con botones de búsqueda y navegación en la parte superior ya la derecha. Debajo del control deslizante hay otro conjunto de botones de navegación con iconos con botones sociales debajo. Tiene mucho que hacer en un área pequeña, pero sigue siendo fácil de usar.
Ver sitio web
14. La generación
Este sitio tiene uno de los controles deslizantes más exclusivos que he visto. Las diapositivas están numeradas. Los números aparecen a la derecha con el número de la diapositiva actual más grande que los demás. El logotipo está en la esquina derecha y en la esquina inferior derecha hay un botón de llamada animado. Se coloca una barra vertical a la izquierda con un icono de hamburguesa para abrir el menú, un título y un eslogan alineados verticalmente, y un botón de correo electrónico. Los botones incluyen bonitas animaciones flotantes.
Ver sitio web
15. Weberas
Este sitio web muestra un cinemagraph para la imagen del héroe. El logotipo se coloca a la derecha encima del menú. El menú incluye algunas características únicas. Contiene iconos para correo electrónico e información. Al pasar el cursor, se abrirán. El botón del menú de información proporciona un número de teléfono en el que se puede hacer clic y enlaces a redes sociales, con un icono y texto para cada uno.
Ver sitio web
Pensamientos finales
Ese es nuestro vistazo a 15 sitios web de Divi con encabezados poco convencionales y diseños de héroes para ayudarlo a inspirarse para su próximo sitio web de Divi. Algunos solo tienen una cosa que se destaca, mientras que otros son únicos de principio a fin. Algunos proporcionan información compleja que es fácil de seguir, mientras que otros la mantienen simple pero interesante.
Para obtener más información sobre el diseño del área de encabezado y héroe con Divi y algunos paquetes de diseño gratuitos, consulte los artículos:
- Cómo abrir Divi Fullwidth Header & Slider Buttons en una nueva pestaña/ventana
- 5 estilos creativos de módulos de encabezado Divi que puede lograr usando configuraciones integradas
- Descarga gratuita de Divi: el kit de interfaz de usuario del encabezado Divi
- La extensión de encabezado Divi gratuita proporciona 20 nuevos estilos de menú de hamburguesas
- Divi Nation Short: 3 modificaciones de encabezado Divi súper simples
- Divi Nation Short: cómo obtener un fondo de video de pantalla completa cuando se usa el módulo de encabezado de ancho completo de Divi
- Recree una sección Trendy Hero para su próximo proyecto Divi de comercio electrónico
Queremos escuchar de ti. ¿Cuál de estos diseños de encabezado y héroe es tu favorito? Háganos saber en los comentarios a continuación.