Come creare una pagina della lista dei regali per il tuo matrimonio con Divi

Questo post fa parte 3 di 5 nella nostra miniserie Come creare un sito Web di matrimonio elegante con Divi. In questa serie, ti guideremo attraverso le parti più importanti della creazione di un sito Web per matrimoni per te o per un cliente con Divi.

Nelle prime due parti della nostra miniserie, ti abbiamo mostrato come creare un'elegante pagina di annuncio di matrimonio e una pagina galleria con Divi. Questa terza parte sarà dedicata alla creazione di una pagina della lista dei regali all'interno del sito web del tuo matrimonio.

Ti mostreremo passo dopo passo come creare il seguente layout con il Visual Builder di Divi:

Il layout ha cinque sezioni e ognuna di esse contribuisce con il proprio valore all'insieme. Entriamo nel primo!

La sezione degli eroi

La sezione degli eroi è davvero semplicistica, ma è esattamente quello che stiamo cercando in questa miniserie; semplicità ed eleganza. Stiamo usando la stessa tavolozza di colori dei due precedenti tutorial sul matrimonio, quindi se stai seguendo puoi facilmente aggiungere questa pagina al sito web del matrimonio che hai già iniziato a creare.

Iniziare

Inizia aggiungendo una nuova pagina al tuo sito Web WordPress e assegnandogli un nome. Dopodiché, attiva Divi Builder e passa subito a Visual Builder.

Aggiungi una nuova sezione alla pagina che hai appena creato. Apri le impostazioni della sezione e modifica l'immagine di sfondo nella sottocategoria Sfondo della scheda Contenuto. In questo esempio, abbiamo preso un'immagine simmetrica per lo sfondo della sezione per dare quell'effetto extra.

Continua aggiungendo una riga a larghezza intera alla sezione. Apri le impostazioni della riga e modifica il Colore di sfondo in "rgba(122,122,122,0.56)" nella sottocategoria Sfondo della scheda Contenuto.

Andando avanti, vai alla scheda Design. Aprire la sottocategoria Dimensionamento, rendere la riga a larghezza intera e immettere "1" per Larghezza grondaia.

Scorri verso il basso e apri la sottocategoria Spaziatura. Dovremo aggiungere "200 px" al riempimento superiore e inferiore per i desktop e "150 px" al riempimento superiore e inferiore per tablet e telefoni.

Nella stessa sottocategoria, aggiungi "-50px" al margine superiore e inferiore per tablet e telefoni.

Primo modulo di testo

Andando avanti, aggiungi un nuovo modulo di testo alla riga. Aggiungi il tuo testo nella sottocategoria Testo della scheda Contenuto. Successivamente, vai alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

• Orientamento del testo: al centro
• Carattere del testo: mandarino
• Dimensione carattere del testo: 100 (desktop e tablet), 68 (telefono)
• Colore del testo: #fffaf6
• Altezza riga di testo: 1,5 em

Secondo modulo di testo

Crea un altro modulo di testo proprio sotto di esso. Vai alla scheda Contenuto e inserisci il tuo testo nella sottocategoria Testo. Quindi, vai alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

• Orientamento del testo: al centro
• Carattere del testo: Raleway Light
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 20px (desktop), 14px (tablet e telefono)
• Colore del testo: #fffaf6
• Altezza riga di testo: 1,5 em

La tua intestazione dovrebbe essere simile a questa finora:

La sezione introduttiva

In questo layout, vogliamo dare alle persone una scelta. Possono scegliere se vogliono comprare qualcosa per la sposa, lo sposo o per entrambi.

Inizia creando una nuova sezione e aggiungi una riga con una colonna. Cambia il colore di sfondo in "#fffaf6" nella sottocategoria Sfondo della scheda Contenuto. Successivamente, apri le impostazioni della riga e vai alla scheda Progettazione. Aggiungi '5%' al margine superiore e inferiore solo per i desktop.

Titolo della sezione

In questa riga. l'unica cosa che dovremo aggiungere è un modulo di testo. Digita il titolo che desideri venga visualizzato nella sottocategoria Testo della scheda Contenuto. Passa alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

• Orientamento del testo: al centro
• Carattere del testo: mandarino
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 60 px (desktop), 50 px (tablet e telefono)
• Colore del testo: #9b857b
• Altezza riga di testo: 1,7 em

Ora apri la sottocategoria Ridimensionamento e cambia la Larghezza massima in "500 px".

Continua aprendo la sottocategoria Spaziatura nella stessa scheda e aggiungi "3%" all'imbottitura superiore e inferiore.

Quindi, vai alla scheda Avanzate e aggiungi il seguente codice all'elemento principale nella sottocategoria CSS personalizzato:

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

Ora aggiungi un'altra riga con una colonna alla stessa sezione. Non è necessario modificare nulla nelle impostazioni di questa riga.

Modulo immagine

Aggiungi un modulo immagine alla riga e carica l'immagine nella sottocategoria Immagine della scheda Contenuto. Quindi, vai alla scheda Design, rimuovi lo spazio sotto l'immagine, seleziona "Centra" per l'allineamento dell'immagine e centra sempre l'immagine sul dispositivo mobile.

