Crear un menú fijo inferior con iconos tipo aplicación con el theme builder de divi

por Oscar Viedma | Jul 9, 2020 | Tutorial gratuito

Hola bienvenido bienvenida una vez más a otro tutorial de OV Divi. En este tutorial gratuito de divi y wordpress aprenderás a diseñar un menú fijo inferior con iconos simulando el menú de una aplicación móvil. Este menú lo haremos con el nuevo generador de temas de divi (divi theme builder) y será completamente responsive, es decir, se verá perfectamente tanto en escritorio, tabletas y móviles.

Con este tutorial además de que aprenderás a realizar una composición de un menú con 5 columnas (aunque puede ser con las columnas que quieras) te enseñaré un truco que siempre uso en mis diseños para mostrar en línea más de una columna en móvil, es decir, sabemos que divi por defecto apila las columnas una abajo de otra en móviles y con este truco mostraremos las 5 columnas en una sola fila en móvil de forma muy fácil.

Bueno ya sabes que soy de los que no les gusta escribir mucho, así que mejor dale play al video y aprende a realizar este hermoso menú tipo app.

Ocultar menú creado con divi al desplazarse hacia abajo (scroll down) y mostrar menú al desplazarse hacia arriba (scroll up)

por Oscar Viedma | Jun 4, 2020 | Tutorial gratuito

Ocultar menú al desplazarse hacia abajo (scroll down) y mostrar menú al desplazarse hacia arriba (scroll up).

En este tutorial haremos un ejercicio muy interesante que consiste en ocultar la barra de navegación cuando el usuario comienza a desplazarse por la página, pero al regresar o al desplazarse hacia arriba el menú se mostrará nuevamente.

Este efecto lo implementan muchos sitios web ya que esto ayuda a mejorar la experiencia del usuario debido a que el usuario no tiene que llegar hasta la parte superior para encontrarse nuevamente con las opciones del menú. Cuando un usuario vuelve a realizar scroll hacia arriba asumimos que quiere llegar a la parte superior para ver las opciones del menú, por lo tanto, le ahorramos trabajo y le mostramos el menú nuevamente de forma muy sutil en la parte superior.

Por defecto este efecto no sé puede realizar con divi y wordpress, pero no te preocupes, en este tutorial práctico te enseñaré como realizar este efecto con unos cuantos pasos. Primero vamos a diseñar nuestro menú con el generador de temas de divi o divi theme builder para posteriormente aplicar este efecto de forma muy fácil.

Lo único que necesitamos para realizar este ejercicio, es el siguiente fragmento de código javascript que nos ayudará a mostrar la barra navegación cada que hagamos scroll hacia arriba y a ocultar la navegación cada que se haga scroll hacia abajo.

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navPrincipal").style.top = "0";
  } else {
    document.getElementById("navPrincipal").style.top = "-100px";
  }
  prevScrollpos = currentScrollPos;
}

Crear un menú fijo transparente con divi theme builder que cambie a un color al hacer scroll o desplazarse

por Oscar Viedma | May 3, 2020 | Tutorial gratuito

Hola qué tal, en este tutorial aprenderás a crear un menú fijo (fixed) que cambie de color al hacer scroll o desplazarse. Esto es algo que siempre se ha podido realizar con el «antiguo» divi desde el personalizador de temas pero en este tutorial te enseñaré como realizarlo con el nuevo generador de temas de divi, mejor conocido como divi theme builder que viene con Divi 4.0 o superior.

Este tutorial me lo ha solicitado más de un suscriptor en nuestra comunidad de facebook (sí aún no eres parte del grupo, qué estás esperando para unirte).

El ejercicio de este tutorial consiste en crear un menú personalizado con fondo transparante que se mantenga fijo al hacer scroll y cambie a un color cuando te empieces a desplazar sobre la página. ¿Suena interesante verdad? Pues con divi y wordpress es posible realizar este efecto, solamente vamos a necesitar un pequeño fragmento de código jquery para echarlo a andar.

Fiel a la costumbre de OV Divi en esta entrada te dejo el código que utilizaremos para que solo copies y pegues 🙂

