Wix webbplats från Scratch - Grid Gallery

• Maj 16, 2024

I denna handledning lägger vi till ett galleri på vår Wix-webbplats, som vi har skapat från en tom mall. Att börja från början är ett bra sätt att lära sig grunderna.

Till skillnad från Wix-mallarna som inte är utbytbara kan du när som helst byta gallerityper för ett nytt utseende. Det finns många typer av gallerier, från murnät till honungskaka. Varje galleri har sina egna funktioner. Låt oss ta en titt på det grundläggande gallernätet (porträtt).

1. Klicka på Plus-ikonen i den vänstra menyn och välj Galleri i listan.
   
   
2. Håll muspekaren över varje miniatyrbild för att se en förhandsgranskning och beskrivning.
   
   
3. Dra nu rutgalleriet till sidan.
   
   
4. Använd storlekshandtagen för att ändra storlek på rutnätet som du vill. Jag ändrade storlek på rutnätet till bredden på 980 sidor.
   
   Just nu har galleriet några platshållarbilder. Låt oss behålla dem för nu och arbeta med att anpassa galleriinställningarna för våra behov.
   
   Raster galleriinställningar
   
   Bildskalning - Du har möjlighet att din bild ska beskäras eller skalas för att passa in i ramen. Autocrop-inställningen beskär automatiskt bilderna så att de passar in i ramen och alternativet Anpassa ändrar storleken på bilden så att den passar in i ramen.
   
   När du klickar - du har tre alternativ för vad som händer när du klickar på en galleribild. Ett alternativ att ingenting händer. Den andra är att ha bilden öppen som en pop-up. Den tredje är att öppna en länk. För det mesta är pop-up ett bra val eftersom bilden visas i en större storlek. Men om du vill skicka besökaren till en annan sida använder du alternativet A Link opens.
   
   
5. Välj Galleri och klicka på Inställningsikonen i popup-menyn.
   
   
6. I fönstret Rasterinställningar hittar du avsnittet Hur uppträder bilder. Välj Autocrop eller Fit.
   
   
7. Ställ in ett av de tre alternativen i avsnittet När klickas.
   
   Galleridesign
   
   Som nämnts ovan kan du när som helst byta galleri-design. Men låt oss fortsätta genom att anpassa vår nätdesign. För rutnätdesign kan vi anpassa gränsen, hörnen, skuggan och texten.
   
   
8. När galleriet fortfarande är valt klickar du på designikonen (målarpensel).
   
   
9. För gränsinställningarna kan vi ändra färg, opacitet och bredd på gränsen. Låt oss hålla standardinställningen för bredden inställd på 0 och därför ingen gräns.
   
   
10. Corner Radius - Klicka på ikonen för Corner Radius och ställ in den övre vänstra hörnsradie som du vill. Eftersom länkikonen indikerar kommer de tre andra hörnen att uppdateras för att matcha.
    
    
11. Skugga - Välj skuggaikonen. För att lägga till en droppskugga klickar du på Aktivera skugga och ställer in vinkel, avstånd, storlek, oskärpa och färg / opacitet för skuggan.
    
    
12. Text - Klicka på T-ikonen för att ställa in alternativen för inställningarna för titel, beskrivning och annan text. Låt oss ändra texten från standard till vårt texttema för stycke 1. Upprepa för beskrivningstexten.
    
    Layout inställningar
    
    För galleridesign kan vi styra antalet kolumner och rader för miniatyrerna. Vi kan också kontrollera avståndet mellan miniatyrbilder och hur texten visas över bilden.
    
    
13. När galleriet fortfarande är valt klickar du på Layout-ikonen från popup-menyn.
    
    
14. Använd reglaget för att ställa in antalet kolumner och rader. Lägga till fler kolumner och rader resulterar i mindre miniatyrbilder i rutnätet.
    
    
15. Du kan använda skjutreglaget Avstånd för att öka mängden pixlar mellan miniatyrbilder. Att lägga till mer utrymme minskar miniatyrernas storlek.
    
    
16. Under reglagen finns textinriktningssektionen. Du har alternativet för att texten ska visas till vänster, höger eller mitt.
    
    

Skärmbilder som används med tillstånd från Wix.com, Inc.