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 visualiza todas las configuraciones de transformación en tiempo real. Y al combinar diferentes módulos entre sí, puede lograr algunos efectos únicos e ininterrumpidos que ayudarán a elevar el aspecto de la sección en la que está trabajando. En esta publicación en particular, nos enfocaremos en crear sombras transformadas para su copia utilizando 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

sombras transformadas

Móvil

sombras transformadas

Descargar The Transformed Shadows Hero Section Layout GRATIS

Para poner tus manos en el diseño de la sección de héroe de sombras transformadas gratis, primero tendrás que 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=k5wJP8tqaSo (/ incrustar)

Suscríbase a nuestro canal de Youtube

Comencemos a recrear la sección de héroe

Agregar nueva sección

Espaciado

Lo primero que deberá 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 todos los rellenos superiores e inferiores predeterminados.

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

sombras transformadas

Desbordamiento

Pase 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

sombras transformadas

Agregar nueva fila

Estructura de columna

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

sombras transformadas

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

sombras transformadas

Espaciado

Pase a la configuración de espaciado, elimine el relleno inferior predeterminado y agregue algo de espacio personalizado en el lado izquierdo y derecho de la fila.

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

sombras transformadas

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.

sombras transformadas

Configuraciones de texto

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

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

sombras transformadas

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

sombras transformadas

Clone Text Module # 1

Cambiar contenido

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

sombras transformadas

Agregar nuevo módulo de texto sobre el módulo de texto n. ° 1

Agregar contenido

En el siguiente módulo, que es otro módulo de texto. Esta vez, estamos colocando 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 estar usando la misma copia.

sombras transformadas

Configuraciones de texto

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

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

sombras transformadas

Transformar Traducir

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

  • Derecha: 13.9vw
  • Inferior: -2.1vw

sombras transformadas

Transformar Rotar

Gire el módulo también.

  • Centro: 291 grados

sombras transformadas

Transformar torcida

Y aumente el valor de inclinación inferior.

  • Parte inferior: 30 grados

sombras transformadas

Módulo de texto transformado clonado y colocar encima del módulo de texto # 2

Cambiar contenido

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

sombras transformadas

Cambiar configuración de texto

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

  • Color del texto: # f3e4df

sombras transformadas

Añadir espacio

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

  • Margen superior: -12vw

sombras transformadas

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.

sombras transformadas

Configuraciones de texto

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

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

sombras transformadas

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

sombras transformadas

Agregar módulo de botón a la columna 1

Agregar copia

En el siguiente y último módulo en la columna 1, que es un Módulo de botones. Ingrese alguna copia de su elección.

sombras transformadas

Alineación

Pase a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: derecha

sombras transformadas

Configuraciones de botones

Modifique la configuración del botón también.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20 px
  • 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

sombras transformadas

sombras transformadas

Espaciado

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

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

sombras transformadas

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 relación 1: 1. Esto significa que tanto el ancho como la altura 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.

sombras transformadas

Dimensionamiento

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

  • Forzar ancho completo: sí

sombras transformadas

Espaciado

También estamos agregando algo de margen superior.

  • Margen superior: 2vw

sombras transformadas

Frontera

Para transformar el Módulo de imagen en un círculo, agregaremos "50vw" a cada una de las esquinas. El uso de un valor realmente alto nos ayuda a mantener una forma circular en diferentes tamaños de pantalla.

sombras transformadas

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 de la caja: -300px
  • Posición vertical de la sombra de la caja: -300px
  • Color de sombra: rgba (94,150,187,0.28)

sombras transformadas

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

Subir imagen 1: 1

En el segundo Módulo de imagen en la columna 2. De nuevo, nos aseguramos de que la imagen que cargamos tenga una relación 1: 1.

sombras transformadas

Dimensionamiento

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

  • Ancho: 62%

sombras transformadas

Frontera

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

sombras transformadas

Sombra de la caja

También agregaremos una sombra de cuadro personalizado.

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

sombras transformadas

Transformar Traducir

Por último, pero no menos importante, cambie la posición del módulo de imagen con la opción de transformación de traducción y ya está.

  • Derecha: -13vw
  • Inferior: 19vw

sombras transformadas

Avance

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

Escritorio

sombras transformadas

Móvil

sombras transformadas

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 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.