Come creare una pagina della galleria di matrimoni con Divi

Pubblicato: 2017-05-17

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

Nella prima parte della nostra miniserie, vi abbiamo mostrato come realizzare un'elegante pagina di annuncio di matrimonio. Questa seconda parte sarà dedicata alla creazione di una pagina galleria all'interno del sito web del tuo matrimonio. La pagina della galleria è nello stesso stile della pagina dell'annuncio di matrimonio, che ti consente di utilizzare entrambi sullo stesso sito Web senza dover apportare molte modifiche.

Ti mostreremo passo dopo passo come creare il seguente layout con il visual builder di Divi:

Questo layout è composto da 6 sezioni che ti aiutano a creare una pagina della galleria interattiva e bella.

La sezione degli eroi

Abbiamo deciso di utilizzare un'intestazione molto semplice che non sembra troppo occupata. La pagina della galleria conterrà già molte immagini e vogliamo che le persone si concentrino su questo. Avere una semplice sezione degli eroi rende più facile per gli ospiti trovare l'essenza della pagina senza essere troppo distratti dalle immagini all'inizio della pagina.

Crea una pagina

Inizia creando una pagina, utilizzando Divi builder e passa a Visual Builder.

Puoi vedere che c'è già una sezione automaticamente presente nella tua nuova pagina. Quella sezione contiene una riga a larghezza intera. Avremo bisogno di una riga a larghezza intera per la prima parte di questa sezione, quindi continua a usarla.

Apri le impostazioni della sezione appena creata e apri la sottocategoria Sfondo nella scheda contenuto. Quindi, cambia il colore di sfondo in "#fffaf6".

Modulo di testo

Continua aggiungendo un modulo di testo alla colonna a larghezza intera della riga. Inserisci il testo nella casella di testo della scheda Contenuto e passa alla scheda Design.

Seleziona la sottocategoria Testo nella scheda Design per iniziare a modificare il design del tuo contenuto. Per il layout che abbiamo creato, dovremo apportare le seguenti modifiche alla sottocategoria Testo del tuo modulo di testo:

Orientamento del testo: al centro
Carattere del testo: mandarino
Dimensione carattere testo: 90p (desktop), 80 (tablet), 66 (telefono)
Colore del testo: #9b857b
Altezza riga di testo: 1,7 em

Se non hai voglia di scorrere verso il basso e cercare le diverse opzioni da modificare, puoi anche utilizzare l'opzione di ricerca. Questa opzione ti aiuta a diventare più produttivo e a cambiare le cose istantaneamente senza dover fare molti sforzi. Nell'esempio seguente, stiamo semplicemente cercando i termini "Carattere di testo" e vedremo apparire immediatamente l'opzione.

Fare clic su Salva ed esci.

Sposa & Sposo

Andando avanti, dovrai creare una sezione con due singole immagini degli sposi.

Vai avanti e aggiungi una nuova riga a due colonne proprio sotto la riga precedente che hai creato. Apri le impostazioni della riga e vai alla scheda Design.

Quindi, vai alla scheda Progettazione delle impostazioni di riga e apri la sottocategoria Ridimensionamento. Attiva l'opzione Larghezza personalizzata e modifica la percentuale in "60%". Scorri verso il basso la stessa scheda e aggiungi "5%" al margine inferiore.

Ancora una volta, puoi scegliere la via d'uscita più semplice e scrivere semplicemente "Larghezza personalizzata" nella barra di ricerca.

Immagine della sposa

Aggiungi un modulo immagine alla prima colonna della riga. Carica un'immagine della sposa nella scheda Contenuto sotto la sottocategoria Immagine e passa alla scheda Avanzate. Fare clic sulla sottocategoria CSS personalizzato e aggiungere la seguente riga di codice al campo Elemento principale:

border: 10px double #9b857b;

Come accennato in precedenza, puoi anche digitare "Elemento principale" nella barra di ricerca e verrà visualizzato immediatamente. L'utilizzo dell'opzione di ricerca può essere un enorme risparmio di tempo, soprattutto quando stai cercando di seguire i passaggi di un tutorial. Puoi fare esattamente ciò che è richiesto senza pensarci troppo.

Premi Salva ed esci.

Immagine dello sposo

Come puoi notare, le immagini hanno le stesse impostazioni. Vai avanti e clona il modulo immagine, l'unica cosa che dovrai cambiare è l'immagine. Ecco come dovrebbe apparire la tua pagina della galleria finora:

Grazie Nota

La pagina della galleria di solito viene visualizzata sul sito Web del matrimonio dopo che il matrimonio ha avuto luogo. Le persone sono entusiaste di vedere le foto che sono state scattate, quindi è probabile che tutti i tuoi ospiti visiteranno la pagina. Ciò rende la pagina della galleria il luogo ideale per dire un'ultima cosa agli ospiti.

