Decorar su página con formas de transformación al pasar el mouse con Divi

Crear un diseño interactivo es algo que ayuda inmediatamente a mejorar la apariencia de cualquier sitio web. Con las opciones integradas de Divi, puede tomar muchos turnos y crear efectos que son verdaderamente únicos para su sitio web.

En esta publicación, le mostraremos cómo decorar su página con formas transformadoras al pasar el mouse. El resultado que obtendremos se centra en la experiencia de escritorio, pero también mantiene un diseño ordenado y fácil de usar en tamaños de pantalla más pequeños.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los dos ejemplos que recrearemos desde cero.

Ejemplo 1

Ejemplo # 2

Descargar las superposiciones de imágenes con forma

Para poner sus manos sobre las superposiciones de imágenes con formas que se utilizan a lo largo de este tutorial, deberá descargarlas usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a crear!

Agregar nueva sección

Color de fondo

Empiece creando una nueva página o abriendo una existente. Agregue una sección regular, abra la configuración de la sección y agregue un color de fondo completamente negro.

• Color de fondo: # 000000

Desbordamiento

Para cortar la superposición de la imagen con forma más adelante en este tutorial, nos aseguraremos de que nada supere el contenedor de la sección agregando una sola línea de código CSS al elemento principal de la sección.

overflow: hidden;

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Agregar módulo de imagen a la fila

Subir superposición de imagen con forma

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un módulo de imagen. Cargue la primera superposición de imagen con forma que puede encontrar en la carpeta que ha descargado. Puede encontrar superposiciones de imágenes con más formas yendo a esta publicación, descargando los archivos, abriendo el archivo de Illustrator y personalizándolos según sus necesidades. Sin embargo, si solo desea recrear los ejemplos que se compartieron en la vista previa de esta publicación, la carpeta que descargó al principio de esta publicación será suficiente.

Color de fondo predeterminado

Vaya a la configuración de fondo del Módulo de imagen y agregue el siguiente color de fondo predeterminado:

• Color de fondo: # 6a00ff

Colocar el cursor sobre el color de fondo

Cambie el color de fondo al pasar el mouse usando el siguiente código de color:

• Color de fondo: # ffa216

Fondo degradado

Continúe agregando un fondo degradado al Módulo de imagen también.

• Color 1: # ff2841
• Color 2: rgba (255,255,255,0)
• Dirección del gradiente: 168 grados
• Posición final: 68%

Dimensionamiento

Vaya a la pestaña de diseño y habilite la opción 'Forzar ancho completo'.

• Forzar ancho completo: Sí

Espaciado

También estamos ocultando una parte de la superposición de la imagen con forma agregando un margen superior negativo a la configuración de espaciado. Notarás que el módulo no superará el contenedor de la sección gracias a esa línea de código CSS que agregamos a la sección al comienzo del tutorial.

• Margen superior: -22vw (escritorio y tableta), 0vw (teléfono)

Transformar Girar por defecto

¡Ahora podemos empezar a transformar el módulo! Agregue la siguiente configuración de rotación de transformación predeterminada al módulo de imagen:

• Centro: 359 grados

Hover Transformar Girar

Y cambie estos valores al pasar el mouse para crear una forma transformadora.

• Izquierda: 250 grados
• Centro: 320 grados

ID de CSS

Al pasar el mouse sobre el Módulo de imagen, la superposición de la imagen con forma se superpondrá a todos los demás módulos que están encima de ella. Para evitar eso, necesitaremos modificar el índice z del módulo al pasar el mouse más adelante en la publicación. Para lograrlo, deberá agregar una clase CSS personalizada al Módulo de imagen.

Transiciones

Por último, pero no menos importante, estamos creando una transición suave aumentando la duración de la transición en la pestaña avanzada.

• Duración de la transición: 950 ms

Agregar el módulo de texto n. ° 1 a la fila

Agregar contenido H2

El siguiente módulo que necesitamos es un módulo de texto. Agregue un poco de contenido H2 de su elección.

Configuración de texto H2

Luego, vaya a la pestaña de diseño y modifique la configuración del texto H2.

• Fuente del encabezado 2: Didact Gothic
• Peso de fuente del encabezado 2: Negrita
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: #ffffff
• Encabezado 2 Tamaño del texto: 7vw
• Altura de la línea del rumbo 2: 0.9em

Espaciado

Cree una superposición entre este módulo y el Módulo de imagen utilizando algunos valores de margen personalizados.

• Margen superior: -68vw
• Margen inferior: 8vw
• Margen izquierdo: 29vw
• Margen derecho: 29vw

Agregar el módulo de texto n. ° 2 a la fila

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior e ingrese el contenido de un párrafo de su elección.

Configuración de texto

Luego, vaya a la pestaña de diseño y modifique la configuración del texto.

• Fuente de texto: Open Sans
• Color del texto: #ffffff
• Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Altura de la línea de texto: 1.8em
• Orientación del texto: centro

Espaciado

Agregue también algunos valores de margen personalizados.

• Margen inferior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Margen izquierdo: 30vw (escritorio), 10vw (tableta y teléfono)
• Margen derecho: 30vw (escritorio), 10vw (tableta y teléfono)

Agregar módulo divisor a la fila

Visibilidad

El siguiente y último módulo que necesitamos es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

• Color: #ffffff

Dimensionamiento

Modifique también los valores de tamaño.

• Peso del divisor: 7px
• Ancho: 15%
• Alineación del módulo: centro

Espaciado

Y agregue un poco de acolchado inferior personalizado.

• Margen inferior: 5vw

Clonar toda la sección

¡Pasemos al segundo ejemplo! Clona la sección que acabas de completar.

Cambiar módulo de imagen

Subir nueva superposición de imagen con forma

Hay algunos cambios que debemos hacer, comenzando con la superposición de la imagen con forma. Continúe y cargue la segunda superposición de imágenes en forma que puede encontrar en la carpeta que ha descargado al comienzo de esta publicación.

Cambiar el color de fondo predeterminado

Luego, vaya a la configuración de fondo del Módulo de imagen y cambie el color de fondo predeterminado.

• Color de fondo: # 2d007c

Cambiar el color de fondo de desplazamiento

Cambie también el color de fondo de desplazamiento.

• Color de fondo: # 008089

Cambiar fondo degradado

Junto con el fondo degradado.

• Color 1: # 0c0c0c
• Color 2: rgba (255,255,255,0)
• Dirección del gradiente: 168 grados
• Posición final: 68%

Cambiar la configuración de rotación de transformación predeterminada

También estamos cambiando el efecto de transformación. Vaya a la configuración de transformación y cambie los valores de rotación de transformación predeterminados.

• Izquierda: 270 grados
• Centro: 359 grados

Cambiar la configuración de rotación de transformación de desplazamiento

Modifique esos mismos valores al pasar el mouse.

• Izquierda: 192 grados
• Centro: 280deg
• Derecha: 15 grados

Agregar código personalizado a la página

Abrir configuración de página

Ahora, la última parte de esta publicación se asegura de que la forma transformadora permanezca por debajo de todos los demás módulos cuando se desplaza. Abra la configuración de la página.

Agregar código CSS

Luego vaya a la pestaña avanzada y agregue el siguiente código CSS.

.hover-state:hover {
z-index: -99; }

Estamos usando la clase CSS que hemos asignado a las secciones a lo largo del tutorial.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado.

Ejemplo 1

Ejemplo # 2

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con las opciones de transformación de Divi. Más específicamente, hemos utilizado módulos de imagen con superposiciones de imágenes con formas para crear una forma de fondo transformadora. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!