Cerrar video

Cómo reemplazar o cambiar el logotipo del menú en divi al hacer scroll o desplazarnos

por | Sep 15, 2020 | Tutorial gratuito | 18 Comentarios

Hola hola bienvenido bienvenida a otro nuevo tutorial. Este tutorial será muy breve y hasta cierto punto sencillo pero realmente útil ya que es algo que me han solicitado mucho y todavía no se puede realizar con divi por defecto. Estoy hablando de cambiar o reemplazar el logotipo en divi al hacer scroll o desplazarnos.

Esto es algo realmente necesario por ejemplo cuando diseñamos una sección transparente para nuestro menú pero al hacer scroll dicha sección cambia a un color de fondo, esto es necesario porque si no usamos la combinación adecuada de colores nuestro logotipo puede perderse con el fondo.

Si bien sabemos, con las nuevas opciones sticky de divi podemos hacer que los elementos de una sección cambien sus propiedades o estilos al hacer scroll, cómo por ejemplo, podemos cambiar tamaños de tipografía, de rellenos, de márgenes incluso podemos cambiar el color de cualquier elemento, pero aún sigue faltando la característica para reemplazar un logotipo o imagen al desplazarnos. Por lo tanto en este tutorial te enseñaré de forma muy práctica como lograr esta funcionalidad.

Solo vamos a requerir de este fragmento de código jquery:

jQuery(document).ready(function( $ ) {
  $(window).scroll(function(){
  	var scroll = jQuery(window).scrollTop();
	  if (scroll >= 10) {
	  	$("#img-logo").addClass("cambiar-logo");
	  }

	  else{
			$("#img-logo").removeClass("cambiar-logo");  	
	  }
  });
});

Y de este otro código CSS:

.cambiar-logo img {
  content: url(enlace_imagen);
}

Ya no esperes más y dale play al video para que sepas dónde y cómo colocar estos fragmentos…

Tutoriales Relacionados

18 Comentarios

  1. jose angel

    muy bueno el tutorial pero tengo una pregunta, como se hace para que cambien las tiepografias y el estil del boton ?

    Responder
    • Oscar Viedma

      Hola puedes ver este tutorial dónde aprenderás a usar divi sticky options. Allí abarcamos el cambio de estilos de los elementos.

      Responder
  2. Fer

    Hola!
    Enhorabuena por el trabajo que realizas! Tus tutoriales me sirven mucho en mi aprendizaje con wordpress y divi.
    Después de ver este tutorial y ver el inicial, me gustaría saber como se puede pasar de tener el logo y el menú centrados (logo arriba y menú bajo, los 2 al centro) a pasar el logo a la izquierda y el menú a continuación (estructura como se muestra en el video) cuando fijamos el menú arriba con las opciones sticky.

    Responder
      • Fer

        Hola Óscar, muchas gracias por la respuesta! El tutorial que me indicas también lo había visto. Simplemente quería saber como partiendo de un menú centrado, con el logo arriba (imagen), también centrado, pasarel logo a la izquierda cuando fijo el menú al hacer scroll y a continuación los elementos del menú. Creo que estos tutoriales esto no queda reflejado.

        Nuevamente, gracias por tu labor y tus respuestas!

        Responder
  3. Yeray

    Buenas tardes, podrian decirme como poder cambiar el color de texto al hacer scroll?

    Por defecto lo tengo en blanco, pero al hacer scroll quiero hacer el texto del menu en color negro.

    Adjunto la web en la casilla posterior.

    Espero contestación, gracias.

    Responder
  4. sara

    Buenas, quería hacer este efecto pero con un tema ya creado, DIVI ECOMMERCE, podrías ayudarme?

    Responder
    • Oscar Viedma

      Hola Sara, no he tenido el gusto de probar esa plantilla, pero cómo es con divi no debes tener problema en implementar el efecto.

      Responder
  5. Adriana

    Desearía que este tutorial tuviera un descargable para los que estamos en premium 😀 por favor.

    Responder
    • Oscar Viedma

      Hola Adriana. Siii sería excelente, el problema que no lo pense antes y el ejercicio de este tutorial ya no lo tengo 🙁 habría que hacerlo otra vez jaja.

      Responder
  6. Jhonny Vasquez

    Hola Oscar:
    Como puedo hacer que mi menu secundario este dentro del menu principal para el modo de tablet y movil??

    Responder
    • Oscar Viedma

      Hola Jhony, si estás trabajando con el theme builder puedes hacer dos menús, uno para escritorio y otro para tabletas/móviles.

      La otra alternativa es usar código CSS para ocultar algunas opciones del menú en escritorio. Por ejemplo, en tu menú insertas todas las opciones del menú principal y secundario, a las opciones del menú secundario les agregas un nombre de clase desde Apariencia > Menús… puede ser la clase: «ocultar-menu» y posteriormente pegas el siguiente código CSS en Divi > Opciones del tema > CSS Personalizado:

      @media only screen and (min-width: 981px) {
        .ocultar-menu {
          display: none;
        }
      }
      

      El código lo que hace, es ocultar en la vista escritorio las opciones que tengan la clase «ocultar-menu».

      Responder
  7. Juan Diego

    Hola Oscar es posible añadir una transicion al cambio de imagen?

    Responder
    • Oscar Viedma

      Hola Juan, intenta agregando este código CSS en Divi / Opciones del tema / CSS Personalizado:

      #img-logo {
        transition: opacity 500 ease-in-out;
      }
      

      Me dices si funcionó o no.

      Responder
      • Juan Diego

        no funcionó 🙁

        Responder
  8. Raul Perez

    HOla me gusta mucho el tutorial, es exelente, me gustaria hacer una pregunta de como hacer algo, el tema es que a veces no usamos el menu inicio, lo que hacemos es ponerle al logotipo el link de la pagina de inicio, la pregunta es la siguiente, Al hacer scroll y que cambia el logo del menu con Sticky como se puede poner un link a ese nuevo logotipo?

    Responder
    • Oscar Viedma

      Hola Raul, se supone que el link al hacer scroll debe ser el mismo que haz colocado, no tiene porque cambiar 🤔

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest