Creación de una sección Polaroid Hero con las opciones de transformación de Divi

Las secciones de héroes creativos hacen que los sitios web sean memorables y especiales. Este diseño de sección de héroe polaroid evoca una sensación de pasión por los viajes vintage. Al usar las opciones de transformación de columnas, las polaroides se pueden organizar de la forma que desee, como si estuvieran extendidas sobre una mesa.

Puede recrear este diseño de sección de héroe polaroid con sus propias imágenes cuadradas. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Escritorio

Móvil

Descargue el diseño de la sección Polaroid Hero GRATIS

Para poner sus manos en el diseño de la sección de héroe polaroid gratis, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

Empecemos a recrear

Agregar nueva sección

Comience agregando una nueva sección a la página en la que está trabajando.

Divisor inferior

Agrega un divisor inferior de color verde menta.

• Colocación del divisor: parte inferior
• Estilo del divisor: # 12
• Color del divisor: verde menta # d2f2d0
• Altura del divisor: 23vw

Espaciado

Ajusta el espaciado de la sección.

• Margen superior: 7vw
• Margen inferior: 0px
• Acolchado superior e inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a su sección. Elija la siguiente estructura de columnas:

Dimensionamiento

Ahora, ajuste el tamaño de la fila.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 90vw
• Ancho máximo: 100%

Espaciado

A continuación, ajuste el acolchado superior e inferior en la configuración de espaciado.

• Acolchado superior e inferior: 0px

Monitor

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 tamaños de pantalla más pequeños.

• CSS personalizado - Elemento principal: display: flex;

display: flex;

Agregar módulo de imagen a la columna 1

Subir imagen cuadrada

Agregue un módulo de imagen a la columna 1 y cargue una imagen cuadrada.

Alineación

Ahora, ajuste la alineación del módulo.

• Alineación del módulo: centro

Dimensionamiento

Luego, haga que el módulo sea de ancho completo.

• Forzar ancho completo: Sí

Agregar módulo de texto a la columna 1

Agregar contenido

Agregue un módulo de texto e inserte algo de contenido. Usaremos la palabra "polaroid".

Texto

Diseñe la fuente del texto.

• Fuente de texto: Advent Pro
• Alineación de texto: centro
• Color del texto: Gris muy oscuro # 474747
• Tamano del texto:
  • Escritorio: 1vw
  • Tableta + Teléfono: 2vw
• Espaciado de letras de texto: 0.1vw
• Altura de la línea de texto: 1.8em

Dimensionamiento

Use '100%' para el ancho en la configuración de tamaño.

• Ancho: 100%

Espaciado

Ahora ajusta el espaciado.

• Margen superior: 1vw

Clonar módulos dos veces y colocar duplicados en las columnas restantes

Cambiar imagen y copia de duplicados

Cambie las imágenes en cada módulo de imagen duplicado. Si su diseño lo requiere, cambie también el contenido del texto.

Configuración de la columna 1

Fondo

Continúe abriendo la configuración de la columna 1 de la fila. Establezca el fondo en blanco para crear el efecto polaroid.

• Color de fondo: blanco #ffffff

Espaciado

Agregue un poco de relleno en la parte inferior para crear el borde inferior polaroid más ancho.

• Acolchado inferior: 2vw

Frontera

Agrega un borde para terminar la imagen polaroid.

• Ancho del borde de 4 lados: 1vw
• Ancho del borde superior: 2vw
• Ancho del borde derecho: 2vw
• Ancho del borde inferior: 1vw
• Ancho del borde izquierdo: 2vw
• Color del borde: blanco #ffffff

Sombra de la caja

Complete la configuración de la columna 1 agregando una sombra de cuadro sutil.

• Sombra de caja: # 1

Ampliar la configuración de la columna 1

Utilice la opción extender estilos para ampliar la configuración de la columna.

• Regrese a la ventana de configuración de la fila principal y haga clic en los tres puntos a la derecha de la pestaña de la primera columna.
• Seleccione 'extender estilos de elementos' y seleccione 'a lo largo de esta fila'.

Estilos de transformación de la columna 1

Ahora, ajuste la configuración de transformación en la primera columna.

• Transformación de traslación: eje x -11vw, eje y -6vw
• Transformar Girar: 341 grados, primera opción

Estilos de transformación de la columna 2

A continuación, ajuste la configuración de transformación para la segunda columna.

• Transformación de traslación: eje x -22w, eje y 0vw
• Transformar Girar: 10 grados, primera opción

Estilos de transformación de la columna 3

Finalmente, ajuste la configuración de transformación para la columna tres.

• Transformar escala: 68% en ambos ejes
• Transformación de traslación: eje x -46w, eje y 12vw
• Transformar Girar: 31 grados, primera opción

Agregar nueva sección

Fondo

Agregue una nueva sección y aplique un fondo verde menta a la sección.

• Color de fondo: verde menta # d2f2d0

Divisor inferior

Dale a la sección un divisor inferior.

• Colocación del divisor: parte inferior
• Estilo del divisor: # 12
• Color del divisor: blanco #ffffff
• Altura del divisor: 23vw

Espaciado

Quite el acolchado superior predeterminado.

• Relleno superior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila con 3 columnas.

Copiar y pegar estilos de fila

