Page Builder Workspace

Wenn Page Builder aktiviert werden der Content ​Abschnitt und der Inhaltserstellungsprozess geändert, um die erweiterten Page Builder-Tools für CMS Pages, Product und category Seiten, Blocks und dynamic blocks zu nutzen. Dieser Abschnitt enthält ein Feld_ Inhaltsüberschrift _, eine Vorschau des Inhalts und einfachen Zugriff auf den Page Builder-Arbeitsbereich im Vollbildmodus.

Inhaltsabschnitt mit Page Builder Vorschau {width="700" modal="regular"}

Inhaltsüberschrift

Da Suchmaschinen nach Überschriften der Ebene 1 (H1) suchen, können Sie durch Hinzufügen einer Überschrift der Ebene 1 leicht sicherstellen, dass die Seite korrekt indiziert wird.

NOTE
Das Content Heading ​Feld, das oben auf der Seite angezeigt wird, ist ein älteres Feld, das Inhalte unterstützt, die mit früheren Commerce-Versionen erstellt wurden. Sie ist jedoch nicht Teil von Page Builder. Die Content Heading wird entsprechend dem Stylesheet, das mit dem aktuellen Design verknüpft ist, als Überschrift H1 formatiert. Sie wird direkt über dem aktiven Inhaltsbereich positioniert, der durch die Page Builder definiert wird.

Um die Positionierung und das Format von Überschriften auf allen Ebenen optimal steuern zu können, wird empfohlen, das Feld Content Heading ​leer zu lassen und den Inhaltstyp Page BuilderÜberschrift🔗 zu verwenden.

Inhaltsüberschrift und andere Überschriften {width="700" modal="regular"}

Vorschau

Wenn Sie den Content ​erweitern und bereits vorhandene Inhalte vorhanden sind, die mit Page Builder erstellt wurden, wird eine Vorschau des Inhalts so angezeigt, wie er auf einer Seite erscheinen würde. Klicken Sie auf Edit with Page Builder ​oder im Bereich für die Inhaltsvorschau, um den Page Builder Workspace zu öffnen, in dem Sie alle erforderlichen Aktualisierungen vornehmen können.

Vorschau der Produktbeschreibung {width="500" modal="regular"}

NOTE
Für Produkt- und Kategorieformulare ist diese Inhaltsvorschau standardmäßig aktiviert, kann aber deaktiviert werden. Wenn die Leistung aufgrund des Ladens der Vorschau beeinträchtigt ist, können Sie die Vorschau in den Einstellungen Content-Management-) deaktivieren.

Etappe

Wenn Sie den Arbeitsbereich Page Builder über die Vorschau öffnen, ist die Phase der primäre Arbeitsbereich, in dem Sie Inhalte erstellen und formatieren und sogar schnelle Änderungen an Live-Inhalten vornehmen können. Der Schritt ist zunächst leer und stellt die Design-Oberfläche bereit, auf die Sie Zeilen, Spalten und Registerkarten aus dem linken Bedienfeld ziehen können.

NOTE
Ab Version 2.4.1 ist die Inhaltsbearbeitung nun nur noch für alle Bereiche im Vollbildmodus verfügbar, die von Page Builder kontrolliert werden - CMS-Seiten, Produkt- und Kategorieseiten, Blöcke und dynamische Blöcke. Die Bearbeitung im Vollbildmodus legt den Fokus auf Ihren Inhalt und bietet eine Ansicht, die dem Benutzererlebnis auf der Storefront besser entspricht.

Staging mit Seiteninhalten {width="600" modal="regular"}

NOTE
Wenn Sie wesentliche Änderungen an Page Builder Inhalten vornehmen, wird empfohlen, die Admin-Sitzungslebensdauer) zu erhöhen um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Viewports

Ein Viewport ist der sichtbare Bereich einer Web-Seite, den ein Benutzer sieht. Im Vollbild-Design-Modus werden die Viewport-Schaltflächen über dem Page Builder angezeigt, um Ihnen den Inhalt so anzuzeigen, wie der Site-Benutzer ihn in der Storefront sieht.

Viewport-Schaltflächen {width="500" modal="regular"}

Page Builder definiert auch Haltepunkte für Darstellungsfelder. Haltepunkte definieren minimale und maximale Breiten, innerhalb derer bestimmte Stile angewendet werden. Die Page Builder Viewports bieten die folgenden Inhalts-Breakpoints:

  • Desktop Breakpoint - min-width: 1024px. Dieser Breakpoint wendet Stile an, die für Darstellungsfeldbreiten definiert sind, die 1024 Pixel und mehr messen.
  • Mobile Breakpointsmax-width: 768px, min-width: 640px. Diese Haltepunkte wenden Stile an, die für Darstellungsfeldbreiten zwischen 768 Pixel und 640 Pixel definiert sind.

