Wix Blocks: Arbeitsschritte für eine Blocks-App

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 Wix Blocks kannst du Apps erstellen, die du immer wieder auf so vielen Websites von Wix verwenden kannst, wie du möchtest. Oder du veröffentlichst deine App und erreichst Millionen von Nutzern im App-Markt von Wix.

Deine App planen

Deine App kann Folgendes enthalten:

Widgets für die Benutzeroberfläche (UI)
Codedateien und -ordner (Artikel zurzeit nur auf englisch verfügbar)
Datensammlungen
Website-Verwaltungsseiten

Du solltest auch Folgendes planen:

Preispläne
Installationseinstellungen (Artikel zurzeit nur auf Englisch verfügbar)

Eine App erstellen

Wenn du an deiner Website arbeitest, kannst du Wix Blocks über den App-Markt app market

äffnen, um eine neue App zu erstellen.

Tipp

Wenn du eine App erstellen möchtest, öffnet sich Wix Blocks automatisch in einem neuen Fenster. Du kannst zu deiner Website zurückkehren, um die App zu importieren, sobald du sie erstellt hast.

Den Typ deiner App auswählen

Wähle aus, wie du loslegen möchtest:

Leere Arbeitsfläche: Füge Widgets für die Benutzeroberfläche zu deiner App hinzu.
Codepakete: Füge Codedateien und -ordner zu deiner App hinzu.
Benutzerdefiniertes Element: Bette deinen HTML-Code ein.
Vorgefertigtes Widget

Widgets hinzufügen

Mit Widgets kannst du eine Benutzeroberfläche (UI) zu deiner App hinzufügen.

Öffne in der App-Struktur das Panel Widgets und Design.
Klicke auf + Widget hinzufügen, um dein erstes Widget hinzuzufügen.

Elemente hinzufügen

Designelemente sind die grundlegenden Bausteine deines Widgets: Textelemente, Buttons, Bilder, Benutzereingabefelder und mehr. Wix Blocks ist ein responsiver Arbeitsbereich zur Erstellung von Apps, die sich automatisch an den Bildschirm oder das Gerät anpassen, um das bestmögliche Benutzererlebnis zu bieten.

Das Panel Elemente hinzufügen von Wix Blocks bietet dir viele Optionen, um Designelemente (auch bekannt als UI-Elemente) zu deinem Widget hinzuzufügen.

Mehr über das Hinzufügen von Elementen zu deiner App erfahren

Eigenschaften (Properties) und Ereignisse (Events) zu Elementen hinzufügen

Mit Eigenschaften (Properties) (Artikel zurzeit nur auf Englisch verfügbar) kannst du die Elemente deines Widgets anpassen. Zum Beispiel, ob ein Element ausgeblendet ist, wenn das Widget geladen wird. Mit Ereignishandlern (Artikel zurzeit nur auf Englisch verfügbar) kannst du die Interaktivität von Elementen bestimmen. Zum Beispiel, was passiert, wenn ein Button angeklickt wird. Das machst du, indem du dein Element auswählst und ganz unten auf das Symbol für Eigenschaften und Ereignisse properties and events

Da dein Widget am Ende auf einer Website von Wix installiert wird, ist es wichtig, darauf zu achten, dass es mit den im Design-Template definierten Farben und Schriftarten der Website übereinstimmt. Du musst jedes Element mit dem Farbdesign und das Text-(Typografie-)Template verbinden.

Du kannst Velo-Code auf ähnliche Weise zu deinem Widget hinzufügen, wie du es zu Websites von Wix hinzufügen kannst (Erfahre mehr über Velo by Wix). Um Code zu deinem Widget hinzuzufügen, öffne den Tab Design und verwende den Code-Editor am unteren Ende.

Die Widget-API ermöglicht es dir, Eigenschaften, Ereignisse und Funktionen zu deinem gesamten Widget hinzuzufügen. Jede Eigenschaft, jedes Ereignis und jede Funktion, die du hinzufügst, ist dann für Website-Ersteller, die mit dem Widget im Editor oder Editor X arbeiten, zugänglich. Die Eigenschaften werden in den Standardeinstellungen deines Widgets im Editor angezeigt.

In unserem Tutorial zum Zähler-Widget haben wir eine `step`-Eigenschaft definiert, die die Erhöhung des Zählers steuert (z. B. 1, 2, 3, 4 oder 2, 4, 6, 8).

Um Eigenschaften, Ereignisse und Funktionen zu deiner Widget-API hinzuzufügen, klicke unten auf Öffentliche Widget-API widget public api

Erfahre mehr über das Definieren deiner Widget-API.

Erfahre mehr über die Verwendung deiner Widget-API beim Bearbeiten einer Website.

Sieh dir dein Widget in der Vorrschau an, um zu testen, wie es funktioniert. Dein Widget sollte im Vorschaumodus genau so funktionieren, wie wenn es auf einer Website installiert wäre. Du kannst mit deinem Widget interagieren und sehen, wie es funktioniert. Du kannst auch das Design und die API-Eigenschaften testen.

Auf dem Tab Konfiguration kannst du definieren, wie dein Widget und seine Elemente aussehen und sich verhalten, wenn sie auf einer Website installiert sind. Du kannst die Bezeichnungen ändern, Buttons zu den Aktionsleisten hinzufügen oder entfernen und die Button-Einstellungen ändern. Du kannst auch bestimmen, ob Elemente ausgewählt, dupliziert oder gelöscht werden können.

Erfahre mehr über die Konfiguration deines Widgets.

Im Tab Panels kannst du benutzerdefinierte Panels erstellen, die sich anstelle des Standard-Panels öffnen, wenn ein Website-Ersteller dein Widget im Editor bearbeitet (z. B. Einstellungen oder Design).

Erfahre mehr über das Erstellen benutzerdefinierter Panels in Blocks.

Design-Presets erstellen

Mit Design-Presets kannst du mehr als ein Layout und einen Stil für dein Widget erstellen. Wenn du Design-Presets erstellst, behält dein Widget die gleichen Elemente und die gleiche Funktionalität bei, aber du kannst Farben, Layout usw. ändern.

Du findest die Design-Presets im Panel Widgets und Design. Wenn du im Design-Tab arbeitest, klicke auf den Tab App-Struktur app structure