Wix-website van Scratch - Grid Gallery
In deze zelfstudie voegen we een galerij toe aan onze Wix-website, die we hebben gemaakt op basis van een lege sjabloon. Vanaf nul beginnen is een geweldige manier om de basis te leren.

In tegenstelling tot de Wix-sjablonen die niet uitwisselbaar zijn, kunt u op elk gewenst moment van galerijtype wisselen voor een nieuwe look. Er zijn veel soorten galerijen, van metselwerkrooster tot honingraat. Elke galerij heeft zijn eigen functies. Laten we een kijkje nemen in de basis Grid (portret) galerij.

  1. Klik op het Plus-pictogram in het linkermenu en kies Galerij in de lijst.

  2. Beweeg over elke galerijminiatuur om een ​​voorbeeld en beschrijving te zien.

  3. Sleep nu de rastergalerij naar de pagina.

  4. Gebruik de formaatgrepen om het raster naar wens aan te passen. Ik heb het raster verkleind naar de 980 paginabreedte.

    Op dit moment heeft de galerij enkele tijdelijke afbeeldingen. Laten we ze voorlopig bewaren en werken aan het aanpassen van de galerij-instellingen aan onze behoeften.

    Instellingen rastergalerij

    Afbeelding schalen - U kunt uw afbeelding bijsnijden of schalen zodat deze binnen het kader past. Met de instelling Automatisch bijsnijden worden de afbeeldingen automatisch bijgesneden zodat ze in het kader passen en met de optie Aanpassen wordt het formaat van de afbeelding aangepast aan het kader.

    Wanneer erop wordt geklikt - U hebt drie opties voor wat er gebeurt wanneer op een galerijafbeelding wordt geklikt. Een optie om niets te laten gebeuren. De tweede is om de afbeelding als een pop-up te openen. De derde is om een ​​link te openen. Meestal is de pop-up een goede keuze omdat de afbeelding op een groter formaat wordt weergegeven. Maar als u de bezoeker naar een andere pagina wilt sturen, gebruikt u de optie A Link wordt geopend.

  5. Selecteer de galerij en klik op het pictogram Instellingen in het pop-upmenu.

  6. Ga in het venster Rasterinstellingen naar het gedeelte Hoe afbeeldingen zich gedragen. Kies Autocrop of Fit.

  7. Stel in het gedeelte Wanneer geklikt een van de drie opties in.

    Galerijontwerp

    Zoals hierboven vermeld, kunt u op elk gewenst moment van galerijontwerp wisselen. Maar laten we doorgaan met het aanpassen van ons rasterontwerp. Voor het rasterontwerp kunnen we de rand, hoeken, schaduw en tekst aanpassen.

  8. Terwijl de galerij nog steeds is geselecteerd, klikt u op het pictogram Ontwerp (penseel).

  9. Voor de randinstellingen kunnen we de kleur, dekking en breedte van de rand wijzigen. Laten we de standaardinstelling van de breedte op 0 zetten en dus geen rand.

  10. Hoekradius - Klik op het pictogram voor de hoekradius en stel de hoekradius in de linkerbovenhoek in zoals u wilt. Zoals het koppelingspictogram aangeeft, worden de andere drie hoeken bijgewerkt om overeen te komen.

  11. Schaduw - Selecteer het schaduwpictogram. Om een ​​slagschaduw toe te voegen, klikt u op de schakelaar Schaduw inschakelen en stelt u de hoek, afstand, grootte, vervaging en kleur / dekking voor de schaduw in.

  12. Tekst - Klik op het pictogram T om de opties in te stellen voor de titel-, beschrijving- en andere tekstinstellingen. Laten we de standaardtekst wijzigen in ons tekstthema Alinea 1. Herhaal dit voor de beschrijvingstekst.

    opmaak instellingen

    Voor het ontwerp van de rastergalerij kunnen we het aantal kolommen en rijen voor de miniaturen bepalen. We kunnen ook de afstand tussen miniaturen bepalen en hoe de tekst over de afbeelding wordt weergegeven.

  13. Terwijl de galerij nog steeds is geselecteerd, klikt u op het pictogram Lay-out in het pop-upmenu.

  14. Gebruik de schuifregelaar om het aantal kolommen en rijen in te stellen. Het toevoegen van meer kolommen en rijen resulteert in kleinere miniatuurafbeeldingen in het raster.

  15. U kunt de schuifregelaar Afstand gebruiken om het aantal pixels tussen miniaturen te vergroten. Als u meer ruimte toevoegt, worden de miniaturen kleiner.

  16. Onder de schuifregelaars bevindt zich het gedeelte voor tekstuitlijning. U kunt de tekst links, rechts of in het midden weergeven.

Schermafbeeldingen gebruikt met toestemming van Wix.com, Inc.

Video-Instructies: Corvid by Wix | How to Create a Dynamic Category Page (Mei 2024).