Creación de una estructura de diseño diagonal con las opciones de transformación de DIV (¡descarga gratuita!)

Siempre estamos buscando formas de expandir las posibilidades de diseño que tiene con Div. Y desde que apareció la actualización de las opciones de transformación, se han hecho posibles muchas técnicas nuevas, sin la necesidad de conocimientos de codificación personalizados. En esta publicación, le mostraremos cómo crear una sorprendente estructura de diseño diagonal. El diseño que recrearemos funciona excelente para la sección Hero y coincide con cualquier tipo de sitio web que desee configurar. Al final del tutorial, ¡podrá descargar el archivo JSON de forma gratuita! ¡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.

¡Comencemos a recrear! Agregue una nueva sección de fondo de gradiente. Comience creando una nueva página o abriendo una existente y agregue una sección regular. Abra la configuración de la sección y agregue un fondo degradado utilizando la siguiente configuración:
Color 1: # FFD633
Color 2: #efefef
Dirección de gradiente: 217 grados
Posición inicial: 45%
Posición final: 45%

Extienda luego, acceda a la pestaña de diseño y agregue un poco de revestimiento personalizado desde arriba e abajo.
Revestimiento superior: 4VW
Revestimiento inferior: 12VW

La superación, debemos asegurarnos de que las opciones de transformación no excedan el contenedor de sección. Para lograr esto, agregaremos una sola línea de código CSS al elemento principal de la sección.
Desbordamiento: oculto;

Agregue la estructura de la columna de la fila # 1 Continuar agregando la primera fila 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 de la pantalla. En el siguiente paso de esta publicación, reemplazaremos el espacio que acabamos de eliminar agregando algunos valores de llenado personalizados a la izquierda y a la derecha utilizando una unidad de visualización. Esto asegurará que el diseño permanezca receptivo a todos los tamaños de pantalla. Haga esta fila de ancho completo: Sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
El espacio continúa y agregue algunos valores de llenado personalizados a la siguiente configuración de espaciado.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
ENLIZACIÓN IZQUIERDA: 25VW (escritorio), 16VW (tableta), 7VW (teléfono)
Revelaje derecho: 25VW (escritorio y tableta), 27VW (teléfono)
La pantalla también se aseguró de que las columnas aparezcan una al lado de la otra en dimensiones de pantalla más pequeñas, agregando una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;

Agregue los módulos de blurb a la columna 1 ¡Agregar Título es hora de comenzar a agregar módulos! Agregue un módulo de propaganda a la columna 1 e ingrese un título de su elección.

Cargue la ilustración Continuar cargando una ilustración de su elección. Los que usaremos en este tutorial son parte del paquete de apariencia. Puede descargar las ilustraciones de forma gratuita accediendo a la publicación y descargándolas al final.

Fondo y luego agregue un color de fondo completamente blanco al módulo de la propaganda.

Color de fondo: #ffffff
Configuración de texto de título Cambiar a la pestaña Diseño y modificar la configuración de texto de título según:

Título de la fuente: Poppins
Fuente de peso del título: semi audaz
Estilo de fuente de título: mayúscula
Alineación del texto del título: Centro
Título Tamaño del texto: 0.5VW (escritorio), 1.6VW (tableta), 2.4VW (teléfono) Cartas de título: 1 PX
Altura de la línea de título: 1.6em
Extienda y luego cambie la configuración de espaciado.
Revelaje superior: 1.3VW (escritorio), 4VW (tableta), 6VW (teléfono)

Bajo revestimiento: 1.3VW (escritorio), 4VW (tableta), 6VW (teléfono)
ENLIZACIÓN IZQUIERDA: 1VW (escritorio), 7VW (tableta y teléfono)
Revestimiento derecho: 1VW (escritorio), 7VW (tableta y teléfono)
El borde continúa agregando “1VW” a las esquinas superior izquierda y superior derecha del módulo de propaganda.
Box Shadow No menos importante, agregue un tono de caja a la siguiente configuración:

Box Shadow Posición vertical: 10 PX

Poder de poco claro de la sombra de la caja: 60 px
Color de la sombra: RGBA (39,39,52,0.37)
Clonar el módulo de propaganda dos veces y colocar los duplicados en las columnas restantes después de que haya personalizado el módulo de propaganda, puede continuar el clon dos veces. Coloque los duplicados en las dos columnas restantes de la fila.
Cambie el duplicado # 1 Cambiar copia e ilustración Cambie la copia y la ilustración del primer duplicado.

Cambie el espacio con la configuración de espaciado.

Margen superior: -3VW

Revestimiento superior: 2.7 VW (escritorio), 8 VW (tableta), 11 VW (teléfono)
Bajo forro: 2.7VW (escritorio), 8VW (tableta), 11VW (teléfono)
Cambie el duplicado # 2 Cambiar la copia e ilustración Cambio y la copia e ilustración del segundo duplicado.
Agregue la estructura de la fila # 2 de la columna, ¡pasamos la siguiente fila! Use la siguiente estructura de columna:

