Cómo crear un encabezado global de pantalla completa con el constructor de temas de Div ‘

Si está buscando una manera de crear un encabezado global para su sitio web que no ocupe mucho espacio, le gustará este tutorial. Le mostraremos cómo crear un encabezado global de pantalla completa utilizando el creador de temas de Divin. Mientras desplaza la página hacia abajo, las únicas dos cosas adicionales que verá en su publicación / página son 1) un icono de hamburguesa que se puede hacer clic en la esquina superior izquierda y 2) un logotipo en la esquina superior derecha. Estos dos elementos seguirán a sus visitantes durante todo el proceso de navegación y, una vez que haga clic en el ícono de la hamburguesa, se abrirá un menú personalizado y permitirá a los visitantes ir a otras páginas en su sitio web. ¡El resultado de este diseño es extremadamente receptivo y 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 la plantilla de encabezado de encabezado global gratuita para poner su mano en el encabezado global con una pantalla completa, primero deberá descargarla 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. Access Div Div Theme Builder y comience a crear el encabezado Global Access Divine Builder Comience accediendo al Builder Divic.
Comience a crear un encabezado global, haga clic en “Agregar espectáculo global” y continúe haciendo clic en “Build Global Scale”.

2. Dedique la sección no. 1 Al navegar en la pantalla Configuración completa Configuración El color del sótano es el momento de comenzar a crear. Abra la configuración de sección que puede ver en el editor de plantillas y cambie el color de fondo a un completamente transparente.

Color de fondo: RGBA (255,255,255.0)
El espacio elimina el llenado predeterminado e inferior de la sección a continuación.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
La clase CSS continúa agregando una clase CSS a la sección. Más adelante en esta publicación, necesitaremos esta clase CSS para convertir el menú en su pantalla completa.

Clase CSS: transformación de sección
Visibilidad predeterminada Entonces, acceda a la configuración de visibilidad y oculte los derrames. Asegúrese de aumentar el índice Z de la sección, por lo que se asegurará de que la sección permanezca en la parte superior de todas las páginas y el contenido de la publicación.

Desbordamiento verticalmente: oculto
IND ÍNDICE: 999999
Coloque el cursor en la visibilidad después de agregar el índice z, active la opción de viaje y asegúrese de que se aplique el mismo índice allí.
IND ÍNDICE: 999999

Agregue la estructura de la columna de la fila # 1 Continuar agregando una primera fila a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue un módulo de texto a la columna Agregar contenido La única forma en que necesitamos en esta fila es un módulo de texto. Agregue un símbolo de menú a su elección al cuadro de contenido. En este tutorial, usamos “≡”.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Abril Fatface

Color de texto: # 000000
Tamaño de texto: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)
La altura de la línea de texto: 1em
Extienda el cambio de los valores de espaciado en diferentes tamaños de pantalla.
Revelaje superior: 2VW (escritorio), 3.5VW (tableta), 5VW (teléfono)

Bajo forro: 2VW (escritorio), 3.5VW (tableta), 5VW (teléfono)
Revelaje izquierdo: 3VW (escritorio), 4VW (tableta), 7VW (teléfono) ENLAVE RECTO: 3VW (escritorio), 4VW (tableta), 7VW (teléfono)
ID CSS Este módulo de texto servirá como un menú de pantalla completa. Es por eso que tendremos que asignar un ID CSS al módulo de texto. Más tarde, en el tutorial, usaremos el código CSS en nuestro código.
ID de CSS: menú de escucha
Agregue la estructura de la columna de la fila # 2 Continuar agregando una segunda fila a la sección utilizando la siguiente estructura de columna:

Dimensión Abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
Ancho: 100%

Ancho máximo: 100%

Difundir el cambio y los valores de espaciado.
Margen superior: 2VW (escritorio), 4VW (tableta), 6VW (teléfono)
Margen inferior: 2 VW (escritorio), 4VW (tableta), 6VW (teléfono)

Junta izquierda: 19 VW
Junta derecha: 19 VW
Agregue un módulo de texto a la columna Agregar contenido y luego, agregue un nuevo módulo de texto a la columna. Este módulo de texto representa su primer elemento de menú.
Agregue un enlace Asegúrese de agregar un enlace adecuado al siguiente módulo.
Dirección de URL del módulo: #

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: Poppins
El peso de la fuente de texto: semi audac.

Color de texto: # 000000
Tamaño de texto: 3VW (escritorio), 7VW (tableta), 8VW (teléfono)
Texto de la carta de espacio: -0.1VW
La altura de la línea de texto: 1em
Extienda y luego cambie la configuración de espacio del módulo.
Margen superior: 1VW
Revestimiento inferior: 2VW

Junta izquierda: 3VW
Borde agregue un borde inferior.
Ancho de borde inferior: 1 PX
Color del borde inferior: # 333333

Clase CSS y complete la configuración del módulo agregando una clase CSS personalizada. Deberá agregar esta clase CSS a cada elemento de menú que coloque en su sección Clon el módulo de texto tres veces después de haber completado el primer módulo de texto, puede clonarlo tantas veces como desee (dependiendo de los elementos del menú que Desea mostrar en el menú). Sin embargo, asegúrese de que los módulos no excedan la altura de la pantalla.
Cambie el contenido y el enlace de cada duplicado que necesitará cambiar el contenido y el enlace de cada duplicado.
Agregue el módulo de seguimiento de las redes sociales Agregar las redes sociales a su próximo y el último módulo que necesitamos en esta fila es un módulo en las redes sociales. Agregue todas las redes sociales que desea mostrar.

