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 muy bien como un menú fijo para sus dispositivos móviles. Hoy, mostraremos cómo crear un menú de íconos 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 de abrir y cerrar el menú al hacer clic.
Empecemos
Aquí hay un vistazo rápido al menú de iconos circulares que construiremos.
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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- 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).
- Cree una nueva página en WordPress y habilite Divi Builder para editar la página en la parte delantera (constructor visual).
Para este tutorial, usaremos los íconos integrados de Divi del módulo de publicidad, por lo que no es necesario ningún recurso externo.
Después de eso, tendrás 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.
Luego abra la configuración de la fila y agregue el siguiente relleno:
Relleno: 300px arriba
Esto es simplemente para proporcionar algo de espacio para que los elementos del menú circular aparezcan al hacer clic.
Blurb #1
Una vez que el relleno de fila esté en su lugar, agregue un módulo de publicidad a la columna. Este será el primero de 5 anuncios publicitarios totales que agregaremos para formar nuestro menú de iconos circulares. Nos referiremos a este como la propaganda #1.
Luego actualice el contenido de la propaganda eliminando el título y el cuerpo del texto. Luego agregue un ícono a la propaganda de la siguiente manera.
Icono de uso: Sí
Icono: ver captura de pantalla
A continuación, vamos a actualizar la configuración de diseño de la siguiente manera:
Color del icono: #29a1f2
Icono del 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 del icono: SÍ
Tamaño de fuente del icono: 25px Tamaño
del texto del cuerpo: 20px
Margen: 0px
Además de diseñar el ícono circular, también agregamos un tamaño de cuerpo de texto. No hay texto en el cuerpo, pero esto será útil más adelante cuando usemos la unidad de longitud em (que es relativa al tamaño del texto del cuerpo principal) para espaciar los elementos de nuestro menú/borradores usando la traducción de transformación. Más sobre esto más adelante.
Después de eso, elimine 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 asiente sobre los otros que eventualmente se ubicarán detrás de él.
Índice Z: 1
Y finalmente, elimine el margen inferior predeterminado debajo del ícono agregando el siguiente CSS personalizado a la imagen de Blurb.
|
01
|
margin-bottom: 0px; |
Blurb #2
Para crear la segunda propaganda, simplemente duplique la propaganda #1.
A continuación, abra la configuración de la nueva publicidad (publicidad n.º 2), cambie el icono y vuelva a establecer el Índice Z en el valor predeterminado (0).
Después de eso, reduzcamos el ícono usando la escala de transformación de la siguiente manera:
Escala de transformación: 70%
Creando Blurbs #3, #4 y #5
Los próximos tres anuncios se pueden crear duplicando el anuncio n.º 2 y actualizando el icono de cada uno.
Apilar los Blurbs en la misma posición absoluta
El estado predeterminado de nuestro menú tendrá todas las notas publicitarias en una posición absoluta con las cuatro notas publicitarias de los elementos del menú apiladas detrás de la nota publicitaria principal del icono del menú de hamburguesas. Para colocar nuestros anuncios publicitarios 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 publicitarios. Luego abra la configuración de uno de los anuncios publicitarios seleccionados para actualizar la configuración del elemento para los 5 al mismo tiempo.
Luego agregue el siguiente CSS personalizado al elemento principal:
|
01
02
03
|
position: absolute !important;bottom: 20px;left: 20px; |
Esto coloca las notas publicitarias en la parte inferior izquierda de la fila.
Una vez que todos los anuncios publicitarios estén posicionados para el estado predeterminado, podemos comenzar a ubicar 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 pasar el mouse) ya que esto es algo que maneja 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 #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 publicitarios ahora están apilados en el generador visual, implementemos el modo de estructura alámbrica para actualizar las posiciones de cada anuncio publicitario.
Posición de la propaganda #2
Abra la configuración de la publicidad n.º 2 y actualice lo siguiente:
Transformar Traducir eje Y: -10em
Aquí está la nueva posición de la propaganda #2.
Posición de la propaganda #3
Abra la configuración de la publicidad 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 #3.
Posición de la propaganda #4
Abra la configuración de la publicidad n.º 4 y actualice lo siguiente:
Transformar Trasladar eje Y: -5em
Transformar Trasladar eje X: 8,6em
Aquí está la nueva posición de la propaganda #4.
Publicación de posición n.º 5
Abra la configuración de la publicidad 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 #5.
Adición de clases CSS personalizadas a Blurbs
Para que nuestro JavaScript funcione correctamente, debemos agregar algunas clases de CSS que servirán como selectores para estilo y funcionalidad adicionales.
Agregar clase CSS a Blurb #1
En el modo de vista de estructura alámbrica, abra la configuración de la publicidad n.º 1 y agregue la siguiente clase de CSS:
Clase CSS: transform_target
Agregue clases de CSS a Blurbs #2, #3, #4 y #5
Los otros cuatro anuncios publicitarios compartirán las mismas clases de CSS, por lo que podemos usar la función de selección múltiple para seleccionar Anuncios n.° 2, n.° 3, n.° 4 y n.° 5 y actualizar la clase CSS para los cuatro de la siguiente manera:
Clase CSS: has-transform alternar-transformar-animación
Observe que hay dos clases CSS separadas por un espacio.
Agregar el CSS externo y JavaScript con un módulo de código
Una vez que nuestras Clases de CSS se han agregado a los anuncios publicitarios, 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 debajo de la propaganda #5.
Luego pegue el siguiente código en el módulo de código:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<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 usado en combinación con el código jQuery.
|
01
02
03
04
05
06
07
08
09
10
|
<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 del menú.
Asegúrese de mantener la styleetiqueta alrededor del CSS y la scriptetiqueta alrededor de JavaScript/jQuery.
Verifique el resultado final de la funcionalidad en la página en vivo.
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.
Debido a que este menú es pequeño e intuitivo para dispositivos móviles, es posible que desee que el menú sea pegajoso 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» con «fijo».
|
01
02
03
|
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ú se encuentre sobre el 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 ícono circular fijo con un diseño prefabricado.
Y aquí está en el móvil.
Como se mencionó anteriormente, el menú se diseñó usando la unidad de longitud em para el posicionamiento del elemento del menú en los ejes x e y (usando transform translate). 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 publicitarios tiene el mismo tamaño de texto del cuerpo de 20 px, podemos usar la selección múltiple para cambiar el texto del cuerpo de todos los anuncios publicitarios 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 para el tamaño de fuente del icono. Simplemente use la selección múltiple para ajustar el tamaño de la fuente del ícono para todos los elementos del menú a la vez.
Pensamientos finales
Quién diría que agregar un menú de iconos 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 colocar el estado de clic de los elementos del menú utilizando el generador visual es algo bastante 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 escuchar de usted en los comentarios.
¡Salud!