Cómo ahorrar espacio en su encabezado usando los SproChograms Switching con Div

La forma en que diseña su encabezado establece el tono para el resto de su sitio web. Por lo tanto, es importante pensar en cómo agrega elementos e interacciones. Por supuesto, querrá incluir los elementos básicos, como un logotipo y elementos de menú, pero hay altas posibilidades de incluir otros impulsos. Sin embargo, cuanto más artículos se suman al encabezado, más el encabezado puede volverse abrumador. Si está buscando una forma limpia e interactiva de presentar diferentes llamadas de acción en su encabezado, le gustará este tutorial. Hoy le mostramos cómo ahorrar espacio en el encabezado usando iconos de conmutación. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el encabezado global de forma gratuita para poner su mano en la plantilla Global de encabezado gratuita, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1
Agregue la sección no. 1 fondo de gradiente Una vez que llegue al editor de plantillas, notará una sección. Abra la configuración de la sección respectiva y aplique un fondo de gradiente.


Color 1: #ffffff
Color 2: #eaeae
Tipo de gradiente: lineal
Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 50%
Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Box Shadow también agregue un tono de caja.

Shadow Color: RGBA (0.0,0,0.06)
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila, pase a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%de ancho máximo: 100%
Alineación de filas: centro
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
El elemento CSS principal luego, acceda a la pestaña avanzada y aplique algunos elementos principales de líneas CSS personalizadas en diferentes tamaños de pantalla. Este código nos ayudará a enfocar los elementos en el escritorio verticalmente. Desktop: pantalla: Flex;
Place-Pritams: Centro; Tableta y teléfono: pantalla: bloque;

Configuración de la columna 1 Espacio Luego abra la configuración de la columna 1 y aplique algunos rellenos izquierdo y derecho.
ENLIZACIÓN IZQUIERDA: 5%

Revestimiento derecho: 5%
El elemento principal cambia el tamaño de nuestra columna en el escritorio y lo traemos de vuelta al “100%” en la tableta y el teléfono, aplicando algunos CSS personalizados al elemento principal de la columna.
Desktop: Ancho: 88%! Importante tableta y teléfono: ancho: 100%! Importante;

Configuración Columna 2 Color de fondo Luego, abriremos la configuración de la columna 2 y cambiaremos el color de fondo en blanco.
Color de fondo: #ffffff

Espacio agregaremos algunos valores de llenado receptivo a la configuración de espaciado de esta columna.
Revestimiento superior:

Escritorio: 50 PX
Tableta y teléfono: 20 px
Revestimiento inferior
Escritorio: 50 PX
Tableta y teléfono: 20 px
ENLIZACIÓN IZQUIERDA: 1%
Junta derecha: 1%
El elemento CSS principal también cambiará el tamaño de la segunda columna en el escritorio. Traemos esto de vuelta al “100%” en dimensiones de pantalla más pequeñas.
Desktop: pantalla: Flex;

Place-Pritams: Centro;
Ancho: 12%! Importante; Tableta y teléfono: ancho: 100%! Importante;
Agregue un módulo de menú a la columna 1 Seleccione el menú es agregar módulos, comenzando con un módulo de menú en la columna 1. Seleccione un menú de su elección. Ciudad en el logotipo cargar un logotipo.
Retire el color de fondo y luego elimine el color de fondo predeterminado.

Configuración de texto del menú Vaya a la pestaña Diseño del módulo y modifique la configuración del texto del menú de acuerdo con:

Menú de fuentes: pantalla PlayFair

Menú de texto de fuente: PlayFair Display

Color de texto del menú: # 000000
Menú Tamaño del texto: 19 PX
La altura de la línea de menú: 1.4em
Alineación del texto: Derecho
Configuración desplegable Luego, cambie el color de la línea de caída.
Color de la línea desplegable del menú: #ffffff
Configuración de icono modificado y los colores del icono en la configuración del icono.

Icono de canasta de compras en color: # 000000
Icono de búsqueda de color: # 000000

Icono de menú de hamburguesas de color: # 000000
Dimensión y complete la configuración del módulo cambiando la configuración de tamaño de la siguiente manera:
Ancho máximo del logotipo: 200 PX
Ancho: 100%

