La publicación de hoy se trata de combinar dos elementos muy importantes en su sitio: encabezado y navegación. Este diseño único organiza varios botones en su encabezado para servir como un menú de navegación funcional y atractivo. Este diseño está inspirado en un sitio de entrenador personal por Wild Side Design Co. Y funcionaría excelente para sitios que desean mantener las cosas y blogs simples que necesitan presentar las categorías de una manera nueva. En cualquier caso, espero que esto lo inspire a construir otro gran diseño con Div. Tirar del ojo


Todo lo que necesitas es la división para este tutorial. Usaré el Visual Builder Divi para diseñar este encabezado de navegación. Creo que disfrutarás de la forma simple pero poderosa, Div te permite crear algo completamente único.
Le daré un diseño alternativo que implica agregar un fondo de imagen a los botones, por lo que querrá usar imágenes de 100 PX con 150 PX si sigue ese camino. Diseñando la sección del encabezado para poner las cosas en movimiento creando una nueva página e implementando el Visual Builder. Por defecto, habrá una sección que le espera editar 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 gradiente actualizando lo siguiente: Antecedentes: RGBA (127,23,60,0.59)
Coloque el gradiente sobre la imagen de fondo: sí

Luego agregue un poco de revestimiento superior e inferior para dar nuestro contenido futuro de respiración. Revelaje personalizado: 10 VW hacia arriba, 10 VW Down Me gusta usar la unidad de longitud VW aquí, porque hace un buen trabajo manteniendo el contenido por encima del pliegue en diferentes tamaños de pantalla. Cree la fila ahora establece la apariencia de la columna. Un tercio.

Luego edite la configuración promedio para establecer el color de fondo de la columna 2 a #ffffff.

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

Haga esta fila Ancho completo: Sí, use el ancho personalizado del canal: Sí, el ancho del canal: 1 iguala las alturas de la columna: Sí, esto crea más espacio para futuros botones de navegación a la izquierda y a la derecha. El ancho de la canaleta establecido a 1 Escape de los bordes entre las columnas, para que nuestros botones se puedan colocar fácilmente a cada lado del contenido de la columna central.
Diseñando la sección de título para la sección en el medio del título, apilaremos un módulo de texto y un módulo de redes sociales. Agregue el título primero Agregue un módulo de texto a la columna central y actualice lo siguiente:

Contenido:

Christina Price

Ejercicios & Fitness
Debido a que este es un título de página, utilicé la etiqueta H1. También envolví el texto del subtítulo con el signo (&) en una etiqueta de tramo con un color personalizado y un tamaño de fuente para agregar un poco de estilo al diseño de texto.
Ahora acceda a la pestaña de diseño y actualice lo siguiente: Fuente Texto: Texto de Lato Color: # 333333 Texto Texto: 2VW (escritorio), 30 PX (tableta), 22 PX (teléfono inteligente) Orientación de texto: Centro de fuentes: Montserrat Title Font Peso: Bold the Style Font Style: TT Text Color ante: # 333333 Tamaño del encabezado de texto: 3VW (escritorio), 40px (tableta), 32px (teléfono inteligente) ENLINEA PERSONALIZADO: 5VW arriba, 2 VW abajo

Agregue los íconos de seguimiento social para agregar íconos sociales, agregue un módulo de seguimiento de redes sociales en el módulo de texto.
Agregue cuatro redes sociales al modo, cada una con el mismo color de fondo: el color del fondo: # 7F173C

Luego establezca la alineación del elemento en el centro.

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

Para crear el primer botón, agregue un módulo de botón a la columna izquierda y actualice lo siguiente: Botón de texto: Conoce a Christina debajo de la pestaña Design … 5VW (escritorio), 16 PX (tableta) El color de texto del botón: #333333 El color del fondo de fondo: #fffff pero Wition: 4 px El color del botón: #fffffffff raza del botón: 0 px botón icono: su elección del icono de color: #7f173c Coloque el botón del icono: icono de pantalla izquierda solo en el cursor para el botón para el botón : Sin margen personalizado: 4 PX correcto

Guarde la configuración. Luego copie el botón, actualice el contenido (el texto del botón, el icono, la URL del enlace, etc.) y agregue un margen superior personalizado de 5 PX. Ahora copie ese módulo tres veces más y actualice el contenido del botón para cada uno. Debe tener un total de cinco botones adyacentes a la columna central.
Tenga en cuenta que, debido a que nuestro turno tiene alturas iguales de la columna, la altura de la columna izquierda con los botones dibujados hacia abajo, para que coincida con la altura. Diseñe los botones del encabezado de navegación en la columna derecha para crear los botones en la columna derecha, copie el botón superior en la columna izquierda y péguelo a la tercera columna.