Successivamente, vai alla scheda Avanzate e aggiungi il seguente codice al campo Elemento principale all'interno della sottocategoria CSS personalizzato:

height: 100px;
width: 150px;

Primo modulo di testo

Sotto il modulo immagine, aggiungi il primo modulo testo della sezione. Immettere il testo nella casella di testo all'interno della sottocategoria Testo della scheda Contenuto e passare alla scheda Progettazione. All'interno della sottocategoria Testo, apporta le seguenti modifiche:

• Orientamento del testo: al centro
• Carattere del testo: Raleway Light
• Dimensione carattere del testo: 24px
• Colore del testo: #9b857b
• Altezza riga di testo: 1,5 em

Scorri verso il basso la stessa scheda e aggiungi "30px" al margine superiore all'interno della sottocategoria Spaziatura.

Ultimo ma non meno importante, vai alla scheda Avanzate dello stesso modulo di testo e aggiungi il seguente codice all'elemento principale all'interno della sottocategoria CSS personalizzato:

font-weight:400;

Secondo modulo di testo

Aggiungi un altro modulo di testo alla sezione e digita il testo nella casella di testo all'interno della sottocategoria Testo della scheda Contenuto. Quindi, passa alla scheda Progettazione e apporta le seguenti modifiche:

• Orientamento del testo: al centro
• Carattere del testo: Raleway Light
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 16px
• Colore del testo: #9b857b
• Altezza riga di testo: 1,5 em

Scorri verso il basso la stessa scheda e modifica la Larghezza massima in "300 px" nella sottocategoria Ridimensionamento. Cambia anche il margine superiore in "5%" nella sottocategoria Spaziatura.

Quindi, vai alla scheda Avanzate e aggiungi il seguente codice all'elemento principale all'interno della sottocategoria CSS personalizzato:

font-weight: 300;

Clona modulo immagine e moduli di testo

Aggiungi un'altra riga, ma questa volta con tre colonne, alla stessa sezione.

La prima colonna e l'ultima colonna della riga necessitano degli stessi moduli della riga precedente; un Modulo Immagine e due Moduli Testo. Questi moduli devono avere le stesse impostazioni di quelli che abbiamo creato prima, quindi l'unica cosa che faremo è clonarli. Dopo aver clonato ogni modulo due volte, inseriscili nella colonna sinistra e destra della nuova riga e modifica l'immagine e il testo.

Quindi, vai alla scheda Progettazione della riga e aggiungi "5%" al margine inferiore all'interno della sottocategoria Spaziatura.

Modulo immagine della sposa

Ora aggiungi un modulo immagine alla seconda colonna della riga. Carica l'immagine e vai alla scheda Design. Assicurati di posizionare l'allineamento dell'immagine su "Sinistra" e di attivare l'opzione "Centra sempre immagine su dispositivo mobile" nella sottocategoria Allineamento.

Scorri verso il basso la stessa scheda e aggiungi "5%" al margine superiore all'interno della sottocategoria Spaziatura.

Quindi, vai alla scheda Avanzate e aggiungi il seguente codice all'elemento principale all'interno della sottocategoria CSS personalizzato:

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

Infine, disabilita il Modulo Immagine su telefoni e tablet.

Modulo immagine dello sposo

Clonare il modulo immagine precedente e posizionarlo nella stessa colonna del precedente. Modifica l'immagine caricata e passa alla scheda Design. Apri la sottocategoria Allineamento e modifica l'allineamento dell'immagine su "Destra".

Inoltre, regola il Margine superiore su "-60%" nella sottocategoria Spaziatura.

Ora possiamo passare alla sezione della lista dei regali del layout. Il tuo layout dovrebbe essere simile a questo finora:

Lista dei desideri/lista dei regali

Aggiungi una nuova sezione standard e cambia il colore di sfondo in "#fae4de" nella sottocategoria Sfondo della scheda Contenuto.

Modulo di testo: Titolo

Aggiungi una riga a larghezza intera alla sezione e rendila a larghezza intera. Successivamente, clona il modulo di testo che abbiamo creato nella seconda sezione e posizionalo in questo modulo di riga. Cambia il testo nei messaggi di testo e cambia il colore di sfondo in "#fffaf6" nel campo Elemento principale all'interno della sottocategoria CSS personalizzato di Avanzate scheda.

Lista dei regali/lista dei desideri: utilizzo del modulo slider

Aggiungi una nuova riga con 3 colonne alla sezione e modifica la Larghezza personalizzata '65%' nella sottocategoria Dimensionamento della scheda Design. Continua aggiungendo un modulo di testo alla prima riga e apporta le seguenti modifiche alla sottocategoria Testo della scheda Progettazione:

• Orientamento del testo: al centro
• Carattere del testo: Raleway Light
• Stile del carattere del testo: grassetto
• Dimensione carattere del testo: 24 px
• Colore del testo: #9b857b
• Altezza riga di testo: 1,5 em

