Studio Two-editor: Over gegevensbronnen

Gebruik gegevensbronnen om overal op je website live inhoud weer te geven. Een gegevensbron kan een CMS-verzameling, een Wix-app (bijvoorbeeld: Wix Blog) of aangepaste code. Jij bepaalt wat er elk element bevat, zoals de titel van een post of de afbeelding van een product.

Kies een veld voor elk deel van een element, zoals de tekst van een knop en de link. Toon bijvoorbeeld de titel van een post op de knop en koppel deze aan de pagina van de post. Je ziet alleen velden die passen, dus afbeeldingsvelden verschijnen niet voor een tekstelement.

Voeg een bron toe aan een pagina of container om de inhoud beschikbaar te maken voor elk element erin. Je hoeft dit niet te doen voordat je een element koppelt. Wanneer je een bron selecteert, voegt de editor deze voor je toe aan een van deze:

• De pagina: Voor de meeste elementen.
• Het element zelf: Voor elementen die een bron kunnen bevatten, zoals repeaters.
• Het Master-onderdeel: Voor elementen in een master-onderdeel, zoals je koptekst.

Terwijl je ontwerpt, tonen je gekoppelde elementen echte inhoud uit de bron. Als er geen item is om weer te geven, zie je in plaats daarvan placeholder-gegevens (bijvoorbeeld: titel post), zodat je het element nog steeds kunt opmaken.

1. Ga naar je editor.
2. Selecteer het element dat je wilt koppelen.
3. Klik rechtsboven in de editor op het Inspector openen-pictogram .
4. (Indien nog niet geopend) Klik op het Instellingen-tabblad.
5. Klik naast de betreffende eigenschap op het Aan gegevens koppelen-pictogram (bijvoorbeeld: Tekst, Link, Alt-tekst).
6. Klik op Bron selecteren en selecteer de bron die de inhoud bevat.
7. Klik op Veld selecteren en selecteer het veld dat je het element wilt weergeven.
8. (Indien nodig) Vul de parameters in die onder het veld verschijnen (bijvoorbeeld: Paginalink-parameter).
9. Klik op Toepassen.

Selecteer de bron die de inhoud bevat die je wilt weergeven. De Bron koppelen-lijst bevat dit soort bronnen:

• CMS-verzameling: Elke verzameling die je maakt in het CMS (Content Management System).
• Wix-apps: Apps zoals Wix Stores en Wix Blog voegen hun eigen bronnen toe onder de naam van de app. Wix Blog voegt bijvoorbeeld Post (één post), Posts (een lijst met posts) en Gerelateerde posts toe.
• Aangepaste code: Een bron die je met code bouwt. Beschrijf wat je nodig hebt en maak ze met AI, of schrijf de code zelf.

Je kunt ook een nieuwe bron uit dezelfde lijst maken of er één instellen met AI. Voeg meer dan één bron toe aan een pagina of onderdeel wanneer je inhoud van verschillende plaatsen nodig hebt. Toon bijvoorbeeld een portfolio uit een CMS-verzameling en je nieuwste blogposts op dezelfde pagina.

Voeg een bron toe aan de container die je inhoud bevat: een pagina, onderdeel, container, repeater, kop- of voettekst. Elk element binnen die container kan dan de bron gebruiken, zodat je deze niet voor elk element hoeft in te stellen.

Controleer welke bronnen een container kan gebruiken in het Instellingen-tabblad van het Inspector-paneel:

• Beschikbare bronnen: Bronnen die zijn gekoppeld aan een container boven deze, zoals het onderdeel of de pagina waarin het zich bevindt. Deze lijst wordt alleen weergegeven wanneer er bronnen zijn om weer te geven.
• Gekoppelde bronnen: Bronnen die rechtstreeks aan deze container zijn gekoppeld.

Een bron die je aan een pagina toevoegt, is beschikbaar voor alle onderdelen en containers van de pagina. Je kop- en voettekst maken geen deel uit van de pagina, dus ze krijgen de bronnen niet. Voeg rechtstreeks een bron toe.

Je kunt de bronnen van een container niet gebruiken voor elementen erbuiten. Om bijvoorbeeld een Meer laden-knop te koppelen aan de lijst van een repeater, voeg je de bron toe aan het onderdeel dat beide bevat. Koppel de repeater en de knop dan aan de bron van het onderdeel.

Zoek naar roze labels op het canvas om te zien wat er aan gegevens is gekoppeld. Een container met een bron toont de naam van de bron op het label. Statische elementen hebben blauwe labels.

1. Ga naar je editor.

2. Selecteer de relevante pagina, onderdeel of container.

3. Klik rechtsboven in de editor op het Inspector openen-pictogram .

4. (Indien nog niet geopend) Klik op het Instellingen-tabblad.

5. Klik onder Gegevensbronnen op + Bron koppelen.

6. Selecteer de bron die je wilt gebruiken:

   • CMS-verzameling: Selecteer een van je verzamelingen. Als je er nog geen hebt, klik je op Nieuwe maken.

   • Aangepaste code: Selecteer een van je aangepaste codebronnen. Als je er nog geen hebt, klik je op Nieuwe maken.

   • Wix-apps: Selecteer een bron uit de lijst van de app (bijvoorbeeld: Posts onder Wix Blog).

