Con Divi y sus nuevas opciones de posición, convertir tu cabecera en una fija es más fácil que nunca. Con solo unos pocos clics, puede convertir su encabezado estático personalizado en uno fijo que sigue a sus visitantes durante su estadía en su sitio web. En este tutorial, le mostraremos los pasos generales que debe seguir para crear su encabezado Divi fijo. Este es el orden que seguiremos:
- Vaya a Divi Theme Builder y comience a construir el encabezado global
- Una vez dentro de la plantilla de encabezado global, use una sola sección con varias filas para crear el encabezado con todos los elementos necesarios
- Use las opciones de posición de sección integradas de Divi para que toda la sección permanezca fija en la parte superior
- Cree una plantilla de cuerpo personalizada y agregue un margen superior para crear un espacio de contenedor para el encabezado Divi fijo
- Guarde todos los cambios de Divi Theme Builder y vea el resultado en su sitio web
¡También podrá descargar el archivo JSON de la plantilla del sitio web predeterminado 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 sitio web global GRATIS
Para poner sus manos en la plantilla de sitio web 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. Vaya a Divi Theme Builder y comience a construir el encabezado global
Ir al Creador de temas Divi
Comience yendo al Divi Theme Builder . Una vez allí, haga clic en ‘Agregar encabezado global’.
Crear encabezado global
Y comience a crear el encabezado desde cero seleccionando ‘Crear encabezado global’.
2. Use la sección regular para crear un encabezado de ancho completo
Ajustes de sección
Color de fondo
Una vez dentro del editor de plantillas, verás una sección. Abre esa sección y usa un color de fondo blanco para ella.
- Color de fondo: #FFFFFF
Espaciado
Luego, pase a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Sombra de la caja
Agregue una sombra de cuadro también.
- Fuerza de desenfoque de sombra de cuadro: 50px
- Color de sombra: rgba (0,0,0,0.12)
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.
- Color de fondo: #ff3314
Dimensionamiento
Luego, pase a la pestaña de diseño 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: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine también todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar Redes Sociales de Elección
El único módulo que necesitamos en la fila es un módulo de seguimiento de redes sociales. Agrega las redes sociales de tu preferencia.
Restablecer estilos de elementos para cada red social individualmente
Continúe restableciendo los estilos de elementos para cada red social individualmente.
Alineación
Luego, vaya a la pestaña de diseño del módulo y cambie la alineación del módulo.
- Alineación del módulo: Centro
Configuración de iconos
Modifique el color del icono a continuación.
- Color del icono: #ffc600
Espaciado
Y complete la configuración del módulo agregando un margen superior.
- Margen superior: 0.5vw
Añadir Fila #2
Estructura de la columna
¡A la siguiente fila! Utilice la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine también todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Elemento principal
Y para asegurarnos de que todo el contenido de la columna aparezca uno al lado del otro en tamaños de pantalla más pequeños, agregaremos una línea de código CSS al elemento principal de la fila.
|
01
|
display: flex; |
Borde de la columna 1
Y complete la configuración de la fila abriendo la configuración de la columna 1 y agregando un borde derecho.
- Ancho del borde derecho: 2px
- Color del borde derecho: #ffc600
Agregar módulo de imagen a la columna 1
Cargar logotipo
Es hora de comenzar a agregar módulos. En la columna 1, el único módulo que necesitamos es un módulo de imagen. Cargue su logotipo.
Alineación
Luego, vaya a la pestaña de diseño del módulo y cambie la alineación de la imagen.
- Alineación de imagen: Centro
Dimensionamiento
Modifique el ancho en diferentes tamaños de pantalla a continuación.
- Ancho: 50 px (escritorio), 30 px (tableta y teléfono)
Espaciado
Y complete la configuración del módulo agregando algunos márgenes superior e inferior personalizados en diferentes tamaños de pantalla.
- Mostrar espacio debajo de la imagen: No
- Margen superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Margen inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
Seleccione el menú
En la segunda columna, el único módulo que necesitamos es un módulo de menú. Seleccione un menú de su elección.
Eliminar color de fondo
Luego, elimine el color de fondo del módulo.
Disposición
Pase a la pestaña de diseño del módulo y cambie la configuración de diseño.
- Estilo: Centrado
- Dirección del menú desplegable: hacia abajo
Configuración del texto del menú
Modifique también la configuración del texto del menú.
- Fuente del menú: PT Serif
- Color del texto del menú: #333333
- Tamaño del texto del menú: 18px
Ajustes de texto del menú desplegable
Junto con la configuración de texto del menú desplegable.
- Color de fondo del menú desplegable: #ffffff
- Color de la línea del menú desplegable: #ffc600
Iconos
Vamos a cambiar el color del ícono del menú de hamburguesas en la configuración de íconos a continuación.
- Color del icono del menú de hamburguesas: #ff3314
Espaciado
Y completaremos la configuración del módulo agregando algunos valores de margen personalizados en diferentes tamaños de pantalla.
- Margen superior: 1.4vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
- Margen inferior: 1.4vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
Agregar módulo de código a la columna 2
Insertar código CSS móvil
Para modificar el menú desplegable en el móvil (permitir que ocupe todo el ancho de la pantalla), necesitaremos unas pocas líneas de código CSS. Agregaremos este código CSS a un nuevo módulo de código justo debajo del módulo de menú.
|
01
02
03
04
05
06
07
|
<style>.et_mobile_menu {margin-top: 5%;width: 210%;margin-left: -110%;}</style> |
3. Use las opciones de posición de Divi para pegar la sección en la parte superior
Cambiar la configuración de posición de la sección
Una vez que haya completado la apariencia general de su encabezado personalizado, ¡es hora de convertirlo en uno fijo! Para hacer eso, abra la configuración de la sección y cambie la configuración de posición de la siguiente manera:
- Posición: Fija
- Ubicación: Centro superior
Si desea tener algo de espacio entre la sección y la parte superior de su página, puede usar la opción de desplazamiento vertical. O bien, si su encabezado no aparece en la parte superior de todo el contenido de la página en su sitio web, puede aumentar el índice z.
4. Agregue el espacio en blanco superior para el encabezado
Construir cuerpo global
El siguiente paso de este tutorial le permitirá agregar un «espacio de contenedor» superior para su encabezado. Tan pronto como conviertes un elemento en fijo, el contenedor del elemento flota en tu página sin ocupar ningún espacio adicional. Sin embargo, si no desea que se superponga con alguna página existente o publique contenido, puede agregar algo de espacio para el contenedor en la parte superior. Para hacer eso, comience a construir el cuerpo global de la plantilla de su sitio web predeterminado.
Ajustes de sección
Espaciado
Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de contenido de publicación a la columna
Y para permitir que se muestre todo el contenido dinámico, según la publicación o la página en la que se encuentren los visitantes, usaremos el Módulo de contenido de la publicación.
Agregar margen superior a la sección para hacer lugar para el encabezado
Por último, pero no menos importante, para crear ese espacio superior para el encabezado Divi fijo, abriremos la configuración de la sección nuevamente y agregaremos un margen superior. Puede ajustar este valor a su gusto.
- Margen superior: 150px
4. Guardar cambios en el generador de temas
Una vez que haya completado tanto el encabezado global como el cuerpo global, puede guardar todos los cambios de Theme Builder 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 crear un encabezado Divi fijo con las nuevas opciones de posición que obtiene dentro del propio Divi Builder. Hemos cubierto los pasos necesarios para lograr un encabezado fijo superior y puede aplicar esta técnica a cualquier tipo de sitio web que esté creando. ¡También pudo descargar la plantilla del sitio web predeterminado 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.