Luego actualice el contenido del botón (texto del botón, icono, URL del enlace, etc.) y actualice la siguiente configuración. Distribución del botón: Colocación izquierda del icono del botón: margen personalizado derecho: 4 px izquierda, 0 px derecha


Ahora copie el botón que acaba de crear y actualice el espacio para tener un margen superior personalizado de 4 PX.

Guarde la configuración. Luego copie ese módulo tres veces más y actualice el contenido del botón para cada uno. Debe tener un total de cinco botones adyacentes a la columna central. Verifique el diseño final.
Agregue imágenes a los botones como una opción de diseño alternativo, puede cambiar los iconos del botón de imagen. Para hacer esto, necesitará usar imágenes de 100 x 150 dimensiones PX.

Por ejemplo, para agregar una imagen a los botones en la columna izquierda, cambie la configuración del módulo de botón de la siguiente manera: Antecedente: Sin revestimiento personalizado: 2.2em izquierdo para agregar una imagen a los botones en la columna derecha, edite cada uno de los módulos de botón Configuración de la siguiente manera: Antecedentes: Centre derecho muestra el icono del botón: Sin revestimiento personalizado: 2.2EM a la derecha

Después de agregar imágenes a todos sus botones, así es como se ve el diseño.

Opciones receptivas para el encabezado de navegación actual, el diseño funcionará en dispositivos móviles y se verá así:
Pero puede que no sea exactamente como quieras. Es posible que desee pensar en algunas otras opciones. Ocultar los botones móviles Una solución simple y funcional para este diseño móvil es ocultar sus botones en la tableta y los teléfonos inteligentes y usar solo el menú de navegación principal como reserva. Para ocultar un botón, simplemente vaya a la configuración del módulo de botón avanzado y verifique para desactivar la tableta y el módulo de teléfono inteligente.

El resultado se vería como la tableta y el teléfono inteligente.

Solución avanzada: cambie el orden de columnas en dispositivos móviles si desea cambiar el orden de las columnas en dispositivos móviles, de modo que la sección de título (actualmente en la segunda columna o central) se muestre en la parte superior (o primero en orden), puede Agregue algunas líneas de CSS personalizado. Abra el menú de configuración principal en la parte inferior del fabricante visual y luego haga clic en el botón de configuración de la página. Luego ingrese lo siguiente en el cuadro de entrada CSS personalizado: @Media (max-width: 980px) {/*** clase que envolverá en una caja flexible ***/

.Change-column-orden {

Display: -webkit -box;

Display: -Moz -Box;

Display: -ms -FlexBox;
Display: -Webkit -flax;
Pantalla: Flex;
-WebKit-Flax-Wrap: Wrap; / * Safari 6.1+ */
Flex-Wrap: envoltura;
}
/*** clase personalizada que designará el orden de las columnas en la fila de caja flexible ***/
.Una {
-Webkit-orden: 1;
Orden: 1;
}
.dos {
-Webkit-orden: 2;
Orden: 2;
}
.Tres {
-Webkit-orden: 3;
Orden: 3;
}
/*** Cambia los botones al anchura completa y el texto del botón de los centros ***/
.Change-column-orden .et_pb_button {
Bloqueo de pantalla;
TEXT-Align: Center! Importante;
}
}
Este CSS reordena las columnas y cambia sus botones para incluir el ancho completo de la columna con el texto centrado. Este método para cambiar el orden de apilamiento de pedidos en dispositivos móviles es útil. Ahora vaya a la configuración promedio, debajo de la pestaña avanzada y agregue la clase “Cambio-columna-orden” al cuadro de introducción de la clase CSS. Luego agregue “uno” al cuadro de entrada de la clase de la clase 2 CSS, agregue “dos” al cuadro de entrada CSS Clase 1 y agregue “tres” al cuadro de entrada de clase CSS Clase 3.
Es posible tener que agregar un margen de 4 px al botón del lado superior derecho en la tableta y el teléfono inteligente para que la separación sea consistente.Aquí está el resultado final. Final cómo este diseño personalizado del encabezado de navegación puede ser una alternativa única a un menú de navegación tradicional.No está destinado a reemplazar su navegación principal.De hecho, esto funcionaría muy bien como un subnavegación para las categorías de blogs o algo similar.Espero que las respuestas de respuesta no sean demasiado problemáticas y que las soluciones ofrecidas sean útiles.Espero contarle comentarios sobre otras ideas sobre cómo usar este diseño y cualquier otro pensamiento o pregunta que tenga.¡Suerte!