Fondo de gradiente sin agregar módulos, abrir la configuración de línea y agregarle un fondo de gradiente.

Color 1: # FFF20a

Color 2: # FFB200
Dirección de gradiente: 165 grados
Dimensión Entonces, acceda a la pestaña de diseño y active el “Haga esta fila completa
Box Shadow por último, pero no menos importante, agregue una sombra de caja en una fila.

Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 100 px

Shadow Color: RGBA (0.0,0,0.39)
Agregue un módulo de divisor de visibilidad, usamos esta fila solo para fines de diseño, no para presentar ningún módulo. Pero para asegurarnos de que sepamos exactamente cómo se ve el giro, tendremos que agregar un módulo divisor. No queremos que aparezca el módulo, así que asegúrese de que la opción “Muestre el divisor” esté desactivada.
Divisor del espectáculo: no
Aplicar opciones de transformación en líneas La fila # 1 Transforma la traducción Ahora que hemos completado las dos primeras líneas, las convertiremos para que encajen en la estructura de diseño diagonal que pretendemos crear. Comience abriendo la configuración de la primera fila y cambiando los valores de traducción de transformación.

El fondo: 30 VW
Derecha: 6VW


Transformación de rotación Entonces, cambie el valor de giro de la transformación desde la izquierda.
Izquierda: 37 grados
La escalera de transformación de la fila # 2 Continúe abriendo la configuración de la segunda fila y modifique los valores de la escala de transformación.

El fondo: 133% (escritorio), 171% (tableta), 176% (teléfono)
Derecha: 133% (escritorio), 171% (tableta), 176% (teléfono)

Transforma la traducción junto con la transformación de valores traducidos.
La parte inferior: 12VW (escritorio), 1VW (tableta), 3VW (teléfono)
Derecha: -2VW (escritorio), -6VW (tableta), -4VW (teléfono)

Transformación de rotación y gire el giro en la configuración de rotación de transformación.
Izquierda: 37 grados
Agregue la fila # 3 La estructura de la columna que vamos a la siguiente y última fila. Puede usar esta fila y sus columnas para compartir cualquier tipo de información que desee. Para recrear el diseño exacto que ha visto en la vista previa de esta publicación, seleccione la siguiente estructura de columnas: dimensionamiento sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H1 es hora de comenzar a agregar módulos. Comenzaremos con un modo de texto con un título. Ingrese un contenido H1 de su elección.
Configuración de texto H1 Luego acceda a la pestaña de diseño y cambie la configuración de texto H1.
Fuente del título: Poppins
Encabezado de texto de tamaño: 3VW (escritorio), 5VW (tableta), 6VW (teléfono)

Distancia entre las letras del encabezado: -2 PX

El espacio agregue algunos valores de espaciado personalizados.
Margen superior: -6VW (escritorio y tableta), 11VW (teléfono)
Margen izquierdo: 10 VW
Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido La segunda forma que necesitamos es otro módulo de texto. Agregue un contenido a su elección.

Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto.
Texto de fuente: Abrir sans
Tamaño de texto: 0.8VW (escritorio), 1.5VW (tableta), 2.2VW (teléfono)

Altura de la línea de texto: 2.6em

Difundir el cambio y los valores de espaciado.
Margen superior: 3VW (teléfono), 5VW (teléfono)
Margen izquierdo: 10 VW
Margen derecho: 28 VW (tableta), 20VW (teléfono)

Agregue el módulo de botón a la columna 1 Agregue una copia a continuación y el último módulo que necesitamos es un módulo de botón. Agregue una copia de su elección. Botón luego, acceda a la pestaña de diseño y modifique la configuración del botón.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.9VW (escritorio), 2.5VW (tableta), 3.5VW (teléfono)
El color del texto del botón: # 000000

El ancho del nudo del botón: 1 PX

Cenas de libros: # 000000
Botón Raza: 1 PX
Botón de fuente: Poppins
Peso de fuente: luz
Espacio, no menos importante, da forma a su módulo utilizando algunos valores de espaciado personalizados y ¡ya está terminado!
Margen superior: 2VW (escritorio), 5VW (tableta y teléfono)
Margen izquierdo: 10 VW
Revestimiento superior: 1VW
Revestimiento inferior: 1 VW


Junta izquierda: 3VW
Junta derecha: 3VW
Descargue la sección de diseño diagonal gratuita para poner su mano en la sección de diseño diagonal gratuita, primero debe descargarla con 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!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales En esta publicación, le he mostrado cómo crear una sorprendente estructura de diseño diagonal utilizando solo las opciones incorporadas de Div. Esperamos que este tutorial lo ayude a familiarizarse con las nuevas opciones de transformación de la Divic. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.