El paquete de diseño de encabezado de Divi Life es un conjunto de encabezados para Divi Theme Builder que se pueden diseñar para que encajen bien con cualquier sitio web de Divi . Los encabezados se destacan entre la multitud con un nuevo estilo agregado con código. El paquete de diseño incluye seis diseños de encabezado con tres estilos para cada uno. En este artículo, veremos el paquete de diseño de encabezado para ayudarlo a decidir si se ajusta a sus necesidades.
Antes de usar los diseños con Divi Theme Builder , deberá importarlos a su biblioteca Divi. Afortunadamente, este es un proceso simple y directo:
- Descargue y descomprima los diseños en una carpeta de su computadora.
- Vaya a Divi > Biblioteca Divi en el menú del panel de WordPress.
- Seleccione Importar y exportar en la parte superior de la pantalla.
- Seleccione Importar en la ventana emergente, seleccione Elegir archivo y navegue hasta el diseño que desea cargar (seleccione TODAS-Divi-Life-Header-Templates si desea cargarlas todas a la vez.
- Haga clic en Importar diseños de Divi Builder y espere a que se complete la carga.
Los diseños ahora estarán disponibles en su biblioteca. En el ejemplo anterior, seleccioné cargar todas las plantillas. Theme Builder ahora tiene acceso a todos los diseños. Solo necesitará realizar ajustes de código y menú en el encabezado 1. El resto funciona como está.
Creación de un encabezado global en Divi Theme Builder
Abra Divi Theme Builder y haga clic para agregar un encabezado global. Seleccione Agregar de la biblioteca .
Seleccione la pestaña llamada Sus diseños guardados y elija el diseño que desee. Espera a que importe.
Haga clic en el icono de edición para personalizar el diseño.
He seleccionado Encabezado-1-a. Esto muestra el diseño en la vista de estructura alámbrica. Incluye un módulo de código con CSS y JS personalizados. Muchos de los módulos incluyen ID de clase para el CSS personalizado. Es posible que parte del código no se ejecute en la vista previa del generador de temas. Recomiendo ver el encabezado en el front-end.
Si desea realizar cambios y no desea que se muestre el encabezado hasta que se realicen los cambios, puede considerar crear una página de prueba y asignar el encabezado a esa página antes de convertirla en un encabezado global.
Cambiar el contenido y el estilo
A continuación, solo necesita elegir su menú, agregar su logotipo y personalizar los colores para que coincidan con su sitio web. El encabezado usa los módulos estándar, por lo que funciona como cualquier encabezado. He seleccionado mi menú en el ejemplo anterior.
El botón ya usa estilos personalizados. Simplemente agregue sus colores y fuentes diseñados. Haga clic para guardar los cambios.
Además, asegúrese de guardar los cambios en la pantalla principal. Agregué una versión del encabezado a una publicación específica para poder probar el encabezado antes de colocarlo en la plantilla de sitio web predeterminada y hacerlo global.
Ejemplos de encabezado
He aquí un vistazo a cómo se ven las plantillas con mi sitio de prueba. Los 6 diseños tienen una versión prediseñada de colores claros, oscuros y brillantes. Esto hace que sea más fácil elegir un encabezado que se ajuste a su diseño y luego modificarlo según sus necesidades. También tienen botones que cambian de color al pasar el mouse.
Veremos una combinación de ellos con diferentes colores de fondo y tamaños de pantalla. Estoy usando los diseños de la página de inicio y la página de destino del paquete de diseño de Pizzeria.
Diseño de encabezado 1
El encabezado 1 incluye un módulo de código, un menú, una búsqueda y un botón para crear la CTA.
El proceso de importación no mantiene los valores correctamente, por lo que será necesario cambiar tres líneas en el CSS.
Además, será necesario cambiar el nombre del menú y será necesario agregar la clase CSS al menú. Afortunadamente, todos estos ajustes son fáciles de hacer. Las instrucciones están en la documentación . Esta es la única vez que necesité la documentación durante esta revisión.
El resultado es un menú elegante con líneas divisorias para los tres elementos principales del menú ubicados a la izquierda, el resto del menú ubicado a la derecha, un cuadro de búsqueda con un ícono dentro del campo de búsqueda y un botón CTA grande. Así es como se ve con el fondo claro. Una sombra separa el encabezado de la página.
Aquí está el fondo oscuro. Estoy pasando el cursor sobre el CTA para mostrar que cambia de color.
El encabezado se reduce en altura a medida que se desplaza. Los elementos siguen siendo del mismo tamaño.
Aquí está la vista de la tableta. Los elementos del menú se colocan dentro del menú desplegable. Los tres elementos con la clase CSS incluyen un estilo que los hace destacar del resto.
La vista de teléfono apila la CTA debajo del logotipo y también conserva el estilo de los elementos con la clase CSS.
Diseño de encabezado 2
El encabezado 2 usa un módulo de código con CSS y JS, publicidad, imagen, texto, redes sociales, menú y módulos de botones.
Este es el encabezado 2A. Así es como se ve en una página oscura. El encabezado no cubre el ancho completo del sitio. El menú superior es transparente e incluye botones sociales. La parte inferior tiene la CTA y la información de contacto. Se puede hacer clic en el número de teléfono.
Aquí está el diseño en una página clara. Me gusta cómo se destaca este CTA.
Después de desplazarse, el menú superior se desplaza con la página y el menú inferior se mantiene en la parte superior.
Aquí está la vista de la tableta. El menú superior se desplaza con la página mientras que el menú inferior se mantiene.
Aquí está la vista del teléfono. El CTA se apila debajo del menú. El encabezado se desplaza con la página.
Diseño del encabezado 3
Los módulos para el encabezado 3 incluyen código, seguimiento de redes sociales, menú y un botón.
Aquí está el encabezado 3B con un fondo claro. La sección superior incluye botones sociales y búsqueda, mientras que la sección inferior agrega el CTA.
Así es como se ve contra un fondo oscuro.
El menú superior se desplaza con la página mientras que el menú inferior se mantiene en la parte superior de la pantalla.
Aquí está la vista de la tableta.
Así es como la vista de teléfono apila los elementos.
Encabezado 4 Diseño
El encabezado 3 incluye código, varios anuncios publicitarios, un botón, un menú y módulos de seguimiento de redes sociales.
Aquí está el Encabezado 3C contra un fondo claro. La parte superior incluye la información de contacto y CTA, mientras que la parte inferior muestra los botones sociales.
Así es como se ve con un fondo oscuro. Los colores originales se ven muy bien con este fondo. Estoy pasando el cursor sobre la CTA en este ejemplo.
Así es como se ve este después de desplazarse. La sección superior se desplaza con el sitio y la sección inferior se mantiene.
Esta es la vista de la tableta.
La vista de teléfono apila los elementos.
Encabezado 5 Diseño
El encabezado 5 incluye un módulo de código, un par de anuncios publicitarios, seguimiento de redes sociales y módulos de menú.
Aquí está el encabezado 5C contra un fondo oscuro. La parte superior incluye un número de teléfono en el que se puede hacer clic, botones sociales y un enlace al formulario de contacto. El rojo y el gris oscuro se destacan muy bien.
También se ve bien en el fondo claro. La sombra del cuadro es más notable.
La mitad superior del menú continúa desplazándose mientras la mitad inferior se pega a la parte superior de la pantalla.
Aquí está la vista de la tableta.
Esta es la vista del teléfono. Me gusta la forma en que se acumula el contenido de la sección superior.
Encabezado 6 Diseño
El encabezado 6 incluye un módulo de código, 4 anuncios publicitarios, un módulo de seguimiento de redes sociales y un módulo de menú.
Este es el Encabezado 6B contra un fondo oscuro. Este tiene tres secciones: la parte superior incluye botones sociales, el medio incluye información de contacto y la parte inferior tiene los enlaces del menú.
Aquí está el encabezado contra un fondo claro.
Las 2 secciones superiores del encabezado se desplazan y la sección inferior es pegajosa. Agrega una sombra de cuadro al menú inferior cuando se adhiere a la parte superior de la pantalla.
Aquí está la vista de la tableta. Mueve el número de teléfono a la parte superior.
Aquí está el diseño en la vista del teléfono.
Compra
El Header Layout Pack está disponible en Divi Life por $49 (a la venta por $5 durante el resto del año). Es para uso en sitios ilimitados para usted y sus clientes e incluye acceso a todas las actualizaciones futuras. También incluye soporte y documentación.
pensamientos finales
El paquete de diseño de encabezado para Divi Theme Builder es un conjunto interesante de diseños. El CSS y JavaScript agregan un estilo que normalmente no está disponible en un encabezado. Esto ayuda a que el encabezado tenga un aspecto muy diferente al de los encabezados estándar. Dado que cada diseño tiene múltiples opciones prediseñadas, es fácil encontrar algo que se ajuste a su sitio web sin tener que hacer muchas modificaciones. El estilo ya encaja con los diseños Divi gratuitos de ET.
Los encabezados parecen diseñados profesionalmente y los encontré fáciles de usar. Solo he mirado algunos de ellos. Trabajar con el encabezado 1 es el único diseño que requiere pasos complicados. No es tan difícil si lees las instrucciones (adivina cómo lo sé). Solo tenga en cuenta que requiere más pasos que los demás.
Si está interesado en encabezados diseñados profesionalmente para Divi Theme Builder, vale la pena echarle un vistazo al paquete de diseño de encabezado de Divi Life .
Queremos escuchar de ti. ¿Has probado el Header Layout Pack de Divi Life? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de PureSolution / shutterstock.com