Page Builder Viewports bieten zwei Funktionen: Inhaltsvorschau und Breakpoint-Einstellungen.

Inhaltsvorschauen

Standardmäßig bietet Page Builder zwei Viewport-Vorschauen:

  • Desktop - Zeigt die Inhaltsvorschau ohne vordefinierte Breite an. Desktop-definierte Stile (mit einer Mindestbreite von 1024 Pixel als Breakpoint) werden weiterhin auf die Seite angewendet. Die Breite des Desktop-Darstellungsfelds wird jedoch durch Einstellungen für Container-Inhaltstypen wie Zeilen definiert. Wenn Sie das Desktop-Viewport auswählen, wird angezeigt, wie Ihr Inhalt in der Storefront formatiert ist, wenn die Browser-Seitenbreite 1024 Pixel und höher ist.

    Desktop-Viewport-Vorschau mit 1024 Pixel Mindestbreite {width="500" modal="regular"}

  • Mobil - Zeigt die Inhaltsvorschau mit einer vordefinierten Breite von 768 Pixel an. Im Gegensatz zum Desktop-Viewport wird der Seiteninhalt im mobilen Viewport nicht in einer Breite von 768 Pixel zusammen mit den Stilen angezeigt, die für die Breakpoint-Breiten von 768 Pixel (maximal) und 640 Pixel (minimal) definiert sind.

    Mobile Viewport-Vorschau mit mindestens 768 Pixel Breite {width="500" modal="regular"}

Breakpoint-Einstellungen

Die Viewport-Schaltflächen bieten außerdem die Möglichkeit, je nach ausgewähltem Viewport unterschiedliche Breakpoint-Stile auf Inhaltstypen anzuwenden. Standardmäßig stellt Page Builder Breakpoint-Einstellungen für die Minimum Height ​Felder von Zeilen, Spalten, Registerkarten, Registerkartenelementen, Bannern, Schiebereglern und Folien bereit. Wenn Sie den mobilen Viewport auswählen und dann den Editor für einen dieser Inhaltstypen öffnen, können Sie für die mobilen Viewport-Breakpoints spezifische Feldwerte eingeben. Content-Typ-Felder, die bestimmte Breakpoint-Einstellungen ermöglichen, zeigen rechts neben dem Feld ein Symbol an, ähnlich dem folgenden Beispiel für eine Zeile:

Symbolanzeige für Breakpoint-Einstellung {width="400"}

Bedienfeld

Das Page Builder Bedienfeld befindet sich links neben der Bühne und enthält Inhaltstypen, die auf die Bühne gezogen werden können. Ein Container, der für den Inhaltstyp spezifisch ist, wird dann mit einer Toolbox mit Optionen angezeigt. Die Inhaltstypen sind im Bedienfeld wie folgt organisiert:

Layout

Der Layout ​Abschnitt des Page Builder Bedienfelds wird verwendet, um Zeilen, Spalten oder Registerkarten zum Schritt hinzuzufügen. Wenn Sie einen Inhaltstyp aus dem Bedienfeld auf den Schritt ziehen, wird ein Container mit einer Toolbox mit Optionen angezeigt, die für den Inhaltstyp spezifisch sind.

Standardmäßig ist die Page Builder leer. Beim Ziehen von Layout-Inhaltstypen aus dem Bedienfeld auf die Bühne können Sie diese über, unter oder in anderen Layout-Containern auf der Seite platzieren. Zeilen können nur direkt zum Schritt hinzugefügt werden.

Page Builder Bedienfeld mit Layout-Inhaltstypen und -Phase {width="600" modal="regular"}

Inhaltstyp des Layouts
Beschreibung
Reihe
Eine neue Zeile kann nur aus dem Bedienfeld in den Schritt gezogen und entweder über oder unter einer anderen Zeile, Registerkarte oder Spaltengruppe positioniert werden. Sie können auch die Option Duplizieren verwenden, um eine Kopie einer vorhandenen Zeile zu erstellen.
Spalte
Eine Spalte kann aus dem Bedienfeld auf die Bühne oder in Zeilen und Registerkarten gezogen werden. Die maximale Anzahl von Spalten, die hinzugefügt werden können, wird durch die Anzahl der Rasterunterteilungen bestimmt, die in der Konfiguration“ angegeben.
Registerkarten
Eine einzelne Registerkarte kann aus dem Bedienfeld in das Stadium oder in Zeilen und Spalten gezogen werden. Zusätzliche Registerkarten können aus der Toolbox hinzugefügt werden.

Elemente