Scorri verso il basso la stessa scheda e aggiungi "30px" al margine superiore all'interno della sottocategoria Spaziatura.

Ora clona il modulo di testo due volte e inseriscine uno in ogni colonna.

Quindi, aggiungi un modulo di scorrimento. Vai alla scheda Avanzate del dispositivo di scorrimento e aggiungi il seguente codice all'elemento principale all'interno della sottocategoria CSS personalizzato:

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

Andando avanti, aggiungi una nuova diapositiva. All'interno della diapositiva, carica un'immagine di sfondo di uno degli articoli che desideri inserire nell'elenco dei regali nella sottocategoria Sfondo della scheda Contenuto. Quindi, inserisci il nome dell'elemento e il testo del pulsante nella sottocategoria Testo della stessa scheda. Modifica anche l'URL nella sottocategoria Link. Aggiungi tutte le diapositive di cui hai bisogno all'interno di una categoria e ripeti la stessa cosa.

Continua aggiungendo una nuova riga, ma ora con solo 2 colonne.

Modifica la Larghezza personalizzata in "55%" nella sottocategoria Ridimensionamento della scheda Progettazione e modifica il margine inferiore in "5%" nella sottocategoria Spaziatura.

Il modulo di testo e il modulo di scorrimento che abbiamo creato nel precedente modulo di riga hanno le stesse impostazioni di cui abbiamo bisogno in tutti gli altri moduli di testo e dispositivi di scorrimento. Vai avanti e clona entrambi quattro volte e posizionali nelle colonne rimanenti di ciascun modulo di riga.

Il tuo layout dovrebbe essere simile a questo ora:

Il modulo di contatto (desktop)

Lo scopo del modulo di contatto nel layout è quello di consentire alle persone di trasmettere quale regalo stanno acquistando per la coppia. Non appena un regalo viene preso, può essere sostituito con un altro sul sito web. In questo modo, diventa meno probabile che due ospiti portino lo stesso regalo.

Crea una nuova sezione standard e cambia il colore di sfondo in #fffaf6 nella sottocategoria Sfondo della scheda Contenuto.

Prima riga

La riga di cui abbiamo bisogno in questa sezione è la stessa delle altre sezioni. Basta clonare il modulo riga utilizzato in precedenza con il modulo testo e posizionarlo all'interno della sezione. L'unica cosa che dovrai fare è apportare alcune modifiche alle impostazioni del modulo di testo. Cambia il colore del testo e dello sfondo nell'elemento principale in #fae4de.

Seconda fila

Ora aggiungi una riga con due colonne e nascondi la riga su tablet e telefoni all'interno della sottocategoria Visibilità della scheda Avanzate. Inserisci un modulo di contatto nella prima colonna e apporta le seguenti modifiche alle diverse sottocategorie della scheda Progettazione.

Testo del campo modulo:

• Carattere del campo modulo: Raleway Light
• Dimensione carattere campo modulo: 18px
• Colore testo campo modulo: #9b857b
• Altezza della linea del campo modulo: 1,7 em

Frontiera:

• Raggio del bordo di ingresso: 15
• Usa bordo: Sì
• Colore bordo: #d7dce1
• Larghezza bordo: 1px
• Stile bordo: solido

Pulsante:

• Dimensione del testo del pulsante: 15
• Dimensione del testo del pulsante: 15
• Colore del testo del pulsante: #fffaf6
• Colore di sfondo del pulsante: #9b857b
• Larghezza bordo pulsante: 9
• Colore bordo pulsante: # 9b857b
• Raggio del bordo del pulsante: 4

Nella scheda Contenuto del modulo Modulo di contatto, ora puoi aggiungere tre campi; Nome, email e messaggio.

Cambia manualmente il colore di sfondo di ogni campo in #fae4de.

Ultimo ma non meno importante, aggiungeremo un modulo di testo alla seconda colonna per informare i tuoi ospiti sul processo. Vai alla scheda Design e apporta le seguenti modifiche alla categoria Testo:

• Orientamento del testo: al centro
• Carattere del testo: Raleway Light
• Stile carattere Tet: grassetto
• Dimensione carattere del testo: 16
• Colore del testo: #9b857b
• Altezza linea lettera: 1,5 em

Scorri verso il basso la stessa scheda e aggiungi "300 px" alla Larghezza massima all'interno della sottocategoria Dimensionamento.

Infine, digita "5px" nel margine superiore all'interno della sottocategoria Spaziatura.

Il modulo di contatto (tablet e telefono)

Clona la riga creata in precedenza e fai semplicemente in modo che il modulo modulo di contatto e il modulo testo si scambino le posizioni (e le colonne). Vai alla scheda Avanzate e nascondi la riga per i desktop.

Il tuo layout dovrebbe ora, e infine, assomigliare a questo:

Prossimo

Nella quarta parte di questa miniserie, ti mostreremo come creare un libro degli ospiti online per il tuo matrimonio con Divi e auto testimonial. Se hai commenti su questo tutorial o se hai richieste per tutorial futuri; assicurati di lasciare un commento nella sezione commenti di questo post del blog in modo che possiamo risponderti!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!