Per iniziare, aggiungi una nuova sezione standard al tuo layout. All'interno della sezione, usa una riga a larghezza intera.

Quindi, apri le impostazioni della sezione e cambia il colore di sfondo in "#fffaf6" nella sottocategoria di sfondo.

Primo modulo di testo

Aggiungi un modulo di testo alla riga appena creata. Nella scheda Contenuto, inserisci il testo che desideri visualizzare sul tuo sito web nella casella di testo. Continua passando alla scheda Design.

Inizia selezionando la sottocategoria Testo nella scheda Progettazione e apporta le seguenti modifiche cercandole manualmente o cercandole nella barra di ricerca:

Orientamento del testo: al centro
Carattere del testo : mandarino
Dimensione carattere del testo: 70 (desktop e tablet), 50 (telefono)
Colore del testo: #9b857b
Altezza riga di testo: 1em

Ora, seleziona la sottocategoria Spaziatura nella stessa scheda e modifica il margine inferiore in "5%".

Fare clic su Salva ed esci.

Secondo modulo di testo

Aggiungi un nuovo modulo di testo sotto il primo modulo di testo che hai creato. Nella scheda contenuto, scrivi la nota di ringraziamento che desideri condividere con gli ospiti nella casella di testo e passa alla scheda Design.

Apporta le seguenti modifiche nella scheda Progettazione cercandole manualmente o cercando le opzioni con la barra di ricerca.

Orientamento del testo: giustificato
Carattere del testo: Raleway Light
Stile del testo: grassetto
Dimensione carattere del testo: 14
Colore del testo: #9b857b
Altezza riga di testo: 1,6 em

Fai clic su Salva ed esci e sei a posto. Ecco come dovrebbe apparire la tua pagina della galleria ora:

Sezione Immagini preferite

Dopo aver terminato la sezione della nota di ringraziamento, puoi passare alla sezione in cui mostri le foto preferite degli sposi. In questa parte utilizzerai due sezioni e applicherai il codice CSS ai moduli immagine per farli sembrare polaroid.

Inizia aggiungendo una sezione standard. All'interno di quella sezione standard, avrai bisogno di una riga a larghezza intera. Apri le impostazioni della sezione e cambia il colore di sfondo in "#9b857b" nella sottocategoria Sfondo della scheda Contenuto.

Quindi, aggiungi un modulo di testo alla riga. Apri le impostazioni e inserisci il titolo che desideri mostrare nella casella di testo della sottocategoria Testo. Andando avanti, vai alla scheda Progettazione e apporta le seguenti modifiche nella 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,6 em

Fare clic su Salva ed esci.

Immagini Polaroid (Desktop)

Per questa parte, avrai bisogno di un'altra sezione standard. All'interno di quella sezione, avrai bisogno di una riga con 4 colonne. Cambia il colore di sfondo di questa sezione in "#fae4de" nella scheda Contenuto sotto la sottocategoria Sfondo.

Procedi aggiungendo un modulo immagine alla prima colonna della riga. Apri le impostazioni dell'immagine e carica una delle immagini preferite all'interno della sottocategoria Immagine della scheda contenuto.

Quindi, vai alla scheda Avanzate, fai clic sulla sottocategoria ID e classi CSS e digita "polaroid" nel campo Classe CSS. Nel campo Elemento principale, aggiungi il seguente codice:

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

Ora, per mettere in azione la classe "polaroid", dovrai andare al backend del tuo sito web. Vai su Divi > Opzioni tema > e inserisci il seguente codice nel campo CSS personalizzato in fondo alla pagina:

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

Successivamente, puoi tornare al Visual Builder. Avrai bisogno di più di una polaroid, ecco perché dovresti clonare il modulo immagine 7 volte e assicurarti di inserirle nelle diverse colonne. Ogni colonna dovrebbe avere 2 moduli immagine.

Per rendere giocose le immagini polaroid, dovrai modificare il codice CSS nel campo Elemento principale di ciascun modulo immagine individualmente. Per applicare il codice diverso, abbiamo assegnato a ciascun modulo immagine un numero diverso nell'immagine seguente:

A seconda del numero assegnato, modificare di conseguenza il codice nel campo Elemento principale. Puoi trovare l'elemento principale nella scheda Avanzate nella sottocategoria CSS personalizzato. Aggiungi anche un valore ai campi Margine personalizzato nella sottocategoria Spaziatura della scheda Progettazione:

Immagine 1

Questo è il primo modulo Immagine che hai creato, tienilo così.

Immagine 2

Margini personalizzati:
Superiore: -10%
Sinistra: -20%

Elemento principale:

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

Immagine 3

Margini personalizzati:
Sinistra: -20%