Alineación del módulo: centro
Agregue el módulo de blurb # 1 a la columna 2 Deje el cuadro de contenido a la segunda columna. Para crear iconos de conmutación, usaremos módulos de blurbs sin título y contenido. Comenzaremos creando el primer icono de interruptor y luego reutilizaremos el módulo para agregar los otros dos iconos de conmutación. Después de haber agregado el módulo de la propaganda, asegúrese de que el título y el cuadro de contenido estén vacíos.
Seleccione el icono y luego, seleccione un icono de su elección.
Icono de configuración Vaya a la pestaña Diseño del módulo y cambie la configuración del icono de la siguiente manera:

Color de icono

Valor predeterminado: #DBDBDB

Coloque el cursor: # 000000 placiente de iconos: arriba
Alineación de íconos: centro
Use el icono del tamaño de la fuente: sí
Tamaño de fuente de icono: 200%
Dimensión Modifique la configuración de tamaño.
Ancho de contenido: 100%
Ancho: 32%
Elemento principal y la imagen CSS Brurb y complete la configuración del módulo agregando dos líneas de código CSS a las opciones CSS personalizadas en el módulo de propaganda avanzada.

Elemento principal: Pantalla: bloque en línea; Imagen de la propaganda: Bottom de margen: 0px! IMPORTANTE
Clone El módulo de la propaganda dos veces después de haber completado el primer icono de conmutación del módulo de blurbs, puede clonar dos veces.
Cambie el icono para asegurarse de cambiar el icono de cada duplicado.

2. Agregue elementos de conmutación Agregar la sección 2 Dimensión AHORA, que hemos establecido las bases del encabezado, debemos incluir los elementos de conmutación. Para esto, agregaremos una nueva sección justo debajo de la anterior. Abra la configuración de la sección y asegúrese de que la altura de esta sección sea “0px”. Esto nos ayudará a evitar que la sección ocupe cualquier espacio en el diseño de nuestro encabezado. La única razón por la que necesitamos esta sección es mostrar nuestros elementos de conmutación.
Altura: 0px


Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Igualar las alturas de las columnas: 100%

Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Posición y reposicione toda la fila. Rotar esta fila absoluta nos ayudará a evitar que el giro ocupe cualquier espacio en el diseño.
Posición: Absoluto

Ubicación: esquina superior derecha
Agregue el módulo de texto no. 1 en la columna 2 Agregue un número de teléfono al cuadro de contenido es el momento de agregar los elementos de conmutación. Primero, agregaremos el número de teléfono. Agregue un nuevo módulo de texto en la columna 2 e ingrese su número de teléfono en el cuadro de contenido.
El color de fondo agrega un color de fondo negro.

Color de fondo: # 000000
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: PlayFair Display

Color de texto: #ffffff

Tamaño del texto: 27 PX
Alineación de texto: Centro

Dimensión Asegúrese de que el ancho sea 100%.
Ancho: 100%
Espacio entonces, agregue algunos valores de llenado personalizados a la configuración de espaciado.
Revestimiento superior: 10%
Finamiento inferior: 10%

ENLIZACIÓN IZQUIERDA: 2%
Junta derecha: 2%

Clone el módulo de texto Después de haber completado el primer modo de texto del elemento de conmutación, clonelo una vez.
Cambie el contenido a la dirección de correo electrónico Cambie el contenido del cuadro de contenido.
Agregue el módulo de seguimiento de las redes sociales a la columna 2 Agregue las redes sociales a su elección, luego agregue un seguimiento social Seguimiento en la columna 2. Agregue cuántas redes sociales desea.
Cambie el color de fondo de cada red social a blanco y luego cambie el fondo de color en blanco para cada red social individual.
Color de fondo: #FFFFFFIC Fondo luego, vuelva a la configuración general del módulo y use un color de fondo negro.

Color de fondo: # 000000

Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación del módulo.

Alineación del módulo: centro

Configuración de icono cambiada y el color del icono desde la configuración de los iconos.
Icono de color: # 000000


Dimensión Entonces, aplique un ancho de “100%” a la configuración de tamaño.
Ancho: 100%

