Al optar por un encabezado fijo en su sitio web, automáticamente se encontrará usando Divi y sus opciones de posición integradas. La opción de posición fija dentro de Divi te permite pegar cualquier elemento en una ubicación específica de tu página. Sin embargo, cuando se utiliza una posición fija, se elimina el espacio contenedor de su elemento. El encabezado fijo flota sobre el contenido de su página creando una superposición que no necesariamente desea. Para evitar esto, puede generar un espacio contenedor para su sección utilizando un marcador de posición.
En este tutorial, le mostraremos exactamente cómo hacerlo usando código JQuery. El código que agregaremos al final de este tutorial calcula automáticamente el espacio del contenedor de su sección de encabezado personalizada y asigna esa altura a un nuevo div alrededor de su encabezado. Puede usar este código JQuery para cualquier tipo de encabezado que haya creado usando una sección. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue la plantilla de encabezado global GRATIS
Para poner sus manos en la plantilla de encabezado global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Comience a crear una plantilla de encabezado global
Ir al Creador de temas Divi
Comience yendo a Divi Theme Builder en el backend de su sitio web de WordPress y haga clic en ‘Agregar encabezado global’.
Empezar a construir encabezado global
Continúe seleccionando la opción ‘Crear encabezado global’.
2. Usa una sección para construir toda la sección del héroe
Ajustes de sección
Color de fondo
Ahora, en la siguiente parte de este tutorial, recrearemos el diseño de encabezado exacto que se mostró en la vista previa de esta publicación. Si lo desea, puede omitir esta parte e ir a la tercera parte de este tutorial que le muestra cómo generar espacio contenedor para su sección de encabezado. Sin embargo, si también desea recrear el diseño de la sección del encabezado, abra la configuración de la sección que puede observar dentro del editor de plantillas y agregue un color de fondo.
- Color de fondo: #6f4fff
Imagen de fondo
Luego, cargue la imagen de fondo que puede encontrar en la carpeta de descarga que pudo descargar al comienzo de este tutorial.
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
Espaciado
Elimine el relleno superior e inferior predeterminado de la sección a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Sombra de la caja
También estamos usando una sombra de caja sutil.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.3)
Posición
Y complete la configuración haciendo que la sección sea fija en la configuración de posición.
- Posición: Fija
- Ubicación: Centro superior
Agregar nueva fila
Estructura de la columna
Una vez que haya completado la configuración de la sección, continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
A continuación, modifique el relleno superior e inferior en diferentes tamaños de pantalla.
- Relleno superior: 20 px (escritorio), 0 px (tableta y teléfono)
- Relleno inferior: 20 px (escritorio), 0 px (tableta y teléfono)
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.
|
01
02
|
display: flex;align-items: center; |
Ocultar columna 2 y 3 en tableta y teléfono
Por último, pero no menos importante, ocultaremos la segunda y la tercera columna en tamaños de pantalla más pequeños para limitar la altura de nuestro encabezado.
- Deshabilitar en: teléfono y tableta
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.
Cargar logotipo
Luego, cargue un logotipo.
Eliminar color de fondo
Elimine el color de fondo a continuación.
Disposición
Pase a la pestaña de diseño y asegúrese de que se apliquen las siguientes configuraciones de diseño:
- Estilo: Alineado a la izquierda
- Dirección del menú desplegable: hacia abajo
Configuración del texto del menú
Continúe modificando la configuración del texto del menú en consecuencia:
- Fuente del menú: IBM Plex Sans Condensed
- Peso de la fuente del menú: semi negrita
- 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 del menú desplegable
Cambie el color de la línea del menú desplegable a continuación.
- Color de la línea del menú desplegable: #ffffff
Configuración de iconos
Y cambie el color del ícono del menú de hamburguesas también.
- Color del icono del menú de hamburguesas: #ffffff
Espaciado
Luego, navegue a la configuración de espaciado del módulo y agregue algunos valores de margen personalizados.
- Margen inferior: 0px
- Margen Izquierdo: 10%
- Margen derecho: 10% (solo tableta y teléfono)
CSS del logotipo del menú
Complete la configuración del módulo de menú agregando un margen derecho personalizado a la configuración de CSS del logotipo del menú.
Escritorio:
|
01
|
margin-right: 8vw !important; |
Tableta y teléfono:
|
01
|
margin-right: 0px !important; |
Agregar módulo de texto a la columna 2
Agregar contenido
En la segunda columna, el único módulo que necesitamos es un módulo de texto. Agregue alguna copia de su elección.
Añadir enlace
Luego, agrega un enlace.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:
- Fuente de texto: IBM Plex Sans Condensed
- Peso de fuente de texto: semi negrita
- Color del texto: #dddddd
- Tamaño del texto: 0.8vw
- Alineación de texto: Derecha
Dimensionamiento
Modifique la configuración de tamaño del módulo a continuación.
- Ancho: 45%
- Alineación del módulo: Derecha
Espaciado
Agregue un poco de relleno inferior también.
- Acolchado inferior: 1vw
Borde
Junto con un borde inferior.
- Ancho del borde inferior: 1px
- Color del borde inferior: #dddddd
Elemento principal
Complete la configuración del módulo modificando el cursor usando una sola línea de código CSS en el elemento principal del módulo.
|
01
|
cursor: pointer; |
Agregar copia
En el tercer módulo, el único módulo que necesitamos es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Pase a la pestaña de diseño del módulo y diseñe el botón según corresponda:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 0.7vw
- Color del texto del botón: #ffffff
- Color degradado 1: #ffcfaa
- Color degradado 2: #fa6eb9
- Tipo de gradiente: lineal
- Dirección del gradiente: 89 grados
- Ancho del borde del botón: 0px
- Radio del borde del botón: 4px
- Peso de la fuente del botón: Negrita
Espaciado
Agregue algunos valores de relleno personalizados a continuación.
- Acolchado superior: 0.8vw
- Acolchado inferior: 0.8vw
- Acolchado izquierdo: 1.5vw
- Acolchado derecho: 1.5vw
Sombra de la caja
Y complete la configuración del módulo agregando una sombra de cuadro.
- Posición vertical de la sombra del cuadro: 20px
- Fuerza de desenfoque de sombra de cuadro: 40px
- Fuerza de propagación de la sombra del cuadro: 0px
- Color de sombra: rgba (252,160,177,0.7)
3. Use el código JQuery para crear un marcador de posición de encabezado y generar automáticamente espacio contenedor
Agregar clase CSS a la sección de encabezado
Ahora que tenemos todos nuestros módulos en su lugar, es hora de generar espacio contenedor para la sección de encabezado. Para hacer eso, necesitaremos volver a abrir la configuración de la sección y asignarle una clase CSS. Usaremos esta clase CSS en nuestro código JQuery para crear un marcador de posición alrededor de la sección y calcular la altura de la sección.
- Clase CSS: encabezado-sección-contenedor
Agregar módulo de código a la columna 1
¡Es hora de hacer que la magia suceda! Agregue un módulo de código a la primera columna de la fila.
Insertar código JQuery
Coloque el código JQuery dentro del Módulo de código y asegúrese de usar etiquetas de secuencia de comandos como puede notar en la pantalla de impresión de la publicación.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
jQuery(function($){ var headerSection = $('.header-section-container'); headerSection.wrap('<div class="header-placeholder"></div>');var headerWrap = $('.header-placeholder'); var headerHeight = headerSection.outerHeight();headerWrap.css('height', headerHeight); $(window).resize(function() { headerHeight = headerSection.outerHeight(); headerWrap.css('height', headerHeight);}); }); |
Insertar código CSS
Haremos un ajuste adicional en los tamaños de pantalla más pequeños agregando también un código CSS entre las etiquetas de estilo.
|
01
02
03
|
.et_pb_column {margin-bottom: 0px !important;} |
4. Guarde todos los cambios del generador de temas y vea el resultado en el sitio web
¡Lo único que queda por hacer es guardar todos los cambios del generador de temas y ver el resultado en su sitio web!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo generar automáticamente un espacio contenedor para su encabezado global personalizado. De manera predeterminada, tan pronto como convierte un elemento en fijo, el espacio del contenedor se elimina y el elemento flota en la parte superior de sus páginas. Esto conduce a una superposición con el contenido existente en la parte superior de su página, algo que quizás desee evitar. En este tutorial, hemos usado código JQuery para generar automáticamente espacio 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. ¡También pudo descargar el archivo JSON de forma gratuita! 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 aprender más sobre Divi y obtener más regalos de Divi, 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 los beneficios de este contenido gratuito.