Cómo crear un menú de iconos circular que se expande al hacer clic en Divi

Un menú de iconos circular es una solución elegante para agregar un menú simple a su sitio Divi. Este estilo de menú es intuitivo y funciona muy bien como menú fijo para sus dispositivos móviles. Hoy, mostraremos cómo crear un menú de iconos circular en Divi de una manera que realmente resalte las poderosas capacidades de diseño de Divi Builder. Y proporcionaremos un fragmento de JavaScript sencillo para abrir y cerrar el menú al hacer clic.

Empecemos

Vistazo

Aquí hay un vistazo rápido al menú de íconos circulares que crearemos.

Descargue el diseño del menú del icono de círculo GRATIS

Para poner sus manos sobre el diseño de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
2. Cree una nueva página en WordPress y habilite Divi Builder para editar la página en el front-end (constructor visual).

Para este tutorial, usaremos los íconos integrados de Divi del módulo de propaganda, por lo que no es necesario ningún activo externo.

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1

Una vez que Divi Builder esté habilitado para editar la página en la interfaz, agregue una fila de una columna a la sección regular predeterminada.

Luego abra la configuración de la fila y agregue el siguiente relleno:

Acolchado: 300px superior

Esto es simplemente para proporcionar algo de espacio para que los elementos del menú circular salgan al hacer clic.

Creación de iconos de menú con módulos Blurb

Anuncio n. ° 1

Una vez que el relleno de la fila esté en su lugar, agregue un módulo de propaganda a la columna. Este será el primero de los 5 anuncios publicitarios totales que agregaremos para formar nuestro menú de íconos circulares. Nos referiremos a este como propaganda n. ° 1.

Luego actualice el contenido de la propaganda eliminando el título y el texto del cuerpo. Luego agregue un ícono a la propaganda de la siguiente manera.

Usar icono: Sí
Icono: ver captura de pantalla

A continuación, actualizaremos la configuración de diseño de la siguiente manera:

Color del icono: # 29a1f2
Icono de círculo: SÍ
Color del círculo: # 222222
Mostrar borde circular: SÍ
Color del borde del círculo: # 29a1f2
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 25px
Tamaño del texto del cuerpo: 20px
Margen: 0px

Además de diseñar el icono circular, también agregamos un tamaño de texto de cuerpo. No hay texto en el cuerpo, pero esto será útil más adelante siempre que usemos la unidad de longitud em (que es relativa al tamaño del texto del cuerpo principal) para espaciar nuestros elementos de menú / difuminaciones usando transform translate. Más sobre esto más adelante.

Después de eso, saque la animación de imagen / icono predeterminada.

Animación de imagen / icono: sin animación

Luego, establezca el índice Z para este módulo en 1 para que se ubique por encima de los demás que eventualmente se ubicarán detrás de él.

Índice Z: 1

Y finalmente, elimine el margen inferior predeterminado debajo del icono agregando el siguiente CSS personalizado a la imagen de Blurb.

margin-bottom: 0px;

Anuncio n. ° 2

Para crear la segunda propaganda, simplemente duplique la propaganda n. ° 1.

A continuación, abra la configuración de la nueva propaganda (propaganda n. ° 2) y cambie el icono y vuelva a establecer el índice Z en el valor predeterminado (0).

Después de eso, reduzcamos el icono usando la escala de transformación de la siguiente manera:

Transformar escala: 70%

Creación de desenfoques n. ° 3, n. ° 4 y n. ° 5

Los siguientes tres anuncios publicitarios se pueden crear duplicando el anuncio publicitario n. ° 2 y actualizando el icono de cada uno.

Apilar los desenfoques en la misma posición absoluta

El estado predeterminado de nuestro menú tendrá todos los anuncios publicitarios en una posición absoluta con los cuatro elementos publicitarios de los elementos del menú apilados detrás del anuncio publicitario principal del icono del menú de hamburguesas. Para colocar nuestros anuncios en la misma posición absoluta, use la función de selección múltiple (mantenga presionada la tecla ctrl / cmd y haga clic en cada uno) para seleccionar los cinco módulos de anuncios. Luego, abra la configuración de uno de los anuncios publicitarios seleccionados para actualizar la configuración de los elementos de los 5 al mismo tiempo.

Luego agregue el siguiente CSS personalizado al elemento principal:

position: absolute !important;
bottom: 20px;
left: 20px;

Esto coloca los anuncios en la parte inferior izquierda de la fila.

Colocación de los iconos de menú mediante Transform Translate

Una vez que todos los anuncios se colocan para el estado predeterminado, podemos comenzar a colocar los elementos del menú para el estado de clic (donde terminarán después de hacer clic en el botón del menú principal). Para hacer esto, podemos usar la propiedad transform translate dentro del constructor Divi. No hay un estado de clic disponible en el constructor Divi (como hover) ya que esto es algo manejado por JavaScript. Así que vamos a colocar los elementos de nuestro menú donde queremos que estén al hacer clic ahora. Luego usaremos Javascript para activar y desactivar esa posición al hacer clic en el botón del menú principal.

Queremos mantener la propaganda n. ° 1 en su lugar porque es el botón del menú principal. Sin embargo, queremos mover la propaganda n. ° 2, n. ° 3, n. ° 4 y n. ° 5. Y dado que nuestros anuncios ahora están apilados en el generador visual, implementemos el modo de estructura alámbrica para actualizar las posiciones de cada anuncio.

