Las opciones de transformación integradas de Divi han demostrado ser una herramienta de diseño extremadamente útil, que le permite cambiar el tamaño, rotar, sesgar o colocar cualquier elemento en una página con facilidad. E incluso puede optar por convertir los elementos en estado de desplazamiento para obtener impresionantes efectos de desplazamiento. Entonces, hoy le mostraremos cómo implementar estas animaciones con un solo clic.
Este método requiere el uso de jQuery. Lo bueno de esta técnica es que puede usar los parámetros de diseño integrados de Divi para aplicar estilo a las propiedades de transformación, luego habilite (o deshabilite) esas propiedades de transformación con un clic del mouse. Esto abrirá un montón de posibilidades únicas para revelar contenido oculto moviendo elementos al hacer clic en lugar de pasar el mouse. Y también ayuda a reducir la necesidad de saber mucho de CSS.
Vamos a empezar.
Lo que necesitas para empezar
Para este tutorial, todo lo que necesitas es Divi. Para comenzar, vaya a su panel de WordPress. Crea una nueva página, dale un título a tu página y continúa diseñando en el constructor Divi en primer plano. Seleccione la opción "Construir desde cero". ¡Ahora estás listo para ir!
La idea básica explicada
Antes de entrar en demasiados detalles en este tutorial, explicaré cómo funciona esta técnica en pocas palabras.
Cada vez que personaliza un elemento (sección, línea o módulo) en Divi, agrega CSS personalizado a este elemento en segundo plano. Por ejemplo, usando la configuración incorporada de Divi, puede agregar una propiedad de rotación de transformación a un módulo de propaganda para que gire el módulo a lo largo del eje Z en 20 grados.
Pero detrás de escena, crea un CSS personalizado que se agrega a este módulo de texto y se ve así:
.et_pb_text_0 {transform: rotateZ (20deg); }
Suficientemente simple. Y digamos que desea agregar la misma opción de transformación de desplazamiento. Solo necesita aplicar la propiedad de transformación para el estado de desplazamiento en la configuración de Divi Builder.
Y el código se verá más o menos así detrás de escena:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Sin embargo, si desea implementar la propiedad de transformación al hacer clic, las cosas tendrán que funcionar de manera un poco diferente. Deberá ingresar algún código javascript para activar un evento de clic en el elemento (o módulo de texto).
Con nuestro ejemplo actual, nuestro objetivo principal es básicamente activar y desactivar la propiedad de transformación "transform: rotateZ (20deg)" al hacer clic. Una forma sencilla de hacer esto es crear una clase CSS personalizada con la propiedad "transformer: none!" Importante ”en la configuración de la página (u hoja de estilo externa). Se vería algo así.
.toggle-transform-animation {transform: none! important; }
Con ese CSS en su lugar. Podemos agregar la clase CSS "toggle-transform-animation" al elemento del módulo blurb que tiene nuestra propiedad transform.
Esto deshabilitará (anulará) la propiedad de transformación y evitará que se active inicialmente aunque ya se le haya agregado el estilo de la propiedad de transformación.
Ahora todo lo que tiene que hacer es activar (agregar y eliminar) esta clase CSS personalizada cuando hace clic en el elemento. Entonces, cada vez que hagamos clic en el elemento, la clase se eliminará y las propiedades de transformación (las que agregó con Divi) se implementarán.
A continuación, se muestra un ejemplo sencillo de cómo hacer esto. Primero, agregue otra clase CSS al módulo de propaganda llamado "transform_target".
A continuación, vaya a Divi > Opciones de tema > Integración y agregue el siguiente script jQuery al encabezado de tu blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Es todo ! Ahora, cada vez que haga clic en el módulo de presentación, la propiedad de transformación que agregó a la presentación en Divi se habilitará o deshabilitará.
Creemos ahora un ejemplo para que pueda ver cómo esto podría ser útil para sus propios proyectos.
Cómo cambiar las propiedades de transformación en Haga clic para mostrar contenido en Divi
Para este ejemplo, nos quedaremos con un ejemplo publicitario simple utilizado anteriormente. A continuación, agregaremos propaganda adicional detrás de esta para que cada vez que haga clic en la propaganda superior, se mueva para revelar el contenido propaganda adicional detrás del documento.
Creación de módulos Blurb delante y detrás
Luego agregue un módulo de presentación a la columna 1.
Actualizar el contenido propaganda para incluir solo un título (elimine el contenido del cuerpo predeterminado), luego agregue un ícono de propaganda.
Luego actualice los parámetros de diseño de la siguiente manera:
Color de fondo: #4c5866
Color del icono: #ffffff
Orientación del texto: centro.
Color del texto
: Margen personalizado ligero: 0px en la parte inferior
Relleno personalizado: 15% en la parte superior, 15% en la parte inferior, 10% a la izquierda, 10% a la derecha
Volveremos a este módulo más tarde, pero por ahora, necesitamos crear nuestro segundo módulo de Blurb que servirá como un módulo de "retorno" con contenido adicional.
Para hacer esto, duplique el módulo de presentación que acaba de crear.
Luego, en el segundo módulo, elimine el icono de presentación (y la imagen predeterminada) y vuelva a agregar el contenido del cuerpo al módulo. Luego actualice los parámetros de diseño de la siguiente manera:
Color de fondo: rgba (76,88,102,0.3)
Color de texto: negro
Acolchado personalizado: 20% top
Coloque el módulo antes del resumen
Ahora que nuestros dos anuncios publicitarios tienen estilo, debemos volver a nuestra propaganda frontal (superior) y colocarla sobre la propaganda posterior (inferior). Para ello, le daremos una posición absoluta con una altura del 100% y un ancho del 100%.
Primero, abra la configuración del módulo de presentación superior / frontal y actualice lo siguiente:
altura: 100%;
ancho: 100%;
Luego agregue el siguiente código CSS personalizado al elemento principal:
posición: absoluta! importante; transición: todos los .5s;
Luego actualice el índice z de la siguiente manera:
Índice Z: 2000
La posición absoluta, combinada con el 100% de altura y ancho y el índice z, asegura que el módulo de propaganda permanezca encima del módulo de propaganda detrás de él. La propiedad de transición es, de hecho, la duración de la transición de las opciones de transformación que implementaremos en el siguiente clic. Y el "cursor: puntero" es para cambiar el cursor de modo que el usuario vea el elemento en el que se puede hacer clic.
Agregar opciones de transformación y clases personalizadas a la propaganda frontal
Ahora es el momento de agregar nuestras propiedades de transformación a la propaganda frontal. Luego agregaremos las clases CSS personalizadas necesarias para que nuestro jQuery cambie estas propiedades al hacer clic.
Debajo de los parámetros de diseño de difusión frontal, agregue las siguientes propiedades de transformación:
Escala de transformación X e y: 20%
Transformar el origen: centro superior
Recuerde que el diseño de transformación que ve en este punto será el que se active al hacer clic. Simplemente aprovechamos el constructor Divi para obtener el diseño deseado. En este caso, la propaganda frontal se contrae y se centra en la parte superior como un icono en el que se puede hacer clic.
Una vez que haya terminado, agregue las dos clases CSS necesarias para apuntar a la propaganda frontal con jQuery de la siguiente manera:
Clase CSS: toggle-transform-animation transform_target
(asegúrese de separar cada nombre de clase con un espacio)
Luego agregue el siguiente fragmento de código CSS personalizado que se usará para habilitar y deshabilitar las propiedades de transformación con jQuery.
.toggle-transform-animation {transform: none! important; }
Notará que las propiedades de transformación de difusión agregadas anteriormente se han deshabilitado porque esta clase se le ha aplicado.
Ahora vaya a Divi> Opciones de tema> Integración y agregue el siguiente script jQuery al encabezado del blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Veamos el resultado final.
Puede utilizar este ejemplo para crear diseños aún más impresionantes. No dudes en compartir tu opinión en la sección de comentarios.
