Cómo diseñar un encabezado de navegación creativo con Divi

La publicación de hoy trata sobre la combinación de dos elementos muy importantes en su sitio web: encabezado y navegación. Este diseño único organiza múltiples botones dentro de su encabezado para servir como un menú de navegación funcional y atractivo.

Este diseño está inspirado en un sitio de entrenador personal de Wild Side Design Co. y funcionaría muy bien para sitios que quieren simplificar las cosas y blogs que necesitan mostrar categorías de una manera nueva.

En todo caso, espero que esto te inspire a construir otro gran diseño con Divi .

Vistazo

Todo lo que necesitas es Divi

Para este tutorial, usaré el generador visual Divi para diseñar este encabezado de navegación. Creo que disfrutarás de la manera simple pero poderosa en que Divi te permite crear algo completamente único.

Le ofreceré un diseño alternativo que consiste en agregar una imagen de fondo a sus botones, por lo que querrá usar imágenes con un tamaño de 100 px por 150 px si sigue ese camino.

Diseño de la sección de encabezado

Comencemos creando una nueva página e implementando el generador visual. De manera predeterminada, habrá una sección esperando que la edites en la parte superior de la página. Vaya a la configuración de la sección y agregue una imagen de fondo y una superposición de degradado actualizando lo siguiente:

Imagen de fondo: [insertar imagen de 1920 px por 1080 px]

Color de degradado de fondo izquierdo: rgba(127,23,60,0.61)


Color de degradado de fondo derecho: rgba(127,23,60,0.59)

Coloque el degradado sobre la imagen de fondo: SÍ

Luego agregue un poco de relleno superior e inferior para darle a nuestro contenido futuro un respiro.

Acolchado personalizado: 10vw arriba, 10vw abajo

Me gusta usar la unidad de longitud vw aquí porque hace un buen trabajo al mantener el contenido en la mitad superior de la página en diferentes tamaños de pantalla.

Crear la fila

Ahora configure el diseño de su columna dentro de su fila para que sea un tercio, la mitad, un tercio.

Luego edite la configuración de la fila para establecer el color de fondo de su columna 2 en #ffffff.

Y actualice la configuración de diseño de la siguiente manera:

Hacer esta fila de ancho completo: SÍ

Usar ancho de medianil personalizado: SÍ


Ancho de medianil: 1


Igualar alturas de columna: SÍ

Esto crea más espacio para nuestros futuros botones de navegación a la izquierda y a la derecha. El ancho de canal establecido en 1 elimina los márgenes entre las columnas para que nuestros botones se puedan colocar fácilmente a cada lado del contenido de nuestra columna central.

Diseño de la sección del título

Para la sección del título del medio, vamos a apilar un módulo de texto y un módulo de seguimiento de redes sociales.

Agregar el título

Primero agregue un módulo de texto a la columna central y actualice lo siguiente:

Contenido:

01
02
<h1>Christina Price</h1>
Exercise <span style="color: #7f173c; font-size: 4vw;">&</span> Fitness

Como este es el título de una página, usé la etiqueta h1. También envolví el ampersand (&) del texto del subtítulo en una etiqueta de intervalo con un color y tamaño de fuente personalizados para agregar un poco de estilo al diseño del texto.

Ahora ve a la pestaña de diseño y actualiza lo siguiente:

Fuente del texto:

Texto Lato Color del texto: #333333


Texto Tamaño del texto: 2vw (escritorio), 30px (tableta), 22px (teléfono inteligente)


Orientación del texto: Centro

Fuente del encabezado: Montserrat

Peso de la fuente del encabezado: Negrita


Estilo de fuente del encabezado: TT


Color del texto del encabezado: #333333


Tamaño del texto del encabezado: 3vw (escritorio), 40px (tableta), 32px (teléfono inteligente)

Acolchado personalizado: 5vw arriba, 2vw abajo

Agregue los iconos de seguimiento social

Para agregar los íconos sociales, agregue un módulo de seguimiento de redes sociales debajo del módulo de texto.

Agregue cuatro redes sociales al módulo, cada una con el mismo color de fondo:

color de fondo: #7f173c

Luego establezca la alineación del elemento al centro.

Diseño de botones de encabezado de navegación de la columna izquierda

Para diseñar los botones de navegación en la columna de la izquierda, comenzaremos diseñando un botón y luego duplicando ese botón para ayudarnos a crear el resto.

Para crear el primer botón, agregue un módulo de botón a la columna de la izquierda y actualice lo siguiente:

Texto del botón: conocer a Christina

En la pestaña de diseño…

Alineación del botón: Derecha

Usar estilos personalizados para el botón: SÍ


Tamaño del texto del botón: 1.5vw (escritorio), 16px (tableta)


Color del texto del botón: #333333


Color de fondo del botón: #ffffff


Ancho del borde del botón: 4px


Color del borde del botón: #ffffff


Borde del botón Radio: 0px


Icono del botón: su elección


Color del icono del botón: #7f173c


Ubicación del icono del botón:


Solo a la izquierda Mostrar icono al pasar el cursor por el botón: NO


Margen personalizado: 4px a la derecha

Guardar ajustes.

Luego, duplique ese botón, actualice el contenido (texto del botón, ícono, URL del enlace, etc.) y agregue un margen superior personalizado de 5px.