El espacio aplica algunos revestimientos personalizados desde arriba y abajo.
Revestimiento superior: 10%

Finamiento inferior: 10%
Borde y complete la configuración del módulo agregando algunas esquinas redondeadas a la configuración del borde.

Todas las esquinas: 100 px
3. Agregar funcionalidad Agregar IDS CSS consecutivos CSS a la primera sección de módulos de blurb ahora que ahora están en su lugar, podemos comenzar a agregar el efecto de conmutación. Lo primero que debe hacer es abrir cada módulo de propaganda individual y agregar una identificación consecutiva.

PROBACIÓN 1: Cabeze-BTA-1
Brurb 2: encabezado-Eta-2
Brurb 3: Header-BTa-3

Agregue IDS CSS consecutivos para cambiar los elementos. Haga lo mismo para los módulos de conmutación de elementos. El número al final de la ID de CSS debe coincidir con la ID CSS que usó para los iconos en el paso anterior.
Módulo de texto 1: encabezado Printm-1

Módulo de texto 2: encabezado-Printm-2
Módulo de seguimiento de redes sociales: Header-We-3
Agregue la posición absoluta a todos los elementos de conmutación y transforme cada uno de los elementos de conmutación absolutos uno por uno. Le recomendamos que vaya al modo de estructura alámbrica para hacer esto.
Posición: Absoluto

Ubicación: a la derecha a la derecha
Agregue el módulo de código a la primera columna de la sección # 1 ahora que están en su lugar todas las ID de CSS, podemos agregar el código para que funcione la función de clic. Agregue un nuevo módulo de código justo en el módulo de menú en la columna 1. Introduzca el código CSS Agregue las siguientes líneas de código CSS entre las etiquetas de estilo como pueda ver en la pantalla de impresión a continuación: [id*= “Header-Eta”] {
Cursor: puntero;
}

[Id*= “Header-Weitem”] {
Visibilidad: oculto;
Opacidad: 0;

-WebKit-Transition: todos los 0.5s facilitados;

-Moz-Transition: todos los 0.5s facilidad;
-O-transición: todos los 0.5s facilidad;
-Ms-Transition: todos los 0.5s facilidad;
Transición: todos los 0.5s facilidad;
}
.show-weitem {
Visibilidad: visible;
Opacidad: 1;
}
.Highlight-icon {
Color: #000! IMPORTANTE;
}
Ingrese el código jQuery Agregue un código jquey personalizado. Agregue el código entre las etiquetas de script, como puede ver en la pantalla de impresión a continuación. JQuery (function ($) {
$ (documento) .Ready (function () {
$ (‘[id*= “Header-CTA”]’). Click (function () {
Var $ selector = $ (this) .attr (‘id’). Reemplazar (‘cta’, ‘elemento’);
var $ item = $ (‘#’ + $ selector);
$ Item.toglecass (‘show-site’);
$ (‘[id*= “Header-Weitem”]). no ($ item) .removeclass (‘ show-printm ‘);

var $ icon = $ (this) .find (‘. et-pb-icon’);
Var $ Allicons = $ (‘[id*= “Header-CTA”]’). Find (‘. Et-Pb-icon’);
$ icon.toglecLass (‘resaltar-icon’);
$ Allicons.not ($ icon) .removeclass (‘destacado-icon’);
});
});
});
4. Haga el encabezado + alternar elementos pegajosos. Sección no.1 Sticky No menos importante, puede girar el encabezado y cambiar los artículos pegajosos.Para crear el resultado deseado, deberá asegurarse de que ambas secciones sean pegajosas y que se active la opción “Compensación de elementos pegajosos”.Haz el primer pegajoso
Pequeño límite inferior: ninguno
Brecha de los elementos circundantes adhesivos: sí
Transición predeterminada y estilos adhesivos: sí
Haga la Sección # 2 Sticky y haga lo mismo para la Sección 2. ¡Listo!
Posición pegajosa: adhiérase a la parte superior
Pequeño límite inferior: ninguno

Brecha de los elementos circundantes adhesivos: sí
Transición predeterminada y estilos adhesivos: sí
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Móvil