Cómo generar automáticamente el espacio del contenedor para el encabezado de la Divicidad fija (usando JQuey)

Cuando opte por un encabezado fijo en su sitio, se encontrará automáticamente utilizando las opciones de posición in otorgadas del DIV. La opción de posición fija dentro del Divin le permite pegar cualquier elemento a una determinada ubicación en su página. Sin embargo, cuando se usa una posición fija, se elimina el espacio del contenedor de su artículo. El encabezado fijo flota por encima del contenido de su página creando una superposición que no necesariamente desea. Para evitar esto, puede generar espacio de contenedor para su sección utilizando un sustituto. En este tutorial, le mostraremos exactamente cómo hacer esto usando un código JQuey. El código que agregaremos al final de este tutorial calcula automáticamente el espacio del contenedor en la sección de encabezado personalizado y asigna esa altura a un nuevo DIV. Puede usar este código jQuery para cualquier tipo de encabezado que haya creado usando una sola secció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 se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los 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.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Comience a crear el accesorio de temas de encabezado global Div Theme Builder Comience al acceder al Builder de Temas Div desde su sitio de WordPress y hacer clic en “Agregar un entil global”.
Comience a crear encabezado global Continuar seleccionando la opción “Build Global Show”.

2. Use una sección para construir la configuración de la sección de héroe completa en el fondo ahora, en la siguiente parte de este tutorial, recrearemos el diseñador exacto del encabezado que se mostró en la vista previa de esta publicación. Si lo desea, puede omitir este lado e ir a la tercera parte de este tutorial que le muestra cómo generar un contenedor para la sección del encabezado. Sin embargo, si desea recrear el diseño de la sección del encabezado, abra la configuración de la sección que puede ver en el editor de plantillas y agregue un color de fondo.

Imagen de fondo luego Cargue la imagen de fondo que pueda encontrar en la carpeta de descarga que pueda descargar al comienzo de este tutorial.
Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
El espacio elimina el llenado predeterminado e inferior de la sección a continuación.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Box Shadow también usamos un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px

Color de la sombra: RGBA (0.0,0,0,3)
Posicione y complete la configuración haciendo que la sección se fije en la configuración de posición.
Posición: fijo

Ubicación: el centro superior
Agregue una nueva fila a la estructura de la columna después de haber completado la configuración de la sección, continúe 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: 2
Ancho: 100%
Ancho máximo: 100%
El espacio cambia el relleno superior e inferior en diferentes tamaños de pantalla.
Revestimiento superior: 20 PX (escritorio), 0 PX (tableta y teléfono) Lineo inferior: 20 PX (escritorio), 0 PX (tableta y teléfono)

El elemento principal y para alinear todo el contenido de la columna, agregaremos dos líneas de código CSS al elemento principal de la fila. Pantalla: Flex;
Alinine-Ritams: Centro;
Esconte las columnas 2 y 3 en la tableta y el teléfono, no menos importante, ocultaremos la segunda y tercera columna en el tamaño más pequeño de la pantalla para limitar la altura de nuestro encabezado.

Desactivar: teléfono y tableta
Agregue un módulo de menú en la columna 1 Seleccione el menú es hora de agregar módulos, comenzando con un módulo de menú en la columna 1. Seleccione un menú de su elección.

Cargue el logotipo y luego cargue un logotipo.

Elimine el color de fondo Eliminar el color de fondo.

Cambio de apariencia a la pestaña de diseño y asegúrese de que se apliquen la siguiente configuración de apariencia:

Estilo: alineado a la izquierda

Dirección del menú desplegable: abajo

Configuración del texto del menú Continúe cambiando la configuración del texto del menú según:
Fuente del menú: IBM Plex Sans condensado
Menú de peso de fuente: semilla en negrita

El color del texto del menú: #dddddd (escritorio), # 6f4fff (tableta y teléfono)
Tamaño del texto del menú: 0.8VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
Configuración Describa el menú y luego cambie el color de la línea de caída.
Color de la línea desplegable del menú: #ffffff
Icono de configuración y cambie el color del icono del menú de hamburguesas.


Icono de menú de hamburguesas de color: #ffffff
Extienda luego, navegue por la configuración de espaciado del módulo y agregue algunos valores de margen personalizados.

Margen inferior: 0 PX
Margen izquierdo: 10%