Anuncio de posición n. ° 2

Abra la configuración de la propaganda n. ° 2 y actualice lo siguiente:

Transformar trasladar eje Y: -10em

Aquí está la nueva posición de la propaganda n. ° 2.

Anuncio de posición n. ° 3

Abra la configuración de la propaganda n. ° 3 y actualice lo siguiente:

Transformar trasladar eje Y: -8.6em
Transformar trasladar eje X: 5em

Aquí está la nueva posición de la propaganda n. ° 3.

Anuncio de posición n. ° 4

Abra la configuración de la propaganda n. ° 4 y actualice lo siguiente:

Transformar trasladar eje Y: -5em
Transformar trasladar el eje X: 8.6em

Aquí está la nueva posición de la propaganda n. ° 4.

Anuncio de posición n. ° 5

Abra la configuración de la propaganda n. ° 5 y actualice lo siguiente:

Transformar trasladar eje Y: 0px
Transformar trasladar eje X: 10em

Aquí está la nueva posición de la propaganda n. ° 5.

Agregar clases CSS personalizadas a los Blurbs

Para que nuestro JavaScript funcione correctamente, necesitamos agregar algunas clases CSS que servirán como selectores para estilos y funcionalidades adicionales.

Agregar clase CSS a Blurb # 1

En el modo de vista de estructura alámbrica, abra la configuración de la propaganda n. ° 1 y agregue la siguiente clase CSS:

Clase CSS: transform_target

Agregue clases de CSS a los desenfoques n. ° 2, n. ° 3, n. ° 4 y n. ° 5

Los otros cuatro anuncios compartirán las mismas clases de CSS, por lo que podemos usar la función de selección múltiple para seleccionar Blurb # 2, # 3, # 4 y # 5 y actualizar la clase CSS para los cuatro de la siguiente manera:

Clase CSS: has-transform toggle-transform-animation

Observe que hay dos clases CSS separadas por un espacio.

Agregar CSS y JavaScript externos con un módulo de código

Una vez que nuestras clases CSS se han agregado a los anuncios, estamos listos para agregar nuestro código a la página usando un módulo de código. Para hacer esto, agregue un módulo de código en el anuncio # 5.

Luego pegue el siguiente código en el módulo de código:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Este es el CSS externo que se usa en combinación con el código jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

Y esta es la necesidad de JavaScript para que los elementos del menú del icono circular se extiendan al hacer clic en el botón de menú.

Asegúrese de mantener la etiqueta de style envuelta alrededor del CSS y la etiqueta de la script envuelta alrededor de JavaScript / jQuery.

Verifique el resultado final de la funcionalidad en la página en vivo.

Agregar URL de elementos de menú

Dado que se trata de un menú, los cuatro elementos del menú necesitarán enlaces / URL. Para agregar las URL necesarias para cada elemento del menú, abra la configuración del módulo de propaganda para cada uno de los 4 elementos del menú y agregue una URL de enlace del módulo.

Hacer que el botón de menú sea fijo (o fijo)

Debido a que este menú es pequeño e intuitivo para dispositivos móviles, es posible que desee hacer que el menú sea fijo para que permanezca fijo en la parte inferior izquierda del navegador.

Para hacer esto, seleccione los cinco anuncios publicitarios usando la función de selección múltiple y luego actualice el CSS personalizado en el Elemento principal reemplazando el valor de posición "absoluto" por "fijo".

position: fixed !important;
bottom: 20px;
left: 20px;

Ahora el menú permanecerá fijo en la parte inferior izquierda de la ventana del navegador.

Para asegurarse de que el menú esté encima del resto del contenido de la página, actualice el índice z de la fila de la siguiente manera:

Índice Z: 11

Luego saca el relleno de la fila:

Relleno: 0px arriba, 0px abajo

Diseño final

Aquí está el diseño final del icono circular fijo con un diseño prefabricado.

Y aquí está en el móvil.

Cómo ajustar el tamaño y el espaciado del menú con facilidad

Como se mencionó anteriormente, el menú fue diseñado usando la unidad de longitud em para el posicionamiento del elemento del menú en los ejes xey (usando la traducción de transformación). La unidad de longitud em es relativa al tamaño del texto del cuerpo principal. Por lo tanto, dado que cada uno de nuestros módulos de propaganda tiene el mismo tamaño de texto del cuerpo de 20px, podemos usar la selección múltiple para cambiar el texto del cuerpo de todos los anuncios a la vez.

Esto aumentará o disminuirá el espacio entre los elementos del menú según sea necesario.

Y también puede hacer lo mismo con el tamaño de fuente del icono. Simplemente use la selección múltiple para ajustar el tamaño de la fuente del icono para todos los elementos del menú a la vez.

Pensamientos finales

Quién diría que agregar un menú de íconos circulares fijos a una página podría ser tan simple con Divi. ¡También es el tipo de menú perfecto para dispositivos móviles! Claro, se necesitan algunos fragmentos de código personalizados, pero el hecho de que pueda diseñar y posicionar el estado de clic de los elementos del menú utilizando el generador visual es algo muy bueno. No olvide explorar diferentes colores, tamaños y diseños flotantes que pueden hacer que el menú coincida fácilmente con su propio sitio web.

Espero tener noticias tuyas en los comentarios.

¡Salud!