Editor X: Ein benutzerdefiniertes Element zu deiner Website hinzufügen
4 Min. Lesezeit
Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren
Erweitere deine Website mit deinen eigenen Designfunktionen und CSS-Möglichkeiten, indem du benutzerdefinierte Elemente verwendest. Du kannst jede beliebige Javascript-Komponente hinzufügen, indem du ein benutzerdefiniertes Element mit einer Server-URL oder einer Velo-Datei verlinkst. Bei Bedarf kannst du weitere Attribute direkt im Editor X festlegen.
Erfahre mehr über:
Bevor du loslegst:
Stelle sicher, dass deine Website ein Premiumpaket und eine verbundene Domain ohne Editor X-Werbeanzeigen hat. Mehr erfahren
Was sind benutzerdefinierte Elemente?
Mit benutzerdefinierten Elementen kannst du deine eigenen HTML-Tags auf deiner Editor X-Website verwenden. Diese Elemente funktionieren in allen unterstützten Browsern und können mit jeder JavaScript ES6-Bibliothek oder jedem Framework verwendet werden, das mit HTML 5 funktioniert.
Beispiele für nützliche benutzerdefinierte Elemente
Code-Anforderungen
Tipps:
- Du kannst benutzerdefinierte Elemente von Dritten nutzen. Aktualisiere dafür nur unter Eigenschaften den Tag-Namen, wenn du das benutzerdefinierte Element zu deiner Seite hinzufügst.
- Die Leistung deines benutzerdefinierten Elements hängt von seiner Implementierung ab.
Ein benutzerdefiniertes Element hinzufügen und einrichten
Füge deiner Website so viele benutzerdefinierte Elemente hinzu, wie du brauchst. Nachdem du ein benutzerdefiniertes Element auf deine Seite gezogen hast, definiere dessen Quelle (Server-URL oder eine Velo-Datei) und gib ihm einen Tag-Namen, der in der Seitenregistrierung erscheinen soll.
So geht's
.Verwende das Inspektor-Panel 
, um sicherzustellen, dass dein benutzerdefiniertes Element auf allen Breakpoints toll aussieht - du kannst die Größe, das Andocken, die Ausrichtung und mehr anpassen.
, um sicherzustellen, dass dein benutzerdefiniertes Element auf allen Breakpoints toll aussieht - du kannst die Größe, das Andocken, die Ausrichtung und mehr anpassen.Hinweis:
Standardmäßig erscheinen benutzerdefinierte Elemente in der customElements-Registry deiner Seite. Der Tag-Name, den du für dein benutzerdefiniertes Element eingibst, definiert seinen Namen in dieser Registry.
Attribute des benutzerdefinierten Elements festlegen
Passe die Eigenschaften und das Verhalten deines Elements an, indem du HTML-Attribute festlegst. Mit dem Elementattribut-Panel kannst du Attribute direkt im Editor X hinzufügen, bearbeiten und entfernen, sodass du nicht auf den eigentlichen Code zugreifen musst.
So geht's
Wichtig:
Der Code für dein benutzerdefiniertes Element muss die definierten Attribute bestätigen und verarbeiten. Andernfalls funktionieren sie nicht richtig.
Beispiel für ein benutzerdefiniertes Element
Unten findest du ein Beispiel für das Hinzufügen eines einfachen benutzerdefinierten Elements zu deiner Website. Die Anleitung erklärt, wie du den Text „Hallo Welt” zu deiner Website hinzufügst.
Zunächst musst du das Element und sein Verhalten in einer JavaScript-Datei erstellen und programmieren.
So geht's
Als nächstes definierst du die Klasse des benutzerdefinierten Elements.
In diesem Beispiel haben wir es als HelloWorld definiert und verwenden denselben Namen bei der Registrierung des benutzerdefinierten Elements. Die Funktion connectedCallback() unten ist eine Lifecycle Callback-Funktion, die automatisch ausgelöst wird, wenn das Element mit DOM verbunden wird.
1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);Nachdem wir die benutzerdefinierte Elementklasse definiert haben, registrieren wir sie mit der Methode
customElements.define(name, class).Wenn du das benutzerdefinierte Element zu deiner Website hinzufügst, gib den registrierten Namen als Tag-Namen ein. Nach der Registrierung kann das benutzerdefinierte Element auf deiner Website verwendet werden.
1CustomElementRegistry.define('hello-world', HelloWorld);Suchst du nach weiterführenden Informationen?
Klicke hier, um zu erfahren, wie du dieses Element mit Velo by Wix verwendest.
War das hilfreich?
|