Cómo crear un menú circular segmentado usando Divi Blurbs


Siempre es divertido ser creativo con las opciones de transformación de Divi. Le permiten crear algunos diseños sorprendentes "fuera de la caja". Y en este tutorial, vamos a transformar algunos desenfoques Divi en un hermoso menú circular segmentado que se expande y colapsa al hacer clic. El truco para crear las áreas segmentadas (como un gráfico circular) es utilizar el sesgo de transformación de una manera bastante única. La inspiración para esta idea vino de este tutorial y tengo que decir que fue extremadamente divertido construir con Divi.

Empecemos.

Vistazo

Aquí hay un pico en el menú circular segmentado que crearemos en este tutorial.

menú circular divi segmentado

menú circular divi segmentado

menú circular divi segmentado

Descargue el diseño Divi del menú circular segmentado GRATIS

Para poner sus manos en el diseño del menú 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 use Divi Builder para editar la página en el front-end (visual builder).

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

Crear un menú circular segmentado usando Divi Blurbs

Este diseño utilizará una combinación de configuraciones Divi incorporadas y código externo. Utilizaremos el generador visual para crear la mayor parte del diseño de nuestro menú. Luego, implementaremos el modo de vista de estructura alámbrica para llegar a esas configuraciones difíciles de alcanzar una vez que los elementos se posicionen absolutamente. Comenzaremos creando el menú circular que consiste en múltiples desenfoques seguidos. Luego, diseñaremos un resumen adicional en una sección separada para que sirva como botón de menú superpuesto.

Crear la fila para los elementos del menú

En la sección regular predeterminada, agregue una fila de una columna.

menú circular divi segmentado

Styling the Row

Antes de agregar un módulo, diseñemos la fila para obtener nuestra forma circular y color de fondo. Abra la configuración de la fila y actualice lo siguiente:

  • Color de fondo: # 8857f2
  • Usar ancho de canal personalizado: SÍ
  • Ancho de canal: 1
  • Ancho: 30em
  • Altura: 30 em
  • Relleno: 0px arriba, 0px abajo

menú circular divi segmentado

Luego agregue las esquinas redondeadas y la sombra del cuadro.

Esquinas redondeadas: 50%
Box Shadow: ver captura de pantalla

menú circular divi segmentado

Volveremos para agregar algunas personalizaciones más a la fila, pero por ahora podemos comenzar a agregar nuestras imágenes borrosas.

Creando las Blurbs para el Menú

Agregue una nueva propaganda a la fila de una columna dentro de la fila circular.

menú circular divi segmentado

Styling Blurb # 1

Actualice el contenido de la primera propaganda para incluir un título y un icono.

  • Título: enlace
  • Use el icono: SÍ
  • Icono: ver captura de pantalla

Después de eso, actualice la configuración de diseño de la siguiente manera:

  • Color de fondo: # 773ef2
  • Color de fondo (desplazamiento): # 222222
  • Color del icono: #ffffff
  • Tamaño de fuente del icono: 40 px (escritorio), 30 px (tableta)
  • Alineación de texto: centro

menú circular divi segmentado

Luego actualice el estilo del texto del título de la siguiente manera:

  • Fuente del título: Archivo Narrow
  • Estilo de fuente del título: TT
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 14 px (escritorio), 12 px (tableta)

menú circular divi segmentado

A continuación, debemos posicionar la propaganda usando un CSS personalizado. Vaya a la pestaña avanzada y agregue el siguiente CSS personalizado al elemento principal:

position:absolute !important;
left: 50%;
top: 50%;

menú circular divi segmentado

Ahora regrese a la pestaña de diseño y actualice el tamaño y el espaciado de la propaganda de la siguiente manera:

  • Ancho: 15em
  • Altura: 15em
  • Margen: -15em izquierda

Esto coloca la esquina inferior derecha de la propaganda directamente en el centro del círculo.

menú circular divi segmentado

Crear el segmento usando las opciones de transformación

Para convertir la publicidad en un segmento de un círculo, vamos a sesgar y rotar la publicidad. Para hacer esto, actualice las siguientes opciones de transformación:

  • Transformar el eje X sesgado: 60 grados

menú circular divi segmentado

  • Transformación de origen: 100% 100% (abajo a la derecha)

Como la esquina inferior derecha de nuestra propaganda está directamente en el centro del círculo, queremos que el origen de la transformación también se establezca en la parte inferior derecha. Esto asegurará que la punta de la propagación sesgada esté en el centro del círculo, formando el segmento.

