Explorando cómo crear y animar formas CSS en Divi

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

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.

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en el Divi Builder .

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Explorando cómo crear formas CSS con animación en Divi

La estructura de filas y columnas

Primero, agregue una fila de columna de un tercio de dos tercios a la sección.

Antes de hacer cualquier otra cosa, abra la configuración de la fila y actualice lo siguiente:

• Ancho del canalón: 1
• Igualar alturas de columna: SÍ
• Ancho: 95%
• Ancho máximo: 900px

NOTA: Estos ajustes son cruciales para la configuración de nuestro diseño. Por ejemplo, la estructura de columna de un tercio y dos tercios combinada con una fila que tiene un ancho máximo de 900 px sin márgenes (ancho de medianil 1), nos permite saber que la columna de la izquierda tendrá exactamente 300 px de ancho. Además, si mantengo mi diseño dentro de esta columna de 300 px de ancho, también puedo estar seguro de que se verá bien en tabletas y dispositivos móviles.

Adición del espaciador del módulo divisor

A continuación, agregue un divisor para crear el espacio necesario para la columna que contendrá nuestras formas CSS.

En este punto, debe abrir el modal de vista de capas para administrar las capas/módulos en el futuro, que se pueden encontrar en el menú de configuración de Divi Builder.

Abra la configuración del divisor y actualice la altura del divisor de la siguiente manera:

• Mostrar divisor: NO
• Altura: 150px

Dado que nuestras Formas CSS se colocarán de forma absoluta, el espacio real del área de la columna se puede ajustar fácilmente ajustando la altura del divisor. Personalmente, encontré esto más fácil que tratar de manipular la altura o el espaciado de la columna. Además, le brinda la ventaja adicional de diseñar el divisor como un elemento (o forma) de diseño adicional. Por ahora, puede considerarlo como un lienzo para sus futuros diseños de CSS Shape.

Creando la primera forma CSS usando opciones de borde

Para crear nuestra forma CSS, vamos a utilizar un módulo divisor. Técnicamente, solo estamos usando los bordes que rodean el módulo, no el área del módulo. (Entonces, podría usar otros módulos, como módulos de texto o módulos de código también).

Para crear la forma CSS, duplique el módulo divisor ya creado anteriormente.

Luego, elimine la altura y el ancho del módulo divisor configurando cada uno en 0px de la siguiente manera:

•  Ancho: 0px
• Altura: 0px

Para la primera forma, vamos a crear un triángulo rectángulo que apunte hacia la parte superior derecha. Para hacer esto, actualice los estilos de borde divisor de la siguiente manera:

• Color del borde: rgba (245,44,143,0.5)
• Ancho del borde superior: 150 px
• Ancho del borde izquierdo: 150 px
• Color del borde izquierdo: transparente

Nota: Dar al color del borde una semitransparencia ayudará a revelar formas superpuestas para un elemento de diseño adicional.

También es una buena idea etiquetar este nuevo divisor como «forma 1» para una fácil identificación más adelante.

Debido a que vamos a agregar animación de desplazamiento a las formas adicionales que crearemos, es importante darle a esta forma (y a las formas adicionales en esta columna) una posición absoluta para que se apilen una encima de la otra, por lo tanto, tengan la mismo punto de partida para la animación.

En la pestaña avanzada, cambie la posición a absoluta y mantenga la ubicación de posición predeterminada establecida en la parte superior derecha:

• Posición: Absoluta
• Ubicación de la posición: arriba a la derecha (predeterminado)

NOTA: Es importante mantener la ubicación de la posición en la parte superior derecha porque cualquier otra ubicación que agregue una ubicación centrada (como la parte superior central o centrada) entrará en conflicto con las opciones de transformación que agregaremos a las Formas CSS más adelante.

¡Felicitaciones por crear un Triángulo CSS! Aunque esto no es tan impresionante en sí mismo, se pone mejor. Podemos duplicar este triángulo para crear todo tipo de diseños nuevos una vez que los movamos con animación.

Creación de la forma 2 con animación de desplazamiento

Para crear la siguiente forma (o triángulo en este caso), duplique el módulo divisor anterior (forma 1) para agregar un triángulo recto superior idéntico que se asiente directamente sobre la forma de triángulo anterior.

Luego etiquételo como «forma 2».

Abra la configuración para el divisor «forma 2» y agregue el siguiente efecto de transformación giratorio:

