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

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

Vistazo

Descarga 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 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?

Suscríbete a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, necesitará tener 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ás un lienzo en blanco para comenzar a diseñar en Divi.

Creando el diseño de la rueda giratoria del menú en Divi

La idea básica

La rueda se crea convirtiendo una fila en un elemento circular dándole una altura y un ancho de 500 px y un 50 % de esquinas redondeadas. Cada vínculo de menú se crea en un módulo de texto independiente 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 .

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 del texto: Compartir tecnología

Espaciado entre letras del 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, debemos 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

Color de fondo degradado izquierdo: rgba(0,0,0,0.45)


Color de fondo degradado derecho: #02366b


Tipo de degradado: Radial


Dirección radial: Centro


Posición inicial: 36 %


Posición final: 0 %

Usar ancho de medianil personalizado: SÍ

Ancho de medianil: 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): 0 px superior, 0 px inferior


Relleno (tableta y teléfono): 20 px arriba, 20 px abajo, 20 px a la izquierda


Margen (teléfono): -10 % a la derecha

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:

Sombra de cuadro: ver captura de pantalla

Fuerza de desenfoque de sombra de cuadro: 0px


Fuerza de propagación de sombra de cuadro: 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.

01
02
display:flex;
align-items:center;

Eso se ocupa de la configuración de la fila por ahora. Volveremos para agregar nuestro efecto de desplazamiento 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 de 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 del texto: Compartir tecnología

Texto Color del texto: #ffffff


Texto Tamaño del texto: 16 px (predeterminado), 20 px (flotar)


Espaciado entre letras del texto: 1 px


Altura de la línea de texto: 60 px


Ancho: 250 px (escritorio), automático (tableta y teléfono)


Altura: 60 px


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.

Posicionamiento 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 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:

Transformar Traducir Eje Y: 120 px (escritorio), 0 px (tableta y teléfono)

Transformar Rotar Eje Z: 60 grados (escritorio), 0 px (tableta y teléfono)


Transformar Origen: 50 % 100 % (centro derecho)

Enlace 2

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

Transformar Traducir eje Y: 60 px (escritorio), 0 px (tableta y teléfono)

Transformar Rotar eje Z: 30 grados (escritorio), 0 px (tableta y teléfono)


Transformar 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 Link 2 y actualice lo siguiente:

Transformar Traducir eje Y: -60 px (escritorio), 0 px (tableta y teléfono)

Transformar Rotar eje Z: -30 grados (escritorio), 0 px (tableta y teléfono)


Transformar origen: 50 % 100 % (centro derecho)

Enlace 5

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

Transformar Traducir eje Y: -120 px (escritorio), 0 px (tableta y teléfono)

Transformar Rotar eje Z: -60 grados (escritorio), 0 px (tableta y teléfono)


Transformar 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 arriba del Enlace 1.

Luego actualice el contenido del cuerpo con lo siguiente:

01
<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 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 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: restaurar 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 es igual a 300 px). Esto asegurará que el texto permanezca centrado verticalmente.

Luego, debemos girar 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á que el visitante vea 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 origen: 50 % 100 % (centro derecho)

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

01
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: 180 grados (escritorio), 0 grados (desplazamiento, 0 grados (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 flotar.

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 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:

01
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 % izquierdo


Margen (tableta): 5 % izquierdo, 5 % derecho


Margen (teléfono): 5 % derecho

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 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 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 para la fila 2 para empujar la rueda fuera de la sección de la siguiente manera:

Margen: -250px derecho

Necesitamos usar -250px porque el ancho total de la rueda es de 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 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 la cantidad de este diseño que puede hacer solo con la configuración de diseño integrada de Divi. Espero que esto agregue algo extra a su cinturón de herramientas de diseño para su próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!