Come impilare magnificamente gli elementi del portafoglio con le opzioni di trasformazione di Divi

Le nuove opzioni di trasformazione Divi hanno aperto un sacco di nuove porte verso la creazione di un web design visivamente accattivante. Ci avvicina di un passo al non aver bisogno di alcun software di modifica delle immagini quando si progetta un sito Web da zero. Possiamo trasformarlo in modo che appaia esattamente come vogliamo pur avendo un design reattivo al 100%.

In questo post, utilizzeremo le nuove opzioni di trasformazione per impilare magnificamente gli elementi del portafoglio. Questo è un ottimo approccio per mostrare siti Web precedentemente realizzati, ad esempio. Ci assicureremo inoltre che le immagini rimangano esattamente dove sono, indipendentemente dalle dimensioni dello schermo utilizzate dai visitatori. Speriamo che questo tutorial ti ispiri a diventare creativo con le nuove opzioni di trasformazione di Divi quando personalizzi un sito web in base alle tue esigenze.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Iniziamo a ricreare!

Aggiungi nuova sezione

Sfondo sfumato

Inizia aggiungendo una nuova sezione alla tua pagina. Apri le impostazioni della sezione e aggiungi uno sfondo sfumato.

• Colore 1: #f4f4f4
• Colore 2: RGB (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 30%
• Posizione finale: 30%

Spaziatura

Quindi, vai alla scheda Progettazione e modifica i valori di riempimento personalizzato nelle impostazioni di spaziatura.

• Imbottitura superiore: 0px (Desktop), 18vw (Tablet), 40vw (Telefono)
• Imbottitura inferiore: 0px (desktop), 18vw (tablet), 40vw (telefono)

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Quindi, vai alle impostazioni di spaziatura e rimuovi l'imbottitura predefinita superiore e inferiore.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Schermo

Ci stiamo anche assicurando che entrambe le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole. Per fare ciò, dovremo aggiungere una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi il modulo immagine n. 1 alla colonna 1

Carica immagine

Ora possiamo iniziare ad aggiungere i diversi moduli! Per poter seguire questo tutorial, vai avanti e salva la seguente schermata di stampa sul tuo computer:

Carica la schermata di stampa su un modulo immagine nella prima colonna.

Dimensionamento

Quindi, vai alla scheda di progettazione e abilita l'opzione "Forza larghezza intera". Una volta fatto, l'immagine occuperà l'intera larghezza della colonna.

• Forza intera larghezza: Sì

Spaziatura

Per ridurre le dimensioni dell'immagine, aggiungeremo dei margini sinistro e destro personalizzati. Noterai che stiamo utilizzando un'unità di visualizzazione per assicurarci che le dimensioni dell'immagine rimangano intatte, indipendentemente dalle dimensioni dello schermo.

• Margine superiore: -10vw
• Imbottitura sinistra: 11vw
• Imbottitura destra: 11vw

Frontiera

Aggiungi '2vw' a ciascuno degli angoli nelle impostazioni del bordo successivo.

Scatola ombra

Insieme a un'ombra di scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Trasforma Traduci

Ora possiamo iniziare a trasformare l'immagine! Aggiungi i seguenti valori alla scheda di conversione della trasformazione delle opzioni di trasformazione:

• In basso: -26vw
• Destra: -2vw

I valori che aggiungi qui dipendono dalla larghezza e dall'altezza della tua immagine, quindi se stai usando un'immagine diversa, dovrai modificare i valori di conseguenza. Assicurati di utilizzare le unità di visualizzazione per assicurarti che la posizione dell'immagine rimanga la stessa su tutte le dimensioni dello schermo.

Trasforma Ruota

Passa alla scheda di rotazione della trasformazione e ruota l'immagine di conseguenza:

• Sinistra: 24 gradi
• Centro: 46°
• Destra: -7deg

Traduci Skew

Ultimo ma non meno importante, abilita la traduzione skew con i seguenti valori:

• In basso: -4 gradi
• A destra: 24 gradi

Aggiungi il modulo immagine n. 2 alla colonna 1

Carica immagine

Al prossimo modulo immagine! Salva la seguente schermata di stampa sul tuo computer o usa un'altra schermata di stampa a tua scelta:

Continua caricando la schermata di stampa nel secondo modulo immagine nella colonna 1.

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e abilita l'opzione "Forza larghezza intera".

• Forza intera larghezza: Sì

Spaziatura

Stiamo riducendo le dimensioni dell'immagine e sovrapponendola all'immagine precedente utilizzando alcuni valori di margine personalizzati nelle impostazioni di spaziatura.

• Margine superiore: -81vw (desktop), -50vw (tablet e telefono)
• Margine sinistro: 11vw
• Margine destro: 11vw

Frontiera

Successivamente aggiungeremo "2vw" a ciascuno degli angoli nelle impostazioni del bordo.

Scatola ombra

E aggiungeremo anche un'ombra di scatola. Nota come stiamo usando un'ombra più scura per la seconda immagine dell'elemento del portfolio. Questo ti aiuterà a creare più profondità tra gli elementi del portfolio.

• Forza sfocatura ombra scatola: 150 px
• Colore ombra: rgba(0,0,0,0.6)

Trasforma Traduci

Quindi, vai alle impostazioni di trasformazione e modifica i valori di traduzione della trasformazione:

• In basso: -8vw
• Destra: 0px

Ancora una volta, questi valori dipendono in realtà da come si desidera posizionare lo schermo di stampa e dalle dimensioni dello schermo di stampa. Più piccola è l'immagine, più dovrai spingerla a sinistra usando un valore negativo più grande.

Trasforma Ruota

Passa alla scheda di rotazione della trasformazione e gioca con tutti e tre i valori.

• Sinistra: 24 gradi
• Centro: 46°
• Destra: -7deg

Traduci Skew

Ultimo ma non meno importante, modifica i valori di inclinazione della traduzione:

• In basso: -4 gradi
• A destra: 24 gradi

Aggiungi il modulo immagine n. 3 alla colonna 1

Carica immagine

Al successivo e ultimo modulo immagine di cui abbiamo bisogno nella colonna 1. Salva la seguente schermata di stampa sul tuo computer o usa qualsiasi altra schermata di stampa a tua scelta:

Aggiungi la schermata di stampa che hai salvato in un nuovo modulo immagine.

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e abilita l'opzione "Forza larghezza intera".

• Forza intera larghezza: Sì

Spaziatura

Vai alle impostazioni di spaziatura successiva e modifica i valori dei margini di conseguenza:

• Margine superiore: -107vw
• Margine sinistro: 19vw
• Margine destro: 19vw

Frontiera

Continua aggiungendo "2vw" a ciascuno degli angoli del modulo immagine.

Scatola ombra

Aggiungi un'ombra di casella successiva. Ancora una volta, stiamo usando un colore dell'ombra più forte di quelli che abbiamo usato per i due precedenti moduli immagine.

• Forza sfocatura ombra scatola: 200 px
• Colore ombra: rgba(0,0,0,0.82)

Trasforma Traduci

Quindi, vai alle impostazioni di trasformazione e modifica i valori di traduzione della trasformazione:

• In basso: -42vw
• Destra: 11vw

Trasforma Ruota

Passa alla scheda di rotazione della trasformazione e apporta alcune modifiche anche lì.

• Sinistra: 24 gradi
• Centro: 46°
• Destra: -7deg

Traduci Skew

Ultimo ma non meno importante, modifica i valori di inclinazione della traduzione.

• In basso: -4 gradi
• A destra: 24 gradi

Aggiungi il modulo di testo del titolo alla colonna 2

Aggiungi copia H2

Alla seconda colonna! Aggiungi un modulo di testo con alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

Vai alle impostazioni del testo H2 e apporta alcune modifiche.

• Intestazione 2 Carattere: Roboto
• Intestazione 2 Peso del carattere: sottile
• Intestazione 2 Allineamento del testo: a sinistra
• Colore testo titolo 2: #000000
• Titolo 2: Dimensione testo: 5vw (desktop), 6vw (tablet), 7vw (telefono)
• Intestazione 2 Spaziatura lettere: -1px

Spaziatura

Continua aggiungendo alcuni valori di margine personalizzati nelle impostazioni di spaziatura.

• Margine superiore: 35vw (desktop), 10vw (tablet), 0vw (telefono)
• Margine sinistro: -4vw
• Margine destro: 4vw

Aggiungi modulo divisore alla colonna 2

Visibilità

Il modulo successivo di cui abbiamo bisogno nella colonna 2 è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Colore

Quindi, vai alla scheda Design e cambia il colore del divisore.

• Colore: #8193fa

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 8px
• Larghezza: 28%

Spaziatura

E aggiungi alcuni valori di margine personalizzati.

• Margine superiore: 1vw
• Margine sinistro: -4vw
• Margine destro: 4vw

Aggiungi il modulo di testo descrittivo alla colonna 2

Aggiungi contenuto

Il prossimo modulo di cui abbiamo bisogno nella colonna 2 è un altro modulo di testo. Aggiungi del contenuto del paragrafo a tua scelta.

Impostazioni testo

Quindi, vai alle impostazioni del testo e apporta alcune modifiche.

• Carattere del testo: Open Sans
• Dimensione del testo: 0.6vw (desktop), 1.2vw (tablet), 1.8vw (telefono)
• Altezza riga di testo: 3.1em (desktop), 2.7em (tablet), 2.6em (telefono)
• Orientamento del testo: a sinistra

Spaziatura

Aggiungi successivamente alcuni valori di margine personalizzati.

• Margine superiore: 1vw
• Margine sinistro: -4vw
• Margine destro: 4vw

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno per completare il design è un modulo pulsante. Aggiungi qualche copia a tua scelta.

Impostazioni dei pulsanti

Quindi, vai alla scheda Design e modifica le impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore 1: #5627ba
• Colore 2: #8fb5fc
• Direzione gradiente: 122°
• Larghezza bordo pulsante: 0px
• Peso del carattere: Ultra grassetto
• Stile carattere: maiuscolo

Spaziatura

Modifica anche il margine personalizzato e i valori di riempimento.

• Margine superiore: 2vw (desktop), 3vw (tablet), 5vw (telefono)
• Margine inferiore: 6vw (tablet), 8vw (telefono)
• Margine sinistro: -4vw
• Margine destro: 4vw
• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 5vw (Tablet), 7vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 5vw (Tablet), 7vw (Telefono)

Scatola ombra

Ultimo ma non meno importante, aggiungi un'ombra sottile e il gioco è fatto!

• Forza sfocatura ombra scatola: 40 px
• Colore ombra: rgba(0,0,0,0.3)

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post, ti abbiamo mostrato come essere creativo con le nuove opzioni di trasformazione di Divi. Più specificamente, abbiamo impilato gli elementi del portfolio per creare un design piacevole e visivamente accattivante. Ci siamo anche assicurati che le immagini abbiano un bell'aspetto su tutte le dimensioni dello schermo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!