+41 78 955 3005

Experimentar con  efectos diferentes a los que Divi te ofrece de forma predeterminada, es unas de las mejores cosas que puedes aplicar a tu sitio web!, de forma que puedas darle un aspecto que sobresalga al resto y te permite jugar con la dinámica visual del visitante

Es por esto que te enseñaremos a cómo hacer que un logo vertical, cambie a horizontal ( o cuadrado) cuando te desplazas hacia abajo. Es un método un poco fuera de lo común pero  con la garantía de que le darás una nueva cara a tu página web. Podrás mantener tu logo diferente dependiendo del movimiento de la página, ya sea estática al principio o desplazandonos a través de ella.

Esta maravillosa información es gracias a los conocimientos de Quiroz!

Estos son los pasos a seguir

Paso 1

Para empezar, agrega tu segundo logo, es decir el logo al que cambiara al haber desplazo. Hazlo a través de la biblioteca de Medios.

Paso 2

Ahora, procede a abrir el logo para ver los detalles del mismo, y copia el URL en algún block de notas o documento de texto pues lo utilizarás más adelante

Paso 3

Una vez realizado lo anterior, ingresa al Header.php y ubica el siguiente código en el mismo

Y luego agrega el siguiente código seguido del código original que acabamos de mencionar.

Paso 4

Ahora reemplaza “URL del segundo logo” en el código, por el URL que copiaste en el paso 2.

Paso 5

Si trabajas con tu tema hijo Divi, dirígete a Apariencia> Editor y abre tu hoja de estilo. SI no es así ve a Apariencia>Opciones del Tema Divi>ePanel> CSS personalizado. Y seguidamente agrega este código CSS

Paso 6

Los códigos están diseñados para ser usados en una cabecera principal, en caso de que no uses una, debes reducir o mover el margen superior negativo. Lo siguiente es lo que debes ajustar con tus medidas específicas

max-height

max-width

margin-left

margin-top

Así debería lucir el cambio

Y listo! Recuerda que debes ajustar el tamaño del logo y los márgenes para que pueda encajar de acuerdo al diseño de logo que quieras utilizar. Si quieres obtener más información acerca de Divi, echa un vistazo a nuestra Documentación de Divi en Español

Tema hijo Divi y Plugins para mejorar el Diseño tu Pagina Divi

Suscríbete a nuestra Newsletter

Para recibir Actualizaciones, Promociones y Tutoriales

Felicitaciones! Te has suscrito a nuestra Newsletter correctamente.

Pin It on Pinterest

Share This