Restablezca los estilos de redes sociales individuales, continúe restableciendo individualmente los estilos de cada red social.


Icono de configuración Entonces, acceda a la pestaña de diseño del módulo y cambie la configuración del icono de la siguiente manera:

Icono de color: # 000000

Use el tamaño del icono personalizado: Sí

Icono de tamaño de fuente: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

Espacio agregue un poco de relleno izquierdo.
Junta izquierda: 3VW
La clase CSS llena la configuración del módulo agregando una clase CSS.
Agregar la estructura de la fila # 3 de la última fila que necesitamos en esta sección contiene la siguiente estructura de columnas:

Limite el espacio del espacio ocupado por esta fila eliminando todos los valores predeterminados desde arriba e inferior.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX

Agregue un módulo de código en la columna Ingrese el código JQuey y CSS y luego, agregue un módulo de código e ingrese algunos códigos CSS y JQuey para hacer el menú en la pantalla completa. Asegúrese de colocar el código jQuery manualmente entre las etiquetas de script y el código CSS entre las etiquetas de estilo como puede ver en la pantalla de impresión a continuación. JQuery (function ($) {$ (‘#menú-open’). Click (function () {

$ (‘.
});
$ (‘. Menu-Pritem-click’). Click (function () {

$ (‘. Sección-Transform’). RemoveClass (‘Sección-Transform-ACTual’);
});
});
.section-transform {
Cursor: puntero;
}
.section-transform-actual {
Altura: 100%! Importante;
Ancho: 100%! Importante;
Index Z: 99999! Importante;
Color de fondo: #FFFFFF! IMPORTANTE;
}
.section-transform {
-WebKit-Transition: ¡todas las 0.5s facilitadas!
-Moz-Transition: ¡todos los 0.5s facilitados!
-O-transición: ¡todas las 0.5 sencillas! Importantes;
-Ms-Transition: ¡todos los 0.5s facilitados!
Transición: ¡todos los 0.5 sencillas! Importantes;
}
3. Dedique la sección no. 2 En el logotipo en la configuración de la esquina superior derecha Configuración Color de fondo ¡Vaya a la siguiente sección! Esta sección contendrá el logotipo en la esquina superior derecha. Abra la configuración de la sección y cambie el color de fondo en completamente transparente.
Color de fondo: RGBA (0.0,0,0)
El espacio elimina el llenado predeterminado e inferior de la sección a continuación.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Visibilidad predeterminada Agrandar e Índice Z de la sección.
IND ÍNDICE: 99999

Coloque el cursor en la visibilidad active la opción de viaje en el índice z y asegúrese de que se aplique el mismo valor a la salida.
IND ÍNDICE: 99999
Agregue una nueva estructura de fila de la columna Continuar agregando una nueva fila a la sección utilizando la siguiente estructura de columnas: Dimensión Abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Ancho: 100%
Ancho máximo: 100%

Espacio eliminar y el llenado predeterminado e inferior de la fila.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX

Agregue el módulo de imagen a la columna Cargar la imagen del logotipo PNG El único módulo que necesitamos en esta fila y la sección es un módulo de imagen. Cargue el archivo con una imagen del logotipo semi-transparente.
Dimensión Vaya a la configuración del dimensionamiento del módulo y forzue el ancho completo.
Fuerza el ancho completo: si

Espacio Complete la configuración del módulo agregando algunos rellenos personalizados en diferentes tamaños de pantalla.
Revelaje superior: 2.5VW (escritorio), 3.5VW (tableta), 5VW (teléfono)
Bajo forro: 2.5VW (escritorio), 3.5VW (tableta), 5VW (teléfono)

ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 4VW (tableta), 7VW (teléfono)

Revestimiento derecho: 3VW (escritorio), 4VW (tableta), 7VW (teléfono)
4. Configuración adicional de la sección Dimensión de la sección 1 Una vez que haya completado ambas secciones y todos los módulos en ella es hora de cambiar su tamaño. Abra la primera sección y aplique los siguientes valores del ancho y la altura:

Ancho: 8VW (escritorio), 11VW (tableta), 18VW (teléfono)
Altura: 7VW (escritorio), 11VW (tableta), 18VW (teléfono)
El elemento predeterminado principal entonces, acceda a la sección avanzada de la sección y agregue las siguientes líneas de código CSS: Posición: fijo;
Arriba: 0;
Coloque el cursor en el elemento principal Asegúrese de que se apliquen las mismas líneas de código CSS al cursor. Posición: fijo;

Arriba: 0;
Dimensión de la Sección 2 Continúe abriendo la configuración de la segunda sección y modifique el ancho en diferentes tamaños de pantalla. Little: 13VW (escritorio), 21VW (tableta), 30VW (teléfono)
El elemento principal predeterminado luego accede a la pestaña avanzada y agregue las siguientes líneas de código CSS: Posición: fijo;

Derecha: 0;
Arriba: 0;

Coloque el cursor en el elemento principal Asegúrese de que se apliquen las mismas líneas de código CSS al cursor.Posición: fijo;
Derecha: 0;

Arriba: 0;
5. Guarde los cambios del fabricante y vea el resultado después de haber realizado todos los pasos anteriores, ¡puede guardar la plantilla de encabezado global y ver el resultado en su sitio web!

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