Studio Editor: Een gepersonaliseerd element toevoegen
Leestijd 3 minuten
Verbeter de website van je klant met je eigen elementen. Je kunt elke Javascript-component toevoegen door een gepersonaliseerd element te linken aan een server-URL of een codebestand te linken. Indien nodig kun je rechtstreeks vanuit de Editor meer kenmerken instellen.
In dit artikel lees je meer over:
Voordat je begint:
Zorg ervoor dat de website van je klant een gekoppeld domein heeft en geen Wix-advertenties.
Wat zijn gepersonaliseerde element?
Met gepersonaliseerd elementen kun je je eigen HTML-tags gebruiken. Deze elementen werken in alle ondersteunde browsers en kunnen worden gebruikt met elke JavaScript ES6-bibliotheek of -framework dat werkt met HTML 5.
Bij het embedden van een gepersonaliseerd element zijn er enkele vereisten waarmee je rekening moet houden:
- Je Javascript-bestand moet gehost zijn met Wix met behulp van Velo (aanbevolen), of je eigen externe of lokale server.
- Je code moet HTTPS bevatten, niet HTTP, anders wordt deze niet weergegeven op je live website.
- Je code moet up-to-date en HTML5-compatibel zijn. De meeste browsers geven pagina's en scripts niet correct weer als ze zijn geschreven met oudere versies van JS of HTML.
- Alle relevante ontwerpinstellingen en complexe functionaliteiten moeten worden opgeslagen in de hoofd-JS-code, bijvoorbeeld de CSS- en andere JS-bestanden. Als deze instellingen afzonderlijk worden opgeslagen, betekent dit dat ze niet werken op je website.
Tips:
- Je kunt gepersonaliseerde elementen van externe bronnen gebruiken. Zorg er wel voor dat je de Tagnaam in Eigenschappen bijwerkt wanneer je het aangepaste element aan je pagina toevoegt.
- De prestaties van je gepersonaliseerde element zijn afhankelijk van de implementatie.
Het gepersonaliseerde element toevoegen en instellen
Voeg zoveel gepersonaliseerde elementen toe als je nodig hebt. Nadat je een gepersonaliseerd element naar je pagina hebt gesleept, definieer je de bron ervan (server-URL of een Velo-bestand) en geef je het een tagnaam zodat je het gemakkelijk kunt herkennen in het paginaregister.
Om een gepersonaliseerd element toe te voegen en in te stellen:
- Klik links in de Editor op Elementen toevoegen
. - Klik op Embed en Social.
- Klik op Gepersonaliseerd element.
- Klik naast Gepersonaliseerd element op het Toevoegen-pictogram
. - Voeg je scriptbestand toe:
- Selecteer het gepersonaliseerde element.
- Klik op Kies de bron.
- Selecteer hoe je je aangepaste element wilt toevoegen:
- Server-URL: Voer de bestands-URL in, inclusief de bestandsnaam.
- Velo-bestand: Selecteer een van je Velo-bestanden.
- Voer een Tagnaam in voor je element.
Let op: De tagnaam moet ten minste twee woorden lang zijn, gescheiden door een streepje (bijvoorbeeld: groot-weer-widget).
- (Optioneel) Pas de grootte, het dokken en de uitlijning van het element aan vanuit het Inspector-paneel.
Let op:
- Om veiligheidsredenen wordt het aangepaste element weergegeven in een iFrame in de Editor en in de voorbeeldmodus. Dit kan van invloed zijn op de indeling van het onderdeel. Ga naar je gepubliceerde website om te zien hoe deze er live uitziet.
- Je kunt de SEO-instellingen van je element definiëren met behulp van de Velo API.
De kenmerken van het gepersonaliseerde element instellen
Maak verdere aanpassingen aan de eigenschappen en het gedrag van je element door kenmerken in te stellen. Met het Element kenmerken-paneel kun je kenmerken rechtstreeks vanuit de Editor toevoegen, bewerken en verwijderen, zonder dat je de daadwerkelijke code hoeft te openen.
Belangrijk:
De code voor je gepersonaliseerde element moet de gedefinieerde kenmerken erkennen en verwerken. Anders werken ze niet goed.
Om de kenmerken van het aangepaste element in te stellen:
- Selecteer het gepersonaliseerde element.
- Klik op Kenmerken instellen.
- Klik op Nieuw kenmerk.
- Voer een naam in voor het kenmerk (bijvoorbeeld: 'rotatie', 'breedte').
- Voer de waarde voor het attribuut in (dit kan elke relevante tekenreeks zijn).
- Klik op Instellen.
Op zoek naar meer geavanceerde informatie?
Lees hoe je gepersonaliseerde elementen gebruikt met Velo by Wix. Bekijk voor specifieke vragen en het oplossen van problemen onze veelgestelde vragen over gepersonaliseerde elementen.
Vond je dit artikel nuttig?
|