homefinance blog
Siempre es divertido ser creativo con las opciones de transformación de Div. Estos le permiten crear algunos modelos increíbles “fuera de la caja”. Y en este tutorial, transformaremos algunas blusas de la Divica en un hermoso menú circular segmentado que se extiende y colapsa en el clic. El truco para crear áreas segmentadas (como un diagrama circular) es usar la transformación inclinada de una manera bastante única. La inspiración para esta idea vino de este tutorial y debo decir que fue extremadamente divertido construir con Div. Vamos a empezar. Tirar con el ojo es un pico en el menú circular segmentado que construiremos en este tutorial.
Descargue la división del DIV del menú circular segmentado de forma gratuita para poner su mano en el diseño del menú en este tutorial, primero tendrá que descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el creador de Divi Plugin si no usa el tema Div).
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creación de un menú circular segmentado utilizando Div Div Blurbs Este diseño utilizará una combinación de configuraciones Divi incorporadas y código externo. Utilizaremos el Visual Builder para crear la mayor parte del diseño de nuestro menú. Luego implementaremos el modo de visualización de la estructura alámbrica para alcanzar la configuración difícil de alcanzar, una vez que los elementos estén absolutamente posicionados. Comenzaremos con la creación del menú circular que consiste en varias borrones seguidas. Luego diseñaremos una combinación adicional en una sección separada para servir como un botón de menú superpuesto. Creando la fila para los elementos de menú en la sección predeterminada habitual, agregue una fila con una columna.
Fila de estilo antes de agregar un módulo, estilizando el giro para obtener la forma circular y el color de fondo. Abra la configuración de la fila y actualice lo siguiente:
Color de fondo: # 8857F2
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 30em
Altura: 30em
Forro: 0 px arriba, 0 px abajo
Luego agregue las esquinas redondeadas y la sombra de la caja. Esquinas redondeadas: 50% de sombra de caja: vea la captura de captura de pantalla de ScreenVo Regrese para agregar algunas personalizaciones seguidas, pero por ahora podemos comenzar a agregar nuestras borrones. La creación de borrones para el menú Agregue una nueva combinación a su vez con una columna dentro de la fila circular.
PLABLE DEL ESTILO # 1 Actualice el contenido de la primera combinación que incluye un título e ícono.
Título: Enlace
Usa el icono: si
Icono: ver captura de pantalla
Después de eso, actualice la configuración de diseño de la siguiente manera:
Color de fondo: # 773EF2
El color del fondo (flotadores): # 222222
Icono de color: #ffffff
Fuente del icono del tamaño de la fuente: 40 PX (escritorio), 30 px (tableta)
Alineación de texto: Centro
Luego actualice el estilo de texto del título de la siguiente manera:
Título de la fuente: Archivo estrecho
Título del estilo de fuente: TT
Color de texto del título: #ffffff
Título Tamaño del texto: 14 PX (escritorio), 12 PX (tableta)
Luego necesitamos colocar la propaganda utilizando algunos CSS personalizados. Vaya a la pestaña avanzada y agregue los siguientes CSS personalizados al elemento principal: Posición: ¡Absoluto! Importante;
Izquierda: 50%;
Arriba: 50%;
Ahora vuelva a la pestaña de diseño y actualice el tamaño y el espacio de la propaganda de la siguiente manera:
Ancho: 15em
Altura: 15em
Marja: -15em izquierda
Coloca la esquina inferior derecha de la propaganda directamente en el centro del círculo.
Creando el segmento utilizando las opciones de transformación para transformar la propaganda en un segmento de un círculo, distorsionaremos las ruedas de la propaganda. Para esto, actualice las siguientes opciones de transformación:
Gire el sesgo x eje: 60 grados
Transformación del origen: 100% 100% (derecha a la derecha)
Debido a que la esquina inferior derecha de nuestra propaganda está directamente en el centro del círculo, queremos que el origen de la transformación se ajuste a la parte inferior derecha. Esto asegurará que la punta de la propaganda inclinada esté en el centro del círculo, haciendo el segmento. Entrega del contenido de la propaganda, todo lo que queremos distorsionar es la forma de la propaganda para crear la forma del segmento, no el Contenido del interior (por ejemplo, el icono y el texto). Pero, dado que esto no es posible, todo lo que tenemos que hacer es agregar una propiedad para transformar el contenido de la propaganda que invierte el efecto de inclinación para que parezca normal. Para hacer esto, vaya a la pestaña Avanzada y agregue el siguiente CSS personalizado:
Contenido de propaganda CSS: Transform: skew (-60deg) rotado (-75deg);
Posición: Absoluto;
Altura: 27em;
Ancho: 27em;
Abajo: -13.5em;
Derecha: -13.5em;
Luego, reduzca el borde entre el icono y el texto del título agregando el siguiente CSS para la imagen de la propaganda: imagen de margen CSS de la imagen de blurbs: 15px;
Y ahora, debido a que el espacio de contenido de la propaganda se extiende más allá de la propaganda (incluso si no puedes verlo), debemos ocultar el desbordamiento de la siguiente manera:
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Si no agregamos esto, tendremos espacio de vuelo no deseado.
Creando las borrachas del resto para crear el resto de las borrachas, implementar el modo de visualización de estructura alámbrica y duplicar su propaganda existente 5 veces para que tenga un total de 6 borrones idénticos.
Gire la propaganda # 2 y luego abra la configuración de la propaganda # 2 y gire el módulo de la siguiente manera:
Rotar el eje de transformación Z: 30 grados
Girará la propaganda # 2 en sentido horario desde el punto central del círculo.
Luego podemos continuar girando el resto de las borrones en 30 grados para crear un semi -semicírculo. Gire la propaganda # 3 Abra la configuración de la propaganda # 3 y actualice lo siguiente: Rotar la transformación Z: 60 grados
Gire la propaganda # 4 Abra la configuración de la propaganda # 4 y actualice lo siguiente:
Rotar el eje de transformación Z: 90 grados
Gire la propaganda # 5 Abra la configuración de la propaganda # 5 y actualice lo siguiente:
Rotar el eje de transformación Z: 120 grados
Gire la propaganda # 6 Abra la configuración de la propaganda # 6 y actualice lo siguiente:
Rotar el eje de transformación Z: 150 grados
Aquí está el resultado hasta ahora.
Creando el botón Menú Para crear el botón Menú, reduciremos el tamaño de una sección completa y luego usaremos un icono de propaganda para el diseño del botón. Para hacer esto, primero agregue una nueva sección regular en la sección actual.
Luego agregue una fila con una columna a la sección.
Creando el icono de la propaganda para el botón y luego agregue un módulo de propaganda en una fila.
Elimine el título predeterminado y el contenido del cuerpo y use un icono de la siguiente manera:
Usa el icono: si
Icono: símbolo más (ver captura de pantalla)
Continúe actualizando la configuración de la siguiente manera:
Icono de color: # 222222
Use el tamaño de fuente de iconos: sí
Icono de tamaño de fuente: 50 PX
Animación de imagen / icono: sin animación
Luego agregue el siguiente CSS personalizado al elemento principal para deshacerse del margen predeterminado bajo el icono. Elemento principal CSS Margen-Bottom: 0px;
El revestimiento de las filas luego, elimine el relleno de línea predeterminado.
Forro: 0 px arriba, 0 px abajo
Sección de configuración Para finalizar el botón, modelaremos nuestra sección en un círculo. Abra la configuración de la sección y actualice lo siguiente: Ancho: 100 PX
Altura: 100 PX
Forro: 0 px arriba, 0 px abajo
Esquinas redondeadas: 50%
Box Shadow: Ver captura de pantalla
Entonces 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 como se soluciona en la parte inferior de la ventana. Posición: ¡fijo! IMPORTANTE;
Abajo: -50px;
Izquierda: 50%;
Margen -left: -50px;
También necesitamos agregar una clase CSS que pueda dirigirse con JQuey. Agregue lo siguiente:
Clase CSS: transform_target
Luego actualice el índice z para que el botón permanezca por encima del resto del contenido en la página.
IND ÍNDICE: 12
Posicionando la fila de menú circular ahora, cuando el botón de menú está en posición, debemos colocar la fila que contiene el menú circular segmentado para que esté fijo y enfocado 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 la fila para la fila que contiene el menú Blurbs y agregue los siguientes CSS personalizados: Posición principal de CSS: ¡fijo! Importante;
Abajo: -10em;
Izquierda: 50%;
Margen -left: -15em;
margen -bottom: -5em;
Actualizar el índice Z de la siguiente manera:
IND ÍNDICE: 11
Luego agregue la siguiente clase CSS.
Clase CSS: Are-Transform
Finalmente, debemos reducir completamente (o reducir) el menú circular utilizando la escala de transformación. Esto nos permitirá activar y desactivar el efecto con JQuey, que expandirá y restringirá el menú para hacer clic. Actualizar lo siguiente:
Escala de transformación: 1%
Con nuestro menú circular y el botón de menú segmentado, queda por agregar CSS y JQUEY personalizados para completar la funcionalidad del botón. Agregar CSSS externo a la configuración de la página Abra la configuración de la página en el menú inferior del Visual Builder y agregue los siguientes CSS personalizados en la pestaña Avanzada: .has-Transform, .Transform_Target .et-Pb-icon, .Togle-Transformform -Nimation {Transición: todos los 400 ms de facilidad;
}
.Has-Transform, .Togle-Transform-Animation {
Tamaño de fuente: 14px;
}
.Togle-Transform-Animation {
Transformar: Ninguno! Importante;
}
.Transform_Target {
Cursor: puntero;
}
.Togle-active-tartarg .et_pb_blurb .et-pb-icon {
Transformación: rotatez (45deg);
}
@Media All y (Max-Width: 980px) {
.Has-Transform {
-Webkit-Mask-Image: -Webkit-divirient-gradiente (blanco, negro);
}
.Has-Transform, .Togle-Transform-Animation {
Tamaño de fuente: 10px;
}
}
Agregando jQuery con un módulo de código luego, implementa el modo de vista de estructura de alambre y agregue un módulo de código en el comando del botón de menú.
Luego agregue el siguiente código al modo.
(función ($) {
$ (documento) .Ready (function () {
$ (‘. Transform_target’). Click (function () {
$ (this) .ToglecLass (‘Togle-Active-Tare’);
$ (‘. HA-TRANSFORM’). TOGGLECASS (‘Togle-Transform-Animation’);
});
});
}) (JQuery);
Resultado final Ahora veamos el resultado final en una página en vivo.
El menú funcionará bien con su página actual o cualquiera de nuestros aspectos prefabricados que puede agregar haciendo clic en el icono más en el menú de configuración.
Esto es lo que parece sobre la página de la página de destino de nuestro psicólogo.
Y aquí está el móvil.
Ajuste del tamaño del menú circular El menú circular segmentado se construye con unidades de longitud EM, que son relativas al tamaño de la fuente de los padres. Esto facilita la ampliación y la disminución del tamaño del menú. Para cambiar el tamaño de la fuente, simplemente cambie la propiedad del tamaño de la fuente para la clase HAS-Transforrm que se dirige a la fila CSS personalizada que agregué a la configuración de la página. Div, volviéndose creativo con las opciones de transformación de la Divica. También utilicé algunos CSS personalizados para cosas como el posicionamiento fijo y “desactivando” el contenido de la propaganda para los elementos del menú. JQuey nos permite activar y deshabilitar la propiedad de la escala de transformación para crear el efecto de extensión y colapso del menú cuando hacemos clic en el botón Menú. En general, creo que encontrarás mucha inspiración en esta publicación. Siéntase libre de expandir este concepto para crear más modelos. Por ejemplo, puede continuar agregando borrones y girarlas en 30 grados para crear un círculo completo con enlaces de menú segmentados.
¡O incluso podría crear un diagrama circular interactivo! Aquí hay un menú con iconos circulares que también te puede gustar. Espero tener noticias suyas en los comentarios. ¡Suerte!
