Studio Editor: Ein benutzerdefiniertes Element hinzufügen
3 Min. Lesezeit
Bereichere die Website deines Kunden mit deinen eigenen Elementen. Du kannst jede Javascript-Komponente hinzufügen, indem du ein benutzerdefiniertes Element mit einer Server-URL oder einer Codedatei verbindest. Bei Bedarf kannst du weitere Attribute direkt im Editor festlegen.
In diesem Artikel erfährst du mehr über folgende Themen:
Bevor du loslegst:
Stelle sicher, dass die Website deines Kunden mit einer Domain verbunden ist und keine Werbung von Wix enthält.
Was sind benutzerdefinierte Elemente?
Benutzerdefinierte Elemente ermöglichen es dir, deine eigenen HTML-Tags zu verwenden. Diese Elemente funktionieren auf allen unterstützten Browsern und können mit jeder JavaScript ES6-Bibliothek oder jedem Framework verwendet werden, das mit HTML 5 funktioniert.
Wenn du ein benutzerdefiniertes Element einbettest, sind einige Anforderungen beachten:
- Deine Javascript-Datei muss von Wix gehostet werden, indem du Velo (empfohlen) oder deinen eigenen externen oder lokalen Server verwendest.
- Dein Code muss HTTPS enthalten, nicht HTTP, sonst wird er auf deiner Live-Website nicht angezeigt.
- Dein Code muss aktuell und HTML5-kompatibel sein. Die meisten Browser zeigen Seiten und Skripte nicht richtig an, wenn sie mit älteren Versionen von JS oder HTML geschrieben wurden.
- Alle relevanten Design-Einstellungen und komplexen Funktionalitäten wie die CSS- und andere JS-Dateien müssen innerhalb des JS-Hauptcodes gespeichert werden. In einigen Fällen werden diese Einstellungen separat gespeichert, was bedeutet, dass sie auf deiner Website nicht funktionieren.
Tipps:
- Du kannst benutzerdefinierte Elemente von Dritten nutzen. Aktualisiere dafür nur den Tag-Namen in Eigenschaften, wenn du das benutzerdefinierte Element zu deiner Seite hinzufügst.
- Die Leistung deines benutzerdefinierten Elements hängt von seiner Implementierung ab.
Das benutzerdefinierte Element hinzufügen und einrichten
Füge so viele benutzerdefinierte Elemente hinzu, wie du benötigst. Nachdem du ein benutzerdefiniertes Element auf deine Seite gezogen hast, definiere seine Quelle (Server-URL oder eine Velo-Datei) und gib ihr einen Tag-Namen, damit du es in der Seitenregistrierung leicht wiedererkennst.
Um ein benutzerdefiniertes Element hinzuzufügen und einzurichten:
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen
. - Klicke auf Einbettung & Social Media.
- Klicke auf Benutzerdefiniertes Element.
- Klicke neben Benutzerdefiniertes Element auf das Symbol für Hinzufügen
. - Füge deine Skriptdatei hinzu:
- Wähle das benutzerdefinierte Element aus.
- Klicke auf Quelle wählen.
- Wähle aus, wie du dein benutzerdefiniertes Element hinzufügen möchtest:
- Server-URL: Gib die URL der Datei ein, einschließlich des Dateinamens.
- Velo-Datei: Wähle eine deiner Velo-Dateien aus.
- Gib einen Tag-Namen für dein Element ein.
Hinweis: Der Tag-Name sollte mindestens zwei Wörter lang sein, getrennt durch einen Bindestrich (z. B. big-weather-widget).
- (Optional) Passe die Größe, das Andocken und die Ausrichtung des Elements im Inspektor-Panel an.
Hinweise:
- Aus Sicherheitsgründen wird das benutzerdefinierte Element im Editor und im Vorschaumodus in einem iFrame angezeigt. Dies kann sich auf das Layout der Komponente auswirken. Öffne deine veröffentlichte Website, um zu sehen, wie sie live aussieht.
- Du kannst die SEO-Einstellungen deines Elements mit der Velo-API definieren.
Attribute des benutzerdefinierten Elements festlegen
Nimm weitere Anpassungen an den Eigenschaften und dem Verhalten deines Elements vor, indem du Attribute festlegst. Im „Elementattribute“-Panel kannst du Attribute direkt im Editor hinzufügen, bearbeiten und entfernen, ohne auf den eigentlichen Code zugreifen zu müssen.
Wichtig:
Der Code für dein benutzerdefiniertes Element muss die definierten Attribute bestätigen und verarbeiten. Andernfalls funktionieren sie nicht richtig.
Um die Attribute des benutzerdefinierten Elements festzulegen:
- Wähle das benutzerdefinierte Element aus.
- Klicke auf Attribute festlegen.
- Klicke auf Neues Attribut.
- Gib einen Namen für das Attribut ein (z. B. „Rotation“, „Breite“).
- Gib den Wert für das Attribut ein (es kann jede relevante Zeichenfolge sein).
- Klicke auf Festlegen.
Suchst du nach weiterführenden Informationen?
So verwendest du benutzerdefinierte Elemente mit Velo by Wix Konkrete Fragen und Fehlerbehebungen findest du in unseren FAQs zu benutzerdefinierten Elementen.
War das hilfreich?
|