Zum Hauptinhalt gehen

Wie man den Widget Editor benutzt

Kay Endörfer
  • Aktualisiert
Der Widget-Editor ist die zentrale Anlaufstelle für alle Ihre React Widgets. Er ist sowohl für Profis als auch für Anfänger konzipiert, sodass Sie keine Vorkenntnisse in CSS benötigen.
 
Entwicklung ist noch nicht abgeschlossen
Sie können den Widget-Editor bereits verwenden, allerdings mit eingeschränkter Funktionalität. Die Anzahl der Dinge, die Sie tun können, wird in Zukunft zunehmen.
Fehlende Funktionalitäten werden in diesem Artikel hervorgehoben.
 

1. Übersicht

Wenn Sie den Widget-Editor öffnen, sehen Sie zwei Hauptbereiche.
Ihre Widgets dreht sich alles um das Erstellen und Konfigurieren Ihrer Widgets.
Design-Settings ist die richtige Anlaufstelle, wenn Sie das Aussehen Ihrer Widgets ändern möchten.
 
Beginnen wir zuerst mit Ihren Widgets!
 

2. Erstellen und Anpassen eigener Widgets

In Ihre Widgets können Sie alle Widgets konfigurieren und verwalten, die Sie im Widget Editor erstellt haben. Sie sind nach Widget-Typ sortiert.
 

2.1 Auswahl eines Widget-Typs

Derzeit können Sie zwischen drei Widget-Typen wählen:
 
 
Ausblick auf Widget-Typen
Andere Widget-Typen werden bald folgen, sobald sie auf die neue React-Infrastruktur aktualisiert wurden. Ziel ist es, alle von uns angebotenen Widgets einzubeziehen.
 

2.2 Konfigurieren der Widget-Settings

Die Settings hängen von der Art des Widgets ab, das Sie gerade ausgewählt haben.
Wenn es der Catalog oder Booking Widget war, können Sie eine Produktsprache und das Produkt, das Sie anzeigen möchten, auswählen.
Wenn Sie das Product Widget gewählt haben, können Sie die Produktsprache auswählen und die Produkte mit einem Kategorie- und Standortfilter filtern.
 
Die Kategorien sind diejenigen, die Sie selbst erstellt und angeordnet haben. Wenn Sie mehr darüber erfahren möchten, wie Sie Ihre Kategorien organisieren können, lesen Sie diesen Artikel.
 
Zusätzlich oder als eigenständige Funktion können Sie den Standortfilter verwenden. Der Ort wird durch den Parameter Stadt die Sie eingeben. Um die Anzahl der im Katalog-Widget angezeigten Produkte zu erhöhen oder zu reduzieren, können Sie einen Radius eingeben, in dem das Produkt enthalten sein muss, um angezeigt zu werden.
 

 

2.3 Auswählen eines Designs

In diesem Schritt können Sie den Style auswählen, in dem das Widget dargestellt werden soll. Um einzelne Farben zu ändern, werfen Sie einen Blick auf die Design-Settings!
 
Tipp
Die Themenauswahl kann sich als nützlich erweisen, wenn Sie Ihr Design regelmäßig aktualisieren.
Angenommen, Sie ändern das Aussehen Ihrer Website zu jeder Jahreszeit. Sie können das Widget einfach an das neue Design anpassen, ohne etwas im Backend ändern zu müssen.
 

2.4 Definition des sichtbaren Inhalts

Wenn Sie das Product oder Catalog Widget gewählt haben, können Sie entscheiden, welche Informationen der Kunde in dem Widget sieht.
Sie können die Produktbox anpassen, festlegen, nach welchen Attributen der Kunde filtern kann und auch entscheiden, wie detailliert die Produktseite sein soll.
 

2.5 Speichern und Veröffentlichen

Im letzten Schritt geben Sie Ihrem Widget einen Namen und eine Beschreibung. Beides wird in der Übersicht sichtbar sein.
Sobald Sie auf Speichern klicken, wird ein HTML-Code generiert. Sie können diesen Code in Ihre Website einbinden.
 
Tipp
Sie müssen den Code in Ihre Website nur einmal integrieren! Jede Änderung, die Sie im Widget-Editor vornehmen, wirkt sich auch auf das Widget auf Ihrer Website aus.
 

3. Erstellen eines Designs

Mit den Design-Settings können Sie Designs erstellen und damit das Aussehen Ihrer Widgets verändern. Designs bestehen aus Farben und Schriftarten.
 

3.1 Farben und Schriftarten

In Bezug auf die Farbe haben Sie derzeit Zugriff auf die Akzentfarbe, die sich auf die Hauptschaltflächen ("Hier buchen" und "In den Warenkorb") auswirkt.
Sie können zwischen 8 verschiedenen Schriftarten und 5 Schriftgrößen wählen.
 
 
Mehr Anpassungsmöglichkeiten werden bald nachgeliefert
Dieser Bereich wird in Zukunft umfassend verbessert werden, so dass Sie nicht nur auf die Akzentfarbe, sondern auch auf die Sekundärfarbe, die Hintergrundfarbe, die Schriftfarbe u.Ä. zugreifen können.
 

3.2 Speichern und veröffentlichen

Nachdem Sie Ihr globales Design bearbeitet haben, geben Sie ihm einen Namen und eine Beschreibung. Wenn Sie auf "Letzte Änderungen speichern" klicken, werden alle Widgets mit diesem Design automatisch aktualisiert.
Wenn Sie noch kein Design für eines Ihrer Widgets ausgewählt haben, lesen Sie in Kapitel 2.3, wie Sie vorgehen müssen.
 

Hinweis

Wenn Sie vergessen haben, die letzten Änderungen zu speichern, erhalten Sie eine Benachrichtigung über nicht gespeicherte Änderungen in der Übersicht des Widget-Editors.

Verwandte Beiträge