Come creare una home page di annuncio di matrimonio con Divi

Pubblicato: 2017-05-16

Questo post fa parte 1 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.

Impostare una pagina di annuncio di matrimonio è un modo creativo per far sapere ai tuoi ospiti che ti sposi. Fornendo loro l'URL del tuo sito web, rimarranno in contatto. Saranno anche in grado di vedere i dettagli del matrimonio online ogni volta che lo desiderano.

Diamo un'occhiata al layout della home page che ti aiuteremo a costruire passo dopo passo:

Creare il tuo menu di navigazione

Ti mostreremo esattamente come creare una pagina di annuncio, una pagina della galleria e una pagina della lista dei regali per il sito web del tuo matrimonio. Questo primo post è dedicato alla realizzazione della pagina di annuncio. Ma prima di andare lì, vogliamo assicurarci che gli ospiti possano orientarsi senza problemi nel tuo sito web.

Ecco perché dovrai prima creare un menu di navigazione adeguato ed elegante.

Inizia andando su Divi > Opzioni tema > e carica il logo che desideri utilizzare in tutto il tuo sito web.

Fai clic su Salva modifiche e passa alle pagine del tuo sito Web WordPress. Aggiungi una nuova pagina in cui creerai la pagina dell'annuncio. Fai la stessa cosa per la pagina della galleria e la pagina della lista dei regali che ti mostreremo come creare nei prossimi post.

Lasciamo per ora il contenuto vuoto e andiamo al Personalizzatore di temi del tuo sito web per modificare il menu di navigazione. Inizia aggiungendo le pagine del tuo sito web al tuo menu andando su Menu > Aggiungi un menu > Aggiungi le pagine al tuo menu . Questo menu dovrebbe essere il menu principale del tuo sito web.

Quindi, vai su Intestazione e navigazione> Barra dei menu principale e apporta le seguenti modifiche:

  • Altezza del menu: 66
  • Regola l'altezza massima del logo in base alle dimensioni dell'immagine
  • Dimensione del testo: 16
  • Spaziatura lettere: 2
  • Carattere: Raleway Light
  • Stile carattere: grassetto
  • Colore del testo: #9b7461
  • Colore di sfondo: rgba (155,116,97,0.13)

Ora torna a Intestazione e navigazione e cambia lo stile dell'intestazione in "Centrato" all'interno di Formato intestazione.

Salva e pubblica le modifiche apportate.

Inizia dalla pagina degli annunci

Il sito Web ha quattro sezioni e ognuna di esse contribuisce con il proprio valore al sito Web, rendendo completo il tuo annuncio di matrimonio. Spiegheremo ogni sezione in dettaglio e ti mostreremo come creare esattamente lo stesso design del layout mostrato sopra.

Sezione Eroe (incluso il conto alla rovescia)

La prima parte del design è l'intestazione. Abbiamo deciso di far sentire subito gli ospiti interagiti con il sito web e il matrimonio inserendo un Modulo Countdown. All'interno del Divi builder, la sezione dell'intestazione ha il seguente aspetto:

In questa parte del sito utilizzeremo una sezione standard con un'intera riga in modalità a larghezza intera. Nella sezione riga, dovrai aggiungere tre moduli; due moduli di testo e un modulo per il conto alla rovescia. Il modulo conto alla rovescia si trova al centro di entrambi i moduli di testo.

Inizia con il primo modulo di testo

Inizia aggiungendo un modulo di testo alla riga. Scrivi il testo che desideri utilizzare, modifica l'orientamento del testo in "Centro" e applica le seguenti modifiche alla scheda Impostazioni avanzate di progettazione:

  • Dimensione carattere del testo: 100 px (desktop), 80 px (tablet), 66 px (telefono)
  • Carattere del testo: mandarino
  • Colore del testo: #9b857b

Nella stessa scheda, scorri verso il basso e modifica i margini del tuo modulo di testo aggiungendo "10%" in alto e "5%" in basso.

Fare clic su Salva ed esci.

Modulo di conteggio (desktop)

