Agregar sombras transformadas en su copia con la división

Con las nuevas opciones de transformación de la división, puede crear un diseño web hermoso mientras ve todas las configuraciones de transformación de tiempo real. Y al combinar los diferentes módulos entre ellos, puede obtener algunos efectos únicos y de soldadura que lo ayudarán a elevar la apariencia de la sección en la que trabaja. En esta publicación especial, nos centraremos en crear sombras transformadas para su copia utilizando solo las opciones construidas de Div. Podrá descargar el archivo JSON, por ejemplo, por ejemplo. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue la apariencia de la sección Héroe Transformed Shadows de forma gratuita para poner su mano en la apariencia de la sección de héroe transformado gratuita, primero tendrá que descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube para comenzar a recrear la sección Hero Agregue una nueva sección Lo primero que debe hacer es agregar una nueva sección habitual a una página nueva o existente. Abra la configuración de la sección y elimine todos los valores predeterminados desde arriba e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Superar ir a la pestaña Avanzada y asegúrese de que la descarga de la sección esté oculta. Más adelante en esta publicación, utilizaremos algunas opciones de transformación y ocultaremos el adelantamiento asegurará que nada exceda el contenedor de sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho aplicando la siguiente configuración:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
Interruptor de separación a la configuración de separación, retire el relleno de fondo predeterminado y agregue un espacio personalizado al lado izquierdo y derecho de la fila. Encabezado inferior: 0 PX

Junta izquierda: 4VW
Junta derecha: 4VW
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido es hora de comenzar a agregar 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 Diseño y cambie la configuración de texto en consecuencia:

Texto de fuente: PlayFair Display

Alineación del texto: Derecho
Color de texto: #ffffff
Tamaño del texto: 11VW
La altura de la línea de texto: 1em
Longitud vertical de las sombras de texto: 0.02em
Fuerza de pelea de sombras de texto: 0.16 em

Text Shadow Color: RGBA (0.0,0,0.44)
Clon el módulo de texto no. 1 Cambie el contenido Después de haber completado el primer módulo de texto, puede clonar y cambiar la copia duplicada.
Agregue un nuevo módulo de texto sobre el módulo de texto no. 1 Agregue el interruptor de contenido 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 siguientes pasos, convertiremos este módulo de texto en la sombra de texto transformado del siguiente módulo. Asegúrese de usar la misma copia.

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

Texto de fuente: PlayFair Display

El peso de la fuente de texto: en negrita
Alineación del texto: Derecho
Color de texto: RGBA (94.150.187.0.28)
Tamaño del texto: 11VW
Texto de la carta de espacio: 4.5 PX
La altura de la línea de texto: 1em
¡Transform Translation es el momento de transformar el módulo para que parezca el texto transformado del siguiente módulo! Vaya a la configuración del espacio y cambie los valores de traducción de transformación. Bueno: 13.9VW
Abajo: -2.1VW

Transformación de rotación y el módulo.
Centro: 291 grados
Gire la sesgo y aumente el valor de inclinación inferior.

El fondo: 30 grados

Clone el módulo de texto transformado y coloque sobre el módulo de texto no. 2 Cambie el contenido Después de haber terminado de crear el módulo de sombra de texto transformado, puede clonar y colocar sobre el tercer módulo de texto en la columna. Asegúrese de cambiar la copia.

Cambie la configuración de texto Vaya a la pestaña Diseño y cambie el color del texto.
Color de texto: # F3E4DF

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

Margen superior: -12VW
Agregue el módulo de descripción de texto a la columna 1 Agregar contenido La siguiente forma 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 Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Abrir sans

Alineación del texto: Derecho

La altura de la línea de texto: 2.3em
Dimensión Cambiar el ancho del módulo en diferentes tamaños de pantalla en la configuración del tamaño.
Ancho: 53% (escritorio), 70% (tableta), 90% (teléfono)
Alineación del módulo: correcto

Agregue el módulo de botón a la columna 1 Agregue una copia Pase al siguiente y último módulo en la columna 1, que es un módulo de botón. Ingrese una copia de su elección.
Alineación Vaya a la pestaña Diseño y cambie la alineación del botón.
Alineación del botón: Configuración del botón y botón de modificación del botón derecho.

Use estilos personalizados para el botón: Sí

Botón de tamaño de texto: 20 PX
El color de fondo del botón: # 5E96BB

El ancho del nudo del botón: 0 PX
Butter Raza: 50 PX
Botón de fuente: PlayFair Display
Espacio y juega con la configuración de espaciado para completar el estilo del botón.
Margen superior: 2VW
Margen inferior: 3VW
Revestimiento superior: 20 px


Finamiento inferior: 20 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Agregue el módulo de imagen no. 1 en la columna 2 Imagen de carga 1: 1 ¡Pase 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 el ancho y la altura deben tener el mismo valor de los píxeles. Asegurarse de que su imagen sea un cuadrado lo ayudará a convertirla en un círculo en los siguientes pasos.
Dimensión Vaya a la configuración de dimensionamiento del módulo de imagen y active la opción “Fuerza el ancho completo”.
Fuerza el ancho completo: si
El espacio también agrega un margen superior.

Margen superior: 2VW

Border Para convertir el módulo de imagen en un círculo, agregaremos “50VW” a cada esquina. El uso de un valor muy alto nos ayuda a mantener una forma circular en diferentes tamaños de pantalla.
Box Shadow por último, pero no menos importante, agregaremos una sombra del cuadro al módulo de imagen utilizando la siguiente configuración:

Posición horizontal de la sombra de la caja: -300px
Box Shadow Posición vertical: -300px

Color de la sombra: RGBA (94.150.187.0.28)

Agregue el módulo de imagen no. 2 En la columna 2 Imagen de carga 1: 1 pasamos al segundo módulo de imagen en la columna 2. Aseguramos, nuevamente, que la imagen que cargamos tiene una relación 1: 1. Dimensión pasa a la pestaña de diseño y cambia el ancho.
Ancho: 62%
Border agregue “50VW” a cada una de las esquinas de este módulo de imagen.
Box Shadow También agregaremos un tono de caja personalizado.

Posición horizontal de la sombra de la caja: -200px

Box Shadow Posición vertical: 150 PX
Color de la sombra: # D4C1BD

Transformar la traducción por último, pero no menos importante, cambie la posición del módulo de imagen utilizando la opción de transformación de transformación y ¡termine!

Derecha: -13VW
Abajo: 19 VW
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré 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 de división integradas desde otra perspectiva. Esperamos que le haya gustado este tutorial y si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación! Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.