Creando una sección de héroe de Polaroid con div

Las secciones con héroes creativos hacen sitios web memorables y especiales. Este diseño de la sección de héroes Polaroid evoca una sensación de errante. Usando opciones de transformación de columna, las polaroides se pueden organizar de la manera que desee, como si estuvieran extendidas en una tabla. Puede recrear este diseño de la sección Polaroid Hero con sus propias imágenes cuadradas. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. avance
Antes de tirar la cabeza en el tutorial, eche un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue el diseño de la sección Polaroid Hero de forma gratuita para poner su mano en la sección gratuita de héroe Polaroid, primero deberá descargarlo 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! Suscríbase a nuestro canal de YouTube para comenzar a recrear Agregar una nueva sección para agregar una nueva sección a la página en la que está trabajando. Separador inferior Agregue un separador de fondo verde menta.
Ubicación del divisor: la parte inferior
Estilo divisor: # 12
Divisor Color: Green Mint # D2F2D0
Altura del divisor: 23VW
Extienda ajuste el espacio de sección.

Margen superior: 7VW
Margen inferior: 0 PX
Revestimiento superior e inferior: 0 px
Agregue una nueva estructura de columna de fila Continuar agregando una nueva fila a su sección Elija la siguiente estructura de columnas:

Dimensión ahora, ajuste el tamaño de la fila.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 90VW
Ancho máximo: 100%
Espacio, luego ajuste el relleno superior e inferior en la configuración de espaciado.

Revestimiento superior e inferior: 0 px
La pantalla Agregue una línea de código CSS al elemento principal de la fila para mantener las columnas una al lado de la otra en dimensiones de pantalla más pequeñas.

CSS personalizado – Elemento principal: Display: Flex;
Pantalla: Flex;
Agregue el módulo de imagen a la columna 1 Cargue la imagen cuadrada Agregue un módulo de imagen en la columna 1 y cargue una imagen cuadrada.

Alineación ahora, ajuste la alineación del módulo.


Alineación del módulo: centro
Dimensión Entonces, haga el módulo de ancho.

Fuerza el ancho completo: si
Agregue un módulo de texto a la columna 1 Agregar contenido Agregue un módulo de texto e ingrese un contenido. Usaremos la palabra “Polaroid”.

El texto estiliza la fuente de texto.


Texto de fuente: Adviento Proalinhere Texto: Centro
Color de texto: Muy oscuro gris # 474747
Tamano del texto:
Escritorio: 1VW
Tableta + teléfono: 2VW
Texto de la carta de espacio: 0.1VW
La altura de la línea de texto: 1.8em
La dimensión usa “100%” para el ancho en la configuración del tamaño.
Ancho: 100%

El espacio ahora ajusta el espacio.
Margen superior: 1VW

Módulos clon dos veces y colocar duplicados en las columnas restantes
Cambie la imagen y la copia de los duplicados Cambie las imágenes de cada módulo de imagen duplicada. Si su diseño requiere esto, cambie el contenido del texto. Configuración Columna 1 Fondo Continuar abriendo la configuración de la columna 1 de la fila. Establezca el fondo blanco para crear el efecto Polaroid.

Color de fondo: blanco #ffffff

Espaciado Agregue un poco de revestimiento más bajo para crear el borde inferior inferior de la polaroid.
Revestimiento inferior: 2VW

Border agregue un borde para terminar la Polaroid Visual.
El ancho del borde en 4 lados: 1 VW

El ancho del borde superior: 2VW
El ancho del borde recto: 2VW
Ancho de borde inferior: 1 VW
Ancho del borde izquierdo: 2VW
Color del borde: blanco #ffffff
Box Shadow Complete la configuración de la columna 1 agregando un tono de caja sutil.
Box Shadow: # 1

Expanda la configuración de la columna 1 Use la opción Expandir los estilos para expandir la configuración de la columna.
Regrese a la ventana principal de la configuración de la fila y haga clic en los tres puntos a la derecha de las primeras columnas.

Seleccione “Extienda los estilos de los artículos” y seleccione “Toda esta línea”.
Estilos de transformación de la columna 1 ahora, ajuste la configuración de transformación en la primera columna.
Traducción de transformación: eje x -11vw, eje y -6vw


Transformación de rotación: 341 grados, primera opción
Estilos de transformación de la columna 2 Luego, ajuste la configuración de transformación para la segunda columna. Transformación de transformación: eje x -22W, eje y 0VW
Transformación de rotación: 10 grados, primera opción


Estilos de transformación de la columna 3 Eventualmente, ajuste la configuración de transformación para la tercera columna.
Escala de transformación: 68% Ambos ejes
Transformación Transformación: eje x -46W, eje y 12VW

Transformación de rotación: 31 grados, primera opción
Agregue una nueva sección de fondo Agregue una nueva sección y aplique un fondo verde a la sección.
Color de fondo: verde menta # D2F2D0
El separador inferior concede la sección a un separador inferior.

Ubicación del divisor: la parte inferior
Estilo divisor: # 12


