Una descripción general y revisión del paquete de diseño de encabezado de Divi Life

El paquete de diseño de encabezado de Divi Life es un conjunto de encabezados para Divi Theme Builder que se puede diseñar para que se adapte bien a 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 del encabezado para ayudarlo a decidir si se ajusta a sus necesidades.

Importación del paquete de diseño de encabezado de Divi Life

Antes de usar los diseños con Divi Theme Builder, deberá importarlos a su biblioteca Divi. Afortunadamente, este es un proceso simple y directo:

1. Descargue y descomprima los diseños en una carpeta en su computadora.
2. Vaya a Divi > Biblioteca Divi en el menú del panel de WordPress.
3. Seleccione Importar y exportar en la parte superior de la pantalla.
4. Seleccione Importar en la ventana emergente, seleccione Elegir archivo y navegue hasta el diseño que desea cargar (seleccione TODAS las plantillas Divi-Life-Header-Templates si desea cargarlas todas a la vez.
5. 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 desde biblioteca .

Seleccione la pestaña llamada Sus diseños guardados y elija el diseño que desee. Espere a que se importe.

Haga clic en el icono de edición para personalizar el diseño.

He seleccionado Header-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 la interfaz.

Si desea realizar cambios y no desea que se muestre el encabezado hasta que se realicen los cambios, entonces podría 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 utiliza los módulos estándar, por lo que funciona como cualquier encabezado. Seleccioné 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 del sitio web predeterminado y hacerlo global.

Ejemplos de encabezados

A continuación, se muestra 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 adapte a su diseño y luego ajustarlo a 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 la página de inicio y los diseños de página de destino del paquete de diseño de Pizzeria.

Diseño del encabezado 1

El encabezado 1 incluye un módulo de código, menú, búsqueda y un botón para crear el 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 agregar la clase CSS al menú. Afortunadamente, todos estos ajustes son fáciles de realizar. 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 gran botón de llamada a la acción. Así es como se ve con el fondo claro. Una sombra separa el encabezado de la página.

Aquí está el fondo oscuro. Estoy colocando el cursor sobre la llamada a la acción para mostrar que cambia de color.

El encabezado se reduce de altura a medida que se desplaza. Los elementos siguen siendo del mismo tamaño.

Aquí está la vista de 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 del teléfono apila el CTA debajo del logotipo y también conserva el estilo de los elementos con la clase CSS.

Diseño del encabezado 2

El encabezado 2 usa un módulo de código con CSS y JS, anuncios, imágenes, texto, redes sociales, menús y módulos de botones.

Este es el encabezado 2A. Así es como se ve en una página oscura. El encabezado no cubre todo el ancho del sitio. El menú superior es transparente e incluye botones sociales. La parte inferior tiene la llamada a la acción 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 ligera. Me gusta cómo se destaca esta CTA.

Después de desplazarse, el menú superior se desplaza con la página y el menú inferior se queda en la parte superior.

Aquí está la vista de tableta. El menú superior se desplaza con la página mientras que el menú inferior permanece fijo.

Aquí está la vista del teléfono. La llamada a la acción está apilada 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 sobre un fondo oscuro.

El menú superior se desplaza con la página, mientras que el menú inferior se queda en la parte superior de la pantalla.

Aquí está la vista de tableta.

Así es como la vista del teléfono apila los elementos.

Diseño del encabezado 4

El encabezado 3 incluye código, varios anuncios, un botón, un menú y módulos de seguimiento de redes sociales.

Aquí está el encabezado 3C sobre un fondo claro. La parte superior incluye la información de contacto y la llamada a la acción, 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 flotando 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 pega.

Esta es la vista de tableta.

La vista del teléfono apila los elementos.

Diseño del encabezado 5

El encabezado 5 incluye un módulo de código, un par de anuncios, seguimiento de redes sociales y módulos de menú.

Aquí está el encabezado 5C sobre 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. Destacan muy bien el rojo y el gris oscuro.

También se ve bien en el fondo claro. La sombra de la caja es más notoria.

La mitad superior del menú continúa desplazándose mientras la mitad inferior se adhiere a la parte superior de la pantalla.

Aquí está la vista de tableta.

Esta es la vista del teléfono. Me gusta la forma en que se acumula el contenido de la sección superior.

Diseño del encabezado 6

El encabezado 6 incluye un módulo de código, 4 anuncios, 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, la del medio incluye información de contacto y la parte inferior tiene los enlaces del menú.

Aquí está el encabezado sobre un fondo claro.

Las 2 secciones superiores del encabezado se desplazan hacia afuera y la sección inferior está pegajosa. Agrega una sombra de cuadro al menú inferior cuando se pega a la parte superior de la pantalla.

Aquí está la vista de 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 paquete de diseño de encabezado está disponible en Divi Life por $ 49 (a la venta por $ 5 durante el resto del año). Se puede usar 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. 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 adapte 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. ¿Ha probado el paquete de diseño de encabezado de Divi Life? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de PureSolution / shutterstock.com