• Efectos de transformación de desplazamiento: Rotación
• Habilitar rotación: SÍ
• Rotación inicial: 0° (al 30%)
• Rotación media: 45° (al 45%)
• Rotación final: 90° (al 60%)

Creación de la forma 3 con animación de desplazamiento

Duplique el módulo divisor «forma 2» y etiquete el duplicado como «forma 3».

Luego actualice la configuración de rotación de transformación de la siguiente manera:

• Rotación media: 90°
• Rotación final: 180 °

Para crear la forma final (cuarta), duplique el módulo divisor de la forma 3 y etiquételo como «forma 4».

Luego actualice la configuración de rotación de transformación de la siguiente manera:

• Rotación media: 180°
• Rotación final: 270°

En este punto, debería ver una forma cuadrada creada por los triángulos superpuestos y ahora rotados.

Prueba de la animación de desplazamiento

Para probar la animación de desplazamiento de estas formas, agreguemos algunos márgenes temporales en la parte superior e inferior de la sección. Abra la configuración de la sección y actualice lo siguiente:

• Margen: 80vh arriba, 80vh abajo

Así es como debería verse a medida que se desplaza hacia arriba y hacia abajo en la página.

Antes de explorar nuevas formas de personalizar estas animaciones de formas, complementaremos nuestro diseño con un título simulado en la columna de la derecha. Siéntase libre de omitir este paso si desea continuar con los diseños de formas.

Agregar un título simulado a la columna derecha (opcional)

Para ayudarlo a tener una idea de cómo puede usar estos diseños de formas animadas en una página, pensé que sería una buena idea agregar un título simulado en la columna de la derecha. Este sería un gran ejemplo de cómo complementar los títulos de las secciones de su página con una animación de diseño impresionante utilizando formas CSS.

CSS personalizado de columna

Antes de agregar el título, podemos asegurarnos de que el texto esté centrado verticalmente dentro de la columna usando la propiedad display flex. Abra la configuración de la columna 2 y agregue el siguiente CSS personalizado al elemento principal:

Una vez que la columna CSS esté en su lugar, agregue un nuevo módulo de texto a la columna 2.

Luego abra la configuración de texto y actualice el contenido del cuerpo con un encabezado h2 de la siguiente manera:

En la pestaña de diseño, actualice lo siguiente:

• Título 2 Fuente: Poppins
• Encabezado 2 Alineación de texto: predeterminado (escritorio), centro (tableta y teléfono)
• Título 2 Tamaño del texto: 55 px (escritorio), 45 px (tableta), 35 px (teléfono)
• Ancho: 100%

Mientras estamos en eso, continúe y agregue el siguiente efecto de transformación de desplazamiento «movimiento horizontal» al texto de la siguiente manera:

• Efectos de transformación de desplazamiento: movimiento horizontal
• Habilitar movimiento horizontal: SÍ
• Compensación inicial: 2 (al 20 %)
• Compensación media: 1 (al 35 %)
• Compensación final: -0.6

Luego abra las pestañas receptivas y actualice el desplazamiento final de la siguiente manera:

• Compensación final (tableta y teléfono): 0

Exploración de animaciones de forma de triángulo derecho superior

Continuando donde lo dejamos antes de agregar nuestro texto de título, ahora podemos explorar las posibilidades de diseño/animación para la forma actual del Triángulo superior derecho.

Una manera fácil de hacer esto es usar la selección múltiple para seleccionar las cuatro formas CSS (construidas con módulos divisores).

Luego abra la configuración de una de las formas para que aparezca el modal de configuración del elemento que actualizará el diseño de los cuatro módulos a la vez para que pueda ver los resultados visualmente.

Luego seleccione la pestaña de diseño y abra la pestaña de origen de transformación. Coloque el modal de vista de capas y el modal de configuración de elementos a la izquierda para que pueda ver los cambios visualmente en Divi Builder.

Explorando las animaciones de diseño de formas CSS del triángulo ascendente

Ahora que tiene la configuración en su lugar, puede explorar la creación de nuevas formas y ver cómo se ven con las animaciones de desplazamiento actuales en su lugar.

Para el siguiente ejemplo, vamos a crear una forma CSS de triángulo ascendente (técnicamente, un triángulo isósceles).

Para hacer esto, asegúrese de seleccionar varias veces todas las formas y actualice los estilos de borde para cada una de la siguiente manera:

• Ancho del borde derecho: 100px
• Color del borde derecho: transparente
• Ancho del borde inferior: 100 px
• Color del borde inferior: rgba (245,44,143,0.5)
• Ancho del borde izquierdo: 100px
• Color del borde izquierdo: transparente

Actualice Transform Origin para explorar nuevos diseños de animación de pergamino

Ahora que tenemos una forma/triángulo ligeramente nuevo en su lugar, la animación de rotación resultante también será diferente. Para explorar las diferentes posibilidades de diseño de animación de desplazamiento, asegúrese de mantener las cuatro formas seleccionadas mediante selección múltiple y luego ajuste el origen de transformación para ver los resultados.

Explorando las animaciones de diseño de formas CSS de lágrima

A estas alturas, ya debería tener una idea de cómo funciona este proceso. Para este próximo diseño, vamos a crear una forma de lágrima que se puede hacer creando un triángulo inferior derecho con un radio de borde.

Para hacer esto, asegúrese de seleccionar varias veces todas las formas y actualice los estilos de borde para cada una de la siguiente manera:

• Esquinas redondeadas: 0px arriba a la derecha, 50% arriba a la derecha, 50% abajo a la derecha, 50% abajo a la izquierda
• Ancho del borde inferior: 150 px
• Color del borde inferior: rgba (245,44,143,0.5)
• Ancho del borde izquierdo: 150 px
• Color del borde izquierdo: transparente

Luego ajuste el valor de origen de transformación para explorar los diseños de animación de desplazamiento para la lágrima.

Explorando el sector (o rebanada de pizza) Animaciones de diseño de formas CSS

A estas alturas, ya debería tener una idea de cómo funciona este proceso. Para este próximo diseño, vamos a crear una forma de sector que se puede hacer creando un triángulo inferior derecho con un radio de borde.

Para hacer esto, asegúrese de seleccionar varias veces todas las formas y actualice los estilos de borde para cada una de la siguiente manera:

• Esquinas redondeadas: 0px arriba a la derecha, 0px arriba a la derecha, 50% abajo a la derecha, 50% abajo a la izquierda
• Ancho del borde derecho: 75px
• Color del borde derecho: transparente
• Ancho del borde inferior: 75px
• Color del borde inferior: rgba (245,44,143,0.5)
• Ancho del borde izquierdo: 75px
• Color del borde izquierdo: transparente

Luego ajuste el origen de transformación para explorar los diferentes diseños de animación de desplazamiento.

Explorando las animaciones de diseño de formas CSS trapezoidales

Para nuestro diseño de forma CSS final, vamos a crear una forma CSS trapezoidal que puede agregar algo de ancho adicional a un triángulo hacia arriba (o isósceles).

Para hacer esto, asegúrese de seleccionar varias veces todas las formas y actualice los estilos de borde para cada una de la siguiente manera:

• Esquinas redondeadas: 0px
• Ancho del borde derecho: 100px
• Color del borde derecho: transparente
• Ancho del borde inferior: 100 px
• Color del borde inferior: rgba (245,44,143,0.5)
• Ancho del borde izquierdo: 100px
• Color del borde izquierdo: transparente

Luego actualice el ancho de las formas/módulos de la siguiente manera:

• Ancho: 100px

Con la forma trapezoidal en su lugar, puede volver a usar actualizar el origen de transformación para cada uno para explorar los nuevos diseños de animación de desplazamiento.

Resultados finales

Echemos un vistazo final a algunos de mis diseños favoritos que son posibles con este tutorial.

Pensamientos finales

Explorar cómo crear y animar formas CSS en Divi puede ser una excelente manera de hacer fluir esos jugos creativos a medida que amplía su perspectiva del poder de las capacidades de diseño integradas de Divi. El truco es entender cómo usar los bordes para crear diferentes formas. Luego, puede agregar animación de desplazamiento a esas formas. Pero no se olvide del poder de transformar el origen, que cambia la forma en que esas animaciones posicionan cada forma. Esta es, por supuesto, la punta del iceberg cuando piensas en todas las diferentes formas y animaciones que puedes combinar para crear un sinfín de diseños creativos para tu sitio web.

Con suerte, esto le dará algunas ideas sobre cómo agregar la animación CSS Shape perfecta a su propio sitio.

Espero escuchar de usted en los comentarios.

¡Salud!