Aggiungi un modulo per il conto alla rovescia sotto il modulo di testo appena creato. Nella scheda Impostazioni generali, aggiungi la data e l'ora del matrimonio e cambia il colore di sfondo in "#fae4de". Useremo questo conto alla rovescia solo su desktop, andremo avanti e disabilitarlo per tablet e telefoni.

Passa alle Impostazioni di progettazione avanzate e apporta le seguenti modifiche:

  • Carattere numeri: mandarino
  • Dimensione carattere numeri: 74px
  • Colore carattere numeri: #9b857b
  • Altezza riga numeri: 70 px
  • Carattere etichetta: Raleway Light
  • Dimensione carattere etichetta: 14px
  • Colore del testo dell'etichetta: #9b857b
  • Altezza linea etichetta: 25 px

Nella stessa scheda, scorrere fino in fondo e regolare l'imbottitura personalizzata superiore su "10%" e l'imbottitura personalizzata inferiore su "10%".

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

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Il tuo conto alla rovescia ora sarà esattamente come quello nell'immagine del layout che ti abbiamo mostrato sopra.

Modulo conto alla rovescia (tablet e telefono)

Ora vai avanti, clona il conto alla rovescia che hai fatto in precedenza e disabilitalo sul desktop (anziché su tablet e telefono). Successivamente, apporta le seguenti modifiche al modulo:

  • Dimensione carattere numeri: 72px (sia tablet che telefono)
  • Altezza riga numeri: 70 px
  • Dimensione carattere etichetta: 14 px (tablet), 12 px (telefono)

E cambia il codice nell'elemento principale della scheda CSS in: 

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Secondo modulo di testo

Ora, sotto il modulo Conto alla rovescia, aggiungi un altro modulo di testo. Nella scheda Impostazioni generali, modifica l'orientamento del testo in "Centro". Continua aggiungendo il nome dello sposo e della sposa e andando alla scheda Impostazioni avanzate di progettazione.

Nelle Impostazioni di progettazione avanzate, apportare le seguenti modifiche:

  • Carattere del testo: mandarino
  • Dimensione carattere del testo: 50 px
  • Colore del testo: #9b857b
  • Altezza riga di testo: 1,7 em

Continua a scorrere nella scheda Impostazioni avanzate di progettazione fino a Margine personalizzato e aggiungi "10%" al margine superiore.

Divisore

L'ultima parte di questa sezione degli eroi è il divisore. Aggiungi un divisore e cambia il colore nella scheda Generale in "#9b857b". Assicurati che anche il divisore sia reso "visibile".

Quindi, vai alla scheda Design e imposta lo stile del divisore "Solido", la posizione del divisore "In alto", cambia il peso del divisore in "1 px" e nascondilo sul cellulare.

Passa alla scheda CSS e aggiungi il seguente codice all'elemento principale: 

margin-left: auto;
margin-right: auto;
width: 30%;

Fare clic su Salva ed esci. Hai terminato la prima sezione del sito Web, che dovrebbe essere simile a questa:

Ora possiamo passare alla seconda parte di questo layout dove puoi iniziare a raccontare la tua storia agli ospiti.

Storytelling L'Annuncio: Seconda Sezione

Questa seconda sezione ha due righe simmetriche che formano una parte della homepage del matrimonio. Questa parte ha una larghezza leggermente più piccola che crea un po' più di prospettiva sul tuo sito web.

Prima riga della sezione

Inizia creando una sezione standard, cambia il colore di sfondo in "#fffaf6" e aggiungi "5%" all'imbottitura inferiore. Quindi, aggiungi una riga a due colonne a questa sezione.

Quindi, apri le impostazioni della riga. Nelle Impostazioni generali, seleziona "S" per utilizzare la larghezza personalizzata, cambia l'unità in percentuale e inserisci "90%". Scorri verso il basso nella stessa scheda, attiva Larghezza grondaia e nascondi per telefono e tablet.

Quindi, vai alla scheda Impostazioni di progettazione avanzate, equalizza le altezze delle colonne e aggiungi "# 9b857b" come colore di sfondo della prima colonna. Nella stessa scheda, cambia il riempimento della colonna 1 in "5%" in alto, "10%" a destra, "5%" in basso e "10%" a sinistra.

