Cómo crear un increíble header con un menu secundario que se queda fijo al hacer scroll en divi

Cómo crear un increíble header con un menu secundario que se queda fijo al hacer scroll en divi

En este tutorial premium aprenderás a realizar un increíble header el cual estará conformado por dos menús, uno principal y otro secundario.

Cómo crear un increíble header con un menu secundario que se queda fijo al hacer scroll en divi

El menú secundario tendrá un efecto sticky (stick to top) el cual consiste en quedarse fijo en la parte superior al ir haciendo scroll, además los iconos que conforman nuestro menú desaparecerán al colocarse en la parte top de la ventana. Cómo plus agregaremos un enlace activo a cada opción del menú al llegar a cada sección correspondiente.

También animaremos el logotipo y la llamada de acción (botón principal) en nuestro menú secundario para hacer un header más atractivo.

Este header es completamente responsive, es decir, se adapta correctamente tanto a computadoras, tabletas y móviles.

Todo lo anterior ¿suena genial verdad? Pues ya no esperes más y aprende a realizar este increíble ejercicio.

Cómo crear una sección con módulos anuncio o blurb clickeables en divi sin plugins

Cómo crear una sección con módulos anuncio o blurb clickeables en divi sin plugins

En este tutorial premium aprenderás a crear una sección con módulos anuncio o blurb clickeables en divi sin plugins.

El ejercicio consiste en crear una composición con dos columnas; en la columna izquierda mostraremos la información correspondiente de cada blurb de la columna derecha, es decir, al ir haciendo click en cada una de las miniaturas de la columna derecha se nos irá mostrando la información correspondiente de cada módulo en la columna izquierda.

Cómo crear una sección con módulos anuncio o blurb clickeables en divi sin plugins

Este tipo de funcionalidad es imposible de realizar por defecto con divi así que fiel a la costumbre de OV DIVI nos apoyaremos de un pequeño fragmento de código jquery exclusivo de OV DIVI para agregar este tipo de funcionalidad en cualquier sitio web desarrollado con este increíble constructor visual.

El ejercicio de este tutorial está enfocado en la creación de un menú de comida pero en realidad puedes aplicarlo en cualquier sitio web, aquí ya dependerá de tu creatividad de cómo quieras aplicar esta funcionalidad.

Si te ha parecido interesante este ejercicio recuerda que podrás desbloquear esta habilidad suscribiendote a los tutoriales exclusivos donde no solo tendrás acceso a este ejercicio sino a muchos ejercicios más que te ayudarán a subir tus habilidades con divi y wordpress…

Cómo diseñar un dropdown menú tipo Google App desde cero con divi y sin plugins

Cómo diseñar un dropdown menú tipo Google App desde cero con divi y sin plugins

En este tutorial premium aprenderás a diseñar un dropdown menú tipo Google App desde cero con divi y sin plugins.

Este tipo de menús es muy funcional cuando tenemos varios elementos en nuestro menú que necesitamos seccionar y organizar de mejor manera. El menú consiste en tener un icono con dots y al hacer click en éste se nos despliegue un dropdown menú con las opciones correspondientes visualmente atractivas.

Cómo diseñar un dropdown menú tipo Google App desde cero con divi y sin plugins

El ejercicio lo realizamos desde cero, es decir, empezamos a construir el menú para escritorio, tableta y teléfonos, lo adaptamos correctamente pixel por pixel a todas las resoluciones para al final agregar la funcionalidad del dropdown menú. No sólo aprenderás a crear el dropdown menú si no que vas aprender a realizar un menú con el constructor visual usando buenas prácticas con divi.

Si quieres darte una mejor idea de que trata, puedes visitar la demo y si ya estás convencido de realizar este tutorial puedes unirte a los tutoriales exclusivos de la Academia OV DIVI para que tengas acceso a este tutorial y muchos tutoriales más.

Cómo crear un menu hamburguesa flotante (fixed floating menu) con el generador de temas de divi y sin plugins

Cómo crear un menu hamburguesa flotante (fixed floating menu) con el generador de temas de divi y sin plugins

En este tutorial premiun único y exclusivo de los tutoriales exclusivos de la Academia OV DIVI aprenderás a crear un menú hamburguesa flotante (fixed floating menu) con el generador de temas de divi y lo mejor es que no dependeremos de plugins.

Cómo crear un menu hamburguesa flotante (fixed floating menu) con el generador de temas de divi y sin plugins

Este menú flotante lo adaptaremos a una plantilla predeterminada de divi pero obviamente puedes adaptarlo a cualquier proyecto web sin complicaciones.

Al usar secciones, filas y módulos para construir este menú hamburguesa flotante tendrás la posibilidad de insertar cualquier elemento dentro de éste, es decir, no está limitado a insertar solamente enlaces sino que puedes insertar cualquier módulo de divi cómo imágenes, videos, un formulario de contacto, de suscripción, de login, en fin, cualquier módulo que se te ocurra y consideres se adapte bien al formato. No hay limites.

Si quieres tener acceso a este y muchos más tutoriales premium exclusivos de divi te invito a unirte a los tutoriales exclusivos, créeme valen completamente la pena 😍

Cómo reemplazar el logo y color de los enlaces del menú dependiendo la sección al hacer scroll en divi

Cómo reemplazar el logo y color de los enlaces del menú dependiendo la sección al hacer scroll en divi

En este tutorial premium y único de los tutoriales exclusivos de la Academia OV DIVI aprenderás a crear una funcionalidad que consiste en cambiar o reemplazar el logo y color de los enlaces del menú dependiendo la sección al hacer scroll en nuestros sitios web creados con divi.

Cómo reemplazar el logo y color de los enlaces del menú dependiendo la sección al hacer scroll en divi

Hay ocasiones que queremos mantener fijo el header de nuestro sitio web, pero muchas veces en nuestra página estamos implementando fondos claros y oscuros en diferentes secciones, por lo tanto, si nuestro logotipo es blanco éste se perderá con las secciones del mismo color y si nuestro logotipo es negro también se perderá con las secciones con fondo de color oscuro. Es aquí dónde entra la funcionalidad que aprenderás el día de hoy ya que gracias a unos fragmentos de código seremos capaces de reemplazar el logotipo y color de los enlaces dependiendo la sección en la que nos encontremos al ir haciendo scroll o desplazarnos sobre la página.

Realmente es una funcionalidad que te vendrá bien en más de un proyecto, ya que este detalle es muy común que nos pase en nuestros sitios web. Así que si quieres aprender a implementar esta funcionalidad te espero dentro de los tutoriales exclusivos.

Un abrazo.

ACTUALIZACIÓN: Tutorial liberado gratis para el canal de youtube. (17/11/21)

RECURSOS:
> Enlace a la demo
> Descargar los assets

CÓDIGOS:

jQuery para activar la funcionalidad de cambio de logo y color de los enlaces (recuerda que el código debe ir dentro de las etiquetas script):

(function($){
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $("#seccion1").position().top) {
$( ".cambiar-logo img" ).attr( "src", "#" );
$( "#menuPrincipal .et_pb_menu__menu a" ).attr('style', 'color: #fff !important');
};
});
})(jQuery)

Código CSS para el color del menú hamburguesa en móvil:

.hamburguesa-blanco:before {
color: #fff !important;
}
.hamburguesa-negro:before {
color: #000 !important;
}

Línea de código jQuery para cambiar el color del icono hamburguesa en móvil:

$( "#menuPrincipal .mobile_menu_bar" ).attr('class', 'hamburguesa-blanco mobile_menu_bar');

Pin It on Pinterest