Wix Blocks: Aangepaste panelen ontwerpen voor de actiebalkknoppen van je widget
Leestijd 7 minuten
Met Blocks kun je aangepaste panelen maken voor de actiebalken in je widget en de elementen ervan. Wanneer een websitemaker op een actieknop klikt (bijvoorbeeld de Instellingen-knop>Wix Studio, wordt een aangepast paneel geopend in plaats van het standaardpaneel.
Wanneer je aangepaste panelen maakt, geef je websitemakers meer opties om met je widget te werken, de bruikbaarheid ervan te vergroten en hen te helpen deze gemakkelijker op hun website aan te passen.
Het maken van je paneel bestaat uit drie hoofdfasen:
2. Voeg code toe aan je paneel om het te laten werken.
Let op:
- Koppel je paneel: Bepaal welke panelen bij welke actieknop horen op het Configuratie-tabblad.
- Richtlijnen voor gebruikerservaring: Gebruik onze UX-richtlijnen om je panelen duidelijk en effectief te maken.
Een paneel maken
Er zijn twee manieren om een paneel te maken.
Maak je paneel via het Panelen-tabblad
Of maak je paneel via het Configuratie-tabblad
Elementen aan je paneel toevoegen
Je paneel is opgebouwd uit paneelelementen, zoals knoppen, verdelers, invoervelden en meer.
Bekijk een lijst met paneelelementen
Klik op + Element toevoegen en selecteer welke elementen je aan je paneel wilt toevoegen. Je kunt hetzelfde element zo vaak toevoegen als je wilt. Vervolgens kun je de labeltekst en -stijl aanpassen en standaardinstellingen en waarden instellen.
Het paneel aanpassen
Je hebt verschillende aanpassingsopties voor de elementen in je paneel. Je kunt de labeltekst wijzigen, tooltips toevoegen en standaardinstellingen en waarden instellen. Dit doe je door de actiebalk te gebruiken die aan elk element is gekoppeld.
Opties voor instellingen
Klik op een element. Selecteer Instellingen of het 
-pictogram om je paneel aan te passen. Dit zijn enkele van de opties:
-pictogram om je paneel aan te passen. Dit zijn enkele van de opties:Voeg veldtitels toe (lees meer)
Voeg tooltips toe (lees meer)
Definieer het element als 'alleen lezen' (lees meer)
Stel initiële tekstopties in (lees meer)
Voeg patroonvalidatie toe (lees meer)
Meerkeuze-elementen
Als je ervoor kiest om een element toe te voegen dat meerdere opties heeft, zoals selectievakjes, keuzerondjes of dropdownlijsten, kun je deze configureren met behulp van de keuzes beheren-knop in de actiebalk die verschijnt wanneer je het element selecteert.
Keuzes hernoemen (lees meer)
Meer acties (lees meer)
om standaardinstellingen in te stellen, waarden te bewerken en elementen te verplaatsen of te dupliceren.
Nadat je je paneel hebt ontworpen, moet je code toevoegen om het te laten werken. Vervolgens kun je het aan een actieknop toevoegen en testen om te zien of het werkt. Lees meer over het coderen van je paneel.
Een paneel hernoemen, dupliceren of verwijderen
- Wijs je paneelnaam linksonder aan in het Mijn panelen-gedeelte van het Panelen-paneel.
- Klik op het Meer acties-pictogram
wanneer deze verschijnt. - Selecteer hernoemen, dupliceren of verwijderen.
Een paneel aan een actieknop koppelen
Nadat je je paneel hebt gemaakt, moet je het koppelen aan een knop in de actiebalk van een widget of een element.
- Klik op het C-onfiguratietabblad.
- Selecteer de juiste widget in het Widgets-paneel.
- Wijs de knop waaraan je je paneel wilt koppelen aan in het Bewerk actiebalk-menu dat verschijnt. Als het bijvoorbeeld een instellingenpaneel is, selecteer je de instellingenknop. Als het een ontwerppaneel is, selecteer je de ontwerpknop. Je kunt ook een nieuwe knop toevoegen, deze een naam geven en deze aan een paneel koppelen.
- Klik op Instellingen actieknop
.
5. Selecteer je paneel in het Mijn panelen-gedeelte.
Nu je je paneel hebt ontworpen, moet je er code aan toevoegen om het te laten werken. Lees meer
Koppel je paneel via het Configuratie-tabblad
Merk op dat het ontwerpen en coderen van de panelen gebeurt op het Panelen-tabblad. Kiezen welke panelen bij welke knoppen passen, gebeurt op het Configuratie-tabblad. Als je niet bekend bent met het Configuratie-tabblad, lees dan meer over het configureren van de actiebalk van je widget
Vond je dit artikel nuttig?
|