Per la seconda colonna, non sarà necessario impostare un colore di sfondo, ma caricare invece un'immagine di sfondo.

Modulo di testo

Ora aggiungi un modulo di testo nella prima colonna della riga. Nella scheda Impostazioni generali, posiziona l'orientamento del testo su "Centro" e digita il testo che desideri condividere nella casella di testo. Quindi vai alla scheda Impostazioni di progettazione avanzate.

Nella scheda Impostazioni di progettazione avanzate, apportare le seguenti modifiche:

  • Larghezza massima: 500 px (solo per desktop)
  • Carattere del testo: mandarino
  • Dimensione carattere del testo: 44
  • Colore del testo: #fffaf6

E aggiungi il 5% all'imbottitura inferiore.

Premi Salva ed esci e aggiungi un altro modulo di testo. Rendi "giustificato" l'orientamento del testo. Continua apportando le seguenti modifiche al Modulo di testo nelle Impostazioni di progettazione:

  • Larghezza massima: 500 px
  • Dimensione carattere del testo: 14px
  • Carattere del testo: Raleway Light
  • Stile carattere: grassetto
  • Colore carattere testo: #fffaf6
  • Altezza riga di testo: 1,7 em

Premi Salva ed esci.

Clona la riga precedente

Ora clona la riga che hai appena creato. La riga clonata verrà automaticamente posizionata sotto quella appena creata. Ma in questo caso, abbiamo bisogno che i moduli siano dalla parte opposta. Posiziona i due moduli di testo nella seconda colonna anziché nella prima.

Quindi, apri le impostazioni della riga e aggiungi un'immagine di sfondo alla prima colonna. Elimina tutte le impostazioni di riempimento che abbiamo effettuato nella prima colonna di riempimento e posizionale nella seconda colonna di riempimento.

Premi Salva ed esci e sei a posto.

Riga per telefono e tablet

Crea un'altra riga a due colonne e nascondi per desktop. Rendi la riga a larghezza intera e modifica la larghezza della grondaia in "3".

Successivamente, vai alla scheda Progettazione e carica un'immagine di sfondo per entrambe le colonne e apporta le seguenti modifiche all'imbottitura personalizzata di entrambe le colonne:

  • Superiore: 5%
  • Destra: 10%
  • Fondo: 5%
  • Sinistra: 10%

Dopo aver aggiunto questa seconda sezione, ecco come dovrebbe apparire il tuo layout in questo momento:

Miglior uomo, damigella d'onore, damigelle e testimoni dello sposo

Perché non mettere le persone più importanti della tua vita sul sito del tuo matrimonio? Rivelare chi saranno l'uomo migliore, la damigella d'onore, gli sposi e i testimoni dello sposo, può dare quella piccola spinta in più al tuo sito web.

Per aggiungere questa parte al tuo sito, inizia aggiungendo una nuova sezione standard alla tua pagina. All'interno di quella nuova sezione, dovrai creare tre righe con colonne e moduli diversi.

Ora, una volta creata la sezione, che è una sezione standard, assegnale il seguente colore di sfondo: '#fae4de'. Non dovrai modificare nient'altro nelle impostazioni della sezione, quindi puoi premere Salva ed esci.

Creazione del modulo di testo

Quindi, crea la tua prima riga a larghezza intera. L'unica cosa che dovrai inserire è un modulo di testo. Apri il modulo di testo, compila la casella di testo e seleziona "Centra" nel campo Orientamento testo.

Quindi vai su Impostazioni di progettazione avanzate, imposta il carattere del testo su "Mandarino", la dimensione del carattere del testo su "100 px" (desktop e tablet) e "68%" (telefono) e il colore del carattere del testo su "# 9b857b". Scorri verso il basso la stessa scheda e modifica i margini in "10%" in alto e "5%" in basso.

Fare clic su Salva ed esci. Il tuo primo modulo e riga ora sono finiti.