Guardar ajustes.

Ahora duplique ese módulo tres veces más y actualice el contenido del botón para cada uno. Debería tener un total de cinco botones adyacentes a la columna del medio.

Tenga en cuenta que debido a que nuestra fila está configurada para tener alturas de columna iguales, la altura de la columna izquierda con los botones también bajó la columna del medio para que coincida con la altura.

Diseño de botones de encabezado de navegación de la columna derecha

Para crear los botones en la columna de la derecha, copie el botón superior en la columna de la izquierda y péguelo en la tercera columna.

Luego actualice el contenido del botón (texto del botón, ícono, URL del enlace, etc.) y actualice la siguiente configuración.

Alineación del botón: Botón izquierdo

Ubicación del icono: Derecho


Margen personalizado: 4 px a la izquierda, 0 px a la derecha

Ahora duplique el botón que acaba de crear y actualice el espaciado para tener un margen superior personalizado de 4px.

Guardar ajustes.

Luego, duplique ese módulo tres veces más y actualice el contenido del botón para cada uno. Debería tener un total de cinco botones adyacentes a la columna del medio.

Mira el diseño final.

Agregar imágenes a los botones

Como opción de diseño alternativa, puede cambiar los iconos de los botones por imágenes. Para hacer esto, deberá usar imágenes que tengan un tamaño de 100 px por 150 px.

Por ejemplo, para agregar una imagen a los botones de la columna izquierda, edite la configuración del módulo de botones de la siguiente manera:

Imagen de fondo: [ingresar imagen de 100 × 150]

Tamaño de la imagen de fondo: Ajustar


Posición de la imagen de fondo: Centro izquierdo


Mostrar icono de botón: NO


Relleno personalizado: 2,2 em a la izquierda

Para agregar una imagen a los botones de la columna derecha, edite cada una de las configuraciones del módulo de botones de la siguiente manera:

Imagen de fondo: [ingrese una imagen de 100 × 150]

Tamaño de la imagen de fondo: Ajustar


Posición de la imagen de fondo: Centro a la derecha


Mostrar icono de botón: NO


Relleno personalizado: 2,2 em a la derecha

Una vez que agregue imágenes a todos sus botones, así es como se vería el diseño.

Opciones de respuesta para el encabezado de navegación

En este momento, el diseño funcionará en dispositivos móviles y se verá así:

Pero puede que no sea exactamente como lo quieres. Es posible que desee pensar en un par de otras opciones.

Ocultar botones en el móvil

Una solución simple y funcional para este diseño en dispositivos móviles es ocultar sus botones en tabletas y teléfonos inteligentes y simplemente usar su menú principal de navegación móvil real como respaldo.

Para ocultar un botón, simplemente vaya a la configuración avanzada del módulo de botones y marque para deshabilitar el módulo en la tableta y el teléfono inteligente.

El resultado se vería así en tabletas y teléfonos inteligentes.

Solución avanzada: cambiar el orden de las columnas en dispositivos móviles

Si desea cambiar el orden de las columnas en dispositivos móviles para que la sección del título (actualmente en la segunda columna o en el medio) se muestre en la parte superior (o primero en orden), puede agregar algunas líneas de CSS personalizado.

Abra el menú de configuración principal en la parte inferior del generador visual y luego haga clic en el botón de configuración de página. Luego ingrese lo siguiente en el cuadro de entrada CSS personalizado:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@media (max-width:980px) {
/*** class that will wrap row in a flex box ***/
.change-column-order {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  flex-wrap: wrap;
 
/*** custom classes that will designate the order of columns in the flex box row ***/
.one {
     -webkit-order: 1;
     order: 1;
  }
.two {
     -webkit-order: 2;
     order: 2;
  }
.three {
     -webkit-order: 3;
     order: 3;
  }
/*** changes buttons to full width and centers button text ***/
.change-column-order .et_pb_button {
      display:block;
      text-align: center !important;
  }
}

Este css reordena las columnas y cambia los botones para que abarquen el ancho completo de la columna con el texto centrado. Este método para cambiar el orden de apilamiento de columnas en dispositivos móviles es útil.

Ahora vaya a la configuración de su fila, en la pestaña avanzada, y agregue la clase «cambiar-orden-columna» al cuadro de entrada Clase CSS. Luego agregue «uno» al cuadro de entrada Clase CSS de la Columna 2, agregue «dos» al cuadro de entrada Clase CSS de la Columna 1 y agregue «tres» al cuadro de entrada Clase CSS de la Columna 3.

Es posible que deba agregar un margen de 4px al botón de la columna superior derecha en la tableta y el teléfono inteligente para que la separación sea consistente.

Aquí esta el resultado final.

Pensamientos finales

Este diseño de encabezado de navegación personalizado puede ser una alternativa única a un menú de navegación tradicional. No pretende ser un reemplazo de su navegación principal. De hecho, esto funcionaría muy bien como subnavegación para categorías de blogs o algo similar.

Espero que las alternativas de respuesta no sean demasiado problemáticas y que las soluciones ofrecidas sean útiles.

Espero escuchar de usted en los comentarios sobre otras ideas sobre cómo usar este diseño y cualquier otra idea o pregunta que pueda tener.

¡Salud!