Cum să creați o pagină de galerie de nuntă cu Divi
Publicat: 2017-05-17Această postare este partea 2 din 5 în miniseria noastră Cum să creați un site de nuntă elegant cu Divi. În această serie, vă vom ghida prin cele mai importante părți ale creării unui site de nunți pentru dvs. sau pentru un client cu Divi.
În prima parte a miniseriei noastre, v-am arătat cum să creați o pagină elegantă de anunțuri de nuntă. Această a doua parte va fi dedicată creării unei pagini de galerie pe site-ul web al nunții. Pagina galeriei este în același stil ca și pagina anunțului de nuntă, care vă permite să le utilizați pe ambele pe același site web fără a fi nevoie să faceți multe modificări.
Vă vom arăta pas cu pas cum să creați următorul aspect cu constructorul vizual al Divi:
Acest aspect este format din 6 secțiuni care vă ajută să creați o galerie interactivă și frumoasă.
Secțiunea Hero
Am decis să mergem cu un antet foarte simplu, care nu pare prea ocupat. Pagina galeriei va avea deja o mulțime de imagini și dorim ca oamenii să se concentreze asupra acestui lucru. Având o secțiune de erou simplă, este mai ușor pentru oaspeți să găsească esența paginii fără a fi prea distras de vizualizarea de la începutul paginii.
Creaza o pagina
Începeți prin crearea unei pagini, utilizând generatorul Divi și treceți la Visual Builder.
Puteți vedea că există deja o secțiune prezentă automat în noua dvs. pagină. Secțiunea respectivă conține un rând cu lățime completă. Vom avea nevoie de un rând cu lățime completă pentru prima parte a acestei secțiuni, așa că continuați să-l utilizați.
Deschideți setările secțiunii pe care tocmai ați creat-o și deschideți subcategoria Background în fila Conținut. Apoi, schimbați culoarea de fundal în „# fffaf6”.
Modul text
Continuați adăugând un modul de text la coloana de lățime completă a rândului. Introduceți textul în caseta de text a filei Conținut și treceți la fila Proiectare.
Selectați subcategoria Text din fila Proiectare pentru a începe editarea designului conținutului dvs. Pentru aspectul pe care l-am creat, va trebui să facem următoarele ajustări la subcategoria text a modulului dvs. de text:
- Orientare text: centru
- Font text: mandarină
- Dimensiunea fontului textului: 90p (desktop), 80 (tabletă), 66 (telefon)
- Culoarea textului: # 9b857b
- Înălțimea liniei textului: 1.7em
Dacă nu aveți chef să derulați în jos și să căutați diferitele opțiuni de modificat, puteți utiliza opțiunea de căutare. Această opțiune vă ajută să deveniți mai productivi și să schimbați lucrurile instantaneu, fără a fi nevoie să depuneți mult efort. În exemplul de mai jos, căutăm pur și simplu termenii „Font text” și vom vedea opțiunea care apare imediat.
Faceți clic pe Salvați și ieșiți.
Mireasa și mirele
Continuând, va trebui să creați o secțiune cu două imagini individuale ale mirilor.
Continuați și adăugați un nou rând cu două coloane chiar sub rândul anterior pe care l-ați creat. Deschideți setările rândului și accesați fila Proiectare.
Apoi, accesați fila Proiectare a setărilor rândului și deschideți subcategoria Dimensionare. Activați opțiunea Lățime personalizată și modificați procentajul la „60%”. Derulați în jos în aceeași filă și adăugați „5%” la marginea de jos.
Din nou, puteți alege ieșirea ușoară și puteți scrie „Lățime personalizată” în bara de căutare.
Imaginea miresei
Adăugați un modul de imagine la prima coloană a rândului. Încărcați o imagine a miresei în fila Conținut sub subcategoria Imagine și treceți la fila Avansat. Faceți clic pe subcategoria CSS personalizată și adăugați următoarea linie de cod în câmpul Element principal:
border: 10px double #9b857b;
Așa cum am menționat anterior, puteți să tastați „Element principal” în bara de căutare și va apărea imediat. Utilizarea opțiunii de căutare poate fi o economie de timp imensă, mai ales atunci când încercați să urmați pașii unui tutorial. Puteți face exact ceea ce este necesar fără să vă gândiți prea mult la asta.
Apăsați Salvare și ieșire.
Imaginea mirelui
După cum puteți observa, imaginile au aceleași setări. Continuați și clonați modulul de imagine, singurul lucru pe care va trebui să îl schimbați este imaginea. Iată cum ar trebui să arate pagina galeriei dvs. până acum:
Notă de mulțumire
Pagina de galerie apare de obicei pe site-ul nunții după ce a avut loc nunta. Oamenii sunt încântați să vadă pozele făcute, așa că este probabil ca toți oaspeții dvs. să viziteze pagina. Aceasta face ca pagina galeriei să fie locul ideal pentru a le spune oaspeților un ultim lucru.
Pentru a începe, adăugați o nouă secțiune standard la aspectul dvs. În secțiune, utilizați un rând cu lățime completă.
Apoi, deschideți setările secțiunii și schimbați culoarea de fundal în „# fffaf6” în subcategoria de fundal.
Primul modul de text
Adăugați un modul text la rândul pe care tocmai l-ați creat. În fila Conținut, introduceți textul pe care doriți să îl afișați pe site-ul dvs. web în caseta de text. Continuați trecând la fila Proiectare.
Începeți prin selectarea subcategoriei Text din fila de proiectare și efectuați următoarele modificări căutându-le manual sau căutați-le în bara de căutare:
- Orientare text: centru
- Font text : mandarină
- Dimensiunea fontului textului: 70 (desktop și tabletă), 50 (telefon)
- Culoarea textului: # 9b857b
- Înălțimea liniei de text: 1em
Acum, selectați subcategoria Spațiere din aceeași filă și schimbați marja de jos la „5%”.
Faceți clic pe Salvare și ieșire.
Al doilea modul de text
Adăugați un nou modul de text sub primul modul de text pe care l-ați creat. În fila Conținut, scrieți nota de mulțumire pe care doriți să o împărtășiți cu oaspeții în caseta de text și treceți la fila Proiectare.
Efectuați următoarele modificări în fila Proiectare căutându-le manual sau căutând opțiunile cu bara de căutare.
- Orientarea textului: justificată
- Font text: Raleway Light
- Stil text: îndrăzneț
- Dimensiunea fontului textului: 14
- Culoarea textului: # 9b857b
- Înălțimea liniei de text: 1.6em
Faceți clic pe Salvare și ieșire și sunteți bine să plecați. Iată cum ar trebui să arate până acum pagina ta de galerie:
Secțiunea Poze preferate
După ce ați terminat secțiunea Notă de mulțumire, puteți merge la secțiunea unde afișați pozele preferate ale mirilor. În această parte, veți utiliza două secțiuni și veți aplica codul CSS modulelor de imagine pentru a le face să pară polaroid.
Începeți prin adăugarea unei secțiuni standard. În cadrul acelei secțiuni standard, veți avea nevoie de un rând cu lățime completă. Deschideți setările secțiunii și schimbați culoarea de fundal în „# 9b857b” în subcategoria de fundal a filei de conținut.
Apoi, adăugați un modul text la rând. Deschideți setările și introduceți titlul pe care doriți să îl afișați în caseta de text din subcategoria Text. Mergând mai departe, accesați fila Proiectare și efectuați următoarele modificări în subcategoria Text:
- Orientare text: centru
- Font text: mandarină
- Dimensiunea fontului textului: 100 (desktop și tabletă), 68 (telefon)
- Culoarea textului: # fffaf6
- Înălțimea liniei de text: 1.6em
Faceți clic pe Salvați și ieșiți.
Imagini Polaroid (Desktop)
Pentru această parte, veți avea nevoie de o altă secțiune standard. În secțiunea respectivă, veți avea nevoie de un rând care să aibă 4 coloane. Schimbați culoarea de fundal a acestei secțiuni la „# fae4de” în fila Conținut de sub subcategoria de fundal.
Continuați adăugând un modul de imagine la prima coloană a rândului. Deschideți setările imaginii și încărcați una dintre imaginile preferate cu subcategoria de imagini din fila conținut.
Apoi, accesați fila Advanced, faceți clic pe subcategoria CSS ID & Classes și tastați „polaroid” în câmpul CSS Class. În câmpul Element principal, adăugați următorul cod:
z-index: 1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);
Acum, pentru a pune în mișcare clasa „polaroid”, va trebui să accesați backend-ul site-ului dvs. web. Accesați Divi> Opțiuni temă> și introduceți următorul cod în câmpul CSS personalizat din partea de jos a paginii:
.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;
}După aceea, puteți reveni la Visual Builder. Veți avea nevoie de mai multe imagini polaroid, de aceea ar trebui să clonați modulul de imagine de 7 ori și să vă asigurați că le puneți în diferite coloane. Fiecare coloană trebuie să aibă 2 module de imagine.
Pentru ca imaginile polaroid să arate jucăuș, va trebui să schimbați codul CSS în câmpul Element principal al fiecărui modul de imagine individual. Pentru a aplica codul diferit, am dat fiecărui modul de imagine un număr diferit în imaginea de mai jos:
În funcție de numărul atribuit, modificați codul în câmpul Element principal în consecință. Puteți găsi Elementul principal în fila Advanced din subcategoria CSS personalizată. Adăugați o valoare și câmpurilor de marjă personalizată din subcategoria Spațiere a filei Proiectare:
Imaginea 1
Acesta este primul modul de imagine pe care l-ați realizat, păstrați-l așa.
Imaginea 2
Marje personalizate:
Sus: -10%
Stânga: -20%
Element principal:
z-index: 5; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);
Imaginea 3
Marje personalizate:
Stânga: -20%
Element principal:
Nici unul
Imaginea 4
Marje personalizate:
Sus: -10%
Stânga: -20%
Element principal:
z-index: 3; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);
Imaginea 5
Marje personalizate:
Nici unul
Element principal:
-webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); transform: rotate(14deg);
Imaginea 6
Marje personalizate:
Sus: -10%
Stânga: -20%
Element principal:
-webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); transform: rotate(-18deg);
Imaginea 7
Marje personalizate:
Stânga: -20%
Element principal:
z-index: 1; -webkit-transform: rotate(-10deg);l -moz-transform: rotate(-10deg);
Imaginea 8
Marje personalizate:
Sus: -10%
Stânga: -20%
Element principal:
z-index: 5; -webkit-transform:rotate(-3deg); -moz-transform: rotate(-3deg);
După ce ați configurat toate imaginile, deschideți setările rândului. Accesați fila Avansat și ascundeți rândul pentru telefon și tabletă din subcategoria Vizibilitate.
De asemenea, asigurați-vă că oamenii pot deschide imaginea din această secțiune activând Lightbox în subcategoria Link din fila Conținut.
Imagini preferate (tabletă și telefon)
Pentru a ne asigura că imaginile sunt receptive, vom adăuga un alt rând în aceeași secțiune. Faceți din acesta un rând cu lățime completă și clonați modulele de imagine numărul 1 și 5. Plasați aceste module clonate în noul rând. Pentru versiunea mobilă, vom folosi doar aceste două versiuni ale modulelor de imagine pe care le-am creat.
Acum, deschideți setările rândului. Accesați fila Avansat și ascundeți rândul de pe desktopuri din subcategoria Vizibilitate.
După ce ați făcut toate aceste modificări, aspectul dvs. ar trebui să arate astfel până acum pe desktop:
Galerie după nume (desktop)
De obicei, există o mulțime de fotografii făcute la nunți care pot face dificilă găsirea unei anumite structuri în ele. De aceea, am decis să facem ca secțiunea galerie a acestei pagini să fie puțin mai ușoară. Galeriile vor fi afișate pe baza numelui de familie al oaspeților, ceea ce le facilitează regăsirea propriilor imagini.
Lista Numelor
Pentru a începe, trebuie să afișați lista numelor de familie și să le legați secțiunea paginii unde vor găsi imaginile.
Creați o nouă secțiune standard și plasați un rând cu lățime completă în ea. Apoi, adăugați un modul text. Tastați textul pe care doriți să îl afișați în subcategoria Text din fila Conținut. Apoi, accesați fila Proiectare și efectuați următoarele modificări la subcategoria Text:
- Orientare text: centru
- Font text: mandarină
- Dimensiunea fontului textului: 100 (desktop și tabletă), 68 (telefon)
- Culoarea textului: # 9b857b
- Înălțimea liniei de text: 1.6em
Derulați în jos în aceeași filă și schimbați marja de sus la „2%” și marja de jos la „5%” în subcategoria Spațiere.
Faceți clic pe Salvați și ieșiți. Acum, adăugați un alt rând, în acest caz cu trei coloane. În fila Proiectare a setărilor rândului, schimbați marja de jos la „5%” din subcategoria Spațiere.
Apoi, adăugați un modul text în coloana din stânga a rândului. În cadrul modulului text, adăugați o treime din numele de familie ale oaspeților. Fiecare dintre aceste nume de familie va avea nevoie de un link de ancorare către partea site-ului web pe care doriți să le aduceți. Selectați unul dintre nume, faceți clic pe pictograma linkului și scrieți un „#” + numele. Mai târziu, în această postare pe blog, veți conecta acest nume la o anumită secțiune. Repetați același lucru pentru fiecare dintre numele de pe listă.
Selectați unul dintre nume, faceți clic pe pictograma linkului și scrieți un „#” + numele. Mai târziu, în această postare pe blog, veți conecta acest nume la o anumită secțiune. Repetați același lucru pentru fiecare dintre numele de pe listă.
Accesați fila Proiectare și efectuați următoarele ajustări la subcategoria Text:
- Orientarea textului: dreapta
- Font text: Raleway Light
- Stil text: îndrăzneț
- Dimensiunea fontului textului: 20
- Culoarea textului: # 9b857b
- Înălțimea liniei de text: 1.6em
Continuând, clonați modulul de text de două ori și plasați modulele clonate în celelalte două coloane. Asigurați-vă că schimbați numele de familie din aceste liste și Orientarea textului la „Centrare” pentru a doua coloană și „Stânga” pentru a treia coloană.
Deschideți setările rândului și schimbați vizibilitatea doar pe desktop în subcategoria Vizibilitate a filei Avansate.
Galerie după nume (tabletă și telefon)
Pentru a ne asigura că site-ul web este receptiv, vom crea un nou rând care se potrivește tabletelor și telefoanelor. Adăugați un rând nou cu o coloană cu lățime completă. Apoi, adăugați un modul de text la acel rând de lățime completă și tastați numele de familie în caseta de text. Puteți găsi caseta de text în subcategoria Text a filei Conținut.
Repetați același lucru pe care l-am făcut în rândul anterior dând clic pe pictograma linkului și scriind un „#” + numele în caseta URL.
Dar asigurați-vă că atribuiți un link de ancorare diferit fiecărui al doilea nume. În acest exemplu, atât Avery, cât și Brown vor avea o legătură de ancorare diferită de cea pe care o aveau pe desktop-uri. Trebuie să facem acest lucru deoarece, în următoarea parte a site-ului web, va trebui să avem două secțiuni de galerie diferite pentru fiecare a doua galerie. În acest fel, va fi receptiv pentru tabletă și telefon.
Nu în ultimul rând, accesați fila Advanced a rândului și dezactivați rândul pentru desktopuri din subcategoria Vizibilitate.
Secțiunea Galerie (Desktop)
În ultima parte a site-ului web, va trebui să realizăm diferitele secțiuni ale galeriei care reprezintă nume de familie diferite. Vă vom arăta cum să faceți două dintre ele și apoi puteți adăuga și altele în consecință.
Mai întâi, adăugați o secțiune standard. Schimbați culoarea de fundal în „# fae4de” în subcategoria de fundal a filei Conținut
Continuând, adăugați un rând ca acesta:
În secțiunile de rând, utilizați Lățime personalizată. Accesați fila Proiectare Selectați și modificați Lățimea personalizată la „60%” din subcategoria Dimensionare.
Apoi, accesați fila Design și schimbați marja de sus și de jos la „5%”.
Modul text
Acum, adăugați un modul de text și tastați numele de familie al familiei în caseta de text din subcategoria Text a filei Conținut. Continuați accesând fila Proiectare și făcând următoarele modificări:
- Aliniere text: centru
- Font text: mandarină
- Dimensiunea fontului textului: 60
- Culoarea textului: # 9b857b
- Înălțimea liniei de text: 1.6em
Derulați în jos aceeași filă și schimbați marja superioară la „20%” din subcategoria Spațiu.
Treceți la fila Advanced. În câmpul CSS ID din subcategoria CSS ID și clase, va trebui să legați linkul de ancorare pe care l-ați făcut mai sus la modulul de text. Deci, dacă primul link de ancorare din listă a fost „#adams”, atunci va trebui să completați „adams”. Asigurați-vă că ID-ul este același cu cel pe care l-ați conectat la numele din lista pe care ați făcut-o anterior.
În a doua coloană a rândului, va trebui să adăugați un modul de galerie. Tastați „8” în câmpul Număr imagini din subcategoria Imagini din fila General și alegeți 8 imagini.
Apoi, accesați fila Proiectare și asigurați-vă că aspectul dvs. este „Grilă” și Orientarea miniaturilor „Peisaj” în subcategoria Aspect.
Mergând mai departe, accesați fila Avansat. În această filă, va trebui să adăugați cod la două secțiuni diferite din subcategoria CSS personalizată; elementul principal și suprapunerea.
Element principal:
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;
Acoperire:
-webkit-filter: brightness(0%);
Faceți clic pe Salvare și ieșire.
Acum, continuați și clonați secțiunea. Schimbați structura coloanei cu următoarea și comutați locurile între modulul text și modulul galerie:
Schimbați imaginile din galerie, numele de familie menționat în caseta de text și ID-ul clasei. Această secțiune are și o altă culoare de fundal; „# fffaf6”.
Acum, accesați fila Advanced din acest rând și ascundeți-o pentru tablete și telefoane din subcategoria Vizibilitate.
Puteți continua să creați astfel de secțiuni de galerie, în funcție de numărul de nume de familie care au fost prezente la nuntă.
Secțiunea Galerie (mobil)
După cum am menționat anterior, fiecare a doua secțiune de galerie va avea nevoie de o alternativă pentru mobil. Doar clonați primul rând de galerie pe care l-am realizat și plasați-l în aceeași secțiune a ultimului rând de galerie pe care l-am creat.
Apoi, deschideți opțiunile Modulului text. Accesați fila Proiectare și eliminați marja superioară din subcategoria Spațiu. Apoi, accesați fila Advanced și schimbați ID-ul CSS din subcategoria CSS ID & Classes la „avery1”. Acesta este același ID ca în lista care s-a aplicat tabletelor și telefoanelor.
Asta e. Aspectul dvs. ar trebui să arate acum exact ca cel pe care l-am creat și vi l-am arătat la începutul acestei postări pe blog:
Urmatorul
În a treia parte a acestei miniserii, vom vedea cum puteți crea o pagină cu lista de cadouri pe care să o adăugați pe site-ul nunții. Dacă aveți întrebări cu privire la acest tutorial sau dacă aveți orice solicitări pentru viitoare tutoriale; asigurați-vă că lăsați un comentariu în secțiunea de comentarii a acestei postări de blog, așa că reveniți la voi cu răspunsuri!
Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!