Cómo crear una rueda de menú giratorio al pasar el mouse por encima


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 necesitan ir. Y también sería un menú de subcategoría genial para tu blog.

En este tutorial, le mostraré cómo crear una rueda de menú giratoria al pasar el mouse sobre Divi. Esto se puede hacer mediante el uso de una combinación de opciones Divi incorporadas y algunos fragmentos de CSS personalizados.

Vistazo

Descargar el diseño GRATIS

Para poner sus manos en 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 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?

(incrustar) https://www.youtube.com/watch?v=W3V-nANO5qM (/ incrustar)

Suscríbase a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, deberá tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador 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 del menú giratorio en Divi

La idea basica

La rueda se crea convirtiendo una fila en un elemento circular dándole una altura y ancho de 500 px y 50% de esquinas redondeadas. 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 lo haría crear texto curvo en Divi.

Crear 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
Espacio entre letras de texto: 1px
Encabezado 2 Tamaño del texto: 8vw

Agregue la fila 2 para construir la rueda

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

Antes de comenzar a agregar nuestros módulos de texto para nuestros enlaces, necesitamos diseñar nuestra fila como una rueda. Habrá una buena cantidad de optimizaciones necesarias para 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
Gradiente de fondo Color izquierdo: rgba (0,0,0,0.45)
Gradiente de fondo Color correcto: # 02366b
Tipo de degradado: radial
Dirección radial: centro
Posición de inicio: 36%
Posición final: 0%

Usar ancho de canal personalizado: SÍ
Ancho de canal: 1
Ancho: 500 px
Ancho máximo: 500 px (escritorio), automático (tableta y teléfono)
Altura: 500 px (escritorio), automático (tableta y teléfono)
Relleno (escritorio): 0px arriba, 0px abajo
Acolchado (tableta y teléfono): 20 px arriba, 20 px abajo, 20 px izquierda
Margen (teléfono): -10% correcto

Necesitamos establecer tanto el alto como el ancho de la fila en 500 px para que sea un cuadrado perfecto. Esto nos permitirá darle una forma circular perfecta usando la opción de esquinas redondeadas (radio del 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 la caja: 210 px
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 ocupa de la configuración de la fila por ahora. Volveremos para agregar nuestro efecto de giro giratorio más tarde.

Agregar los enlaces

Cada enlace en 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 para la rueda y uno de los módulos de texto contendrá el título del menú.

Comience creando 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
Texto Tamaño del texto: 16px (predeterminado), 20px (pasar el mouse)
Espacio entre letras de texto: 1px
Altura de la línea de texto: 60 px
Ancho: 250 px (escritorio), automático (tableta y teléfono)
Altura: 60 px
Acolchado: quedan 20 px

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 en su lugar.

Para facilitar esto, 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:

Transformar Traducir Y Eje: 120px (escritorio), 0px (tableta y teléfono)
Transformar Rotate Z Axis: 60deg (escritorio), 0px (tableta y teléfono)
Origen de la transformación: 50% 100% (centro derecha)

Enlace 2

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

Transformar Traducir Y Eje: 60px (escritorio), 0px (tableta y teléfono)
Transformar Rotate Z Axis: 30deg (escritorio), 0px (tableta y teléfono)
Origen de la transformación: 50% 100% (centro derecha)

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:

Transformar Traducir Y Eje: -60px (escritorio), 0px (tableta y teléfono)
Transformar Rotate Z Axis: -30deg (escritorio), 0px (tableta y teléfono)
Origen de la transformación: 50% 100% (centro derecha)

Enlace 5

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

Transformar Traducir Y Eje: -120 px (escritorio), 0 px (tableta y teléfono)
Transformar girar eje Z: -60deg (escritorio), 0px (tableta y teléfono)
Origen de la transformación: 50% 100% (centro derecha)

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 p. Esto asegurará que la altura de la línea se reconozca en la configuración del texto.

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

Luego actualice lo siguiente:

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

La altura de la línea debe ser de 300 píxeles para que sea igual a la altura de la columna de contenido, que también es de 300 píxeles (5 módulos de texto cada uno con una altura de 60 píxeles equivale a 300 píxeles). 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)
Origen de la transformación: 50% 100% (centro derecha)

Una vez hecho esto, debemos darle una posición absoluta al módulo de texto de la etiqueta del menú. 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.

Agregar el 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 Rotar eje Z: 180deg (escritorio), 0deg (pasar el mouse, 0deg (tableta y teléfono)

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

Duración de 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 ratón.

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, necesitaremos ajustar un poco el espacio 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 espacio de la fila 1

A continuación, actualice el tamaño y el espacio para 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% correcto

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): 30px arriba

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 genial es ocultar la mitad derecha de la rueda fuera de la sección para que los enlaces se oculten y luego se muestren al pasar el mouse. Para hacer esto, continúe 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: -250 px a la derecha

Necesitamos usar -250 px porque el ancho total de la rueda es 500 px 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 enlace giratoria es uno de esos elementos de diseño elegantes 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 extra en su cinturón de herramientas de diseño para su próximo proyecto.

Espero tener noticias suyas en los comentarios.

¡Salud!