Wix Pro Gallery: De galerij ontwerpen
9 min
Laat je galerij opvallen op je website door enkele ontwerpaanpassingen toe te voegen. Je kunt je galerij een professioneel tintje geven door de indeling, kleuren, lettertypen en meer aan te passen.
Om het ontwerp van je Pro Gallery aan te passen:
- Ga naar je Editor.
- Klik op het Pro Gallery-element op je pagina.
- Klik op Instellingen.
- Klik op het Ontwerp-tabblad.
- Kies wat je wilt personaliseren:
Overlay & pictogrammen
Een overlay ligt bovenop een afbeelding en voegt een extra effect toe wanneer je met je muis over een afbeelding beweegt. Dit effect en eventuele pictogrammen kun je zelf aanpassen.
- Klik op Overlay en pictogrammen.
- Kies tussen een Volledige of Gedeeltelijke overlay en pas deze aan met behulp van de beschikbare opties:
- Volledige overlay: De overlay dekt het hele galerij-item.
- Verloop: Klik op de schakelaar om een verloopoverlay in te schakelen.
- Kleur en dekking 1 en 2: Klik op het relevante kleurenvak om de kleuren van de kleurovergang aan te passen. Sleep vervolgens de schuifregelaar om de dekking van de kleuren aan te passen.
- Richting kleurovergang: Sleep de schuifregelaar om de overlay-richting aan te passen.
- Pictogramkleur: Klik op het kleurvak om de kleur te wijzigen van galerijpictogrammen die bij het aanwijzen verschijnen.
- Kleuroverlay: Klik op het kleurvak om een kleur te kiezen. Sleep vervolgens de schuifregelaar om de transparantie van de kleuroverlay te wijzigen.
- Pictogramkleur: Klik op het kleurvak en selecteer een nieuwe kleur voor je galerijpictogrammen.
- Verloop: Klik op de schakelaar om een verloopoverlay in te schakelen.
- Gedeeltelijke overlay: De overlay bedekt slechts een deel van het galerij-item.
- Grootte instellen in: Beheer de grootte van je overlay in percentages of pixels.
- Maat: Sleep de schuifregelaar of voer een waarde in om een overlaygrootte te kiezen.
- Overlay begint vanaf: Kies waar je overlay wordt geplaatst.
- Opvulling: Sleep de schuifregelaar om de hoeveelheid ruimte tussen de galerijrand en je overlay aan te passen.
- Verloop: Klik op de schakelaar om een verloopoverlay in te schakelen.
- Kleur en dekking 1 en 2: Klik op het relevante kleurenvak om de kleuren van de kleurovergang aan te passen. Sleep vervolgens de schuifregelaar om de dekking van de kleuren aan te passen.
- Richting kleurovergang: Sleep de schuifregelaar om de overlay-richting aan te passen.
- Pictogramkleur: Klik op het kleurvak om de kleur te wijzigen van galerijpictogrammen die bij het aanwijzen verschijnen.
- Kleuroverlay: Klik op het kleurvak om een kleur te kiezen. Sleep vervolgens de schuifregelaar om de transparantie van de kleuroverlay te wijzigen.
- Pictogramkleur: Klik op het kleurvak en selecteer een nieuwe kleur voor je galerijpictogrammen.
- Volledige overlay: De overlay dekt het hele galerij-item.
- Kies een overlay-effect uit de beschikbare opties:
- Geen effect: De overlay heeft geen effect.
- Vervagen: De overlay verschijnt geleidelijk als je er met je muis overheen beweegt.
- Uitvouwen: De overlay wordt groter als je er met je muis overheen beweegt.
- Omhoog schuiven: De overlay schuift omhoog als je er met je muis overheen beweegt.
- Naar rechts: De overlay schuift bij aanwijzen naar rechts.
Teksten
Je kunt het ontwerp van de titel- en beschrijvingstekst aanpassen, op voorwaarde dat je ervoor kiest om ze op het tabblad Indeling weer te geven. Als je de Tekst-opties (stap 1 hieronder) niet ziet, ga dan naar het Indeling-tabblad, klik op Indeling personaliseren en schakel de selectievakjes naast Titel en Beschrijving in om ze weer te geven.
- Klik op Tekst.
- Personaliseer de tekst met de onderstaande opties:
- Weer te geven informatie: Schakel het selectievakje in naast de informatie die je wilt weergeven (titel, beschrijving, teller diavoorstelling).
Let op: De Diavoorstellingteller-optie is alleen beschikbaar in de Diavoorstelling-indeling als je Dia automatisch hebt ingeschakeld.
- Titelstijl en kleur: Selecteer het lettertype en de kleur van de titeltekst.
- Stijl en kleur lettertype beschrijving: Selecteer het lettertype en de kleur van de beschrijvingstekst.
- Horizontale uitlijning: Kies ervoor om de horizontale tekst links, in het midden of rechts uit te lijnen.
- Verticale uitlijning: Kies ervoor om de verticale tekst links, in het midden of rechts uit te lijnen.
- Verticale opvulling van tekst: Sleep de schuifregelaar om de hoeveelheid ruimte tussen de verticale tekst en de rand te wijzigen.
- Horizontale opvulling van tekst: Sleep de schuifregelaar om de hoeveelheid ruimte tussen de horizontale tekst en de rand te wijzigen.
- Weer te geven informatie: Schakel het selectievakje in naast de informatie die je wilt weergeven (titel, beschrijving, teller diavoorstelling).
Knoppen
Dit onderdeel wordt weergegeven als je ervoor kiest om de Meer laden-knop weer te geven op het Indeling-tabblad.
Hier kun je de tekst, het lettertype, de kleur en de randradius van de Meer laden-knop wijzigen.
Hier kun je de tekst, het lettertype, de kleur en de randradius van de Meer laden-knop wijzigen.
- Klik op Knoppen.
- Personaliseer de knoppen met behulp van de onderstaande opties:
- Knoptekst: Voer de tekst in die op de knop verschijnt.
- Lettertype en kleur: Selecteer het lettertype en de kleur van de knop.
- Knopkleur en dekking: Sleep de schuifregelaar om de knopkleur en dekking te wijzigen en klik op het kleurvak om een kleur te selecteren.
- Randbreedte en kleur: Sleep de schuifregelaar om de randbreedte te wijzigen en klik op het kleurvak om een kleur te selecteren.
- Hoekradius: Sleep de schuifregelaar om de hoekradius te wijzigen.
Navigatiepijlen
Je kunt navigatiepijlen inschakelen in de Thumbnail-, Slider-, Diavoorstelling- en Kolom-indelingen. Je kunt hun positie, grootte en kleur aanpassen om bezoekers van je website te helpen eenvoudig door je galerij te navigeren.
- Klik op Navigatiepijlen.
- Klik op de schakelaar om pijlen in je galerij in te schakelen.
- Pas de pijlen aan met de volgende opties:
- Stijl: Klik om een pijlontwerp te selecteren of klik op het Toevoegen-pictogram
om je eigen pijlontwerp te uploaden. - Achtergrond: Klik op de dropdown om een schaduw, kader of geen achtergrond te selecteren.
- Schaduw: Voegt een lichte schaduw toe rond de pijl.
- Vak: Voegt een kader rond de pijl toe. Klik op het kleurvak om de kleur van het vak te wijzigen en versleep de schuifregelaar om de dekking aan te passen en de hoeken af te ronden.
- Geen: Er wordt geen achtergrond toegevoegd aan de pijl.
- Pijlgrootte: Sleep de schuifregelaar om de grootte van de navigatiepijlen te vergroten of te verkleinen.
- Pijlkleur: Klik op het kleurvak om de kleur van de navigatiepijl te selecteren. Selecteer een kleur uit je websitekleuren of kies je eigen kleur.
- Pijlpositie: Selecteer het relevante selectievakje om navigatiepijlen op of buiten de galerij weer te geven. Let op: Het weergeven van navigatiepijlen in je galerij kan een deel van je galerij-items bedekken.
- Centreer pijlen naar: Kies ervoor om je pijlen aan zijkanten van de galerij zelf, de afbeeldingen of tekst te centreren.
- Horizontale opvulling: Sleep de schuifregelaar om de hoeveelheid ruimte tussen je pijlen en de rand van je galerij aan te passen.
- Stijl: Klik om een pijlontwerp te selecteren of klik op het Toevoegen-pictogram
Item stijl
Elke afbeelding of video in de galerij is een item. Je kunt het uiterlijk van de items voor zowel de normale als de aanwijsmodus wijzigen.
- Klik op Item stijl.
- Pas de standaardweergave van het item aan onder Item stijl:
- Randbreedte en kleur: Sleep de schuifregelaar om de randbreedte te wijzigen en klik op het kleurvak om een kleur te selecteren.
- Hoekradius: Sleep de schuifregelaar om de hoeken meer rond of vierkant te maken.
Let op: De opties Randbreedte en kleur en Hoekradius zijn alleen beschikbaar als je ervoor kiest om je thumbnails bij te snijden in de instellingen van je indeling en zijn alleen van toepassing op de hoofdafbeelding (niet de thumbnails).
- Schaduw: Klik op de schakelaar om de schaduw in of uit te schakelen:
- Ingeschakeld: Het galerij-item heeft een schaduwrand. Pas de dekking, kleur, vervaging, schaduwrichting en schaduwgrootte aan.
- Uitgeschakeld: Het galerij-item heeft geen schaduwrand.
- Kies wat er gebeurt als iemand het galerij-item aanwijst:
- Geen effect: Er wordt geen effect toegepast als je met je muis over het item beweegt.
- Inzoomen: Zoomt in op de afbeelding als je er met je muis overheen beweegt.
- Vervagen: De afbeelding vervaagt als je er met je muis overheen beweegt.
- Grijswaarden: De afbeelding wordt zwart-wit als je er met je muis overheen beweegt.
- Verkleinen: De afbeelding wordt kleiner als je er met je muis overheen beweegt.
- Omkeren: De kleur van de afbeelding wordt omgekeerd als je er met je muis overheen beweegt.
- Inkleuren: De afbeelding verandert van zwart-wit naar kleur als je er met je muis overheen beweegt.
- Donkerder: Het beeld wordt iets donkerder als je er met je muis overheen beweegt.
- Kies wat er gebeurt terwijl de afbeelding wordt geladen:
- Wazige afbeelding: Er verschijnt een wazige versie van de afbeelding tijdens het laden.
- Gekleurde tijdelijke plaatsaanduiding: Er verschijnt een gekleurde tijdelijke plaatsaanduiding terwijl de afbeelding wordt geladen.
Scroll- / slide-animaties
Voeg een geanimeerd effect toe dat verschijnt wanneer bezoekers door je galerij scrollen. Je kunt de gekozen animatie verder personaliseren door een overgangsstijl toe te voegen en de duur ervan aan te passen.
Let op:
- Beschikbare animaties zijn afhankelijk van de galerij-indeling die je kiest.
- Het personaliseren van animatie-instellingen is alleen beschikbaar voor indelingen die horizontaal scrollen.
Een scrol-animatie toevoegen:
- Klik op Scrol-animaties.
- Kies wat er gebeurt als bezoekers door je galerij scrollen:
- Geen effect: Er wordt geen effect toegepast tijdens het scrollen.
- Vervagen (in): Afbeeldingen verschijnen geleidelijk tijdens het scrollen.
- Grijstinten: De afbeelding wordt zwart-wit tijdens het scrollen.
- Omhoog schuiven: De afbeelding schuift omhoog tijdens het scrollen.
- Uitvouwen: De afbeelding wordt groter tijdens het scrollen.
- Krimpen: De afbeelding wordt kleiner tijdens het scrollen.
- Uitzoomen: De afbeelding zoomt uit tijdens het scrollen.
- Eén kleur: Bij het scrollen wordt één kleur op de afbeeldingen toegepast.
Animaties personaliseren:
- Klik op Animaties personaliseren.
- Pas je animatie-instellingen aan:
- Overgangsstijl: Klik op de dropdown om een bewegingseffect toe te passen op je galerij-items. Dit effect wordt toegepast wanneer bezoekers van het ene item naar het andere scrollen.
- Duur: Sleep de schuifregelaar om aan te passen hoe lang je animatie duurt.
Uitgebreide weergave
Dit onderdeel verschijnt wanneer een gebruiker op een galerij-item klikt als je 'In uitgebreide weergave openen' hebt gekozen in het instellingenpaneel van de Pro Gallery. Vanaf hier kun je de uitgebreide weergave van je galerij aanpassen aan het ontwerp en het merk van je website.
- Klik op Uitgebreide weergave.
- Klik op Uitgebreide weergave aanpassen en personaliseer de uitgebreide weergave van de galerij met de volgende opties:
- Welke informatie wordt getoond? Kies voor het tonen van een titel, beschrijving en/of link.
- Waar verschijnt het?Kies waar je de info wilt plaatsen:
- Zijkant: De informatie verschijnt rechts van het galerij-item.
- Onder: De informatie verschijnt onder het galerij-item.
- Wanneer wordt het getoond?Kies wanneer de informatie wordt weergegeven:
- Altijd: De informatie wordt altijd weergegeven.
- Bij het klikken op het info-pictogram: De informatie verschijnt alleen wanneer een bezoeker op het info-pictogram in de linkerbovenhoek van de uitgebreide weergave klikt.
- Volledig scherm toestaan: Kies om bezoekers in staat stellen galerij-items op volledig scherm te bekijken.
- Achtergrondkleur: Klik op het kleurenvak om een achtergrondkleur te selecteren voor de uitgebreide weergave. Kies uit je websitekleuren of voeg een kleur toe.
- Kleur pictogrammen: Klik op het kleurenvak om een kleur te selecteren voor de pictogrammen in de uitgebreide weergave. Kies uit je websitekleuren of voeg een kleur toe.
- Titelstijl:
- Klik op het dropdownmenu om het lettertype, de stijl en de grootte van de Lettertypekiezer aan te passen.
- Klik op het kleurvak om de tekstkleur van de titel te wijzigen.
- Stijl beschrijving:
- Klik op het dropdownmenu om het lettertype, de stijl en de grootte van de Lettertypekiezer aan te passen.
- Klik op het kleurvak om de tekstkleur van de beschrijving te wijzigen.
- Tekstuitlijning: Kies de uitlijning van de tekst: links, in het midden of rechts.
Vond je dit artikel nuttig?
|