Wix Blocks: Een workflow voor je Blocks-app

Leestijd 7 minuten

Wix Blocks is beschikbaar voor alle Wix Studio-gebruikers. Gebruik Wix Studio om toegang te krijgen tot Wix Blocks.

Met Wix Blocks kun je apps maken die je steeds opnieuw kunt gebruiken op zoveel Wix-websites als je wilt. Of je publiceert je app in de Wix Appmarkt en bereik miljoenen gebruikers!

Plan je app

Je app kan het volgende bevatten:

Je moet ook het volgende plannen:

Maak een app

Wanneer je aan je website werkt, kun je Wix Blocks openen vanuit de Appmarkt app market

om een nieuwe app te maken.

Tip

Wanneer je ervoor kiest om een app te maken, wordt Wix Blocks automatisch in een nieuw venster geopend. Je kunt terugkeren naar je website om de app te importeren zodra je deze hebt gebouwd.

Kies je app-type

Kies of je wilt beginnen met een:

Leeg canvas: voeg UI-widgets toe aan je app
Codepakketten: voeg codebestanden en -mappen toe aan je app
Gepersonaliseerd element: embed je HTML-code
Vooraf ontworpen widget

Widgets toevoegen

Met widgets kun je een gebruikersinterface aan je app toevoegen.

Ga naar het Widgets en ontwerp -paneel in het App-structuur -menu.
Klik op + Widget toevoegen om je eerste widget toe te voegen.

Voeg elementen toe

Ontwerpelementen zijn de basisbouwstenen van je widget: tekstelementen, knoppen, afbeeldingen, gebruikersinvoervelden en meer. Wix Blocks is een responsieve werkruimte om apps te maken die zich automatisch aanpassen aan het scherm of het apparaat dat wordt bekeken om de beste gebruikerservaring te bieden.

Het Elementen toevoegen-paneel van Blocks geeft je veel opties voor het toevoegen van ontwerpelementen (ook bekend als UI-elementen ) aan je widget.

Lees meer over het toevoegen van elementen aan je app.

Voeg eigenschappen en gebeurtenissen aan elementen toe

Eigenschappen laten je de elementen van je widget aanpassen. Bijvoorbeeld of een element al dan niet verborgen is wanneer de widget wordt geladen. Gebeurtenis-handlers laten je de interactiviteit van elementen bepalen. Wat er bijvoorbeeld gebeurt als er op een knop wordt geklikt. Je kunt dit doen door je element te selecteren en onderaan op het Eigenschappen en gebeurtenissen-pictogram properties and events

te klikken.

Aangezien je widget uiteindelijk op een Wix-website zal worden geïnstalleerd, is het belangrijk om ervoor te zorgen dat deze past bij de kleuren en lettertypen van de website die zijn gedefinieerd in het websitethema. Zorg ervoor dat je elk element aan het kleurenthema koppelt en aan het tekst (typografie)-thema.

Je kunt Velo-code aan je widget toevoegen op dezelfde manier als je deze kunt toevoegen aan Wix-websites (lees meer over Velo by Wix). Om code aan je widget toe te voegen, open je het Ontwerp-tabblad en gebruik je de code-editor onderaan.

Met de Widget API kun je eigenschappen, gebeurtenissen en functies toevoegen aan je gehele widget. Elke eigenschap, elk evenement of elke functie die je toevoegt, is dan toegankelijk voor websitemakers die met de widget werken in de Wix Editor of Editor X. Eigenschappen zullen verschijnen in het standaard Instellingen-paneel van je widget in de Editor.

Bijvoorbeeld, in onze tutorial voor een tel-widget, definiëren we een 'stap'-eigenschap die de stappen van de teller bepaalt (zoals 1, 2, 3, 4 of 2, 4, 6, 8).

Om eigenschappen, gebeurtenissen en functies aan je widget-API toe te voegen, klik je onderaan op het Widget openbare API-pictogram widget public api

Lees meer over het definiëren van je widget-API.

Lees meer over het gebruik van je widget-API bij het bewerken van een website.

Bekijk een voorbeeld van je widget om te testen hoe deze werkt. Je widget zou in de voorbeeldmodus precies moeten werken zoals wanneer deze op een website zou worden geïnstalleerd. Je kunt communiceren met je widget en zien hoe deze werkt. Je kunt het thema en de API-eigenschappen ook testen.

Op het Configuratie-tabblad kun je bepalen hoe je widget en zijn elementen eruit zien en zich gedragen wanneer ze op een website worden geïnstalleerd. Je kunt de weergavenamen wijzigen, knoppen toevoegen aan en verwijderen uit de actiebalken en knopinstellingen wijzigen. Je kunt ook bepalen of elementen kunnen worden geselecteerd, gedupliceerd of verwijderd.

Lees meer over het configureren van je widget.

Op het Panelen-tabblad kun je aangepaste panelen maken die openen wanneer een websitemaker je widget bewerkt in hun Editor, in plaats van een van de standaardpanelen van de widget (zoals Instellingen of Ontwerp).

Lees meer over het maken van aangepaste panelen in Blocks.

Bouw ontwerpvoorinstellingen

Je kunt meer dan één indeling en stijl voor je widget maken door ontwerpvoorinstellingen te gebruiken. Wanneer je ontwerpvoorinstellingen maakt, behoudt je widget dezelfde elementen en functionaliteit, maar kun je de kleuren, indeling, enzovoort wijzigen.

Je kunt Ontwerpvoorinstellingen vinden in het Widgets en ontwerp -paneel. Als je in het Ontwerp-tabblad werkt, klik je op het App-structuur-pictogram app structure