Wix Blocks: Benutzerdefinierte Panels für die Aktionsleisten-Buttons deines Widgets gestalten
7 Min. Lesezeit
Wix Blocks steht allen Nutzern von Wix Studio zur Verfügung. Um Zugriff auf Blocks zu erhalten, musst du Wix Studio beitreten.
Mit Blocks kannst du benutzerdefinierte Panels für die Aktionsleisten in deinem Widget und seinen Elementen erstellen. Wenn ein Website-Ersteller auf einen Aktionsbutton (z. B. auf den Button Einstellungen) klickt, wird ein benutzerdefiniertes Panel anstelle des Standard-Panels geöffnet.
Wenn du benutzerdefinierte Panels erstellst, gibst du Website-Erstellern mehr Optionen, mit deinem Widget zu arbeiten. So erhöhst du die Benutzerfreundlichkeit und hilfst ihnen, es auf ihrer Website anzupassen.
Die Erstellung deines Panels besteht aus drei Hauptphasen:
2. Code zu deinem Panel hinzufügen, damit es funktioniert
Hinweise:
- Dein Panel verknüpfen: Lege im Bereich Konfiguration fest, welches Panel welchem Button zugewiesen ist.
- Richtlinien für die Nutzererfahrung: Verwende unsere UX-Richtlinien, um deine Panels klar und effektiv zu gestalten.
Dein Panel erstellen
Es gibt zwei Möglichkeiten, ein Panel zu erstellen.
Dein Panel über den Panels-Tab erstellen
Oder erstelle dein Panel über den Konfigurations-Tab
Elemente zu deinem Panel hinzufügen
Dein Panel besteht aus Panel-Elementen wie Buttons, Trennlinien, Eingabefelder und mehr.
Eine Liste der Panel-Elemente ansehen
Klicke auf + Element hinzufügen und wähle aus, welche Elemente du zu deinem Panel hinzufügen möchtest. Du kannst dasselbe Element so oft hinzufügen, wie du möchtest. Anschließend kannst du den Text und den Stil des Labels anpassen sowie Standardeinstellungen und Werte festlegen.
Dein Panel anpassen
Du hast mehrere Anpassungsoptionen für die Elemente in deinem Panel. Du kannst den Label-Text ändern, Tooltips hinzufügen und Standardeinstellungen und Werte festlegen. Das tust du, indem du die Aktionsleiste verwendest, die mit jedem Element verbunden ist.
Einstellungsoptionen
Klicke auf ein Element. Wähle Einstellungen oder das Symbol 
, um dein Panel anzupassen.Hier sind einige der Optionen:
, um dein Panel anzupassen.Hier sind einige der Optionen:Feldtitel hinzufügen (mehr anzeigen)
Tooltips hinzufügen (mehr anzeigen)
Element als „schreibgeschützt“ definieren (Mehr erfahren)
Optionen für den Ursprungstext festlegen (Mehr anzeigen)
Mustervalidierung hinzufügen (Mehr anzeigen)
Multiple-Choice-Elemente
Wenn du ein Element hinzufügst, das über mehrere Optionen wie Kontrollkästchen, Radiobuttons oder Aufklappmenüs verfügt, kannst du diese über den Auswahl-Button in der Aktionsleiste konfigurieren. Die Aktionsleiste wird angezeigt, wenn du das Element auswählst.
Auswahl umbenennen (Mehr anzeigen)
Weitere Aktionen (Mehr anzeigen)
, um Standardeinstellungen festzulegen, Werte zu bearbeiten und Elemente zu verschieben oder zu duplizieren.
Nachdem du dein Panel entworfen hast, musst du Code hinzufügen, damit es funktioniert. Anschließend kannst du es zu einem Aktionsbutton hinzufügen und es testen, um zu sehen, ob es funktioniert. Mehr über das Codieren deines Panels erfahren
Dein Panel umbenennen, duplizieren oder löschen
- Öffne den Bereich Panels und gehe zum Abschnitt Meine Panels. Fahre auf der unteren linken Seite mit der Maus im über den Namen deines Panels.
- Klicke auf das Symbol für Weitere Aktionen
, wenn es angezeigt wird. - Wähle Umbenennen, Duplizieren oder Löschen.
Dein Panel mit einem Aktionsbutton verbinden
Nachdem du dein Panel erstellt hast, musst du es mit einem Button in der Aktionsleiste eines Widgets oder Elements verbinden.
- Klicke auf den Tab Konfiguration.
- Wähle das richtige Widget aus dem Widgets-Panel aus.
- Fahre im angezeigten Aktionsleisten-Menü mit der Maus über den Button, mit dem du dein Panel verbinden möchtest. Wenn es sich z. B. um einen Einstellungs-Panel handelt, wähle den Einstellungen-Button. Wenn es sich um ein Design-Panel handelt, wähle den Design-Button aus. Du kannst auch einen neuen Button hinzufügen, ihn benennen und mit einem Panel verbinden.
- Klicke auf Aktionsbutton-Einstellungen
.
5. Wähle aus dem Abschnitt Meine Panels dein Panel aus.
Nun, da du dein Panel entworfen hast, musst du Code hinzufügen, damit es funktioniert. Erfahre mehr darüber, wie du Code zu einem Panel hinzufügst
Verbinde dein Panel über den Tab Konfiguration
Die Gestaltung und Programmierung der Panels erfolgt im Panels-Tab. Auswählen, welche Panels zu welchen Buttons gehören, findest du im Tab Konfiguration . Wenn du mit dem Tab Konfiguration nicht vertraut bist, erfahre hier mehr darüber, wie du die Aktionsleiste deines Widgets konfigurierst.