menú circular divi segmentado

Desenrollar el contenido de Blurb

Realmente, todo lo que queremos sesgar es la forma de la propaganda para crear la forma del segmento, no el contenido dentro (es decir, el icono y el texto). Pero como esto no es posible, todo lo que tenemos que hacer es agregar una propiedad de transformación al contenido publicitario que invierta el efecto de inclinación para que parezca normal. Para hacer esto, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado:

Contenido publicitario CSS:

transform: skew(-60deg) rotate(-75deg);
position: absolute;
height: 27em;
width: 27em;
bottom: -13.5em;
right: -13.5em;

Luego, reduzca el margen entre el icono y el texto del título agregando el siguiente CSS para la imagen de Blurb:

Blurb Image CSS

margin-bottom: 15px;

menú circular divi segmentado

Y ahora, debido a que el espacio de contenido de la propagación se extiende más allá de la propagación (aunque no pueda verlo), debemos ocultar el desbordamiento de la siguiente manera:

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

Si no agregamos esto, tendremos un espacio flotante no deseado.

menú circular divi segmentado

Creando el resto de los Blurbs

Para crear el resto de las imágenes borrosas, implemente el modo de vista de estructura alámbrica y duplique la imagen publicitaria existente 5 veces para que tenga un total de 6 imágenes borrosas idénticas.

menú circular divi segmentado

Rotar Blurb # 2

Luego abra la configuración de la propaganda n. ° 2 y gire el módulo de la siguiente manera:

  • Transformar Rotar eje Z: 30 grados

menú circular divi segmentado

Esto rotará la propaganda n. ° 2 en sentido horario desde el punto central del círculo.

menú circular divi segmentado

Luego, podemos continuar girando el resto de las imágenes borrosas en incrementos de 30 grados para crear un semicírculo de segmentos.

Rotar Blurb # 3

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

  • Transformar Rotar eje Z: 60deg

menú circular divi segmentado

Rotar Blurb # 4

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

  • Transformar Rotar eje Z: 90 grados

menú circular divi segmentado

Rotar Blurb # 5

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

  • Transformar rotar eje Z: 120deg

menú circular divi segmentado

Rotar Blurb # 6

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

  • Transformar rotar eje Z: 150deg

menú circular divi segmentado

Aquí está el resultado hasta ahora.

menú circular divi segmentado

Crear el botón de menú

Para crear el botón de menú, vamos a reducir el tamaño de una sección completa y luego utilizaremos un icono de publicidad para el diseño del botón.

Para hacer esto, primero agregue una nueva sección regular debajo de la sección actual.

menú circular divi segmentado

Luego agregue una fila de una columna a la sección.

menú circular divi segmentado

Crear el icono de Blurb para el botón

Luego agregue un módulo de propaganda a la fila.

menú circular divi segmentado

Elimine el título predeterminado y el contenido del cuerpo y use un icono de la siguiente manera:

  • Use el icono: SÍ
  • Icono: símbolo más (ver captura de pantalla)

menú circular divi segmentado

Continúe actualizando la configuración de la siguiente manera:

  • Color del icono: # 222222
  • Usar tamaño de fuente de icono: SÍ
  • Tamaño de fuente del icono: 50 px
  • Animación de imagen / icono: sin animación

Luego agregue el siguiente CSS personalizado al elemento principal para eliminar el margen predeterminado debajo del icono.

Elemento principal CSS

margin-bottom: 0px;

menú circular divi segmentado

Relleno de fila

A continuación, retire el relleno predeterminado de la fila.

  • Relleno: 0px arriba, 0px abajo

menú circular divi segmentado

Configuraciones de sección

Para finalizar el botón, vamos a dar forma a nuestra sección en un círculo.

Abra la configuración de la sección y actualice lo siguiente:

  • Ancho: 100 px
  • Altura: 100 px
  • Relleno: 0px arriba, 0px abajo
  • Esquinas redondeadas: 50%
  • Box Shadow: ver captura de pantalla

menú circular divi segmentado

Luego dale un fondo blanco.

  • Color de fondo: #ffffff

menú circular divi segmentado

En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal para colocar el botón como se fija en la parte inferior de la ventana.

position: fixed !important;
bottom: -50px;
left: 50%;
margin-left: -50px;

menú circular divi segmentado

