Design Editor
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.
Mit unserem Design-Editor können Sie die Inhalte für Ihre Clerk.io-Elemente ohne Programmierkenntnisse erstellen.
Grundlagen #
Um den New Design Editor zu verwenden, gehen Sie zu mein.schreiber.io und klicken Sie entweder auf [Search > Designs] oder [Recommendations > Designs] .
Klicken Sie auf . [New Design]
Von hier aus können Sie wählen, ob Sie mit einer Vorlage oder mit einem völlig leeren Entwurf beginnen möchten:
Wenn Sie Leere wählen, können Sie entweder ein Design im Design-Editor oder direkt im Code-Modus erstellen.
Wenn Sie sich für Vorlage entscheiden, wählen Sie einen der verfügbaren Anfangsstile aus:
Klicken Sie auf [Next] , geben Sie Ihrem Entwurf einen Namen, und klicken Sie dann auf [Create Design] .
Sie sehen nun den Entwurfseditor wie unten dargestellt:
Oben links neben dem Titel Ihres Designs können Sie das Design anzeigen und das Styling speziell für Desktop, Handy und Tablet bearbeiten - das Styling wird für jeden Gerätetyp verwendet.
Außerdem finden Sie auf der rechten Seite ein ausklappbares Menü, in dem alle Elemente angezeigt werden, die Sie in Ihren Entwurf aufgenommen haben.
Um ändern ein Element Ihres Entwurfs zu öffnen, klicken Sie darauf.
Um Löschen ein Element zu ändern, klicken Sie auf das Mülleimer-Symbol neben dem “+”.
Wenn Sie ein Element hinzufügen oder ändern möchten, klicken Sie auf "+" und Sie erhalten drei verschiedene Kategorien, wie unten gezeigt.
Wenn Sie auf das “+” klicken und ein Element hinzufügen, wird es in die Komponente eingefügt, die Sie ausgewählt haben, und wird Teil Ihrer “Baumansicht” Struktur.
Mehrere anzeigen #
Mit Display Multiple können Sie verschiedene Optionen für die Darstellung Ihrer Inhalte im Design wählen (z.B. Slider zeigt Produkte auf einer horizontalen Linie nebeneinander, Grid-Datenliste zeigt sie in Gittern usw.)
Achten Sie bei der Auswahl des Elements Mehrere anzeigen darauf, dass Sie es anklicken und auf Element zum Wiederholen auswählen klicken. Wenn Sie z. B. auf Bibliotheken oben tippen und dann Produkt wählen, werden alle in Ihrem Katalog verfügbaren Produkte angezeigt.
Komponenten #
In diesem Menü können Sie neue Elemente für Ihren Entwurf auswählen. Um das Element neu positionieren in den Entwurf einzubinden, wählen Sie ziehen aus dem rechten Menü der Baumansicht wie unten dargestellt:
Layout #
Für das Layout gibt es drei verschiedene Optionen (Kasten, zweispaltiger Kasten und dreispaltiger Kasten).
Ein Kasten kann verwendet werden, um verschiedene Elemente enthalten darin zu platzieren.
Wenn Sie z. B. einen durchgestrichenen Preis für ein Produkt im Angebot und den tatsächlichen Preisnachlass anzeigen möchten, verwenden Sie einen zweispaltigen Kasten, wobei Sie jeder Spalte die unterschiedlichen Preis-Attribut zuweisen.
Ausweis #
Die Badge-Komponente ist wahrscheinlich eine der besten Möglichkeiten für Sie, Ihrem Webshop ein visuelles Unikat hinzuzufügen. Die Badge-Komponente enthält verschiedene Unterkomponenten wie Stil, Platzierung, Textfeld, Hintergrundfarbe, Polsterung, runde Ecken und bedingte Anzeige.
| Component | Description |
|---|---|
| Badge Style | Setting the angle of which the badge is attached onto the element (default or diagonal) |
| Badge Placement | Setting which corner of the element you want to place badge (top-left, top-right, bottom-left or bottom-right) |
| Text box | A text box which can contain any text such as “On sale” or “New”, and it also supports our template language which will be shown in an example in the next section |
| Background Color | Setting the background color in hexcode |
| Padding | Set the padding inside your badge to make space from the text to the edge |
| Round Corners | Makes either hard or soft corners based pixels |
Bedingte Anzeige #
Mit der bedingten Anzeige können Sie Elemente nur anzeigen, wenn ein bestimmtes Kriterium erfüllt ist, z. B. wenn ein Produkt im Angebot ist oder wenn es nicht vorrätig ist.
Um eine Bedingung einzufügen, öffnen Sie eines Ihrer Elemente, wie z. B. eine Plakette im Beispiel, und geben Sie Ihre das Attribut oder Bedingung in das Feld ein, wie unten gezeigt.
Die bedingte Anzeige ist optional, d. h., wenn Sie z. B. wenn leer gelassen für ein Abzeichen verwenden, wird das Abzeichen bei jedem wiederholten Element in Ihrem Entwurf angezeigt.
Wenn Sie bedingte Anzeigen verwenden, ist die Syntax immer artikel.attribut, da sie für alle Datentypen verwendet werden kann: Produkte, Kategorien, Vorschläge und Seiten.
Bei der Verwendung von artikel.attribut werden die Daten aus den Daten verwendet, die gerade durchlaufen werden.
Das folgende Beispiel zeigt, wie Sie eine Bedingung erstellen können, wenn ein Produkt im Produktkatalog im Angebot ist. Wenn Sie die Bedingung auf item.on_sale=true oder artikel.preis < artikel.liste_preis setzen, wird das Abzeichen oder eine ähnliche Komponente auf jedem Produkt angezeigt, das diese Bedingung erfüllt.
Was ist, wenn ich einen prozentualen Rabatt für Produkte innerhalb eines Badges eingeben möchte?
Nachdem Sie die Bedingung festgelegt haben, dass eine Plakette angezeigt werden soll, wenn ein Produkt im Angebot ist, können Sie das Textfeld für dieses Element bearbeiten.
Dies ist nur ein Beispiel, wenn Sie den Rabattprozentsatz für den vorherigen und den aktuellen Preis eines Produkts anzeigen möchten:
Fügen Sie das folgende Beispiel in das Textfeld ein, und es sollte den Text zusammen mit einem Rabattprozentsatz für die einzelnen Produkte anzeigen:
SAVE {{ parseInt(100-((item.price*100)/item.list_price)) }}%
Sie können dies auch für die Anzeige der regulären Preisdifferenz tun:
SAVE {{ (product.list_price - product.price) | money }}
Was die verschiedenen Formatierer bewirken, können Sie in unserer Template Language Dokumentation hier nachlesen.
Speichern und veröffentlichen #
Wenn Sie Ihr Design fertiggestellt haben und bereit sind, es in Ihrem Shop als Clerk Inhalt zu verwenden, klicken Sie auf die blaue Schaltfläche [Publish] auf der rechten unteren Seite.
Ihr Design wird nun zusammen mit Ihren alten Designs unter Design gespeichert und veröffentlicht und ist bereit für die Verwendung in Ihrem Inhalt.
Um es zu verwenden, gehen Sie wie bei Ihrem alten Design vor, unter Content > Edit > Select Design .