¿Cómo arreglar el encabezado de salto en Divi? (3 Métodos)

¿Tienes problemas con el encabezado de salto en Divi? Has venido al lugar correcto. En esta guía, le mostraremos 3 métodos para solucionar fácilmente el problema del encabezado de salto en Divi paso a paso .

Cabecera de salto Divi

Con millones de usuarios en todo el mundo, Divi es uno de los temas de WordPress más populares que existen. Viene con muchas funciones que le permiten ocultar el encabezado, personalizar la página del producto WooCommerce e incluso incluir el botón Agregar al carrito en las páginas de la tienda. Sin embargo, Divi también tiene algunos problemas comunes. Ya hemos visto cómo solucionar el problema con el formulario de contacto y hoy le mostraremos cómo solucionar el problema del encabezado de salto.

Muchos usuarios experimentan problemas con el encabezado en Divi, por lo que en esta guía veremos cómo solucionarlo. Antes de pasar a la guía, comprendamos qué problemas causa este problema y por qué ocurre.

¿Qué es el encabezado de salto Divi?

A veces, cuando visitas algunos sitios que usan Divi, notas que cuando la página se está cargando, el encabezado no está en la parte superior. En cambio, salta hasta que la página está completamente cargada y es por eso que se conoce como encabezado de salto Divi.

¿Por qué ocurre el salto de cabecera?

El encabezado de salto en Divi ocurre debido a un conflicto entre CSS y JavaScript. Cuando aplica cambios a su sitio usando el Personalizador, Divi usa JavaScript y agrega esos cambios a través de atributos de estilo a los valores superior y superior del relleno usando CSS. El problema es que el navegador muestra CSS antes que JavaScript y este retraso en el tiempo de carga crea la ilusión de salto de encabezado.

Para corregir el encabezado de salto en Divi, debe ubicar los valores superior y superior del relleno y verificar el relleno que se inyecta con Javascript. Luego, simplemente agréguelos a su hoja de estilo. Echemos un vistazo a cómo hacer esto.

¿Cómo arreglar el encabezado de salto en Divi?

La mejor manera de solucionar el problema del encabezado de salto en Divi es mencionar manualmente el padding-top y algunos otros valores de clase CSS a través del archivo style.css o el personalizador de WordPress. Veamos cómo hacer esto paso a paso.

NOTA : Para evitar causar problemas en su sitio, le recomendamos que primero pruebe estos cambios en el modo de prueba. Algunas empresas de alojamiento de WordPress tienen un entorno de ensayo de forma predeterminada, pero si su proveedor de alojamiento no tiene uno, también puede crear un entorno de ensayo local.

Paso 1: Inspección

Primero, abra su sitio web en un navegador y ejecute la herramienta Inspeccionar en su encabezado. Simplemente coloque el mouse sobre el encabezado, haga clic con el botón derecho y seleccione Inspeccionar elemento (o simplemente Inspeccionar en otros navegadores).

En la pestaña Inspector, busque 2 valores CSS.

• acolchado superior
• cima

Como puede ver en nuestro ejemplo, el padding-top es de 80 px y el top es de 32 px . Estos tamaños son generados automáticamente por el servidor, por lo que debemos mencionarlos en el archivo style.css de nuestro sitio web.

Paso 2: Agregar CSS a Divi

El siguiente paso para solucionar el problema del encabezado de salto en Divi es agregar código CSS a su tema. Simplemente copie el siguiente código CSS.

 #pagina-contenedor {
acolchado superior: 80px;
}

#encabezado-principal {
arriba: 32px;
}

Estos son los valores para nuestro sitio web, pero pueden ser diferentes para su sitio, así que recuerde reemplazar los valores según corresponda. Ahora, debe agregar este código a su sitio. Hay 3 métodos para hacer esto:

1. Usando el editor de temas Divi
2. Desde el Personalizador de WordPress
3. Uso de fragmentos de código

Método 1: Editor de temas Divi

El tema Divi viene con un editor de temas incorporado que puedes encontrar en Divi > Opciones de tema > CSS personalizado .

Una vez que esté allí, pegue el código que acaba de copiar y guarde los cambios.

¡Eso es! ¡Tu cabecera de salto debería estar arreglada!

Método 2: Personalizador de WordPress – CSS adicional

La segunda opción es usar el Personalizador de WordPress. En su tablero de WordPress, vaya a Apariencia > Personalizar . Luego, ve a la sección CSS adicional y pega el código CSS que copiaste en el paso anterior.

Después de eso, publica los cambios y ¡listo!

Método 3: fragmentos de código

Si no se siente cómodo agregando código directamente a los archivos de su tema, puede usar Fragmentos de código, una excelente herramienta para agregar fragmentos de código HTML, PHP, CSS y JavaScript a su sitio.

Primero, en su tablero de WordPress , vaya a Complementos > Agregar nuevo y busque Fragmentos de código . Instálalo y actívalo en tu sitio web.

Después de activar el complemento, verá la configuración del complemento en la sección de administración de WordPress.

Fragmentos de código le permite agregar o editar el código existente en su sitio. Para esta demostración, editaremos el fragmento de CSS existente. Este complemento viene con un fragmento de CSS ficticio de forma predeterminada que puede activar.

Simplemente haga clic en el fragmento para editarlo. Luego cámbiele el nombre y agregue el código CSS que ha copiado en el paso anterior.

Después de eso, simplemente guarde las modificaciones y estará listo para comenzar.

Paso 3: Borrar tu caché

Después de aplicar los cambios en su sitio, debe borrar el caché. Hay muchos complementos de almacenamiento en caché de WordPress disponibles en el mercado. Si no está seguro de cuál usar, elija su favorito de esta lista.

Después de instalar y activar el complemento de almacenamiento en caché de su elección, deberá borrar su caché. Por ejemplo, estamos usando WP Fastest Cache, por lo que en nuestro panel de control de WordPress, simplemente vamos a la configuración del complemento y presionamos un botón para borrar todo el caché del sitio web de WordPress.

¡Eso es! Ahora tu encabezado en Divi ya no saltará.

Conclusión

Con todo, el problema del encabezado de salto en Divi es muy común. La buena noticia es que también es bastante simple de resolver. En esta guía, le mostramos cómo solucionar este problema agregando algunas líneas de código CSS a su instalación de WordPress. Hay 3 formas diferentes de hacerlo:

• Agregue el código al archivo style.css de su tema de WordPress
• Agrega el código usando el Personalizador de WordPress
• Usar fragmentos de código

Todos estos métodos solucionarán el problema del encabezado de salto, así que elige el que más te convenga. Además, si después de agregar el código CSS su encabezado aún salta, recuerde borrar su caché (caché local, del navegador y DNS). También puede acceder a su sitio desde otra computadora o usando el modo de incógnito.

Para obtener más tutoriales sobre Divi, consulte las siguientes guías:

• Cómo hacer que cualquier elemento Divi sea pegajoso
• El formulario de contacto de Divi no funciona: cómo solucionarlo
• Cómo arreglar el error de tiempo de espera de Divi

Finalmente, esperamos que este artículo le haya resultado útil. Si lo hiciste, por favor comparte esta publicación en las redes sociales. ¿Has tenido algún problema con Divi? ¿Tuviste algún problema siguiendo esta guía? Háganos saber en la sección de comentarios.