También necesitamos agregar una clase CSS que pueda ser dirigida con nuestro jQuery. Agregue lo siguiente:

  • Clase CSS: transform_target

menú circular divi segmentado

Luego, actualice el Índice Z para que el botón permanezca sobre el resto del contenido de la página.

  • Índice Z: 12

menú circular divi segmentado

Colocación de la fila del menú circular

Ahora que el botón de menú está en su lugar, necesitamos colocar la fila que contiene nuestro menú circular segmentado para que también esté fijo y centrado en la parte inferior de la página con solo la mitad superior del círculo visible.

Para hacer esto, abra la configuración de la fila que contiene los desenfoques del menú y agregue el siguiente CSS personalizado:

Elemento principal CSS

position: fixed !important;
bottom: -10em;
left: 50%;
margin-left: -15em;
margin-bottom: -5em;

Actualice el índice z de la siguiente manera:

  • Índice Z: 11

menú circular divi segmentado

A continuación, agregue la siguiente clase CSS.

  • Clase CSS: has-transform

menú circular divi segmentado

Finalmente, necesitamos reducir completamente (o reducir) el menú circular usando la escala de transformación. Esto nos permitirá activar y desactivar el efecto con jQuery que expandirá y colapsará el menú al hacer clic.

Actualice lo siguiente:

  • Escala de transformación: 1%

menú circular divi segmentado

Con nuestro menú circular segmentado y el botón de menú en su lugar, todo lo que queda por hacer es agregar el CSS personalizado y jQuery para completar la funcionalidad del botón.

Agregar el CSS personalizado externo a la configuración de la página

Abra la configuración de la página desde el menú en la parte inferior del generador visual y agregue el siguiente CSS personalizado en la pestaña avanzada:

.has-transform, .transform_target .et-pb-icon, .toggle-transform-animation {
  transition: all 400ms ease-in-out;
} 
.has-transform, .toggle-transform-animation {
  font-size:14px;
}
.toggle-transform-animation {
  transform: none !important;
}
.transform_target {
  cursor: pointer;
}
.toggle-active-target .et_pb_blurb .et-pb-icon {
  transform: rotateZ(45deg);
}

@media all and (max-width: 980px) {
  .has-transform {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .has-transform, .toggle-transform-animation {
    font-size:10px;
  } 
} 

menú circular divi segmentado

Agregar jQuery con un módulo de código

A continuación, implemente el modo de vista de estructura alámbrica y agregue un módulo de código debajo del botón de menú.

menú circular divi segmentado

Luego agregue el siguiente código al módulo.


Resultado final

Ahora veamos el resultado final en una página en vivo.

menú circular divi segmentado

El menú funcionará bien con su página actual o con cualquiera de nuestros diseños prefabricados que puede agregar haciendo clic en el ícono más del menú de configuración.

menú circular divi segmentado

Esto es lo que se ve en nuestro diseño de página de inicio psicólogo.

menú circular divi segmentado

Y aquí está en el móvil.

menú circular divi segmentado

Ajuste del tamaño del menú circular

El menú circular segmentado se crea utilizando unidades de longitud em que son relativas al tamaño de la fuente del cuerpo principal. Esto facilita aumentar y disminuir el tamaño del menú. Para cambiar el tamaño de la fuente, simplemente cambie la propiedad de tamaño de fuente para la clase has-transforrm que apunta a la fila en el CSS personalizado que agregamos a la configuración de la página.

menú circular divi segmentado

Pensamientos finales

En este tutorial, cubrimos cómo crear un menú circular segmentado en Divi al ser creativo con las opciones de transformación de Divi. También utilizamos algunos CSS personalizados para cosas como posicionamiento fijo y "des" sesgar el contenido de publicidad para los elementos del menú. JQuery nos permite activar y desactivar la propiedad de escala de transformación para crear el efecto de expansión y colapso del menú al hacer clic en el botón de menú.

En general, creo que encontrarás mucha inspiración en esta publicación. Siéntase libre de ampliar este concepto para crear más diseños. Por ejemplo, podría continuar agregando desenfoques y rotarlos en incrementos de 30 grados para crear un círculo completo con enlaces de menú segmentados.

menú circular divi segmentado

¡O incluso podría crear un gráfico circular interactivo!

Aquí hay un menú de iconos circulares te puede gustar también.

Espero tener noticias suyas en los comentarios.

¡Salud!