Aggiungi un'altra riga, in questo caso con due colonne e aggiungi il 5% al ​​margine superiore e inferiore. Quindi, aggiungi un modulo persona nella prima colonna della riga.

Il modulo immagine e persona

Andando avanti, apri le impostazioni del modulo persona. Carica un'immagine, inserisci l'URL dei canali di social media nei campi e scrivi qualcosa su di loro nella casella di testo. Se non sei sicuro delle dimensioni che dovrebbero avere le tue immagini, dai un'occhiata a questo post sul blog.

Quindi, vai alle Impostazioni di progettazione avanzate e apporta le seguenti modifiche:

  • Carattere intestazione: Raleway Light
  • Stile carattere intestazione: grassetto
  • Dimensione carattere intestazione: 14
  • Colore del testo dell'intestazione: #9b857b
  • Altezza riga di intestazione: 1em
  • Carattere del corpo: Raleway Light
  • Stile del carattere del corpo: grassetto
  • Dimensione carattere corpo: 14
  • Colore del corpo del testo: #9b857b
  • Altezza della linea del corpo: 1,7 em

Apri le impostazioni del modulo persona e vai alla scheda CSS. All'interno del campo Immagine membro, aggiungi il seguente codice: 

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Ora vai avanti e clona entrambi i moduli Immagine e Persona e inseriscili nella colonna di destra.

Continua aggiungendo una nuova riga con quattro colonne e clona nuovamente il modulo Immagine e Persona (quattro volte) e inseriscili in ogni colonna. Il codice e le impostazioni che abbiamo utilizzato la prima volta verranno applicati a tutti.

Il tuo layout dovrebbe assomigliare a questo ormai:

Dove e quando

Questa è l'ultima parte della home page del tuo matrimonio, dove informerai il tuo pubblico sul luogo e l'ora del tuo matrimonio. Per questa sezione, avremo bisogno di una riga con 3 colonne (1/2, 1/4, 1/4) con il seguente colore di sfondo: '#fffaf6'.

Aggiungere una mappa

Nella prima colonna di questa sezione, aggiungi un modulo Mappa. Per poter utilizzare la funzione Mappa, dovrai inserire una chiave API di Google. Se non disponi di una chiave API, leggi qui come crearne una. Inserisci l'indirizzo del tuo matrimonio e lascia che il modulo trovi la location. Per creare un segnaposto sulla mappa, aggiungi un nuovo segnaposto e inserisci nuovamente la posizione, il segnaposto verrà quindi visualizzato sulla mappa.

Nelle altre colonne, faremo uso di moduli di testo e blurb. Aggiungi un modulo di testo e imposta le impostazioni dell'Orientamento del testo nelle Impostazioni generali su "Centro". Quindi, vai alle Impostazioni di progettazione avanzate e apporta le seguenti modifiche:

  • Carattere del testo: mandarino
  • Dimensione carattere del testo: 50 px
  • Colore del testo: #9b857b
  • Altezza riga di testo: 1,7 em

Le impostazioni di questo modulo di testo si applicano ai moduli di testo in entrambe le colonne.

Modulo Blurb

Sotto il modulo di testo, aggiungi un modulo Blurb. Scegli l'icona della posizione, cambia il suo colore in "#f9c8b8", aggiungi la posizione nella casella di testo e cambia l'orientamento del testo in "Centro". Quindi, vai alle Impostazioni di progettazione avanzate e apporta le seguenti modifiche:

  • Dimensione carattere icona: 42px
  • Carattere del corpo: Raleway Light
  • Stile carattere: grassetto
  • Dimensione carattere corpo: 14
  • Colore del corpo del testo: #9b857b
  • Altezza della linea del corpo: 1em

Nella colonna successiva, fai esattamente la stessa cosa. Cambia solo l'icona blurb in un orologio e aggiungi i dettagli "quando" nella casella di testo.

Questo è tutto. Il tuo layout ora dovrebbe apparire liscio come il layout in questo tutorial:

Prossimo

Nella seconda parte di questa miniserie, vedremo come creare una pagina galleria dedicata alla condivisione delle immagini con i tuoi ospiti dopo il matrimonio. 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!