Uso de Div

Hoy, destacaremos la opción de diseñar la escala de transformación que viene con las nuevas opciones de transformación del DIV. Además, recrearemos un diseño increíble que permite que las secciones se expandan de una manera elegante. Puede usar este diseño para cualquier tipo de sitio web que cree. Le ayudará a compartir contenido relevante de una manera estructurada y mínima. Al final de este tutorial, podrá descargar todo el aspecto de la página 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.
Escritorio

Móvil

¡Comencemos a recrear! Agregue la sección no. 1 Espacio comienza creando una nueva página. Agregue la primera sección habitual a la página, abra la configuración de la sección y elimine todo el revestimiento predeterminado e inferior de la configuración de espaciado.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue una nueva estructura de columna de fila 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.
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%

Espacio eliminar y todo el revestimiento predeterminado, superior e inferior. Hacemos esto para limitar el espacio que estará ocupado por la fila y la sección.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue una visibilidad del módulo divisor La única forma en que necesitamos en esta fila es un módulo divisor. Al final de este tutorial, convertiremos el divisor en uno vertical que conectará todas las secciones futuras. Después de haber agregado el módulo Divisor, asegúrese de que la opción “Display Divizer” esté activada.
Colorear luego acceda a la pestaña de diseño y cambie el color del separador negro.

Color: # 000000
Dimensión modifica los valores de dimensionamiento.

Peso del divisor: 1 PX
Altura: 0px
Espacio y aumente la longitud del divisor agregando algunos bordes negativos a la izquierda y a la derecha.

Margen izquierdo: -135VW (escritorio), -300VW (tableta), -340VW (teléfono)
Margen derecho: -135VW (escritorio), -300VW (tableta), -340VW (teléfono)
Agregue el color de fondo de la sección 2 ¡Vaya a la siguiente sección regular! Después de haber agregado la nueva sección, abra la configuración de la sección y agregue un fondo completamente blanco.

Color de fondo: #ffffff
Extienda luego, acceda a la configuración de espaciado y agregue algunos rellenos personalizados en la parte superior e inferior.

Revestimiento superior: 5VW
Revestimiento inferior: 5VW
Borde predeterminado Agregue un borde a la sección.

Ancho fronterizo: 1 PX
Color del borde: # 000000
Coloque el ratón sobre el borde y retire el ancho de la frontera en la carrera.

Ancho fronterizo: 0 PX
La sombra de caja predeterminada también agregue una sombra de la caja para caminar. Para hacer esto, tendremos que agregar uno predeterminado primero. Para garantizar que la sombra de la caja no aparezca de forma predeterminada, usamos un color de sombra completamente transparente.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0)
Hover Box Shadow Cambie el color de la sombra cuando pase con el mouse usando el siguiente código de color: Color de la sombra: RGBA (0.0,0.13)

Agregue la estructura de la columna de la fila # 1 Continuar agregando primero a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Agregue un modo de texto Agregar contenido H2 ¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un modo de texto con contenido H2.
Configuración de texto H2 Vaya a la pestaña Diseño y cambie la configuración de texto H2 de acuerdo con sus preferencias.

Título 2 Fuente: Abril Fatface

Título 2 Alineación de texto: Centro
Rúbrica 2 Color de texto: # 000000
2 Tamaño de texto: 7VW
Sparto agregue algunos valores de margen personalizados.
Margen inferior: 5VW

Margen izquierdo: 5VW
Margen derecho: 5VW
Agregue un módulo de visibilidad La siguiente y última manera que necesitamos en esta fila es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

Colorear luego acceda a la pestaña de diseño y cambie el color del divisor en negro.
Color: # 000000

¡Agregue la estructura de la fila # 2 de la columna por segundo! Use la siguiente estructura de columna:
Dimensión nuevamente, nos aseguramos de que el giro ocupe todo el ancho de la pantalla cambiando la configuración de tamaño en la pestaña de diseño.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
El espacio también reduce ligeramente el tamaño de la fila agregando rellenos personalizados y derecho en la configuración del espacio. Cabeza izquierda: 10 VW
Junta derecha: 10 VW