Elemento principale:
Nessuno

Immagine 4

Margini personalizzati:
Superiore: -10%
Sinistra: -20%

Elemento principale:

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

Immagine 5

Margini personalizzati:
Nessuno

Elemento principale:

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

Immagine 6

Margini personalizzati:
Superiore: -10%
Sinistra: -20%

Elemento principale:

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

Immagine 7

Margini personalizzati:
Sinistra: -20%

Elemento principale:

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

Immagine 8

Margini personalizzati:
Superiore: -10%
Sinistra: -20%

Elemento principale:

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

Dopo aver impostato tutte le immagini, apri le impostazioni della riga. Vai alla scheda Avanzate e nascondi la riga per telefono e tablet nella sottocategoria Visibilità.

Inoltre, assicurati che le persone possano aprire l'immagine in questa sezione attivando la Lightbox nella sottocategoria Link della scheda Contenuto.

Immagini preferite (tablet e telefono)

Per assicurarci che le immagini siano reattive, aggiungeremo un'altra riga alla stessa sezione. Rendilo una riga a larghezza intera e clona i moduli immagine numero 1 e 5. Posiziona questi moduli clonati nella nuova riga. Per la versione mobile, utilizzeremo solo queste due versioni dei moduli immagine che abbiamo creato.

Ora apri le impostazioni della riga. Vai alla scheda Avanzate e nascondi la riga sui desktop all'interno della sottocategoria Visibilità.

Dopo aver apportato tutte queste modifiche, il tuo layout dovrebbe apparire così sul desktop:

Galleria per cognome (desktop)

Di solito ci sono molte foto scattate ai matrimoni che possono rendere difficile trovare una certa struttura in esse. Ecco perché abbiamo deciso di rendere la sezione della galleria di questa pagina della galleria un po' più semplice. Le gallerie verranno visualizzate in base al cognome degli ospiti, il che renderà più facile per loro ritrovare le proprie foto.

Elenco dei nomi

Per cominciare, devi mostrare l'elenco dei cognomi e collegarli alla sezione della pagina dove troveranno le immagini.

Crea una nuova sezione standard e inserisci al suo interno una riga a larghezza intera. Quindi, aggiungi un modulo di testo. Digita il testo che desideri visualizzare nella sottocategoria Testo della scheda Contenuto. Quindi, 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: #9b857b
Altezza riga di testo: 1,6 em

Scorri verso il basso la stessa scheda e modifica il margine superiore in "2%" e il margine inferiore in "5%" nella sottocategoria Spaziatura.

Fare clic su Salva ed esci. Ora aggiungi un'altra riga, in questo caso con tre colonne. Nella scheda Progettazione delle impostazioni di riga, modifica il margine inferiore su "5%" all'interno della sottocategoria Spaziatura.

Quindi, aggiungi un modulo di testo alla colonna sinistra della riga. All'interno del modulo di testo, aggiungi un terzo dei cognomi degli ospiti. Ciascuno di questi cognomi avrà bisogno di un collegamento di ancoraggio alla parte del sito Web in cui si desidera portarli. Seleziona uno dei nomi, fai clic sull'icona del collegamento e scrivi un '#' + il nome. Più avanti in questo post del blog, collegherai questo nome a una determinata sezione. Ripeti la stessa cosa per ognuno dei nomi sulla lista.

Seleziona uno dei nomi, fai clic sull'icona del collegamento e scrivi un '#' + il nome. Più avanti in questo post del blog, collegherai questo nome a una determinata sezione. Ripeti la stessa cosa per ognuno dei nomi sulla lista.

Vai alla scheda Progettazione e apporta le seguenti modifiche alla sottocategoria Testo:

Orientamento del testo: a destra
Carattere del testo: Raleway Light
Stile del testo: grassetto
Dimensione carattere del testo: 20
Colore del testo: #9b857b
Altezza riga di testo: 1,6 em

Andando avanti, clona due volte il modulo di testo e posiziona i moduli clonati nelle altre due colonne. Assicurati di modificare i cognomi in questi elenchi e l'orientamento del testo in "Centro" per la seconda colonna e "Sinistra" per la terza colonna.

Apri le impostazioni della riga e modifica la visibilità in solo desktop nella sottocategoria Visibilità della scheda Avanzate.

Galleria per cognome (tablet e telefono)

Per assicurarci che il sito web sia reattivo, creeremo una nuova riga adatta a tablet e telefoni. Aggiungi una nuova riga con una colonna a larghezza intera. Quindi, aggiungi un modulo di testo a quella riga a larghezza intera e digita i cognomi nella casella di testo. Puoi trovare la casella di testo nella sottocategoria Testo della scheda Contenuto.