Primero te dejo código jQuery que tienes que pegar en las opciones del tema divi / Integración / Agregar código al <head> de su blog:

jQuery(document).ready(function( $ ) {
  $(window).scroll(function(){
  	var scroll = jQuery(window).scrollTop();
	  if (scroll >= 100) {
	    $("#menuFijo").addClass("menu-color-fijo-scroll");
	  }

	  else{
		$("#menuFijo").removeClass("menu-color-fijo-scroll");  	
	  }
  });
});

Posteriormente tenemos que pegar este código css en el CSS personalizado de divi:

#menuFijo {
  background-color: transparent;
  transition: background-color 0.5s ease;
}

.menu-color-fijo-scroll {
	background-color: rgba(0,0,0,0.9)!important;
  transition: background-color 1s ease;
}

Si te quedó alguna duda, puedes escribirla en los comentarios y yo estaré encantado de responderte.

Te mando un abrazo y suscríbete al canal si no lo haz hecho.

Crea un hermoso menú hamburguesa con divi theme builder

por Oscar Viedma | Abr 14, 2020 | Tutorial gratuito

Hola bienvenido a este nuevo tutorial dónde aprenderás a crear un hermoso menú hamburguesa con divi theme builder.

En este tutorial aprovecharemos el nuevo y potente generador de temas de divi para crear un menú totalmente diferente al que viene con divi por defecto. Este efecto consiste en que al dar click sobre el icono de hamburguesa se nos desplaza el menú de la parte superior con un efecto de movimiento. Además el icono de hamburguesa hace una transición a un icono en forma de equis (X) y haciendo click en este botón se volverá a ocultar el menú, la verdad me entretuve mucho haciendo este ejercicio, así que aprovéchalo.

Por cierto, si te estás preguntando si este menú es responsive, claro que es responsive, funciona tanto en computadoras, tabletas y móviles.

En el tutorial vamos a necesitar de unos fragmentos de código, no te preocupes me pase horas logrando realizar este efecto para compartirlo contigo y dejarte el código a continuación para que solo copies y pegues.

Este es el código del icono de menú hamburguesa (el de las rayitas):

<div id="iconoHamburguesa">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Aquí te dejo el código CSS general (icono hamburguesa):

.mover-icono {
	top: 250px !important; 
}

.desplazar-menu {
	transform: translateY(0px) rotateX(0deg) !important;
}

.seccion-menu {
  position: fixed;
  width: 100%;
}

#iconoHamburguesa {
  position: fixed;
  top: 30px;
  right: 40px;
  width: 45px;
  height: 45px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#iconoHamburguesa span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #000000;
  border-radius: 4px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#iconoHamburguesa span:nth-child(1) {
  top: 0px;
}

#iconoHamburguesa span:nth-child(2),#iconoHamburguesa span:nth-child(3) {
  top: 14px;
}

#iconoHamburguesa span:nth-child(4) {
  top: 28px;
}

#iconoHamburguesa.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#iconoHamburguesa.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#iconoHamburguesa.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#iconoHamburguesa.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}


@media only screen and (max-width: 768px) {
  .mover-icono {
		top: 20px!important; 
	}
  .seccion-menu {
  	position: absolute;
    margin-top: 65px;
	}
	#iconoHamburguesa {
    position: absolute;
  	top: 20px;
  	right: -10px;
    width: 35px;
    height: 35px;
  }
  #iconoHamburguesa span {
    height: 5px;
  }
  #iconoHamburguesa span:nth-child(2),#iconoHamburguesa span:nth-child(3) {
  top: 11px;
}
#iconoHamburguesa span:nth-child(4) {
  top: 22px;
}
}

Aquí tienes otro fragmento de código CSS que necesitamos pegar en la sección que contiene el diseño del menú:

transform: translateY(-100px) rotateX(-90deg);
transform-style: preserve-3d;
perspective: 2000px;
transition: 0.3s;

Aquí tienes el código jQuery:

jQuery(document).ready(function( $ ) {
  $('#iconoHamburguesa').click(function(){
		$(this).toggleClass('mover-icono');
    $(this).toggleClass('open');
		$('.seccion-menu').toggleClass('desplazar-menu');
	});
});