La pantalla para garantizar que las tres columnas aparezcan una al lado de la otra en un tamaño más pequeño de la pantalla, agregaremos una sola línea de código CSS al elemento principal de la fila.
Pantalla: Flex;
Agregue los módulos de la propaganda a la columna 1 Agregar contenido Continuar agregando un módulo de propaganda a la primera columna de la fila. Ingrese un contenido de su elección.

Seleccione el icono Seleccione un icono adicional.
Icono de configuración Entonces, acceda a la pestaña de diseño y cambie el color del icono.

Icono de color: # 000000


Configuración de texto de título Cambiar a la configuración de texto de título y modificar la configuración de acuerdo con sus preferencias.

Título de la fuente: Abril Fatface
Alineación del texto del título: Centro

Color de texto del título: # 000000
Título Tamaño del texto: 1.5VW (escritorio), 2.5VW (tableta), 3.5VW (teléfono)
Altura de la línea de título: 2em
La configuración del texto del cuerpo hace lo mismo para la configuración del texto del cuerpo.
Font Corp: Open Sans
Alineación del texto del cuerpo: Centro

El color del texto del cuerpo: # 666666
Tamaño de texto del cuerpo: 0.8VW (escritorio), 1.5VW (tableta), 2VW (teléfono)
La altura de la línea del cuerpo: 2em
Espacio no menos importante, agregue algunos bordes personalizados a la izquierda y a la derecha al módulo de la propaganda.
Margen izquierdo: 2VW
Margen derecho: 2VW

Clone el módulo de la propaganda dos veces y colóquelo en las columnas restantes después de que haya terminado el módulo personalizado, puede continuar el clon dos veces. Coloque los duplicados en las dos columnas restantes de la fila.
Agregue la estructura de la fila # 3 de la columna a la siguiente y última fila. Elija la siguiente estructura de columnas para esto: dimensionamiento sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección cambiando la configuración de tamaño.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Ancho: 100%

Ancho máximo: 100%
Agregue un botón Agregar contenido La única forma en que necesitamos aquí es un módulo de botón. Agregue una copia de su elección.
Alinee entonces, acceda a la pestaña de diseño y cambie la alineación del botón.
Alineación de botones: centro
Botón de configuración y luego cambie la configuración de los botones.

Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1.5VW (escritorio), 2.5VW (tableta y 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: Abrir sans
Peso de fuente: Ultra Bold
Espacio y cree una forma para el botón utilizando algunos valores de margen y llenado personalizados.
Margen superior: 5VW
Revestimiento superior: 2VW
Revestimiento inferior: 2VW


Revelaje izquierdo: 10 VW
Junta derecha: 10 VW
Agregue la configuración de transformación a la sección # 2 Agregue la escala de transformación predeterminada a la sección # 2 Ahora que hemos terminado de crear y modificar las dos secciones que hemos agregado a nuestra página, podemos comenzar a aplicar las opciones de transformación. Sección abierta no. 2 y agregue algunos valores personalizados de la escala de transformación.
El fondo: 60% (escritorio), 90% (tableta y teléfono)
Derecha: 60% (escritorio), 90% (tableta y teléfono)
Coloque el cursor en la Sección # 2 Cambie estos valores a la salida. Observe cómo usamos el mismo valor que para las dimensiones de pantalla más pequeñas. Si hace esto, se asegurará de que el efecto de desplazamiento solo tenga lugar en los tamaños de pantalla más grandes. Jos: 90%

Derecha: 90%
Clone la sección dos veces, clone la segunda sección dos veces (o tantas veces como desee).
Agregue la transformación girada al módulo divisor en la sección # 1 y gire el divisor que agregó a la primera sección jugando con el valor de giro de la transformación.

Izquierda: 90 grados
Descargue la apariencia de la sección extendida de forma gratuita para poner su mano en la sección de expansión, primero deberá 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.

Te has suscripto satisfactoriamente.¡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 estado pasando por todos los pasos, eche un vistazo final sobre el resultado en diferentes tamaños de pantalla.Escritorio
Móvil

Pensamientos finales En este tutorial, destacé la opción de transformar la escala que viene con las nuevas opciones de transformación del Div.Además, he recreado un diseño increíble que permite que el efecto flotante tenga sentido y mejore la experiencia general de los usuarios cuando visitan la página.Al final del tutorial, puede descargar todo el aspecto de forma gratuita.Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!