Con las nuevas opciones de posición de Divi, convertir su encabezado en uno fijo es más fácil que nunca. Con solo unos pocos clics, puede convertir su encabezado estático personalizado en uno fijo que siga 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:

  1. Vaya al Divi Theme Builder y comience a construir el encabezado global
  2. 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
  3. Use las opciones de posición de sección integradas de Divi para que toda la sección permanezca fija en la parte superior
  4. Cree una plantilla de cuerpo personalizada y agregue un margen superior para crear espacio de contenedor para el encabezado Divi fijo
  5. Guarde todos los cambios de Divi Theme Builder y vea el resultado en su sitio web

¡También podrás descargar gratis el archivo JSON de la plantilla del sitio web predeterminado! Hagámoslo.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

encabezado divi fijo

Móvil

encabezado divi fijo

1. Vaya a Divi Theme Builder y comience a construir el encabezado global

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder. Una vez allí, haga clic en ‘Agregar encabezado global’.

encabezado divi fijo

Construir encabezado global

Y comience a construir el encabezado desde cero seleccionando ‘Construir encabezado global’.

encabezado divi fijo

2. Use la sección regular para construir el encabezado de ancho completo

Configuraciones de sección

Color de fondo

Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y use un color de fondo blanco para ella.

  • Color de fondo: #FFFFFF

encabezado divi fijo

Espaciado

Luego, vaya a la pestaña de diseño y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado divi fijo

Sombra de la caja

Agregue una caja de sombra también.

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.12)

encabezado divi fijo

Agregar fila # 1

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

encabezado divi fijo

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

encabezado divi fijo

Dimensionamiento

Luego, vaya 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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado divi fijo

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado divi fijo

Agregue el módulo de seguimiento de redes sociales a la columna 1

Agregar redes sociales de elección

El único módulo que necesitamos en la fila es un módulo de seguimiento de redes sociales. Agregue las redes sociales de su elección.

encabezado divi fijo

Restablecer estilos de elementos para cada red social individualmente

Continúe restableciendo los estilos de elementos para cada red social individualmente.

encabezado divi fijo

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

encabezado divi fijo

Configuraciones de iconos

Modifique el color del icono a continuación.

  • Color del icono: # ffc600

encabezado divi fijo

Espaciado

Y complete la configuración del módulo agregando un margen superior.

  • Margen superior: 0.5vw

encabezado divi fijo

Agregar fila # 2

Estructura de columna

¡A la siguiente fila! Use la siguiente estructura de columnas:

encabezado divi fijo

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado divi fijo

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado divi fijo

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;

encabezado divi fijo

Columna 1 Borde

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

encabezado divi fijo

Agregar módulo de imagen a la columna 1

Subir logo

Hora de comenzar a agregar módulos. En la columna 1, el único módulo que necesitamos es un Módulo de imagen. Sube tu logo.

encabezado divi fijo

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

encabezado divi fijo

Dimensionamiento

A continuación, modifique el ancho en diferentes tamaños de pantalla.

  • Ancho: 50 px (escritorio), 30 px (tableta y teléfono)

encabezado divi fijo

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)

encabezado divi fijo

Agregar módulo de menú a la columna 2

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.

encabezado divi fijo

Eliminar color de fondo

Luego, elimine el color de fondo del módulo.

encabezado divi fijo

Diseño

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

encabezado divi fijo

Configuración de texto del menú

Modifique la configuración del texto del menú también.

  • Fuente del menú: PT Serif
  • Color del texto del menú: # 333333
  • Tamaño del texto del menú: 18 px

encabezado divi fijo

Menú desplegable Configuración de texto

Junto con la configuración de texto del menú desplegable.

  • Color de fondo del menú desplegable: #ffffff
  • Color de línea del menú desplegable: # ffc600

encabezado divi fijo

Íconos

Estamos cambiando el color del icono del menú de hamburguesas en la configuración de iconos a continuación.

  • Color del icono del menú de hamburguesas: # ff3314

encabezado divi fijo

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)

encabezado divi fijo

Agregar módulo de código a la columna 2

Insertar código CSS móvil

Para modificar el menú desplegable en dispositivos móviles (permita que ocupe todo el ancho de la pantalla), necesitaremos algunas 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>

encabezado divi fijo

3. Use las opciones de posición de Divi para pegar la sección hacia arriba

Cambiar configuración de posición de sección

Una vez que haya completado el aspecto general de su encabezado personalizado, ¡es hora de convertirlo en uno fijo! Para hacerlo, 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, 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.

encabezado divi fijo

4. Agregue el espacio en blanco superior para el encabezado

Construir cuerpo global

El siguiente paso de este tutorial le permitirá agregar algo de «espacio contenedor» superior para su encabezado. Tan pronto como gire un elemento fijo, el contenedor del elemento flota en su página sin ocupar 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 hacerlo, comience a construir el cuerpo global de la plantilla de su sitio web predeterminado.

encabezado divi fijo

Configuraciones de sección

Espaciado

Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado divi fijo

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

encabezado divi fijo

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

encabezado divi fijo

Espaciado

Elimine el relleno superior e inferior predeterminado a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

encabezado divi fijo

Agregar módulo de contenido de publicación a 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, utilizaremos el Módulo de contenido de la publicación.

encabezado divi fijo

Agregue el 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, volveremos a abrir la configuración de la sección y agregaremos un margen superior. Puede ajustar este valor a su gusto.

  • Margen superior: 150 px

encabezado divi fijo

4. Guardar los cambios del 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.

encabezado divi fijo

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!