Producto destacado de Divi: paquete de diseño de encabezado
Publicado: 2023-02-06El encabezado es uno de los primeros elementos que se cargan para cualquier sitio web Divi que cree. Esto significa que el encabezado a menudo da la primera impresión que cualquiera ve de un sitio web, lo que hace que el diseño del encabezado sea una parte crucial de cada sitio web. Afortunadamente, no tienes que crear tu encabezado desde cero. Hay muchos diseños de encabezado en Divi Marketplace para darle una ventaja. El paquete de diseño de encabezado es un ejemplo. Este es un conjunto de más de 80 encabezados personalizados que funcionan para casi cualquier tipo de sitio web. En esta publicación, veremos el paquete de diseño de encabezado para ayudarlo a decidir si es el producto adecuado para sus necesidades.
Cargar paquete de diseño de encabezado
Header Layout Pack incluye dos archivos comprimidos. El primero es un único archivo que contiene los 81 diseños. Estos diseños se cargan juntos. El segundo es un archivo complementario e incluye seis archivos. Estas son las categorías de los diseños de encabezado. Esto le permite cargar solo los diseños en una categoría particular, como WooCommerce. Esto también es útil si tiene un límite de carga de tamaño de archivo y no puede cargar todos los archivos al mismo tiempo.
El proceso para cargar los diseños es el mismo para todos los archivos:
- Ir a Divi
- Seleccionar biblioteca Divi
- Haga clic en Importar y exportar
- Seleccione la pestaña Importar
- Haga clic en Elegir archivo y navegue hasta los archivos JSON descomprimidos en su computadora
- Haga clic en Importar diseños de Divi Builder
Una vez que se complete la importación, tendrá 81 elementos nuevos en su Biblioteca Divi (si eligió el archivo JSON principal). Están etiquetados y nombrados según sus categorías, por lo que son fáciles de identificar. Estos diseños son diseños estándar de la Biblioteca Divi, por lo que se pueden usar con cualquier diseño Divi para una página, publicación o cualquier diseño en Divi Theme Builder, y se pueden almacenar en Divi Cloud para usar en cualquier sitio web Divi. Recomendamos usarlos en Divi Theme Builder y asignarlos a categorías globales o individuales.
Ejemplos de paquetes de diseño de encabezado
Veamos algunos diseños de encabezado de cada una de las seis categorías. En mis ejemplos, cargaré cada diseño en Divi Theme Builder. A menudo se agregan nuevos diseños al paquete de diseño de encabezado. Los estoy seleccionando al azar, pero me concentraré en una combinación de diseños antiguos y nuevos. Al verlos en la pestaña Sus diseños guardados, puede seleccionar las categorías o ver todos los diseños.
Para mis capturas de pantalla, estoy usando la página de inicio del paquete gratuito de diseño de remodelación del hogar que está disponible en Divi. Veremos las versiones de estructura alámbrica, escritorio y teléfono de los encabezados.
Encabezados avanzados
En primer lugar, aquí hay un vistazo a Encabezados avanzados, que contiene 30 diseños.
Encabezado avanzado V1
El primer encabezado avanzado incluye un módulo de menú, un módulo de botones y dos módulos de texto. También incluye un módulo de código con CSS.
El encabezado incluye submenús desplegables con estilo. Un botón de CTA de cotización se estira al pasar el mouse.
Mientras que los menús en la versión de escritorio se abren al pasar el mouse, el CSS crea un menú móvil personalizado con botones que incluyen flechas que muestran si el menú se puede abrir o contraer.
Encabezado avanzado V20
La versión 20 de Advanced Header incluye cuatro módulos de imagen, tres módulos de Blurb, un módulo de menú y un módulo de código.
Los módulos de imagen se pueden utilizar para logotipos. Todos los módulos de Blurb son botones en los que se puede hacer clic para obtener información de contacto, servicios y un CTA para obtener un presupuesto.
Los cambios de menú móvil se agregan a la versión del teléfono con CSS.
Encabezado Avanzado V30
Advanced Header V30 incluye tres módulos de texto, un módulo de menú y un módulo de código.
La versión de escritorio muestra una barra de menú superior roja con un mensaje corto y un número de teléfono en texto grande. Un logotipo y un menú se colocan debajo e incluyen un submenú desplegable diseñado para que coincida con la barra de menú superior.
Mientras que la versión de escritorio incluye resaltados en rojo, la versión para teléfono elimina el fondo rojo de los submenús e incluye las opciones de CSS.
Encabezados superpuestos a pantalla completa
En segundo lugar, veremos los encabezados de superposición de pantalla completa del paquete de diseño de encabezado, que incluye 3 diseños.
Encabezado superpuesto a pantalla completa V2
Fullscreen Overlay V2 viene con muchos elementos que incluyen texto, imágenes, botones, anuncios publicitarios, código, redes sociales, un menú, etc.
Incluye un ícono de menú de hamburguesas con una animación flotante. El botón CTA se ensancha al pasar el mouse.
El menú se abre a pantalla completa cuando se hace clic e incluye submenús en los que se puede hacer clic.
Aquí está la versión para teléfono, que sigue el mismo diseño.
Encabezado superpuesto a pantalla completa V3
Fullscreen Overlay Header V3 utiliza módulos similares al diseño anterior, pero crea un diseño diferente para la superposición de pantalla completa.
El encabezado del escritorio incluye la CTA y el ícono de hamburguesa con animación flotante.
Su menú cubre la mitad de la pantalla mientras que una imagen ocupa la otra mitad de la pantalla.
La versión para teléfono sigue el mismo diseño para el menú, pero no incluye la imagen.
Encabezado con diapositivas
En tercer lugar, veremos el encabezado con diapositivas del paquete de diseño de encabezado, que incluye tres diseños.
Encabezado con Slide-ins V2
La versión 2 crea el deslizable con un módulo Blurb, varios módulos de texto, un módulo de menú, un módulo de botones y código.
El menú deslizable muestra los submenús debajo de un mensaje. En la parte inferior del menú, puedes encontrar un CTA y una imagen.
La versión para teléfono elimina la imagen pero mantiene el diseño del menú.
Encabezado con Slide-ins V3
La versión 3 incluye módulos de Blurb para crear los complementos.
El escritorio deslizable incluye animación flotante y muestra texto e íconos. Se puede hacer clic en cada uno de los elementos.
Los elementos en los que se puede hacer clic para el menú deslizable del teléfono son mucho más grandes que la versión de escritorio, lo que facilita su uso en dispositivos móviles.
encabezados simples
En cuarto lugar, Simple Headers incluye 30 diseños.
Encabezados simples V15
La versión 15 de Simple Headers tiene dos filas e incluye un módulo de redes sociales y varios módulos de Blurb.
La versión de escritorio incluye una barra superior con información de contacto. Se centra un logotipo y el menú incluye submenús.
La versión para teléfono agrega los botones de alternar para los submenús.
Encabezados simples V22
Este incluye dos filas para crear el encabezado.
La barra superior muestra una llamada a la acción con una animación flotante, el logotipo en el centro y un número de teléfono. Su menú incluye submenús con estilo.
La versión para teléfono muestra los submenús con conmutadores creados en el Módulo de código.
Encabezados de logotipos cuadrados
En quinto lugar, Square Logos Headers incluye cinco diseños. Son ideales si tiene un logotipo que es más alto que la mayoría de los logotipos.
Encabezados de logotipos cuadrados V3
Este fue construido con una sección de especialidad para incluir un diseño de varias columnas. El logotipo cuadrado se crea con un módulo de imagen en su propia columna.
La versión de escritorio incluye una barra superior con un cuadro de búsqueda e información de contacto. Todos los menús tienen un estilo que coincide con el fondo de la barra superior.
La versión para teléfono incluye los conmutadores de submenú creados con CSS.
Encabezados de logotipos cuadrados V4
La versión 4 incluye tres columnas para crear el logotipo, el menú y las llamadas a la acción.
La versión de escritorio muestra el logotipo y el número de teléfono en las dos columnas exteriores. Una columna central incluye dos Filas. La fila superior muestra información de contacto y un CTA, mientras que la fila inferior muestra el menú con un fondo diseñado para que coincida con los íconos y el botón de la fila superior.
La versión para teléfono incluye una gran área de logotipo. Los submenús incluyen los conmutadores creados con CSS.
Woo Encabezados
Por último, veremos el paquete de diseño de encabezado, que incluye 10 encabezados de WooCommerce.
Encabezados Woo V3
Nuestro primer encabezado Woo incluye dos filas. La fila superior incluye un módulo de texto, mientras que la segunda fila muestra un módulo de menú y varios módulos de iconos.
El módulo de texto de la fila superior crea un banner de ventas. Los gráficos incluyen íconos de persona, corazón y carrito que pueden vincularse con el inicio de sesión de la cuenta de la persona, su lista de favoritos y su carrito de compras.
La versión para teléfono mueve los íconos arriba del menú de hamburguesas. Al igual que los otros que hemos visto, este submenú incluye conmutadores creados con CSS.
Encabezados Woo V7
Woo header versión 7 se creó con tres filas que incluyen módulos de Blurb para crear enlaces interesantes de WooCommerce.
La versión de escritorio muestra un mensaje y los enlaces de Woo en la barra superior. Una barra central muestra un logotipo y una búsqueda de productos de WooCommerce. La barra de menú incluye botones de redes sociales.
Esta es la versión para teléfono, que coloca los íconos de las redes sociales debajo del ícono del menú de hamburguesas. Todo está bien espaciado en la pantalla del teléfono e incluso incluye los enlaces de WooCommerce y el cuadro de búsqueda de productos.
Encabezados Woo V10
Woo Header versión 10 también incluye tres filas. Incluye una búsqueda de productos y utiliza un módulo de texto para crear un banner.
La versión de escritorio muestra un banner de ventas verde en la parte superior. Los íconos, botones y resaltados coinciden con la barra verde. La barra central incluye los íconos de WooCommerce, mientras que el menú y la búsqueda se encuentran en la parte inferior.
Aquí está la versión para teléfono, que coloca el cuadro de búsqueda debajo del menú de hamburguesas. Este también incluye los conmutadores de submenú creados con CSS.
Compre el paquete de diseño de encabezado
Header Layout Pack está disponible en Divi Marketplace por $15. Incluye actualizaciones de por vida, uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días.
pensamientos finales
Esa es nuestra mirada al paquete de diseño de encabezado. Hay muchos diseños en este paquete de encabezado. Se ven elegantes, tienen muchas opciones de diseño y son fáciles de usar. Dado que los diseños fueron creados por la misma persona, comparten algo en común que creo que los hace más fáciles de usar. Los métodos están estandarizados, por lo que si sabe cómo personalizar uno de los diseños, puede personalizar el resto. Si está interesado en un amplio conjunto de encabezados, Header Layout Pack es un trabajo que debe considerar.
Queremos escuchar de ti. ¿Has probado el Header Layout Pack para tu sitio web Divi? Cuéntanos tu experiencia en los comentarios.