Cómo crear una rueda de menú giratoria al pasar el mouse

Crear una rueda de menú giratoria al pasar el mouse es una forma divertida de mostrar enlaces útiles en su sitio web. Esta sería una excelente manera de proporcionar múltiples llamadas a la acción en un encabezado para dirigir a los usuarios a donde deben ir. Y también sería un menú de subcategorías genial para tu blog.

En este tutorial, le mostraré cómo crear una rueda de menú giratoria al pasar el mouse por encima en Divi. Esto se puede hacer usando una combinación de opciones Divi integradas y algunos fragmentos de CSS personalizado.

Vistazo

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños 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?

Suscríbete a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, necesitará lo siguiente:

1. El tema Divi instalado y activo
2. Una nueva página creada para construir desde cero en el front-end (constructor visual)

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

Creación del diseño de la rueda de menú giratoria en Divi

La idea básica

La rueda se crea convirtiendo una fila en un elemento circular dándole una altura y ancho de 500px y esquinas redondeadas al 50%. Cada enlace de menú se crea en un módulo de texto separado y se alinea a lo largo del perímetro de la fila circular girando cada módulo de texto a lo largo del radio (centro) de la fila. Esta configuración es similar a cómo crearía texto curvo en Divi.

Cree la sección y la fila 1

Cree una sección regular con una fila de una columna.

Luego agregue un módulo de texto a la fila con el siguiente contenido.

Luego actualice el diseño del texto de la siguiente manera:

Fuente de texto: Share Tech
Espaciado de letras de texto: 1px
Tamaño del texto del encabezado 2: 8vw

Agregue la fila 2 para construir la rueda

A continuación, debemos agregar una nueva fila de una columna debajo de la Fila 1.

Antes de comenzar a agregar nuestros módulos de texto para nuestros enlaces, debemos diseñar nuestra fila como una rueda. Habrá algunas optimizaciones necesarias en la fila para hacer nuestro diseño de rueda. Para comenzar, abra la configuración de la Fila 2 y actualice lo siguiente:

Color de fondo: # 02366b
Color de degradado de fondo a la izquierda: rgba (0,0,0,0.45)
Gradiente de fondo Color derecho: # 02366b
Tipo de degradado: radial
Dirección radial: centro
Posición inicial: 36%
Posición final: 0%

Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1
Ancho: 500px
Ancho máximo: 500px (escritorio), automático (tableta y teléfono)
Alto: 500px (escritorio), automático (tableta y teléfono)
Relleno (escritorio): 0px arriba, 0px abajo
Relleno (tableta y teléfono): 20 píxeles en la parte superior, 20 píxeles en la parte inferior, 20 píxeles en la izquierda
Margen (teléfono): -10% a la derecha

Necesitamos establecer tanto el alto como el ancho de la fila en 500px para que sea un cuadrado perfecto. Esto nos permitirá darle una forma circular perfecta usando la opción de esquinas redondeadas (radio de borde) en Divi.

Esquinas redondeadas: 50%

Luego, podemos agregar otro nivel de diseño de círculo usando una sombra de cuadro de la siguiente manera:

Box Shadow: ver captura de pantalla
Fuerza de desenfoque de sombra de caja: 0px
Fuerza de propagación de la sombra de caja: 210px
Color de sombra: rgba (2,54,107,0.66)

A continuación, agregaremos un pequeño fragmento de CSS para que el contenido de nuestra fila esté centrado verticalmente. En la pestaña avanzada, agregue el siguiente CSS personalizado en el elemento principal.

display:flex;
align-items:center;

Eso se encarga de la configuración de las filas por ahora. Regresaremos para agregar nuestro efecto de desplazamiento giratorio más tarde.

Agregar los enlaces

Cada enlace de la rueda se creará con un módulo de texto. Vamos a crear un total de seis módulos de texto. Cinco de los módulos de texto contendrán los enlaces de la rueda y uno de los módulos de texto contendrá el título del menú.

Empiece por crear un nuevo módulo de texto.

Luego actualice la configuración de texto de la siguiente manera:

Contenido del cuerpo: "Elemento de enlace"

Fuente de texto: Share Tech
Color del texto del texto: #ffffff
Tamaño del texto del texto: 16 px (predeterminado), 20 px (desplazamiento)
Espaciado de letras de texto: 1px
Altura de la línea de texto: 60px
Ancho: 250px (escritorio), automático (tableta y teléfono)
Alto: 60px
Relleno: 20px a la izquierda

Guarde la configuración por ahora. Luego, duplique el módulo de texto 4 veces para crear un total de 5 módulos de texto.

Colocación de los enlaces / módulos de texto

Ahora estamos listos para colocar nuestros enlaces a lo largo del perímetro de la rueda. Para hacer esto, actualizaremos cada módulo de texto con opciones de transformación que mueven / traducen y rotan el módulo a su lugar.

Para hacer esto más fácil, implemente el modo de vista de estructura alámbrica y etiquete los módulos de texto comenzando con el Enlace 1 en la parte superior hasta el Enlace 5 en la parte inferior.

Enlace 1

Comenzaremos con la edición del Enlace 1. Abra la configuración del módulo de texto para el Enlace 1 y actualice lo siguiente:

Transform Translate Y Axis: 120px (escritorio), 0px (tableta y teléfono)
Transformar Girar eje Z: 60deg (escritorio), 0px (tableta y teléfono)
Transformar el origen: 50% 100% (centro derecho)

Enlace 2

Abra la configuración del módulo de texto para el Enlace 2 y actualice lo siguiente:

Transform Translate Y Axis: 60px (escritorio), 0px (tableta y teléfono)
Transformar Girar eje Z: 30deg (escritorio), 0px (tableta y teléfono)
Transformar el origen: 50% 100% (centro derecho)

Enlace 3

Dado que el módulo de texto para el enlace 3 está en el medio, podemos dejarlo en su lugar.

Enlace 4

Abra la configuración del módulo de texto para el Enlace 2 y actualice lo siguiente:

Transform Translate Y Axis: -60px (escritorio), 0px (tableta y teléfono)
Transformar Girar eje Z: -30deg (escritorio), 0px (tableta y teléfono)
Transformar el origen: 50% 100% (centro derecho)

Enlace 5

Abra la configuración del módulo de texto para el Enlace 2 y actualice lo siguiente:

Transform Translate Y Axis: -120px (escritorio), 0px (tableta y teléfono)
Transformar Girar eje Z: -60deg (escritorio), 0px (tableta y teléfono)
Transformar el origen: 50% 100% (centro derecho)

Ahora veamos el resultado hasta ahora. Observe cómo los enlaces / texto dentro de los módulos de texto giran perfectamente a lo largo del perímetro del círculo.

Agregar la etiqueta del menú

Para agregar la etiqueta del menú, necesitaremos agregar otro módulo de texto en la parte superior de los cinco módulos de texto que ya tenemos. Continúe y agregue un nuevo módulo de texto sobre el Enlace 1.

Luego actualice el contenido del cuerpo con lo siguiente:

<p>menu</p>

Asegúrese de que la etiqueta del menú esté envuelta en una etiqueta ap. Esto asegurará que la altura de la línea sea reconocida en la configuración del texto.

Luego, para acelerar el diseño, copie los estilos de módulo del módulo de texto para el Enlace 3 y pegue esos estilos de módulo en el nuevo módulo de texto.

Luego actualice lo siguiente:

Altura de la línea: 300 px (escritorio), 20 px (tableta y teléfono)
Altura: restablece la configuración predeterminada (automático)

La altura de la línea debe ser de 300 px para que sea igual a la altura de la columna de contenido, que también es de 300 px (5 módulos de texto cada uno con una altura de 60 px equivale a 300 px). Esto asegurará que el texto permanezca centrado verticalmente.

Luego, debemos rotar el módulo de texto de la etiqueta del menú 180 grados para que se muestre correctamente en el lado opuesto de la rueda. Esto permitirá al visitante ver la etiqueta del menú antes del estado de desplazamiento que hace girar los enlaces a la vista.

Transformar Girar eje Z: 180 grados (escritorio), 0 grados (tableta y teléfono)
Transformar el origen: 50% 100% (centro derecho)

Una vez hecho esto, debemos darle al módulo de texto de la etiqueta del menú una posición absoluta. Para hacer esto, agregue el siguiente CSS personalizado al elemento principal:

position: absolute !important;

Ahora mira el resultado. Debería ver que el elemento del menú está al revés a la derecha de la rueda.

Adición del efecto de desplazamiento giratorio a la fila / rueda

Para agregar el efecto de desplazamiento giratorio a la fila, actualice la configuración de la fila de la siguiente manera:

Transformar Girar eje Z: 180deg (escritorio), 0deg (hover, 0deg (tableta y teléfono)

Luego actualice la configuración de transición de la siguiente manera:

Duración de la transición: 450 ms
Curva de velocidad de transición: facilidad de entrada y salida

Ahora mira cómo gira la rueda al pasar el mouse.

Hacer un diseño de dos columnas para la sección

En este momento, el diseño consta de dos filas de una columna apiladas una encima de la otra. Sin embargo, podemos usar la propiedad flex css para alinear las dos filas horizontalmente. Para hacer esto, podemos agregar un pequeño fragmento de CSS personalizado a la sección. Una vez hecho esto, tendremos que ajustar un poco el espaciado para que las cosas se vean bien.

Abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:

display:flex;

Actualizar el espaciado de la fila 1

A continuación, actualice el tamaño y el espaciado de la fila 1 de la siguiente manera:

Ancho: 40% (escritorio), 100% (tableta y teléfono)
Margen (escritorio): 5% restante
Margen (tableta): 5% a la izquierda, 5% a la derecha
Margen (teléfono): 5% a la derecha

Toques finales

En la pantalla de la tableta y el teléfono, deberá agregar un margen superior al módulo de texto del enlace 1.

Margen (tableta): 30 píxeles en la parte superior

Y siempre puede agregar un divisor de sección a la sección para completar el diseño.

Resultado final

Ahora veamos el resultado final.

Diseño alternativo de media rueda

Un diseño alternativo interesante es ocultar la mitad derecha de la rueda fuera de la sección para que los enlaces se oculten y luego se revelen al pasar el mouse. Para hacer esto, siga adelante y duplique toda la sección que contiene el diseño que acabamos de hacer. En la sección duplicada, actualice la configuración de la fila 1 de la siguiente manera:

Ancho: 70% (escritorio)

Luego actualice la configuración de la fila 2 para empujar la rueda fuera de la sección de la siguiente manera:

Margen: -250px a la derecha

Necesitamos usar -250px porque el ancho total de la rueda es 500px y queremos ocultar exactamente la mitad de la fila.

Luego, configure la visibilidad de la sección como oculta de la siguiente manera:

Aquí está el diseño final.

Pensamientos finales

Una rueda de eslabones giratoria es uno de esos elementos de diseño elegante que pueden atraer a los visitantes con un efecto de desplazamiento sutil y único. Y es bastante sorprendente cuánto de este diseño puede hacer solo con la configuración de diseño incorporada de Divi. Espero que esto agregue algo más en su cinturón de herramientas de diseño para su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!