Con Divi y sus nuevas opciones de transformación, puede crear hermosos diseños 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 uniformes que ayudarán a mejorar la apariencia de la sección en la que está trabajando. En esta publicación en particular, nos centraremos 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!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño de la sección del héroe de las sombras transformadas 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 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
Comencemos a recrear la sección del 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 todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
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 sobrepase 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 del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Pase a la configuración de espaciado, elimine el relleno inferior predeterminado y agregue un espacio personalizado en el lado izquierdo y derecho de la fila.
- Relleno 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. Introduzca la copia de su elección.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Pantalla Playfair
- Alineación de texto: Derecha
- Color del texto: #ffffff
- Tamaño del texto: 11vw
- Altura de línea de texto: 1em
- Longitud vertical de la sombra del texto: 0,02 em
- Fuerza de desenfoque de sombra de texto: 0.16em
- Color de sombra de texto: rgba(0,0,0,0.44)
Módulo de texto clonado #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
Pasamos al 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.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Pantalla Playfair
- Peso de fuente de texto: Negrita
- Alineación de texto: Derecha
- Color del texto: rgba(94,150,187,0.28)
- Tamaño del texto: 11vw
- Espaciado entre letras de texto: 4.5px
- Altura de 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 traducción de transformación.
- Derecha: 13.9vw
- Abajo: -2.1vw
Transformar Rotar
Gire el módulo también.
- Centro: 291 grados
Transformar sesgo
Y aumente el valor de sesgo inferior.
- Inferior: 30 grados
Clonar módulo de texto transformado y colocar 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 sobre el tercer módulo de texto en la columna. Asegúrate de cambiar la copia.
Cambiar la configuración de texto
Pase a la pestaña de diseño y cambie el color del texto.
- Color del texto: #f3e4df
Agregar espaciado
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 texto de descripción a la columna 1
Agregar contenido
El siguiente módulo que necesitamos en la columna 1 es otro módulo de texto. Introduzca una descripción de su elección.
Configuración de texto
Pase 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 copia
Pasemos al siguiente y último módulo de la columna 1, que es un módulo de botones. Introduzca alguna copia de su elección.
Alineación
Pase a la pestaña de diseño y cambie la alineación del botón.
- 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: 50px
- Fuente del botón: Pantalla Playfair
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
Agregue el módulo de imagen n. ° 1 a la columna 2
Subir imagen 1:1
¡A por 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 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.
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 algo de margen superior.
- Margen superior: 2vw
Borde
Para transformar el Módulo de Imagen en un círculo, vamos a agregar ’50vw’ en 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
Pasamos al segundo módulo de imagen en la columna 2. Estamos, nuevamente, asegurándonos 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%
Borde
Agregue ’50vw’ a cada una de las esquinas de este módulo de imagen también.
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: 150 px
- Color de sombra: #d4c1bd
Transformar Traducir
Por último, pero no menos importante, cambia la posición del módulo de imagen usando la opción de transformación y traducció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 de manera creativa 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 utilizar 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 de Divi, 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 los beneficios de este contenido gratuito.