Wijzig de instellingen van een bron, ga naar de inhoud of verwijder deze uit een container. Je kunt de bronnen die aan een container zijn gekoppeld, vinden op het Instellingen-tabblad van het Inspector-paneel onder Gekoppelde bronnen.

1. Ga naar je editor.
2. Selecteer de pagina, het onderdeel of de container die de bron heeft.
3. Klik rechtsboven in de editor op het Inspector openen-pictogram .
4. (Indien nog niet geopend) Klik op het Instellingen-tabblad.
5. Klik onder Gekoppelde bronnen naast de bron op het Meer acties-pictogram .
6. Kies wat je wilt doen:
   • Gegevensinstellingen: Wijzig de instellingen van de bron, zoals de filters, sorteringen en hoeveel items tegelijk worden weergegeven. Deze instellingen zijn van toepassing op elk element dat aan deze bron is gekoppeld. Alleen bronnen met instellingen hebben deze optie.
   • Gegevens beheren: Ga naar waar je de inhoud van de bron beheert: de CMS-verzameling, het dashboard van de app (bijvoorbeeld: je blogposts) of de code van de bron.
   • Verwijderen: Koppel de bron van deze container los. Gekoppelde elementen blijven op de pagina, maar stoppen met het weergeven van de inhoud.

Gebruik een repeater om een lijst met items met één ontwerp weer te geven, zoals blogposts of portfolioprojecten. Koppel je repeater aan een bron en ontwerp één item, en elk item toont zijn eigen inhoud in dat ontwerp.

Lees meer over het toevoegen en instellen van repeaters.

Voeg een verzamelingspagina toe en selecteer Itempagina om één item tegelijk met hetzelfde ontwerp weer te geven. De elementen van de pagina zijn al aan de verzameling gekoppeld. Gebruik terwijl je ontwerpt de voorbeeldwerkbalk bovenaan het canvas om een voorbeeld van de pagina met elk item te bekijken.

Je kunt ook een pagina toevoegen met een repeater die alle items van een verzameling vermeldt. Lees meer over het toevoegen en instellen van itempagina's.

Voeg elementen uit een Wix-app toe om te beginnen met hun gegevens. Je kunt ze vinden in het Elementen toevoegen-paneel onder de naam van de app (bijvoorbeeld: Wix Bookings). De Wix Blog-feed en postlijst tonen bijvoorbeeld de posts van je website zodra je ze toevoegt. Een Wix Bookings-dienstenlijst toont je diensten. De elementen op een nieuwe verzamelingspagina komen ook gekoppeld aan. Dat doen de elementen in een repeater ook, zodra je deze koppelt.

Je kunt het ontwerp en de indeling van deze elementen nog steeds aanpassen vanuit de actiebalk of op het canvas.

Voeg standaardelementen toe, zoals tekst en afbeeldingen, en koppel ze zelf wanneer je volledige controle wilt over welke inhoud waar laat zien. Lees meer over het instellen van de Wix Stores-productpagina in Studio Two.

Stel een voorwaarde in om een element te verbergen op basis van een waar/onwaar-veld in je inhoud. Selecteer Waar of Onwaar voor Verbergen als je wilt kiezen wanneer het verborgen is. Verberg bijvoorbeeld een 'Verkocht'-label op elk canvas dat nog te koop is. Je kunt Voorwaardelijke zichtbaarheid vinden onder Geavanceerd op het Instellingen-tabblad van het Inspector-paneel.

• Velden die je kunt gebruiken: Alleen waar/onwaar-velden, inclusief velden die een waar/onwaar-waarde berekenen.
• Waar je geen voorwaarde kunt toevoegen: Op een pagina of in een Master-onderdeel zelf (bijvoorbeeld: je kop- of voettekst). Je kunt nog steeds voorwaarden toevoegen aan de elementen erin.
• Verborgen elementen op het canvas: Wanneer de editor kan zien dat een element verborgen zal worden (bijvoorbeeld: op een verzamelingspagina of in een repeater), toont het streepjes. De streepjes verdwijnen wanneer je het element selecteert.

Gebruik gebeurtenis-handlers om een functie vanuit een van je bronnen uit te voeren wanneer bezoekers interactie hebben met een element. Je kunt Bij klikken, Bij dubbelklikken, Bij muis in, Bij muis eruit, Bij focus of Bij vervagen kiezen.

1. Ga naar je editor.
2. Selecteer het element.
3. Klik rechtsboven in de editor op het Inspector openen-pictogram .
4. (Indien nog niet geopend) Klik op het Instellingen-tabblad.
5. Scrol onder Geavanceerd naar Gebeurtenis-handlers.
6. Klik onder de relevante gebeurtenis op Een functie selecteren (bijvoorbeeld: Bij aanklikken).
7. Klik op Bron selecteren en selecteer de bron.
8. Klik op Veld selecteren en selecteer de functie die je wilt uitvoeren.
9. (Indien nodig) Vul de parameters in die onder de functie verschijnen.
10. Klik op Toepassen.

Klik op een vraag hieronder om meer te lezen over gegevensbronnen in de Studio Two-editor.