Creazione di una sezione di un eroe Polaroid con le opzioni di trasformazione di Divi

Le sezioni degli eroi creativi rendono i siti web memorabili e speciali. Questo design della sezione di un eroe polaroid evoca un senso di voglia di viaggiare vintage. Utilizzando le opzioni di trasformazione delle colonne, le polaroid possono essere disposte nel modo desiderato, come se fossero disposte su un tavolo.

Puoi ricreare questo design della sezione dell'eroe polaroid con le tue immagini quadrate. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Desktop

Mobile

Scarica GRATUITAMENTE il design della sezione Polaroid Hero

Per mettere le mani sul design della sezione dell'eroe polaroid gratuito, dovrai prima scaricarlo utilizzando il pulsante qui sotto. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare

Aggiungi nuova sezione

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando.

Divisore inferiore

Aggiungi un divisore inferiore verde menta.

• Posizionamento del divisore: in basso
• Stile divisore: #12
• Colore divisore: verde menta #d2f2d0
• Altezza divisore: 23vw

Spaziatura

Regola la spaziatura della sezione.

• Margine superiore: 7vw
• Margine inferiore: 0px
• Imbottitura superiore e inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla tua sezione. Scegli la seguente struttura di colonne:

Dimensionamento

Ora, regola le dimensioni della riga.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 90vw
• Larghezza massima: 100%

Spaziatura

Quindi, regola l'imbottitura superiore e inferiore nelle impostazioni di spaziatura.

• Imbottitura superiore e inferiore: 0px

Schermo

Aggiungi una riga di codice CSS all'elemento principale della riga per mantenere le colonne una accanto all'altra su schermi di dimensioni più piccole.

• CSS personalizzato – Elemento principale: display: flex;

display: flex;

Aggiungi modulo immagine alla colonna 1

Carica immagine quadrata

Aggiungi un modulo immagine alla colonna 1 e carica un'immagine quadrata.

Allineamento

Ora, regola l'allineamento del modulo.

• Allineamento del modulo: Centro

Dimensionamento

Quindi, crea il modulo a larghezza intera.

• Forza intera larghezza: Sì

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Aggiungi un modulo di testo e inserisci del contenuto. Useremo la parola "polaroid".

Testo

Stile il carattere del testo.

• Carattere del testo: Advent Pro
• Allineamento del testo: Centro
• Colore del testo: grigio molto scuro #474747
• Dimensione del testo:
  • Desktop: 1vw
  • Tablet + Telefono: 2vw
• Spaziatura delle lettere del testo: 0.1vw
• Altezza riga di testo: 1,8 em

Dimensionamento

Usa '100%' per la larghezza nelle impostazioni di dimensionamento.

• Larghezza: 100%

Spaziatura

Ora regola la spaziatura.

• Margine superiore: 1vw

Clona i moduli due volte e posiziona i duplicati nelle colonne rimanenti

Cambia immagine e copia dei duplicati

Cambia le immagini in ogni modulo immagine duplicato. Se il tuo design lo richiede, cambia anche il contenuto del testo.

Impostazioni colonna 1

Sfondo

Continua aprendo le impostazioni della colonna 1 della riga. Imposta lo sfondo su bianco per creare l'effetto polaroid.

• Colore di sfondo: bianco #ffffff

Spaziatura

Aggiungi un po' di imbottitura inferiore per creare il bordo inferiore della polaroid più ampio.

• Imbottitura inferiore: 2vw

Frontiera

Aggiungi un bordo per completare la polaroid visual.

• Larghezza bordo su 4 lati: 1vw
• Larghezza bordo superiore: 2vw
• Larghezza bordo destro: 2vw
• Larghezza bordo inferiore: 1vw
• Larghezza bordo sinistro: 2vw
• Colore bordo: bianco #ffffff

Scatola ombra

Completa le impostazioni della colonna 1 aggiungendo un'ombra sottile.

• Ombra scatola: #1

Estendi le impostazioni della colonna 1

Utilizzare l'opzione estendi stili per estendere le impostazioni delle colonne.

• Torna alla finestra delle impostazioni della riga principale e fai clic sui tre punti a destra della scheda della prima colonna.
• Seleziona "Estendi gli stili degli elementi" e seleziona "In tutta questa riga".

Stili di trasformazione colonna 1

Ora, regola le impostazioni di trasformazione nella prima colonna.

• Trasforma Traduci: asse x -11vw, asse y -6vw
• Trasforma Ruota: 341 gradi, 1a opzione

Stili di trasformazione colonna 2

Quindi, regola le impostazioni di trasformazione per la seconda colonna.

• Trasforma Trasla: asse x -22w, asse y 0vw
• Trasforma Ruota: 10 gradi, prima opzione

Colonna 3 Stili di trasformazione

Infine, regola le impostazioni di trasformazione per la colonna tre.

• Scala di trasformazione: 68% su entrambi gli assi
• Trasforma Traduci: asse x -46w, asse y 12vw
• Trasforma Ruota: 31 gradi, 1a opzione

Aggiungi nuova sezione

Sfondo

Aggiungi una nuova sezione e applica uno sfondo verde menta alla sezione.

• Colore di sfondo: verde menta #d2f2d0

Divisore inferiore

Assegna alla sezione un divisore inferiore.

• Posizionamento del divisore: in basso
• Stile divisore: #12
• Colore divisorio: bianco #ffffff
• Altezza divisore: 23vw

Spaziatura

Rimuovi l'imbottitura superiore predefinita.

• Imbottitura superiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga con 3 colonne.

Copia e incolla gli stili di riga

Usando la vista wireframe, copia e incolla gli stili di riga dalla prima sezione

• Innanzitutto, fai clic sui tre punti a destra del menu delle righe all'interno della prima sezione. Seleziona "copia stili di riga".
• Quindi, fai clic sui tre punti a destra del menu delle righe nella seconda sezione. Seleziona "Incolla stili di riga".

Copia e incolla le impostazioni della colonna

Ora copia le impostazioni della colonna nella prima riga e incollale nelle colonne 1 e 2 nella nuova riga.

• Innanzitutto, apri le impostazioni della riga nella prima riga.
• In secondo luogo, fai clic sui tre punti sul lato destro della scheda della prima colonna e seleziona "copia stili oggetto".
• Quindi, scorri verso il basso fino alla nuova riga e apri la scheda delle impostazioni.
• Infine, fai clic sui tre punti sul lato destro della prima colonna e seleziona "Incolla stili oggetto".

Stili di trasformazione colonna 1

Ora, regola gli stili di trasformazione nella colonna 1.

• Scala di trasformazione: 75% entrambi gli assi
• Trasforma Traduci: asse x -8w, asse y -14vw
• Trasforma Ruota: 35 gradi prima opzione

Stili di trasformazione colonna 2

Quindi, modifica gli stili di trasformazione nella colonna 2.

• Trasforma Traduci: asse x-17w, asse y 2vw
• Trasforma Ruota: 346 gradi prima opzione

Aggiungi moduli immagine

Duplica e trascina moduli immagine

Ora torna alla vista wireframe per duplicare e trascinare due moduli immagine.

• Innanzitutto, duplica due volte il primo modulo immagine nella prima sezione.
• Quindi, trascinali nella prima e nella seconda colonna della seconda sezione.
• Cambia l'immagine in ogni modulo per una nuova immagine quadrata.

Aggiungi moduli di testo

Duplica e trascina moduli di testo

Dopo le immagini, fai lo stesso con i moduli di testo. Duplica dalla prima sezione e trascina nella seconda sezione.

• Nella vista wireframe, duplica due volte il modulo di testo dalla prima colonna nella prima sezione.
• Ora trascina i nuovi moduli di testo nelle colonne 1 e 2 nella seconda sezione.
• Se desideri modificare il contenuto, fallo ora.

Aggiungi modulo di testo alla colonna 3

Aggiungi contenuto

Fare clic sul simbolo più nella terza colonna e aggiungere un modulo di testo. Inserisci alcuni contenuti di H2 e paragrafo.

Testo

Stile il testo come segue.

• Carattere del testo: Advent Pro
• Allineamento del testo: Centro
• Colore del testo: grigio scuro #848484
• Dimensione del testo:
  • Desktop: 1vw
  • Tablet + Telefono: 1.9vw
• Spaziatura delle lettere del testo: 0.1vw
• Altezza riga di testo:
  • Desktop: 1.2em
  • Tablet + Telefono: 1.3em

Testo dell'intestazione

Ora, modella il testo H2.

• Intestazione: H2
• Carattere H2: Adamina
• Peso carattere H2: grassetto
• Colore carattere H2: grigio molto scuro #444444
• Dimensione carattere H2:
  • Desktop: 2vw
  • Tablet + Telefono: 3vw
• Spaziatura lettere H2: 4px
• Altezza linea H2:
  • Desktop: 1.7vw
  • Tablet + Telefono: 1.5vw

Dimensionamento

Quindi, regola le dimensioni.

• Larghezza:
  • Desktop: 60%
  • Compressa: 91%
  • Telefono: 100%
• Allineamento del modulo: Centro

Spaziatura

Infine, regola la spaziatura.

• Margine superiore: -12vw

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Fare clic sul simbolo più sotto il testo e aggiungere un modulo pulsante. Aggiungi una copia al pulsante.

Allineamento

Modificare l'allineamento dei pulsanti.

• Allineamento: Centro

Stili di pulsanti personalizzati

Stile il pulsante di conseguenza.

• Dimensione del testo del pulsante:
  • Desktop: 1vw
  • Tablet: 2.4vw
  • Telefono: 2.3vw
• Larghezza bordo pulsante: 0px
• Colore del testo del pulsante: nero # 000000
• Spaziatura lettere pulsanti: 4px
• Carattere pulsante: Advent Pro
• Peso del carattere del pulsante: grassetto

Spaziatura

Applicare un valore del margine superiore.

• Margine superiore: 2vw

Aggiungi modulo divisore alla colonna 3

Visibilità

Sotto il pulsante, aggiungi un divisore e modella come segue.

• Visibilità: Sì

Linea

Dai al divisore un colore verde brillante.

• Colore linea: #55f252

Dimensionamento

Modifica le impostazioni di dimensionamento del divisore e il gioco è fatto!

• Peso del divisore
  • Desktop: 7px
  • Tablet + Telefono: 4px
• Larghezza:
  • Desktop: 10%
  • Tablet + Telefono: 30%
• Allineamento del modulo: Centro

Anteprima

Diamo un'occhiata di nuovo al design finito della sezione dell'eroe polaroid su schermi di diverse dimensioni.

Desktop

Mobile

È un involucro!

In questo post, ti abbiamo mostrato come ricreare una sezione di un eroe polaroid usando le opzioni di trasformazione di Divi. Questo è un ottimo modo per mostrare più immagini nella sezione degli eroi della tua pagina. Speriamo che questo design ispiri i tuoi progetti di sezioni degli eroi creativi! Se hai domande, assicurati di lasciare un commento nella sezione commenti qui sotto.