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


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

Empecemos

Vistazo

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

menú de icono circular divi

menú de icono circular divi

menú de icono circular divi

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

Para poner sus manos en 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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 Divi Theme instalado (o el complemento Divi Builder si no usa el tema Divi).
  2. Cree una nueva página en WordPress y permita que Divi Builder edite la página en el front-end (visual builder).

Para este tutorial, utilizaremos los íconos integrados de Divi del módulo de publicidad, 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 el front-end, agregue una fila de una columna a la sección normal predeterminada.

menú de icono circular divi

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

Acolchado: 300px superior

menú de icono circular divi

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

Crear los iconos de menú con módulos de Blurb

Blurb # 1

Después de que el relleno de la fila esté en su lugar, agregue un módulo de propagación a la columna. Este será el primero de 5 desenfoques totales que agregaremos para formar nuestro menú de iconos circulares. Nos referiremos a este como propaganda n. ° 1.

menú de icono circular divi

A continuación, actualice el contenido de la publicación sacando el título y el texto del cuerpo. Luego agregue un icono a la propaganda de la siguiente manera.

Usar icono: sí
Icono: ver captura de pantalla

menú de icono circular divi

A continuación, vamos a actualizar 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 del círculo: SÍ
Color del borde del círculo: # 29a1f2
Usar tamaño de fuente de icono: SI
Tamaño de fuente del icono: 25 px
Tamaño del texto del cuerpo: 20 px
Margen: 0px

menú de icono circular divi

Además de diseñar el ícono circular, también agregamos un tamaño de texto de cuerpo. No hay texto del cuerpo, pero esto será útil más adelante cada vez que usemos la unidad de longitud em (que es relativa al tamaño del texto del cuerpo principal) para espaciar nuestros elementos de menú / desenfoques usando el método de traducción de transformación. Más sobre esto más tarde.

Después de eso, saca 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 sitúe por encima de los demás que eventualmente se ubicarán detrás de él.

Índice Z: 1

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

margin-bottom: 0px;

menú de icono circular divi

Blurb # 2

Para crear la segunda propaganda, simplemente duplique la propaganda # 1.

menú de icono circular divi

Luego 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).

menú de icono circular divi

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

Escala de transformación: 70%

Crear Blurbs # 3, # 4 y # 5

Los siguientes tres desenfoques se pueden crear duplicando la propaganda n. ° 2 y actualizando el icono para cada uno.

menú de icono circular divi

Apilando los Blurbs en la misma posición absoluta

El estado predeterminado de nuestro menú tendrá todos los desenfoques en una posición absoluta con los cuatro desenfoques del elemento del menú apilados detrás del resumen del icono del menú principal de la hamburguesa. Para obtener nuestras imágenes borrosas 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 una) para seleccionar los cinco módulos de publicidad. Luego abra la configuración de uno de los desenfoques seleccionados para actualizar la configuración del elemento para los 5 al mismo tiempo.

menú de icono circular divi

Luego agregue el siguiente CSS personalizado al elemento principal:

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

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

menú de icono circular divi

Posicionar los iconos del menú usando Transformar Traducir

Una vez que todos los desenfoques están posicionados 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 transform dentro del constructor Divi. No hay un estado de clic disponible en el generador de Divi (como pasar el mouse) ya que esto es algo manejado por JavaScript. Así que vamos a colocar nuestros elementos de menú donde queremos que estén en 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 # 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 nuestras imágenes borrosas ahora están apiladas en el generador visual, implementemos el modo de estructura alámbrica para actualizar las posiciones para cada difusión.

Posición Blurb # 2

Abra la configuración de blurb # 2 y actualice lo siguiente:

Transformar Traducir eje Y: -10em

menú de icono circular divi

Aquí está la nueva posición de blurb # 2.

menú de icono circular divi

Posición Blurb # 3

Abra la configuración de blurb # 3 y actualice lo siguiente:

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

menú de icono circular divi

Aquí está la nueva posición de blurb # 3.

menú de icono circular divi

Posición Blurb # 4

Abra la configuración de blurb # 4 y actualice lo siguiente:

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

menú de icono circular divi

Aquí está la nueva posición de blurb # 4.

menú de icono circular divi

Posición Blurb # 5

Abra la configuración de blurb # 5 y actualice lo siguiente:

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

menú de icono circular divi

Aquí está la nueva posición de blurb # 5.

menú de icono circular divi

Agregar clases CSS personalizadas a las Blurbs

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

Agregar clase CSS a Blurb # 1

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

Clase CSS: transform_target

menú de icono circular divi

Agregue clases CSS a Blurbs # 2, # 3, # 4 y # 5

Las otras cuatro imágenes borrosas compartirán las mismas clases 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 las cuatro de la siguiente manera:

Clase CSS: has-transform toggle-transform-animation

Observe que hay dos clases css separadas por un espacio.

menú de icono circular divi

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

Una vez que nuestras clases CSS se han agregado a las imágenes borrosas, estamos listos para agregar nuestro código a la página utilizando un módulo de código. Para hacer esto, agregue un módulo de código debajo de la propaganda n. ° 5.

menú de icono circular divi

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

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

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úrate de mantener el style etiqueta envuelta alrededor del CSS y el script etiqueta envuelta alrededor de JavaScript / jQuery.

menú de icono circular divi

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

menú de icono circular divi

Agregar URL de elementos de menú

Como 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 publicidad para cada uno de los 4 elementos del menú y agregue una URL de enlace del módulo.

menú de icono circular divi

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

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

Para hacer esto, seleccione los cinco desenfoques con 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" con "fijo".

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

menú de icono circular divi

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

menú de icono circular divi

Para asegurarse de que el menú se encuentra sobre el otro contenido de la página, actualice el índice z para la fila de la siguiente manera:

Índice Z: 11

menú de icono circular divi

Luego saca el relleno de la fila:

Relleno: 0px arriba, 0px abajo

menú de icono circular divi

Diseño final

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

menú de icono circular divi

Y aquí está en el móvil.

menú de icono circular divi

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

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

menú de icono circular divi

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

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

Pensamientos finales

Quién sabe si agregar un menú de icono circular fijo a una página podría ser tan simple con Divi. ¡Es el tipo de menú perfecto para dispositivos móviles también! Claro, se necesitan algunos fragmentos de código personalizados, pero el hecho de que pueda diseñar y colocar 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 de desplazamiento que pueden hacer que el menú coincida fácilmente con su propio sitio web.

Espero tener noticias suyas en los comentarios.

¡Salud!