Wix Website de la Scratch - Grid Gallery

• Aprilie 27, 2024

În acest tutorial, vom adăuga o galerie pe site-ul nostru Wix, pe care l-am creat dintr-un șablon necompletat. A începe de la zero este un mod minunat de a învăța elementele de bază.

Spre deosebire de șabloanele Wix care nu sunt schimbabile, puteți schimba oricând tipurile de galerie pentru un aspect nou. Există multe tipuri de galerii, de la grila de zidărie la fagurele. Fiecare galerie are propriile sale caracteristici. Să aruncăm o privire la galeria de bază (portret).

1. Faceți clic pe pictograma Plus din meniul din stânga și alegeți Galerie din listă.
   
   
2. Treceți cursorul peste miniatura galeriei pentru a vedea o previzualizare și o descriere.
   
   
3. Acum, trageți galeria Grilă în pagină.
   
   
4. Utilizați redimensionarea mânerelor pentru a redimensiona grila așa cum doriți. Am redimensionat grila la lățimea de 980 de pagini.
   
   În acest moment, galeria are câteva imagini de la locație. Haideți să le păstrăm deocamdată și să lucrăm la personalizarea setărilor galeriei pentru nevoile noastre.
   
   Setări galerie grilă
   
   Scalare imagine - aveți opțiunea ca imaginea dvs. să fie decupată sau scalată pentru a se încadra în cadru. Setarea Autocrop va decupa automat imaginile pentru a se încadra în cadru, iar opțiunea Fit va redimensiona imaginea pentru a se încadra în cadru.
   
   Când faceți clic - Aveți trei opțiuni pentru ceea ce se întâmplă când faceți clic pe o imagine de galerie. O opțiune pentru ca nimic să nu se întâmple. Al doilea este să aveți imaginea deschisă ca pop-up. Al treilea este să deschizi un link. De cele mai multe ori, pop-up-ul este o alegere bună, deoarece imaginea este afișată la o dimensiune mai mare. Dar dacă doriți să trimiteți vizitatorul pe altă pagină, utilizați opțiunea A Link Deschide.
   
   
5. Selectați Galerie și faceți clic pe pictograma Setare din meniul pop-up.
   
   
6. În fereastra Setări grilă, găsiți secțiunea Cum se comportă imaginile. Alegeți Autocrop sau Fit.
   
   
7. În secțiunea Când faceți clic, setați una dintre cele trei opțiuni.
   
   Design de galerie
   
   După cum am menționat mai sus, puteți schimba design-ul galeriei în orice moment. Dar haideți să continuăm personalizând designul grilei noastre. Pentru designul grilei, putem personaliza chenarul, colțurile, umbrele și textul.
   
   
8. Cu galeria încă selectată, faceți clic pe pictograma Design (perie de vopsea).
   
   
9. Pentru setările Border, putem schimba culoarea, opacitatea și lățimea chenarului. Să păstrăm setarea implicită a lățimii setată la 0 și, prin urmare, fără margini.
   
   
10. Radius colț - Faceți clic pe pictograma pentru raza colțului și setați raza colțului din stânga sus după cum doriți. După cum indică pictograma legăturii, celelalte trei colțuri se vor actualiza pentru a se potrivi.
    
    
11. Shadow - Selectați pictograma Shadow. Pentru a adăuga o umbră în picătură, faceți clic pe comutație Activare umbră și setați unghiul, distanța, dimensiunea, încețoșarea și culoarea / opacitatea pentru umbră.
    
    
12. Text - Faceți clic pe pictograma T pentru a seta opțiunile pentru setările de titlu, descriere și alte text. Să schimbăm textul în mod implicit pe tema noastră de text din Paragraful 1. Repetați textul pentru descriere.
    
    setări de schemă
    
    Pentru designul galeriei Grid, putem controla numărul de coloane și rânduri pentru miniaturi. De asemenea, putem controla distanța dintre miniaturi și modul în care textul este afișat peste imagine.
    
    
13. Cu galeria încă selectată, faceți clic pe pictograma Aspect din meniul pop-up.
    
    
14. Utilizați glisorul pentru a seta numărul de coloane și rânduri. Adăugarea mai multor coloane și rânduri va duce la imagini cu miniaturi mai mici în grilă.
    
    
15. Puteți utiliza glisorul Spațiere pentru a crește cantitatea de pixeli între miniaturi. Adăugarea de mai mult spațiu va reduce dimensiunea miniaturilor.
    
    
16. Sub glisiere se află secțiunea de aliniere a textului. Aveți opțiunea ca textul să afișeze stânga, dreapta sau centru.
    
    

Imagini de ecran utilizate cu permisiunea Wix.com, Inc.

Instrucțiuni Video,: How To Create A Dynamic Gallery In Wix - Wix Code Tutorial - Wix For Beginners 2018 (Aprilie 2024).