Cómo crear un menú publicitario 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 sorprendente menú publicitario que se expande una vez que se desplaza o hace clic en él. Primero comenzaremos siguiendo algunos pasos generales. Continuaremos agregando elementos de menú utilizando Módulos 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.

Hover Modus

Escritorio

menú publicitario

Móvil

menú publicitario

Haga clic en Modus

Escritorio

menú publicitario

Móvil

menú publicitario

1. Crear página en blanco y subir página de destino de turismo

Añadir nueva página en blanco y habilitar Divi Builder

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

menú publicitario

Subir página de destino de turismo

Una vez que haya habilitado el Divi Builder, suba el diseño de la página de destino del paquete de diseño de Sightseeing

menú publicitario

2. Agregue una nueva sección regular a la parte inferior de la página

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

menú publicitario

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)

menú publicitario

Espaciado

Pase a la pestaña de diseño y elimine todos los rellenos superiores e inferiores predeterminados de la sección.

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

menú publicitario

Sombra de caja predeterminada

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

  • Caja Shadow Blur Fuerza: 18px
  • Color de Sombra: # 383838

menú publicitario

Hover Box Shadow

Y cambie la intensidad del desenfoque de la sombra de la caja al pasar el mouse.

  • Fuerza de desenfoque de sombra de caja: 1000 px

menú publicitario

Ocultar desbordamientos de sección y aumentar índice Z

Utilizaremos la configuración de tamaño de sección para que esta técnica funcione, pero para asegurarnos de que nada exceda el contenedor de sección, tendremos que 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

menú publicitario

3. Asegúrese de que todo el contenido del menú de sección se cree usando Vw y se ajuste a 100 alturas de ventana en todos los tamaños de pantalla

Agregar fila # 1

Estructura de columna

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

menú publicitario

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

menú publicitario

Espaciado

Pase a la configuración de espaciado y elimine todos los rellenos superiores e inferiores predeterminados.

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

menú publicitario

Agregar módulo de texto a 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.

menú publicitario

Color de fondo

Cambie el color de fondo del módulo a continuación.

  • Color de fondo: # 000000

menú publicitario

Configuraciones de texto

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

  • 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

menú publicitario

Espaciado

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

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

menú publicitario

Agregar fila # 2

Estructura de columna

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

menú publicitario

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

menú publicitario

Espaciado

Pase a la configuración de espaciado y agregue algunos rellenos superiores e inferiores personalizados a continuación.

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

menú publicitario

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;

menú publicitario

Agregar módulo de difusión 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 el contenido que desee.

menú publicitario

Seleccionar icono

Elija un icono a continuación.

menú publicitario

Añadir enlace

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

  • URL del enlace del título: #

menú publicitario

Configuraciones de iconos

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

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

menú publicitario

Configuración del texto del título

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

  • Fuente del título: PT Serif
  • Estilo de fuente del título: subrayado
  • Color de 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)

menú publicitario

Configuración de 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

menú publicitario

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)

menú publicitario

Animación

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

  • Animación de iconos: sin animación

menú publicitario

Clone Blurb Module & Place Duplicate 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.

menú publicitario

Cambiar copia

Asegúrate de cambiar la copia.

menú publicitario

Cambiar el ícono

Junto con el ícono.

menú publicitario

Cambiar enlace

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

menú publicitario

Clone Row Twice

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

menú publicitario

Cambiar copia, ícono y enlace para cada propaganda duplicada individualmente

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

menú publicitario

4. Haga la sección pegajosa

Defecto

Una vez que haya agregado todos los elementos que desea mostrar 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;

menú publicitario

Desplazar (¡Importante!)

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

position: fixed;

menú publicitario

5. Elija un método: A) Menú al pasar el ratón 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 al hacer clic. El menú emergente 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)

menú publicitario

Tamaño de sección flotante

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

  • Ancho: 80%
  • Altura: 100vh

menú publicitario

B) Menú al hacer clic

Agregar clase CSS al módulo de texto

Si desea un menú que solo se abre 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: fullwidth-open

menú publicitario

Agregar clase CSS a la sección

A continuación, abra la configuración de la sección y agregue una clase CSS diferente.

  • Clase CSS: transformación suave

menú publicitario

Tamaño de 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)

menú publicitario

Agregar código a la página

Agregar nueva fila a la parte inferior de la sección

Ahora, para crear el efecto de alternancia, vamos a necesitar 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.

menú publicitario

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:


menú publicitario

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 siguiente 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;
}

menú publicitario

Avance

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

Hover Modus

Escritorio

menú publicitario

Móvil

menú publicitario

Haga clic en Modus

Escritorio

menú publicitario

Móvil

menú publicitario

Pensamientos finales

En esta publicación, le mostramos cómo crear un hermoso módulo de publicidad 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.