Cómo crear un menú de propaganda al pasar el mouse / hacer clic para su página con Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear un menú de propaganda impresionante que se expande una vez que se desplaza o hace clic en él. Primero, comenzaremos siguiendo algunos pasos generales. Continuaremos agregando elementos de menú usando los módulos de Blurb y terminaremos permitiéndole elegir entre un efecto de desplazamiento o clic.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Modo de desplazamiento

Escritorio

Móvil

Haga clic en Modus

Escritorio

Móvil

1. Cree una página en blanco y cargue la página de destino turística

Agregar nueva página en blanco y habilitar Divi Builder

Lo primero que debe hacer es crear una nueva página en blanco. Dale un título a tu página y cambia a Divi Builder.

Subir página de destino de turismo

Una vez que haya habilitado Divi Builder, cargue el diseño de la página de destino del Paquete de diseño de turismo.

2. Agregar nueva sección regular al final de la página

Una vez que la barra de menú principal está oculta, podemos comenzar a agregar el menú de propaganda. Para hacer eso, vamos a agregar una nueva sección regular al final de nuestra página.

Color de fondo

Abra la configuración de la sección y agregue un color de fondo blanco ligeramente transparente.

• Color de fondo: rgba (255,255,255,0.98)

Espaciado

Vaya a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado de la sección.

• Relleno superior: 0px
• Acolchado inferior: 0px

Sombra de cuadro predeterminada

Agregue una sombra de cuadro a la siguiente sección.

• Fuerza de desenfoque de sombra de caja: 18px
• Color de sombra: # 383838

Sombra de caja flotante

Y cambia la intensidad del desenfoque de la sombra del cuadro al pasar el mouse.

• Fuerza de desenfoque de sombra de caja: 1000px

Ocultar desbordamientos de sección y aumentar el índice Z

Usaremos la configuración de tamaño de la sección para que esta técnica funcione, pero para asegurarnos de que nada exceda el contenedor de la sección, necesitaremos ocultar los desbordamientos. También estamos aumentando el índice Z para asegurarnos de que la sección permanezca en la parte superior del resto de la página.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto
• Índice Z: 9999

3.Asegúrese de que todo el contenido del menú de la sección se cree con Vw y se ajuste a una altura de 100 vistas en todos los tamaños de pantalla

Agregar fila n. ° 1

Estructura de la columna

Una vez que haya completado la configuración básica de la sección, es hora de agregar todo el contenido que desea que aparezca en el menú. Puede crear cualquier diseño que desee utilizando los elementos de diseño de Divi y las opciones integradas, pero debe asegurarse de que todo encaje en una altura de '100vh' en todos los tamaños de pantalla. Para lograr eso, usaremos la unidad de ancho de la ventana gráfica durante todo el proceso de construcción y ajustaremos los valores en diferentes tamaños de pantalla. Comience agregando una nueva fila a su sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y asegúrese de que ocupe todo el ancho de la sección.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Continúe con la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de texto a la columna

Agregar símbolo

Continúe agregando un módulo de texto a la columna de la fila. Agregue el símbolo '=' al cuadro de contenido o siéntase libre de usar cualquier otro símbolo de su elección.

Color de fondo

A continuación, cambie el color de fondo del módulo.

• Color de fondo: # 000000

Configuración de texto

Vaya a la pestaña de diseño y cambie también la configuración del texto.

• Fuente de texto: Open Sans
• Alineación de texto: centro
• Color del texto: #ffffff
• Tamaño del texto: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
• Altura de la línea de texto: 1em

Espaciado

También estamos agregando algo de espacio en la parte superior e inferior del módulo usando los siguientes valores de relleno personalizados:

• Acolchado superior: 2.5vw (escritorio), 3.5vw (tableta), 5vw (teléfono)
• Acolchado inferior: 2.5vw (escritorio), 3.5vw (tableta), 5vw (teléfono)

Agregar fila n. ° 2

Estructura de la columna

Continúe agregando una segunda fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Continúe con la configuración de espaciado y agregue un poco de relleno superior e inferior personalizado a continuación.

• Acolchado superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Acolchado inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

Monitor

Para asegurarnos de que ambas columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una sola línea de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo Blurb a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar los elementos del menú! Agregue un nuevo módulo Blurb a la primera columna de la fila e ingrese algún contenido de su elección.

Seleccionar icono

Elija un icono a continuación.

Añadir enlace

E ingrese un enlace de página que coincida con el elemento del menú.

• URL del enlace del título: #

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono en consecuencia:

• Color del icono: # ff3314
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)

Configuración del texto del título

Modifique también la configuración del texto del título.