Verwenden Sie den Elements ​Abschnitt des Page Builder Bedienfelds, um Text, Überschriften, Schaltflächen, Trennzeichen und HTML-Code zu einem beliebigen Layout-Container auf der Page Builder Bühne“. Wenn Sie einen Inhaltstyp aus dem Bedienfeld in eine Zeile oder Spalte oder in einen Registerkartensatz auf der Bühne ziehen, wird ein Container angezeigt. Verwenden Sie die Toolbox Inhaltstyp , um auf die für den Typ spezifischen Einstellungen zuzugreifen.

Bedienfeld mit Inhaltstypen für Elemente Page Builder {width="600" modal="regular"}

Inhaltstyp des Elements
Beschreibung
Text
Fügt einen Textcontainer und einen Editor zum Schritt hinzu.
Überschrift
Fügt der Phase einen Überschriften-Container hinzu.
Schaltflächen
Fügt der Bühne einen Container für eine einzelne Schaltfläche oder eine Gruppe von Schaltflächen hinzu.
Teiler
Fügt der Bühne einen Container für eine Unterteilung hinzu.
HTML-Code
Fügt einen Container für das HTML von Code zum Schritt hinzu.

Medien

Verwenden Sie den Abschnitt Media ​des Page Builder Bedienfelds, um Bilder, Videos, Banner, Schieberegler und Google Maps zu einem beliebigen Layout-Container auf der Page Builder hinzuzufügen. Wenn ein Medieninhaltstyp aus dem Bedienfeld auf die Bühne gezogen wird, wird ein Container mit einer Toolbox mit Optionen angezeigt, die für den Inhaltstyp spezifisch sind.

Page Builder Bedienfeld mit Medieninhaltstypen {width="600" modal="regular"}

Medien-Content-Typ
Beschreibung
image
Fügt der Phase einen Bild-Container hinzu.
Video
Fügt der Phase einen Video-Container hinzu.
Banner
Fügt der Phase einen Banner-Container hinzu.
Schieberegler
Fügt der Bühne einen Schieberegler-Container hinzu.
Map
Fügt der Phase einen Google Maps-Container hinzu.

Inhalt hinzufügen

Verwenden Sie den Abschnitt Add Content ​des Bedienfelds Page Builder , um vorhandene Inhalte zur Page Builder Phase“. Wenn Sie einen Medien-Content-Typ aus dem Bedienfeld in das Stadium ziehen, wird ein Container angezeigt. Verwenden Sie die Toolbox Inhaltstyp , um auf die_ Einstellungen _zuzugreifen, die für den Typ spezifisch sind.

Page Builder Bedienfeld mit „Inhaltstypen hinzufügen“ {width="600" modal="regular"}

Content-Typ
Beschreibung
Block
Fügt der Phase einen vorhandenen Block hinzu.
Dynamischer Block
Fügt dem Schritt einen vorhandenen dynamischen Block hinzu.
Produkte
Fügt der Phase eine Liste von Produkten hinzu.
Nur Adobe Commerce Produkt-Recommendations
Fügt eine Empfehlungseinheit zur Phase hinzu.

Werkzeugkasten

Jeder Inhalts-Container auf der Bühne verfügt über eine Toolbox von Optionen. Die Optionen variieren je nach Inhaltstyp, umfassen jedoch normalerweise Verschieben, Einstellungen, Ausblenden/Anzeigen, Duplizieren und Entfernen.

Toolbox anzeigen

Bewegen Sie den Mauszeiger über den Container, um die Toolbox anzuzeigen, und wählen Sie eine Option aus.

Zeilen-Toolbox-Optionen {width="600" modal="regular"}

Toolbox-Optionen

Option
Symbol
Beschreibung
Verschieben
move icon {width="25"}
Verschiebt den aktuellen Inhalts-Container an eine andere Position auf der Bühne.
Hinzufügen
Symbol hinzufügen {width="25"}
Fügt untergeordnete Elemente wie eine Schaltfläche, eine Folie oder eine Registerkarte hinzu.
(Bezeichnung)
Identifiziert den Container-Inhaltstyp.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Content-Container-Eigenschaften im Bearbeitungsmodus.
Ausblenden
Symbol ausblenden {width="25"}
Blendet den aktuellen Inhaltscontainer aus.
Anzeigen
Symbol anzeigen {width="25"}
Zeigt den aktuellen Inhaltscontainer an.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie des aktuellen Inhalts-Containers.
entfernen
Entfernen {width="25"}
Löscht den aktuellen Inhalts-Container aus der Phase .
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden unsichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut „unsichtbar“ angefordert werden, es sei denn, Sie entfernen sie aus dem Schritt.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d