Margen derecho: 10% (solo tableta y teléfono)
LOGO LOGO CSS Complete la configuración del módulo de menú Agregar un margen recto personalizado a la configuración CSS del logotipo del menú. Escritorio: Margen-derecha: 8VW! Importante; Tableta y teléfono: Margen-Right: 0px! IMPORTANTE; Agregue un módulo de texto en la columna 2 Agregar contenido a la segunda columna, la única forma en que necesitamos es un módulo de texto. Agregue una copia de su elección.
Agregue un enlace y luego, agregue un enlace.
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: IBM Plex Sans condensado

El peso de la fuente de texto: semi audac.

Color de texto: #dddddd

Tamaño del texto: 0.8VW
Alineación del texto: Derecho
Dimensión luego cambie la configuración del tamaño del módulo.
Ancho: 45%
Alineación del módulo: correcto
Espacio agregue un poco de relleno de fondo.

Revestimiento inferior: 1 VW
Borde junto con un borde inferior.
Ancho de borde inferior: 1 PX

Color del borde inferior: #dddddd
El elemento principal completa la configuración del módulo cambiando el cursor utilizando una sola línea de código CSS en el elemento principal del módulo.

Cursor: puntero;
Agregue un botón a la columna 3 Agregue una copia en el tercer módulo, la única forma en que necesitamos es un módulo de botón. Agregue una copia de su elección.
Configuración del botón Pase a la pestaña Diseño del módulo y estilice el botón de acuerdo con:

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.7VW

El color del texto del botón: #ffffff

Color degradado 1: #ffcfaa
Color de gradiente 2: # FA6EB9
Tipo de gradiente: lineal
Dirección de gradiente: 89 grados
El ancho del nudo del botón: 0 PX
Botón Raza: 4 PX
Botón de peso de fuente de fuente: en negrita
Espaciado Agregar más valores de llenado personalizados. Cabeza superior: 0.8VW

Revestimiento inferior: 0.8VW
Junta izquierda: 1.5VW
Junta derecha: 1.5VW

Sombra de cuadro y complete la configuración del módulo agregando un tono de caja.
Box Shadow Posición vertical: 20 PX
Poder de poco claro de la sombra de la caja: 40 px
Poder de extender la sombra de la caja: 0 px
Color de la sombra: RGBA (252,160,177,0,7)

3. Use el código jQuery para crear un sustituto de encabezado y para generar automáticamente un espacio de contenedor CSS en el encabezado ahora que tenemos todos nuestros módulos en su lugar, es hora de generar espacio para la sección del encabezado. Para hacer esto, tendremos que reabrir la configuración de la sección y asignar una clase CSS. Usaremos esta clase CSS en nuestro código jQuery para crear un sustituto alrededor de la sección y calcular la altura de la sección.
Clase CSS: encabezado-contenedor de sección
¡Agregue un módulo de código a la columna 1 es el momento para que la magia suceda! Agregue un módulo de código en la primera columna de la fila.
Ingrese el código jQuery Coloque el código JQuey dentro del módulo de código y asegúrese de usar etiquetas de script como puede ver en la pantalla de publicación de publicación. JQuery (function ($) {
VAR Headersction = $ (‘. Header-Section-Container’);

Headersction.wrap (‘
‘);
Var encabezadowrap = $ (‘. Header-placeholder’);

VAR HeaderHeight = Headersction.outerHeight ();

Headerwrap.css (‘altura’, HeaderHeight);
$ (Ventana) .resize (function () {
HeaderHeight = Headersction.outerHeight ();
Headerwrap.css (‘altura’, HeaderHeight);
});
});
Ingrese el código CSS Haremos un cambio adicional para dimensiones de pantalla más pequeñas agregando código CSS entre etiquetas de estilo. .et_pb_column {margin-bottom: 0px! importante;
}
4. Guarde todos los cambios en el fabricante del tema y vea los resultados en el sitio. ¡Lo único que queda por hacer es guardar todos los cambios en el constructor de temas 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

Pensamientos finales En esta publicación, le mostré cómo generar automáticamente un contenedor para el encabezado global personalizado. Por defecto, tan pronto como gira un elemento fijo, se elimina el espacio del contenedor y el elemento flota por encima de sus páginas. Esto conduce a una superposición con el contenido existente en la parte superior de su. En este tutorial, utilicé algunos códigos de jQuey para generar automáticamente espacio de contenedor para su encabezado. Este código funciona para cualquier tipo de encabezado de sección que cree, siempre que agregue la clase CSS a la configuración de la sección. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.