Cerrar video

Cómo crear un menú hamburguesa fullpage dividido en dos secciones con el divi theme builder sin plugins

por | Jun 1, 2022 | Tutorial premium | 2 Comentarios

En este tutorial premium aprenderás a diseñar un increíble menú hamburguesa fullpage dividido en dos secciones con el divi theme builder y lo mejor sin plugins 😍

Como primer paso vamos a diseñar un header el cual tendrá nuestro logo de lado izquierdo y el menú hamburguesa de lado derecho. Este menú hamburguesa será animado, es decir, al pasar el cursor sobre el icono, las tres «rayitas» que lo conforman empezarán a moverse y esto lo vuelve muy interactivo.

Cómo crear un menú hamburguesa fullpage dividido en dos secciones con el divi theme builder sin plugins

Una vez hagamos click sobre el icono hamburguesa se nos desplazarán dos secciones: una saldrá del lado izquierdo y la otra del lado derecho, estas secciones se mostrarán con un efecto de animación hasta encontrarse una con otra, realmente es un efecto genial 🤩

En la sección de la izquierda solamente tendremos una imagen de fondo, mientras que en la sección de la derecha tendremos los enlaces a nuestras páginas. Pero lo increíble es que al pasar el cursor sobre cada uno de los enlaces de las páginas, la imagen de la sección de la izquierda se irá reemplazando mientras que los enlaces de las páginas se remarcarán con un subrayado.

Obviamente no estamos limitados a esta composición ya que al ser un menú construido con el propio divi builder, podemos hacer uso de filas, columnas y cualquier módulo para lograr la composición que queramos.

Este tutorial es exclusivo y original de OV DIVI, así que es un ejercicio que vale completamente la pena 😍

Este tutorial es premium

Accede a éste y más tutoriales exclusivos de la Academia OV DIVI por tan sólo $8.00 USD al mes y saca el máximo provecho del mejor tema y constructor visual para WordPress.

Tutoriales Relacionados

2 Comentarios

  1. Quique Alameda

    ¡Hola! Me encanta como queda el diseño de este menú. ¿Se podría hacer también una división horizontal para que apareciesen cuatro porciones?
    ¡Muchas gracias!

    Responder
    • Oscar Viedma

      Hola Quique, muchas gracias a mi también me ha gustado mucho el resultado final 😀

      Sobre tu consulta, ¿Cómo si fuera una ventana de «windows»? Es posible pero habría que modificar un poquito el código CSS para lograrlo, pero estoy 99% seguro que es posible 🙂

      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