Crear una sección de héroe Polaroid 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 antiguos. Al usar las opciones de transformación de columna, las polaroids se pueden organizar de la forma que desee, como si estuvieran extendidas sobre una mesa.

Puedes recrear este diseño de sección de héroe polaroid con tus propias imágenes cuadradas. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

vista previa de escritorio héroe polaroid

Móvil

vista previa móvil héroe polaroid

Descargar The Polaroid Hero Section Design GRATIS

Para poner sus manos en el diseño de la sección de héroe polaroid gratuito, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=7GxtIEJp0-Q (/ incrustar)

Suscríbase a nuestro canal de Youtube

Comencemos a recrear

Agregar nueva sección

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

Divisor inferior

Agregue un divisor de fondo verde menta.

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

divisor inferior en la sección

Espaciado

Ajusta el espaciado de la sección.

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

configuración de espaciado de sección

Agregar nueva fila

Estructura de columna

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

agregar una estructura de 3 columnas

Dimensionamiento

Ahora, ajuste el tamaño de la fila.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 90vw
  • Ancho Máx .: 100%

ajustes de tamaño de fila polaroids

Espaciado

A continuación, ajuste el relleno superior e inferior en la configuración de espacio.

  • Relleno superior e inferior: 0px

acolchado superior e inferior para la sección

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;

CSS personalizado para la fila de 3 columnas

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.

agregar un módulo de imagen para polaroid

agregar una imagen cuadrada

Alineación

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

  • Alineación del módulo: centro

imagen de alineación del módulo

Dimensionamiento

Luego, haga el módulo de ancho completo.

  • Forzar ancho completo: sí

forzar ancho completo en el módulo de imagen

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".

agregar módulo de texto polaroid

agregar contenido polaroid

Texto

Dale estilo a 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
  • Espacio entre letras de texto: 0.1vw
  • Altura de la línea de texto: 1.8em

texto polaroid

Dimensionamiento

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

  • Ancho: 100%

ancho de texto

Espaciado

Ahora ajuste el espacio.

  • Margen superior: 1vw

margen de texto polaroid

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

duplicar y arrastrar los módulos

Cambiar imagen y copia de duplicados

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

Configuración de columna 1

Antecedentes

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

fondo blanco polaroid

Espaciado

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

  • Relleno inferior: 2vw

margen para el fondo de la columna

Frontera

Agregue un borde para finalizar 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

fondo blanco polaroid

Sombra de la caja

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

  • Box Shadow: # 1

sombra de caja para la polaroid

Extender la configuración de la columna 1

Use la opción extender estilos para extender la configuración de la columna.

  • Vuelva 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".

extender estilos de elementos desde la columna 1

a lo largo de esta fila

Columna 1 Transformar Estilos

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

  • Transformar Traducir: eje x -11vw, eje y -6vw
  • Transformar Rotar: 341 grados, primera opción

transformación de columna

Columna 2 Transformar Estilos

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

  • Transformar Traducir: eje x -22w, eje y 0vw
  • Transformar Rotar: 10 grados, primera opción

columna 2 transformar

Columna 3 Transformar Estilos

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

  • Escala de transformación: 68% ambos ejes
  • Transformar Traducir: eje x -46w, eje y 12vw
  • Transformar Rotar: 31 grados, primera opción

columna 3 transformar

Agregar nueva sección

Antecedentes

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

  • Color de fondo: verde menta # d2f2d0

insertar sección

agregar un fondo verde menta

Divisor inferior

Dale a la sección un divisor inferior.

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

divisor inferior en la segunda sección

Espaciado

Elimine el relleno superior predeterminado.

  • Relleno superior: 0px

sección de relleno 0px

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila con 3 columnas.

agregar nueva fila de 3 columnas

Copiar y pegar estilos de fila

Con 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 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 fila en la segunda sección. Seleccione "pegar estilos de fila".

copiar estilos de fila de la sección uno

pegar estilos de fila

Copiar y pegar configuraciones de 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 a 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".

copiar estilos de elementos nuevamente

pegar estilos de elementos

Columna 1 Transformar Estilos

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

  • Escala de transformación: 75% en ambos ejes
  • Transformar Traducir: eje x -8w, eje y -14vw
  • Transformar Rotar: 35 ° 1ra opción

transformar la configuración en la columna 1

Columna 2 Transformar Estilos

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

  • Transformar Traducir: eje x -17w, eje y 2vw
  • Transformar Rotar: 346 grados primera opción

configuración de la columna 2

Agregar módulos de imagen

Duplicar y arrastrar módulos de imagen

Ahora, regrese a la vista de estructura alámbrica para duplicar y arrastre 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 columna de la segunda sección.
  • Cambie la imagen en cada módulo para una nueva imagen cuadrada.

duplicar y arrastrar módulos de imagen

Agregar módulos de texto

Duplicar y arrastrar 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 arrastrar 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 en la segunda sección.
  • Si desea cambiar el contenido, hágalo ahora.

duplicar y arrastrar módulos de texto

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 H2 y contenido de párrafo.

agregar un módulo de texto en la columna 3

haciendo memorias módulo de texto

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
  • Espacio entre letras de texto: 0.1vw
  • Altura de línea de texto:
    • Escritorio: 1.2em
    • Tableta + Teléfono: 1.3em

configuración de texto columna 3

Encabezado de texto

Ahora, dale estilo al texto H2.

  • Encabezado: 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
  • Espaciado de letras H2: 4px
  • Altura de la línea H2:
    • Escritorio: 1.7vw
    • Tableta + teléfono: 1.5vw

Configuración de h2 columna tres

Dimensionamiento

Luego, ajuste el tamaño.

  • Anchura:
    • Escritorio: 60%
    • Tableta: 91%
    • Teléfono: 100%
  • Alineación del módulo: centro

ajustes de texto

Espaciado

Finalmente, ajuste el espacio.

  • Margen superior: -12vw

margen superior haciendo recuerdos

Agregar módulo de botón 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 alguna copia al botón.

agregar un botón

descubra más en el botón

Alineación

Cambiar la alineación del botón.

  • Alineamiento: centro

alineación de botones

Estilos de botones personalizados

Estilo del 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 de botones: 4px
  • Fuente del botón: Advent Pro
  • Peso de fuente del botón: negrita

estilos de botones

Espaciado

Aplicar un valor de margen superior.

  • Margen superior: 2vw

margen superior en el botón

Agregar módulo divisor a la columna 3

Visibilidad

Debajo del botón, agregue un divisor y aplique el siguiente estilo.

  • Visibilidad: si

divisor de visibilidad

Línea

Dale al divisor un color verde brillante.

  • Color de línea: # 55f252

configuración de color del divisor

Dimensionamiento

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

  • Divisor de peso
    • Escritorio: 7px
    • Tableta + teléfono: 4px
  • Anchura:
    • Escritorio: 10%
    • Tableta + teléfono: 30%
  • Alineación del módulo: centro

Configuración del divisor col3

Avance

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

Escritorio

vista previa de escritorio héroe polaroid

Móvil

vista previa móvil héroe polaroid

¡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 tus propios diseños creativos de sección de héroe! Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación.