Creazione di una struttura di progettazione diagonale con le opzioni di trasformazione di Divi (download gratuito!)

Siamo sempre alla ricerca di modi per espandere le possibilità di design che hai con Divi. E da quando è uscito l'aggiornamento delle opzioni di trasformazione, sono diventate possibili molte nuove tecniche, senza la necessità di conoscenze di codifica personalizzate.

In questo post, ti mostreremo come creare una straordinaria struttura di design diagonale. Il design che ricreeremo funziona alla grande per la sezione degli eroi e corrisponde a qualsiasi tipo di sito Web che desideri configurare. Alla fine del tutorial, potrai anche scaricare gratuitamente il file JSON!

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 creando una nuova pagina o aprendone una esistente e aggiungi una sezione normale. Apri le impostazioni della sezione e aggiungi uno sfondo sfumato utilizzando le seguenti impostazioni:

• Colore 1: #ffd633
• Colore 2: #efefef
• Direzione gradiente: 217deg
• Posizione di partenza: 45%
• Posizione finale: 45%

Spaziatura

Quindi, vai alla scheda Design e aggiungi un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 4vw
• Imbottitura inferiore: 12vw

traboccamento

Dobbiamo assicurarci che le opzioni di trasformazione non superino il contenitore della sezione. Per ottenere ciò, aggiungeremo una singola riga di codice CSS all'elemento principale della sezione.

overflow: hidden;

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo la prima riga utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo. Nel passaggio successivo di questo post, sostituiremo lo spazio appena rimosso aggiungendo alcuni valori di riempimento sinistro e destro personalizzati utilizzando un'unità di visualizzazione. Ciò assicurerà che il design rimanga reattivo su tutte le dimensioni dello schermo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Vai avanti e aggiungi alcuni valori di riempimento personalizzati alle impostazioni di spaziatura successiva.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 25vw (Desktop), 16vw (Tablet), 7vw (Telefono)
• Imbottitura destra: 25vw (desktop e tablet), 27vw (telefono)

Schermo

Ci stiamo anche assicurando che le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo Blurb alla colonna 1

Aggiungi titolo

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo Blurb alla colonna 1 e inserisci un titolo a tua scelta.

Carica illustrazione

Continua caricando un'illustrazione a tua scelta. Quelli che useremo in questo tutorial fanno parte dell'App Developer Layout Pack. Puoi scaricare le illustrazioni gratuitamente andando sul post e scaricandole alla fine.

Sfondo

Quindi, aggiungi un colore di sfondo completamente bianco al modulo Blurb.

• Colore di sfondo: #ffffff

Impostazioni del testo del titolo

Passa alla scheda Design e modifica le impostazioni del testo del titolo di conseguenza:

• Carattere del titolo: Poppins
• Peso del carattere del titolo: semi grassetto
• Stile carattere del titolo: maiuscolo
• Allineamento del testo del titolo: al centro
• Dimensione del testo del titolo: 0,5 vw (desktop), 1,6 vw (tablet), 2,4 vw (telefono)
• Spaziatura tra lettere del titolo: 1px
• Altezza della riga del titolo: 1,6 em

Spaziatura

Modificare le impostazioni di spaziatura successiva.

• Imbottitura superiore: 1.3vw (desktop), 4vw (tablet), 6vw (telefono)
• Imbottitura inferiore: 1.3vw (desktop), 4vw (tablet), 6vw (telefono)
• Imbottitura sinistra: 1vw (desktop), 7vw (tablet e telefono)
• Imbottitura destra: 1vw (desktop), 7vw (tablet e telefono)

Frontiera

Continua aggiungendo "1vw" negli angoli in alto a sinistra e in alto a destra del modulo Blurb.

Scatola ombra

Ultimo ma non meno importante, aggiungi un'ombra di scatola al modulo utilizzando le seguenti impostazioni:

• Posizione verticale dell'ombra del riquadro: 10 px
• Forza sfocatura ombra scatola: 60 px
• Colore dell'ombra: rgba (39,39,52,0.37)

Clona il modulo Blurb due volte e posiziona i duplicati nelle colonne rimanenti

Dopo aver personalizzato il modulo Blurb, puoi procedere e clonarlo due volte. Posiziona i duplicati nelle due colonne rimanenti della riga.

Modifica duplicato #1

Modifica copia e illustrazione

Modificare la copia e l'illustrazione del primo duplicato.

Cambia spaziatura

Insieme alle impostazioni di spaziatura.

• Margine superiore: -3vw
• Imbottitura superiore: 2.7vw (desktop), 8vw (tablet), 11vw (telefono)
• Imbottitura inferiore: 2.7vw (desktop), 8vw (tablet), 11vw (telefono)

Cambia duplicato #2

Modifica copia e illustrazione

Modifica anche la copia e l'illustrazione del secondo duplicato.

Aggiungi riga #2

Struttura della colonna

Alla prossima riga! Utilizzare la seguente struttura a colonne:

Sfondo sfumato

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato.

• Colore 1: #fff20a
• Colore 2: #ffb200
• Direzione del gradiente: 165 gradi

Dimensionamento

Quindi, vai alla scheda Design e abilita l'opzione "Rendi questa riga a tutta larghezza".

• Rendi questa riga a larghezza intera: Sì

Scatola ombra

Ultimo ma non meno importante, aggiungi un'ombra di riquadro alla riga.

• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura dell'ombra della scatola: 100 px
• Colore ombra: rgba(0,0,0,0.39)

Aggiungi modulo divisore

Visibilità

Utilizziamo questa riga solo per scopi di progettazione, non per mostrare alcun modulo. Ma per assicurarci di sapere esattamente come appare la riga, dovremo aggiungere un modulo divisore. Non vogliamo che il modulo venga visualizzato, quindi assicurati che l'opzione "Mostra divisore" sia disabilitata.

• Mostra divisore: No

Applica le opzioni di trasformazione alle righe

Riga #1

Trasforma Traduci

Ora che abbiamo completato le prime due righe, le trasformeremo per adattarle alla struttura del design diagonale che intendiamo creare. Inizia aprendo le impostazioni della prima riga e modifica i valori di traduzione della trasformazione.

• In basso: 30vw
• Destra: 6vw

Trasforma Ruota

Quindi, cambia il valore di rotazione della trasformazione a sinistra.

• Sinistra: 37 gradi

Riga #2

Trasforma scala

Continua aprendo l'impostazione della seconda riga e modifica i valori della scala di trasformazione.

• In basso: 133% (Desktop), 171% (Tablet), 176% (Telefono)
• Destra: 133% (Desktop), 171% (Tablet), 176% (Telefono)

Trasforma Traduci

Insieme alla trasformazione, traduci i valori.

• In basso: 12vw (desktop), 1vw (tablet), 3vw (telefono)
• Destra: -2vw (Desktop), -6vw (Tablet), -4vw (Telefono)

Trasforma Ruota

E ruota anche la riga nelle impostazioni di rotazione della trasformazione.

• Sinistra: 37 gradi

Aggiungi riga #3

Struttura della colonna

Alla prossima e ultima riga! Puoi utilizzare questa riga e le sue colonne per condividere qualsiasi tipo di informazione desideri. Per ricreare il design esatto che hai visto nell'anteprima di questo post, seleziona la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto H1

È ora di iniziare ad aggiungere moduli! Inizieremo con un titolo Modulo di testo. Inserisci alcuni contenuti H1 a tua scelta.

Impostazioni testo H1

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

• Carattere dell'intestazione: Poppins
• Dimensione del testo dell'intestazione: 3vw (desktop), 5vw (tablet), 6vw (telefono)
• Spaziatura delle lettere dell'intestazione: -2px

Spaziatura

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

• Margine superiore: -6vw (desktop e tablet), 11vw (telefono)
• Margine sinistro: 10vw

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Il secondo modulo di cui abbiamo bisogno è un altro modulo di testo. Aggiungi alcuni contenuti a tua scelta.

Impostazioni testo

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

• Carattere del testo: Open Sans
• Dimensioni del testo: 0,8 vw (desktop), 1,5 vw (tablet), 2,2 vw (telefono)
• Altezza riga di testo: 2,6 em

Spaziatura

Modifica anche i valori di spaziatura.

• Margine superiore: 3vw (telefono), 5vw (telefono)
• Margine sinistro: 10vw
• Margine destro: 28vw (tablet), 20vw (telefono)

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Il prossimo e ultimo modulo di cui abbiamo bisogno è un modulo pulsante. Aggiungi una 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: 0,9 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefono)
• Colore del testo del pulsante: #000000
• Larghezza bordo pulsante: 1px
• Colore bordo pulsante: #000000
• Raggio del bordo del pulsante: 1px
• Carattere pulsante: Poppins
• Peso del carattere: leggero

Spaziatura

Ultimo ma non meno importante, modella il tuo modulo usando alcuni valori di spaziatura personalizzati e il gioco è fatto!

• Margine superiore: 2vw (desktop), 5vw (tablet e telefono)
• Margine sinistro: 10vw
• Imbottitura superiore: 1vw
• Imbottitura inferiore: 1vw
• Imbottitura sinistra: 3vw
• Imbottitura destra: 3vw

Scarica GRATUITAMENTE la sezione di progettazione diagonale

Per mettere le mani sulla sezione di progettazione diagonale gratuita, dovrai prima scaricarla utilizzando il pulsante in basso. 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!

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 creare una straordinaria struttura di design diagonale utilizzando solo le opzioni integrate di Divi. Speriamo che questo tutorial ti aiuti a familiarizzare con le nuove opzioni di trasformazione Divi. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!