• Fuente del título: PT Serif
• Estilo de fuente del título: subrayado
• Color del subrayado del título: # ff3314
• Alineación del texto del título: centro
• Tamaño del texto del título: 1.8vw (escritorio), 2.3vw (tableta), 3.3vw (teléfono)

Configuración del texto del cuerpo

Luego, cambie la configuración del texto del cuerpo.

• Fuente del cuerpo: Lato
• Alineación del texto del cuerpo: centro
• Color del texto del cuerpo: # c6c6c6
• Tamaño del texto del cuerpo: 0.9vw (escritorio), 1.7vw (tableta), 2.1vw (teléfono)
• Altura de la línea del cuerpo: 1.8em

Dimensionamiento

Y cambie el ancho del módulo en diferentes tamaños de pantalla utilizando los siguientes valores:

• Ancho: 60% (escritorio), 65% (tableta), 80% (teléfono)

Animación

También eliminaremos la animación del icono en la configuración de la animación.

• Animación de iconos: sin animación

Clonar el módulo de propaganda y colocar el duplicado en la columna 2

Una vez que haya completado el Módulo Blurb, puede clonarlo y colocar el duplicado en la segunda columna de la fila.

Cambiar copia

Asegúrese de cambiar la copia.

Cambiar el ícono

Junto con el icono.

Cambiar enlace

Y el enlace de la página que coincide con el nuevo elemento del menú.

Clonar fila dos veces

Una vez que haya completado ambos módulos de Blurb en la fila, puede clonar la fila completa dos veces.

Cambie la copia, el icono y el enlace de cada duplicado de Blurb individualmente

Asegúrese de cambiar la copia, el icono y el enlace de cada uno de los elementos del menú de propaganda individualmente.

4.Hacer la sección pegajosa

Defecto

Una vez que haya agregado todos los elementos que desea que aparezcan en su sección, puede hacer que la sección se adhiera a la parte superior izquierda de su página agregando las siguientes dos líneas de código CSS al elemento principal de la sección:

position: fixed;
top: 0;

Hover (¡Importante!)

Habilite la opción de desplazamiento sobre el elemento principal de la sección y asegúrese de que la sección también permanezca fija en este estado.

position: fixed;

5. Elija un método: A) Menú al pasar el mouse o B) Menú al hacer clic

A) Menú al pasar el mouse

Tamaño de sección predeterminado

En la siguiente parte del tutorial, deberá elegir un método preferido; un menú al pasar el mouse o hacer clic. El menú flotante se comportará como un menú de clic en dispositivos más pequeños. Si decide elegir la opción de desplazamiento, abra la configuración de la sección nuevamente, vaya a la configuración de tamaño y cambie el ancho y la altura de su menú en consecuencia:

• Ancho: 8vw (escritorio), 12vw (tableta), 20vw (teléfono)
• Altura: 7.4vw (escritorio), 12vw (tableta), 16vw (teléfono)

Tamaño de la sección de desplazamiento

Modifique los valores al pasar el mouse para crear un menú desplegable.

• Ancho: 80%
• Altura: 100vh

B) Menú al hacer clic

Agregar clase CSS al módulo de texto

Si desea un menú que se abre solo al hacer clic, deberá abrir el Módulo de texto que contiene el símbolo del menú. Vaya a la pestaña avanzada y agregue una clase CSS personalizada.

• Clase CSS: ancho completo abierto

Agregar clase CSS a la sección

Abra la configuración de la sección a continuación y agregue una clase CSS diferente.

• Clase CSS: transformación suave

Dimensionamiento de la sección

A continuación, modificaremos el ancho y el alto de nuestra sección.

• Ancho: 8vw (escritorio), 12vw (tableta), 20vw (teléfono)
• Altura: 7.4vw (escritorio), 12vw (tableta), 16vw (teléfono)

Agregar código a la página

Agregar nueva fila al final de la sección

Ahora, para crear el efecto de alternancia, necesitaremos un poco de código JQuery y CSS. Comience agregando un módulo de código a una nueva fila en la parte inferior de su sección.

Agregue el módulo de código a la sección e inserte el código de alternancia de JQuery

Copie las siguientes líneas de código JQuery y péguelas en el cuadro de código:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

Agregar código CSS personalizado a la configuración de la página

Por último, pero no menos importante, abra la configuración de la página a continuación y agregue las siguientes líneas de código CSS:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Modo de desplazamiento

Escritorio

Móvil

Haga clic en Modus

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un hermoso módulo de propaganda que se expande al hacer clic / desplazarse (según su preferencia). Esta es una excelente manera de agregar interactividad adicional a su menú mientras mantiene un resultado receptivo en todos los tamaños de pantalla. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.