Usando la vista de estructura alámbrica, copie y pegue los estilos de fila de la primera sección

• Primero, haga clic en los tres puntos a la derecha del menú de la fila dentro de la primera sección. Seleccione 'copiar estilos de fila'.
• Luego, haga clic en los tres puntos a la derecha del menú de la fila en la segunda sección. Seleccione 'pegar estilos de fila'.

Copiar y pegar la configuración de la columna

Ahora, copie la configuración de la columna en la primera fila y péguela en las columnas 1 y 2 en la nueva fila.

• Primero, abra la configuración de la fila en la primera fila.
• En segundo lugar, haga clic en los tres puntos en el lado derecho de la pestaña de la primera columna y seleccione 'copiar estilos de elementos'.
• Luego, desplácese hacia abajo hasta la nueva fila y abra la pestaña de configuración.
• Finalmente, haga clic en los tres puntos en el lado derecho de la primera columna y seleccione 'pegar estilos de elementos'.

Estilos de transformación de la columna 1

Ahora, ajuste los estilos de transformación en la columna 1.

• Transformar escala: 75% en ambos ejes
• Transformación de traslación: eje x -8w, eje y -14vw
• Transformar Girar: 35 grados 1a opción

Estilos de transformación de la columna 2

Luego, modifique los estilos de transformación en la columna 2.

• Transformación de traslación: eje x -17w, eje y 2vw
• Transformar Girar: 346 grados 1ra opción

Agregar módulos de imagen

Módulos de imágenes duplicadas y de arrastre

Ahora, regrese a la vista de estructura alámbrica para duplicar y arrastrar dos módulos de imagen.

• Primero, duplique el primer módulo de imagen en la primera sección dos veces.
• Luego, arrástrelos a la primera y segunda columnas de la segunda sección.
• Cambie la imagen en cada módulo por una nueva imagen cuadrada.

Agregar módulos de texto

Módulos de texto duplicado y arrastrado

Después de las imágenes, haz lo mismo con los módulos de texto. Duplique de la primera sección y arrastre a la segunda sección.

• En la vista de estructura alámbrica, duplique el módulo de texto de la primera columna en la primera sección dos veces.
• Ahora, arrastre los nuevos módulos de texto a las columnas 1 y 2 de la segunda sección.
• Si desea cambiar el contenido, hágalo ahora.

Agregar módulo de texto a la columna 3

Agregar contenido

Haga clic en el símbolo más en la tercera columna y agregue un módulo de texto. Inserte algo de contenido H2 y de párrafo.

Texto

Dale estilo al texto de la siguiente manera.

• Fuente de texto: Advent Pro
• Alineación de texto: centro
• Color del texto: gris oscuro # 848484
• Tamano del texto:
  • Escritorio: 1vw
  • Tableta + Teléfono: 1.9vw
• Espaciado de letras de texto: 0.1vw
• Altura de la línea de texto:
  • Escritorio: 1.2em
  • Tableta + teléfono: 1.3em

Texto de encabezado

Ahora, aplique estilo al texto H2.

• Título: H2
• Fuente H2: Adamina
• Peso de fuente H2: Negrita
• Color de fuente H2: Gris muy oscuro # 444444
• Tamaño de fuente H2:
  • Escritorio: 2vw
  • Tableta + Teléfono: 3vw
• Espacio entre letras H2: 4px
• Altura de la línea H2:
  • Escritorio: 1.7vw
  • Tableta + Teléfono: 1.5vw

Dimensionamiento

Luego, ajusta el tamaño.

• Ancho:
  • Escritorio: 60%
  • Tableta: 91%
  • Telefono: 100%
• Alineación del módulo: centro

Espaciado

Finalmente, ajuste el espaciado.

• Margen superior: -12vw

Agregar módulo de botones a la columna 3

Agregar 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

Cambie la alineación de los botones.

• Alineación: Centro

Estilos de botones personalizados

Diseñe el botón en consecuencia.

• Tamaño del texto del botón:
  • Escritorio: 1vw
  • Tableta: 2.4vw
  • Teléfono: 2.3vw
• Ancho del borde del botón: 0px
• Color del texto del botón: Negro # 000000
• Espacio entre letras del botón: 4px
• Fuente del botón: Advent Pro
• Peso de la fuente del botón: negrita

Espaciado

Aplicar un valor de margen superior.

• Margen superior: 2vw

Agregar módulo divisor a la columna 3

Visibilidad

Debajo del botón, agregue un divisor y modifique el estilo de la siguiente manera.

• Visibilidad: si

Línea

Dale al divisor un color verde brillante.

• Color de línea: # 55f252

Dimensionamiento

¡Cambie la configuración de tamaño del divisor y listo!

• Peso del divisor
  • Escritorio: 7px
  • Tableta + Teléfono: 4px
• Ancho:
  • Escritorio: 10%
  • Tableta + Teléfono: 30%
• Alineación del módulo: centro

Avance

Echemos un vistazo nuevamente al diseño terminado de la sección de héroe polaroid en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Es una envoltura!

En esta publicación, le mostramos cómo recrear una sección de héroe polaroid usando las opciones de transformación de Divi. Esta es una excelente manera de mostrar varias imágenes en la sección de héroe de su página. ¡Esperamos que este diseño inspire sus propios diseños de sección de héroes creativos! Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación.