Agregar sombras transformadas a su copia con Divi

Con las nuevas opciones de transformación de Divi, puede crear un hermoso diseño web mientras ve todas las configuraciones de transformación en tiempo real. Y al combinar diferentes módulos entre sí, puede lograr algunos efectos únicos y sin fisuras que ayudarán a mejorar la apariencia de la sección en la que está trabajando. En esta publicación en particular, nos enfocaremos en crear sombras transformadas para su copia usando solo las opciones integradas de Divi. También podrá descargar el archivo JSON de ejemplo de forma gratuita.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de la sección Transformed Shadows Hero GRATIS

Para poner sus manos en el diseño de la sección de héroe de sombras transformadas gratis, primero deberá descargarlo 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!

Suscríbete a nuestro canal de Youtube

Comencemos a recrear la sección Hero

Agregar nueva sección

Espaciado

Lo primero que debe hacer es agregar una nueva sección regular a una página nueva o existente. Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Desbordamiento

Vaya a la pestaña avanzada y asegúrese de que los desbordamientos de la sección estén ocultos. Más adelante en esta publicación, usaremos algunas opciones de transformación y ocultar el desbordamiento asegurará que nada supere el contenedor de la sección.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

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 aplicando la siguiente configuración:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Continúe con la configuración de espaciado, elimine el relleno inferior predeterminado y agregue un espacio personalizado en el lado izquierdo y derecho de la fila.

• Acolchado inferior: 0px
• Acolchado izquierdo: 4vw
• Acolchado derecho: 4vw

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

Es hora de comenzar a agregar los diferentes módulos, comenzando con un módulo de texto. Ingrese la copia de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Playfair Display
• Alineación de texto: derecha
• Color del texto: #ffffff
• Tamaño del texto: 11vw
• Altura de la línea de texto: 1em

• Longitud vertical de la sombra del texto: 0.02em
• Intensidad del desenfoque de la sombra del texto: 0.16em
• Color de la sombra del texto: rgba (0,0,0,0.44)

Módulo de clonación de texto n. ° 1

Cambiar contenido

Una vez que haya completado el primer módulo de texto, puede clonarlo y cambiar la copia del duplicado.

Agregar nuevo módulo de texto encima del módulo de texto n. ° 1

Agregar contenido

Pasemos al siguiente módulo, que es otro módulo de texto. Esta vez, colocamos el módulo en la parte superior de la columna. En los próximos pasos, transformaremos este módulo de texto en la sombra de texto transformada del módulo que viene a continuación. Asegúrate de usar la misma copia.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Playfair Display
• Peso de la fuente del texto: negrita
• Alineación de texto: derecha
• Color del texto: rgba (94,150,187,0.28)
• Tamaño del texto: 11vw
• Espaciado de letras de texto: 4.5px
• Altura de la línea de texto: 1em

Transformar Traducir

¡Es hora de transformar el módulo para que se vea como la sombra de texto transformada del siguiente módulo! Vaya a la configuración de espaciado y modifique los valores de conversión de transformación.

• Derecha: 13.9vw
• Abajo: -2.1vw

Transformar Girar

Gire el módulo también.

• Centro: 291 grados

Transformar sesgo

Y aumente el valor de sesgo inferior.

• Inferior: 30 grados

Clonar el módulo de texto transformado y colocarlo encima del módulo de texto n. ° 2

Cambiar contenido

Una vez que haya terminado de crear el módulo de sombra de texto transformado, puede clonarlo y colocarlo encima del tercer módulo de texto en la columna. Asegúrese de cambiar la copia.

Cambiar la configuración de texto

Vaya a la pestaña de diseño y cambie el color del texto.

• Color del texto: # f3e4df

Agregar espacio

Para compensar el espacio adicional que fue creado por el módulo de sombra de texto transformado, agregaremos un margen superior negativo.

• Margen superior: -12vw

Agregar módulo de texto descriptivo a la columna 1

Agregar contenido

El siguiente módulo que necesitamos en la columna 1 es otro módulo de texto. Ingrese una descripción de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Open Sans
• Alineación de texto: derecha
• Altura de la línea de texto: 2,3 em

Dimensionamiento

Cambie el ancho del módulo en diferentes tamaños de pantalla en la configuración de tamaño.

• Ancho: 53% (escritorio), 70% (tableta), 90% (teléfono)
• Alineación del módulo: derecha

Agregar módulo de botones a la columna 1

Agregar copia

Pasemos al siguiente y último módulo de la columna 1, que es un módulo de botones. Ingrese alguna copia de su elección.

Alineación

Vaya a la pestaña de diseño y cambie la alineación de los botones.

• Alineación de botones: derecha

Configuración de botones

Modifique también la configuración de los botones.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 20px
• Color de fondo del botón: # 5e96bb
• Ancho del borde del botón: 0px
• Radio del borde del botón: 50 px
• Fuente del botón: Playfair Display

Espaciado

Y juegue con la configuración de espaciado para completar el estilo del botón.

• Margen superior: 2vw
• Margen inferior: 3vw
• Acolchado superior: 20px
• Acolchado inferior: 20px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Agregue el módulo de imagen n. ° 1 a la columna 2

Subir imagen 1: 1

¡A la segunda columna! Aquí, necesitaremos dos módulos de imagen. Comience con el primer módulo de imagen y cargue una imagen con una proporción de 1: 1. Esto significa que tanto el ancho como el alto deben tener el mismo valor de píxel. Asegurarse de que su imagen sea un cuadrado ayudará a convertirla en un círculo en los próximos pasos.

Dimensionamiento

Vaya a la configuración de tamaño del Módulo de imagen y habilite la opción 'Forzar ancho completo'.

• Forzar ancho completo: Sí

Espaciado

También estamos agregando un margen superior.

• Margen superior: 2vw

Frontera

Para transformar el Módulo de Imagen en un círculo, vamos a agregar '50vw' a cada una de las esquinas. Usar un valor realmente alto nos ayuda a mantener una forma circular en diferentes tamaños de pantalla.

Sombra de la caja

Por último, pero no menos importante, también agregaremos una sombra de cuadro al Módulo de imagen, usando la siguiente configuración:

• Posición horizontal de la sombra del cuadro: -300px
• Posición vertical de la sombra del cuadro: -300px
• Color de sombra: rgba (94,150,187,0.28)

Agregue el módulo de imagen n. ° 2 a la columna 2

Subir imagen 1: 1

Pasemos al segundo módulo de imagen en la columna 2. De nuevo, nos aseguramos de que la imagen que cargamos tenga una proporción de 1: 1.

Dimensionamiento

Pase a la pestaña de diseño y cambie el ancho.

• Ancho: 62%

Frontera

Agregue también '50vw' a cada una de las esquinas de este Módulo de imagen.

Sombra de la caja

También agregaremos una sombra de cuadro personalizada.

• Posición horizontal de la sombra del cuadro: -200px
• Posición vertical de la sombra del cuadro: 150px
• Color de sombra: # d4c1bd

Transformar Traducir

Por último, pero no menos importante, cambie la posición del Módulo de imagen usando la opción de traducción de transformación y ¡listo!

• Derecha: -13vw
• Abajo: 19vw

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo usar creativamente módulos de texto duplicados para crear sombras de texto transformadas. Esta es una forma interesante de poner su copia en el centro de atención y usar las opciones integradas de Divi desde otra perspectiva. Esperamos que hayas disfrutado de este tutorial y si tienes alguna pregunta o sugerencia, ¡asegúrate de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.