Color divisor: blanco #ffffff
Altura del divisor: 23VW
Espacio eliminar el relleno predeterminado desde arriba.
SUS Lingo: 0 PX
Agregue una nueva fila La estructura de la columna continúe agregando una nueva fila con 3 columnas.

Copie y pegue los estilos de fila con la vista de estructura alámbrica, copie y pegue los estilos ordinarios en la primera sección
Primero, haga clic en los tres puntos a la derecha del menú de fila en la primera sección. Seleccione “Copiar estilos ordinarios”.

Luego haga clic en los tres puntos a la derecha del menú de fila en la segunda sección. Seleccione “Líneas Glind”.

Copie y pegue la configuración de la columna ahora, copie la configuración de la columna desde la primera fila y pégalas a las columnas 1 y 2 de la nueva fila.
Primero, abra la configuración de la fila desde la primera fila.
En segundo lugar, haga clic en los tres puntos en el lado derecho de la primera columna y seleccione “Copiar los estilos”.


Luego desplácese hacia abajo a la nueva fila y abra la pestaña Configuración.
Finalmente, haga clic en los tres puntos en el lado derecho de la primera columna y seleccione “Estilos de elementos de palo”. Estilos de transformación de la columna 1 ahora, ajuste los estilos de transformación en la columna 1.
Escala de transformación: 75% Ambos ejes
Transformación de transformación: eje x -8w, eje y -14VW
Transformación rotada: primera opción de 35 grados


Estilos de transformación de la columna 2 Entonces, cambie los estilos de transformación en la columna 2.
Traducción de transformación: eje x -17W, eje y 2VW
Transformación de rotación: primera opción de 346 grados
Agregue los módulos de imagen duplicados y dibuje módulos de imagen ahora, vuelva a la estructura de alambre para duplicar y extraer dos módulos de imagen.

Primero, copie el primer módulo de imagen en la primera sección dos veces.
Luego deslícelos en la primera y segunda columnas de la segunda sección.
Cambie la imagen en cada módulo para obtener una nueva imagen cuadrada.

Agregue módulos duplicados de texto y dibuje módulos de texto después de las imágenes, haga lo mismo con los módulos de texto. Duplicar desde la primera sección y tirar de la segunda sección.
En la vista de estructura alámbrica, copie el módulo de texto en la primera columna en la primera sección dos veces.
Ahora dibuje los nuevos módulos de texto en las columnas 1 y 2 de la segunda sección.
Si desea cambiar el contenido, haga esto ahora.

Agregue un módulo de texto a la columna 3 Agregar contenido Haga clic en el símbolo más de la tercera columna y agregue un módulo de texto. Ingrese el contenido H2 y el párrafo.
El texto estiliza el texto de la siguiente manera.
Texto de fuente: Advent Pro
Alineación de texto: Centro

Color de texto: gris oscuro # 848484


Tamano del texto:
Escritorio: 1VW
Tableta + teléfono: 1.9VW
Texto de la carta de espacio: 0.1VW
La altura de la línea de texto:
Desktop: 1.2mtable + teléfono: 1.3em
Textura de la cabeza ahora, estilice el texto H2.
Sección: H2
Fuente H2: Adamina
H2 FUENT PESO: Bold
Color de fuente H2: Gris muy oscuro # 444444

Tamaño de fuente H2:
Escritorio: 2VW
Tableta + teléfono: 3VW
Espacio de letras H2: 4 PX
Altura de línea H2:
Escritorio: 1.7VW
Tableta + teléfono: 1.5VW
Dimensión luego ajuste el tamaño.
Ancho:
Escritorio: 60%
Tableta: 91%
Teléfono: 100%

Alineación del módulo: centro
Finalmente espaciado, ajuste la distancia.
Margen superior: -12VW
Agregue un módulo de botón a la columna 3 Agregue una copia Haga clic en el símbolo más debajo del texto y agregue un módulo de botón. Agregue una copia al botón.
Alineación Cambiar la alineación del botón.
Alineación: centro

Estilos de botones personalizados Stilet el botón en consecuencia.
Botón Tamaño de texto:

Escritorio: 1VW


Tableta: 2.4VW
Teléfono: 2.3VW

El ancho del nudo del botón: 0 PX
El color del texto del botón: negro # 000000
Distancia entre letras y botones: 4 PX
Botón de fuente: Advent Pro
Botón de peso de fuente de fuente: en negrita
El espacio aplica un valor de margen más alto.
Margen superior: 2VW
Agregue un módulo divisor a la visibilidad de la columna 3 debajo del botón, agregue un separador y estilice de la siguiente manera.
Visibilidad: si
Línea Déle al separador un color verde brillante.

Color de línea: # 55F252
Dimensión Cambie la configuración del tamaño del divisor y ¡termine!

El peso del divisor
Escritorio: 7 PX


Tableta + teléfono: 4 px
Ancho:

Escritorio: 10%
Tableta + teléfono: 30%
Alineación del módulo: centro
Vista previa Veamos nuevamente el diseño completo de la sección Polaroid Hero en diferentes tamaños de pantalla. Escritorio
Móvil