¿Le gustaría crear un menú Divi original en forma de rueda 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 interesante para tu blog.
En este tutorial, le mostraremos 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.
vista
Antes de entrar en este tutorial, echemos un vistazo al resultado que queremos lograr.
¡¡¡Descarga DIVI ahora!!!
Crear una nueva página con Divi Builder
Para comenzar, necesitará lo siguiente:
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Diseño de la rueda giratoria del menú en Divi
Crear sección y línea 1
En la sección presente por defecto, agregue una fila con la siguiente estructura de columnas.
Luego agregue un módulo de texto a la línea con el siguiente contenido.
A continuación, actualice el diseño del texto de la siguiente manera:
- Fuente de texto: Share Tech
- Espaciado entre letras de texto: 1px
- Título 2 Tamaño del texto: 8vw
Agrega la línea 2 para construir la rueda.
A continuación, debemos agregar una nueva fila a una columna debajo de la fila 1.
Antes de comenzar a agregar nuestros módulos de texto para nuestros enlaces, debemos diseñar nuestra línea como una rueda. Se necesitarán muchas optimizaciones en la fila para hacer nuestro diseño de rueda.
Lea también: Cómo revelar contenido en el divisor de sección flotante en Divi
Para comenzar, abra Configuración de la fila 2 y actualice lo siguiente:
- Color de fondo: #02366b
- Color de degradado de fondo izquierdo: rgba(0,0,0,0.45)
- Color degradado de fondo derecho: #02366b
- Tipo de degradado: Circular
- Dirección radial: Centro
- Posición inicial: 36%
- Posición final: 0%
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 500px
- 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 (Superior e Inferior)
- Relleno (tableta y teléfono): 20 px (superior, inferior e izquierda)
- Margen (Teléfono): -10% (Derecha)
Necesitamos establecer tanto la altura como el ancho de la línea en 500 píxeles para que sea un cuadrado perfecto. Esto nos permitirá darle una forma circular perfecta usando la opción de esquinas redondeadas (radio del borde) de Divi.
- Esquinas redondeadas: 50%
A continuación, podemos agregar otro nivel de diseño de círculo usando una sombra de cuadro de la siguiente manera:
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 210px
- Color de sombra: rgba (2,54,107,0.66)
A continuación, agregaremos un pequeño fragmento de CSS para centrar verticalmente el contenido de nuestra fila. Debajo de la pestaña Avanzado, agregue el siguiente CSS personalizado en el elemento principal.
display:flex;align-items:center;
Agregar enlaces
Cada enlace en la rueda se creará con un módulo. Texto. Crearemos un total de seis módulos. Texto. Cinco de los módulos Texto contendrá los enlaces para la rueda y el otro contendrá el título del menú.
Comience creando un nuevo módulo de "Texto".
A continuación, actualice la configuración de texto de la siguiente manera:
- Mono: "Elemento 1"
- Fuente de texto: Share Tech
- Color del texto: #ffffff
- Tamaño: 16px (predeterminado), 20px (Hover)
- Espaciado entre letras: 1px
- Altura de línea de texto: 60px
- Ancho: 250 px (escritorio), automático (tableta y teléfono)
- Altura: 60px
- Relleno (izquierda): 20px
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 enlaces/módulos de texto
Ahora estamos listos para colocar nuestros enlaces a lo largo del perímetro de la rueda. Para ello, actualizaremos cada módulo. Texto con opciones de transformación que mueven/traducen y giran el módulo en su lugar.
Descubre también: Cómo crear una cuadrícula de columna fluida al pasar el mouse en divi
Para facilitar esto, implemente el modo de visualización 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 editando el enlace 1. Abra la configuración del módulo de texto para el enlace 1 y actualice lo siguiente:
- Transform Translate (eje Y): 120 px (escritorio), 0 px (tableta y teléfono)
- Transformar Rotar (eje Z): 60 grados (Escritorio), 0 px (Tableta y Teléfono)
- Origen: 50% (centro derecha)
Enlace 2
Abra la configuración del módulo de texto para el enlace 2 y actualice lo siguiente:
- Transformar
- Traducir (eje Y): 60 px (escritorio), 0 px (tableta y teléfono)
- Rotación del eje Z: 30 grados (escritorio), 0 px (tableta y teléfono)
- Origen: 50% (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 eje Y: -60px (Escritorio), 0px (Tableta y Teléfono)
- Rotación del eje Z: -30 grados (escritorio), 0px (tableta y teléfono)
- Origen: 50% (Centro derecha)
Enlace 5
Abra la configuración del módulo de texto para el enlace 2 y actualice lo siguiente:
- Transformar:
- Traducir eje Y: -120px (Escritorio), 0px (Tableta y Teléfono)
- Rotación del eje Z: -60 grados (escritorio), 0 px (tableta y teléfono)
- Origen: 50% (centro derecha)
Ahora veamos el resultado hasta ahora. Observe cómo los enlaces/textos en los módulos de texto corren perfectamente a lo largo del perímetro del círculo.
Etiqueta de menú añadida
Para agregar la etiqueta del menú, necesitaremos agregar otro módulo de texto además de los cinco módulos de texto que ya tenemos. Continúe y agregue un nuevo módulo de texto arriba del enlace 1.
A continuación, actualice el contenido del cuerpo con lo siguiente:
Menu
Luego, para acelerar el diseño, copie los estilos del módulo de texto para el enlace 3 y pegue estos estilos de módulo en el nuevo módulo de texto.
Luego, actualice lo siguiente:
- Altura de la línea de texto: 300 px (escritorio), 20 px (tableta y teléfono)
- Altura: restaurar la configuración predeterminada (automático)
- Rotación de transformación (eje Z): 180 grados (escritorio), 0 grados (tableta y teléfono)
- Transformar Origen: 50% (centro derecha)
Una vez hecho esto, debemos darle al módulo Texto de etiqueta de menú una posición absoluta. Para hacer esto, agregue el siguiente CSS personalizado al elemento principal:
position: absolute!important;
Ahora descubre el resultado. Debería ver que el elemento del menú está al revés a la derecha de la rueda.
Se agregó un efecto de desplazamiento giratorio a la línea/rueda
Para agregar el efecto de desplazamiento giratorio a la fila, actualice la configuración de la fila de la siguiente manera:
- Rotación de transformación (eje Z): 180 grados (escritorio), 0 grados (desplazamiento), 0 grados (tableta y teléfono)
A continuación, actualice la configuración de transición de la siguiente manera:
- Duración de la transición: 450ms
- Transición de la curva de velocidad: Ease-in-Out
Ahora observe cómo gira la rueda cuando se coloca sobre ella.
Crear un diseño de dos columnas para la sección
Actualmente, 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 líneas 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 todo quede bien.
Abra la configuración de la sección y agregue el siguiente css personalizado al elemento principal:
display:flex;
Actualizar espaciado de línea 1
A continuación, actualice el tamaño y el espaciado de la línea 1 de la siguiente manera:
- Ancho: 40% (Escritorio)
- Margen (Escritorio): 5% restante
Resultado final
Ahora veamos el resultado final.
¡¡¡Descarga DIVI ahora!!!
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 muestren al pasar el mouse por encima.
Para hacer esto, continúe y duplique toda la sección que contiene el dibujo que acabamos de crear.
En la sección duplicada, actualice los parámetros en la línea 1 de la siguiente manera:
- Ancho: 70% (escritorio)
A continuación, actualice los parámetros en la línea 2 para sacar la rueda 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 línea.
Luego configure la visibilidad de la sección como oculta de la siguiente manera:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Aquí está el resultado final.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Una rueda giratoria es uno de esos elegantes elementos de diseño que pueden enganchar el visitantes con un efecto de desplazamiento sutil y único. Y es bastante sorprendente la facilidad con la que se puede hacer este diseño con la configuración de diseño integrada de Divi.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