Ripeti la stessa cosa che abbiamo fatto nella riga precedente facendo clic sull'icona del collegamento e scrivendo un '#' + il nome nella casella dell'URL.

Ma assicurati di assegnare un collegamento di ancoraggio diverso a ogni secondo nome. In questo esempio, sia Avery che Brown avranno un collegamento di ancoraggio diverso da quello che avevano sui desktop. Dobbiamo farlo perché, nella prossima parte del sito, dovremo avere due diverse sezioni della galleria per ogni seconda galleria. In questo modo, sarà reattivo per tablet e telefono.

Ultimo ma non meno importante, vai alla scheda Avanzate della riga e disabilita la riga per i desktop nella sottocategoria Visibilità.

Sezione Galleria (Desktop)

Nell'ultima parte del sito, dovremo creare le diverse sezioni della galleria che rappresentano cognomi diversi. Ti mostreremo come crearne due e poi puoi aggiungerne anche altri di conseguenza.

Innanzitutto, aggiungi una sezione standard. Cambia il colore di sfondo in "#fae4de" nella sottocategoria Sfondo della scheda Contenuto

Andando avanti, aggiungi una riga come questa:

All'interno delle sezioni di riga, usa Larghezza personalizzata. Vai alla scheda Design Seleziona e modifica la larghezza personalizzata su '60%' all'interno della sottocategoria Dimensionamento.

Quindi, vai alla scheda Progettazione e modifica il margine superiore e inferiore in "5%".

Modulo di testo

Ora aggiungi un modulo di testo e digita il cognome di una famiglia nella casella di testo all'interno della sottocategoria Testo della scheda Contenuto. Continua andando nella scheda Progettazione e apportando le seguenti modifiche:

Allineamento del testo: Centro
Carattere del testo: mandarino
Dimensione carattere del testo: 60
Colore del testo: #9b857b
Altezza riga di testo: 1,6 em

Scorri verso il basso la stessa scheda e modifica il margine superiore in "20%" nella sottocategoria Spaziatura.

Passa alla scheda Avanzate. Nel campo ID CSS della sottocategoria ID CSS e classi, dovrai collegare il link di ancoraggio che hai creato sopra al modulo di testo. Quindi, se il primo link di ancoraggio nell'elenco era "#adams", allora dovrai inserire "adams". Assicurati che l'ID sia lo stesso di quello che hai collegato al nome nell'elenco che hai creato in precedenza.

Nella seconda colonna della riga, dovrai aggiungere un modulo Galleria. Digita "8" nel campo Numero immagini nella sottocategoria Immagini della scheda Generale e scegli 8 immagini.

Quindi, vai alla scheda Design e assicurati che il tuo layout sia "Griglia" e l'orientamento delle miniature "Paesaggio" nella sottocategoria Layout.

Andando avanti, vai alla scheda Avanzate. In questa scheda, dovrai aggiungere codice a due diverse sezioni della sottocategoria CSS personalizzato; l'elemento principale e la sovrapposizione.

Elemento principale:

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;

Sovrapposizione:

-webkit-filter: brightness(0%);

Fare clic su Salva ed esci.

Ora vai avanti e clona la sezione. Cambia la struttura delle colonne con la seguente e cambia posto tra il Modulo Testo e il Modulo Galleria:

Modifica le immagini nella galleria, il cognome indicato nella casella di testo e l'ID classe. Questa sezione ha anche un altro colore di sfondo; '#fffaf6'.

Ora vai alla scheda Avanzate di questa riga e nascondila per tablet e telefoni all'interno della sottocategoria Visibilità.

Puoi continuare a creare sezioni della galleria in questo modo, a seconda del numero di cognomi presenti al matrimonio.

Sezione Galleria (cellulare)

Come accennato in precedenza, ogni seconda sezione della galleria avrà bisogno di un'alternativa per i dispositivi mobili. Basta clonare la prima riga della galleria che abbiamo creato e posizionarla nella stessa sezione dell'ultima riga della galleria che abbiamo creato.

Quindi, apri le opzioni del modulo di testo. Vai alla scheda Design e rimuovi il margine superiore nella sottocategoria Spaziatura. Successivamente, vai alla scheda Avanzate e modifica l'ID CSS nella sottocategoria ID e classi CSS in "avery1". Questo è lo stesso ID dell'elenco applicato a tablet e telefoni.

Questo è tutto. Il tuo layout dovrebbe ora essere esattamente come quello che abbiamo creato e mostrato all'inizio di questo post sul blog:

Prossimo

Nella terza parte di questa miniserie, vedremo come creare una pagina di lista dei regali da aggiungere sul sito del matrimonio. Se hai domande su questo tutorial o se hai richieste per tutorial futuri; assicurati di lasciare un commento nella sezione commenti di questo post del blog, quindi torna da te con le risposte!

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!