Siempre es divertido ser creativo con Divi y sus opciones de transformación. Le permiten crear algunos diseños sorprendentes «fuera de la caja». Y en este tutorial, vamos a transformar algunos anuncios publicitarios de Divi en un hermoso menú circular segmentado que se expande y contrae al hacer clic. El truco para crear las áreas segmentadas (como un gráfico circular) es usar el sesgo de transformación de una manera bastante única. La inspiración para esta idea provino de este tutorial y debo decir que fue muy divertido construirlo con Divi.
Empecemos.
Aquí hay un pico en el menú circular segmentado que construiremos en este tutorial.
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 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?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Este diseño utilizará una combinación de configuraciones Divi integradas y código externo. Utilizaremos el constructor 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 estén posicionados de manera absoluta. Comenzaremos con la creación del menú circular que consta de múltiples anuncios publicitarios seguidos. Luego, diseñaremos una propaganda adicional en una sección separada para que sirva como botón de menú superpuesto.
En la sección regular predeterminada, agregue una fila de una columna.
Estilo de la fila
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ón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 30em
- Altura: 30em
- Relleno: 0px arriba, 0px abajo
Luego agregue las esquinas redondeadas y la sombra del cuadro.
Esquinas redondeadas: 50%
Sombra de cuadro: ver captura de pantalla
Volveremos para agregar algunas personalizaciones más a la fila, pero por ahora podemos comenzar a agregar nuestras notas publicitarias.
Agregue una nueva publicidad a la fila de una columna dentro de la fila circular.
Estilo de publicidad #1
Actualice el contenido de la primera propaganda para incluir un título y un icono.
- Título: enlace
- Icono de uso: 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 (pasar el cursor): #222222
- Color del icono: #ffffff
- Tamaño de fuente del icono: 40 px (escritorio), 30 px (tableta)
- Alineación de texto: centro
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)
A continuación, debemos posicionar la publicidad usando un CSS personalizado. Vaya a la pestaña avanzada y agregue el siguiente CSS personalizado al elemento principal:
|
01
02
03
|
position:absolute !important;left: 50%;top: 50%; |
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 publicidad directamente en el centro del círculo.
Crear el segmento usando opciones de transformación
Para convertir la propaganda en un segmento de un círculo, vamos a sesgar y rotar la propaganda. Para hacer esto, actualice las siguientes opciones de transformación :
- Transformar eje X sesgado: 60 grados
- Transformar origen: 100 % 100 % (abajo a la derecha)
Dado que la esquina inferior derecha de nuestra publicidad 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 propaganda sesgada esté en el centro del círculo, formando el segmento.
Desviar 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 interior (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 de la publicidad que revierta el efecto de sesgo para que parezca normal. Para hacer esto, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado:
CSS de contenido de Blurb:
|
01
02
03
04
05
06
|
transform: skew(-60deg) rotate(-75deg);position: absolute;height: 27em;width: 27em;bottom: -13.5em;right: -13.5em; |
Luego reduzca el margen entre el ícono y el texto del título agregando el siguiente CSS para la imagen de Blurb:
Imagen de Blurb CSS
|
01
|
margin-bottom: 15px; |
Y ahora, debido a que el espacio de contenido de la propaganda se extiende más allá de la propaganda (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.
Creando el resto de los Blurbs
Para crear el resto de los anuncios publicitarios, implemente el modo de vista de estructura alámbrica y duplique el anuncio existente 5 veces para que tenga un total de 6 anuncios publicitarios idénticos.
Rotar Blurb #2
A continuación, abra la configuración de la publicidad n.º 2 y gire el módulo de la siguiente manera:
- Transformar Rotar eje Z: 30 grados
Esto rotará la propaganda #2 en el sentido de las agujas del reloj desde el punto central del círculo.
Luego, podemos continuar girando el resto de los anuncios publicitarios en incrementos de 30 grados para crear un semicírculo de segmentos.
Rotar Blurb #3
Abra la configuración de la publicidad n.º 3 y actualice lo siguiente:
- Transformar Rotar eje Z: 60 grados
Rotar Blurb #4
Abra la configuración de la publicidad n.º 4 y actualice lo siguiente:
- Transformar Rotar eje Z: 90 grados
Rotar Blurb #5
Abra la configuración de la publicidad n.º 5 y actualice lo siguiente:
- Transformar Rotar eje Z: 120 grados
Rotar Blurb #6
Abra la configuración de la publicidad n.º 6 y actualice lo siguiente:
- Transformar Rotar eje Z: 150 grados
Aquí está el resultado hasta ahora.
Para crear el botón de menú, reduciremos el tamaño de una sección completa y luego usaremos un ícono 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.
Luego agregue una fila de una columna a la sección.
Creación del icono de Blurb para el botón
Luego agregue un módulo de publicidad a la fila.
Elimine el título predeterminado y el contenido del cuerpo y use un icono de la siguiente manera:
- Icono de uso: SÍ
- Icono: símbolo más (ver captura de pantalla)
Continúe actualizando la configuración de la siguiente manera:
- Color del icono: #222222
- Usar tamaño de fuente del 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 deshacerse del margen predeterminado debajo del ícono.
Elemento principal CSS
|
01
|
margin-bottom: 0px; |
Relleno de fila
A continuación, elimine el relleno predeterminado de la fila.
- Relleno: 0px arriba, 0px abajo
Ajustes de sección
Para terminar el botón, vamos a darle forma de círculo a nuestra sección.
Abra la configuración de la sección y actualice lo siguiente:
- Ancho: 100px
- Altura: 100px
- Relleno: 0px arriba, 0px abajo
- Esquinas redondeadas: 50%
- Sombra de caja: ver captura de pantalla
Luego dale un fondo blanco.
- Color de fondo: #ffffff
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal para colocar el botón fijo en la parte inferior de la ventana.
|
01
02
03
04
|
position: fixed !important;bottom: -50px;left: 50%;margin-left: -50px; |
También necesitamos agregar una Clase CSS que pueda apuntar con nuestro jQuery. Agregue lo siguiente:
- Clase CSS: transform_target
Luego actualice el índice Z para que el botón permanezca sobre el resto del contenido de la página.
- Índice Z: 12
Ahora que el botón de menú está en su lugar, debemos colocar la fila que contiene nuestro menú circular segmentado para que también quede 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 fila para la fila que contiene los anuncios publicitarios del menú y agregue el siguiente CSS personalizado:
Elemento principal CSS
|
01
02
03
04
05
|
position: fixed !important;bottom: -10em;left: 50%;margin-left: -15em;margin-bottom: -5em; |
La actualización del índice z de la siguiente manera:
- Índice Z: 11
A continuación, agregue la siguiente clase CSS.
- Clase CSS: tiene transformación
Finalmente, necesitamos reducir (o reducir) completamente la escala del 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%
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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
|
.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; } } |
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 de la propaganda del botón de menú.
Luego agregue el siguiente código al módulo.
|
01
02
03
04
05
06
07
08
09
10
|
<script>(function($) { $(document).ready(function(){ $('.transform_target').click(function(){ $(this).toggleClass('toggle-active-target'); $('.has-transform').toggleClass('toggle-transform-animation'); }); });})( jQuery ); </script> |
Resultado final
Ahora veamos el resultado final en una página en vivo.
El menú funcionará bien con su página actual o con cualquiera de nuestros diseños prefabricados que puede agregar haciendo clic en el icono más del menú de configuración.
Así es como se ve en el diseño de nuestra página de destino de psicólogo.
Y aquí está en el móvil.
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-transformm que apunta a la fila en el CSS personalizado que agregamos a la configuración de la página.
Pensamientos finales
En este tutorial, cubrimos cómo crear un menú circular segmentado en Divi siendo creativos con las opciones de transformación de Divi. También usamos algunos CSS personalizados para cosas como el posicionamiento fijo y «desinclinar» el contenido de la propaganda 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 contracción 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, puede continuar agregando anuncios publicitarios y rotarlos en incrementos de 30 grados para crear un círculo completo con enlaces de menú segmentados.
¡O incluso podría crear un gráfico circular interactivo!
Aquí hay un menú de iconos circulares que también te puede gustar.
Espero escuchar de usted en los comentarios.
¡Salud!