10mShop

Mit Blöcken arbeiten

Blöcke hinzufügen, verschieben, ersetzen und löschen — und die Regeln, wo ein neuer landen darf.

Eine Seite ist ein Stapel Blöcke. Jeder ist ein Abschnitt des Shops: ein Header, ein Hero, ein Produktraster, eine Text-Bild-Reihe, ein FAQ, ein Footer.

Einen Block hinzufügen

Es gibt zwei Wege, und sie setzen den Block an dieselbe Stelle:

  • Block hinzufügen in der linken Blockliste setzt ihn direkt unter den Block, der gerade oben in der Vorschau steht. Vor dem Klick zu scrollen verschiebt also die Stelle — und die Bibliothek nennt dir den Block, unter dem der neue sitzen wird.
  • Im Bearbeitungsmodus zeichnet das Überfahren des Zwischenraums zweier Blöcke in der Vorschau eine Linie mit einem runden + in der Mitte. Dieses Plus setzt den Block genau an diese Naht.

Wo er auch landet, ein neuer Block:

  • geht nie über den Header,
  • geht ganz unten über den Footer,
  • trennt nie ein Paar halbbreiter Blöcke.

Solange die Vorschau noch nicht gesagt hat, was sie zeigt, landet ein neuer Block am Ende der Seite, über dem Footer.

Welche Blöcke angeboten werden

Die Bibliothek bietet die Blöcke an, die zur geöffneten Seite passen. Die vier Blöcke, die das aktuelle Produkt lesen — Produkt-Hero, Produktinfo, Produktdetails und Produktbewertungen — erscheinen nur auf der Produktdetailseite, weil es anderswo kein Produkt gibt, das sie zeigen könnten.

Dasselbe gilt, wenn die KI einen Block hinzufügt oder ersetzt, und für eine neu generierte eigene Seite.

Einen Block verschieben

Drag & Drop in der linken Blockliste: Pack die Zeile des Blocks (der Drei-Strich-Griff links markiert sie), zieh sie dorthin, wo sie hingehört, und lass los. Vorschau und Reihenfolge folgen sofort.

Das funktioniert nur in der Blockliste — nicht durch Ziehen in der Vorschau — und nicht auf dem Handy, wo die Liste ausgeblendet ist. Kein Block muss je gelöscht und neu gebaut werden, nur um woanders zu sitzen.

Einen Block ersetzen

Ersetzen tauscht die Variante aus und behält Inhalt und Position. So probierst du einen anderen Hero, ohne die Überschrift neu zu tippen.

Header und Footer sind ein gemeinsamer Block über alle Seiten hinweg. Die Blockliste bietet auch für sie Ersetzen an — der Block behält seine Identität, die neue Variante erscheint also auf allen Seiten gleichzeitig.

Sie lassen sich weder löschen noch verschieben.

Die unterste Zeile jedes Footers trägt eine Verkäufer-Zeile, die das Design nicht entfernen kann — „Verkäufer: Name, Adresse“ plus einen Link zu deinem Impressum. Du kannst den Footer gegen eine andere Variante tauschen, aber nicht die Zeile löschen; eine Seite ohne Footer zeigt dieselbe Zeile als schmalen Balken. Sie nennt, wer in deinem Shop rechtlich verkauft — eine gesetzliche Pflicht, keine Gestaltungsfrage.

Halbbreite Blöcke

Jeder Inhaltsblock — nie Header oder Footer — lässt sich im Stil-Tab unter Layout auf halbe Breite setzen (die Chips Block Width: full / half).

  • Zwei aufeinanderfolgende halbbreite Blöcke stehen ab Tablet-Breite nebeneinander und stapeln sich auf dem Handy wieder.
  • Ein halbbreiter Block ohne halbbreiten Nachbarn nimmt die ganze Zeile.
  • Die beiden Hälften teilen sich einen Container: Jede nimmt die Hälfte ihrer Container-Breite und legt sich an die Mittelnaht, sie lesen sich also als ein Block statt als zwei je zentrierte Spalten. Am besten passt es, wenn beide dieselbe Container-Breite haben.

Eine häufige Paarung ist der Produkt-Hero neben Produktinfo auf einer Produktseite.

Löschen

Gelöscht wird in der Blockliste; eine kurze Rückfrage will wissen, ob du den Block wirklich löschen willst. Verloren ist aber auch nichts: Die Änderung lebt im Entwurf, und die Versionshistorie kann die ganze Seite zurückholen.

Auf dieser Seite

Mit Blöcken arbeiten — 10mShop