Page Builder Arbeitsbereich

Wann Page Builder ist aktiviert, die Content ​Der Prozess zur Erstellung von Abschnitten und Inhalten wurde geändert, um die Vorteile der erweiterten Page Builder Tools für CMS pages, product und category Seiten, Bausteine, und dynamische Blöcke. Dieser Abschnitt enthält eine_ Inhaltsüberschrift _ein Feld, eine Vorschau des Inhalts und einfachen Zugriff auf den Vollbildmodus Page Builder Arbeitsbereich.

Inhaltsabschnitt mit Page Builder Vorschau

Inhaltsüberschrift

Da Suchmaschinen nach Überschriften der Stufe 1 (H1) suchen, ist das Hinzufügen einer Überschrift der Stufe 1 eine einfache Möglichkeit, sicherzustellen, dass die Seite korrekt indiziert ist.

NOTE
Die Content Heading-Feld, das oben auf der Seite angezeigt wird, ist ein Legacy-Feld, das Inhalte unterstützt, die zuvor mit Commerce veröffentlicht. Sie ist jedoch nicht Teil von Page Builder. Die Content Heading wird als H1-Überschrift entsprechend dem Stylesheet formatiert, das dem aktuellen Design zugeordnet ist. Er befindet sich direkt über dem aktiven Inhaltsbereich, der durch die Variable Page Builder Bühne.

Damit Sie die Positionierung und das Format von Überschriften aller Ebenen optimal steuern können, sollten Sie die Content Heading ​leer ist, und verwenden Sie die Page Builder Überschrift Inhaltstyp.

Inhaltsüberschrift und andere Überschriften

Vorschau

Wenn Sie die Content ​und es existierenden Inhalt gibt, der mit Page Builder, wird eine Vorschau des Inhalts angezeigt, wie er auf einer Seite angezeigt würde. Klicks Edit with Page Builder ​oder innerhalb des Inhaltsvorschaubereichs, um die Page Builder Arbeitsbereich, in dem Sie erforderliche Aktualisierungen vornehmen können.

Vorschau der Produktbeschreibung

NOTE
Für Produkt- und Kategorieformulare ist diese Inhaltsvorschau standardmäßig aktiviert, kann jedoch deaktiviert werden. Wenn die Leistung durch das Laden der Vorschau beeinträchtigt wird, können Sie die Vorschau im Content Management-Konfiguration -Einstellungen.

Staging

Wenn Sie die Page Builder Der Arbeitsbereich von der Vorschau aus ist die Bühne der primäre Arbeitsbereich, in dem Sie Inhalte erstellen und formatieren und sogar schnelle Bearbeitungen an Live-Inhalten vornehmen können. Die Bühne ist anfangs leer, da die Entwurfsoberfläche zur Verfügung steht, über die Sie Zeilen, Spalten und Registerkarten aus dem linken Bereich ziehen können.

NOTE
Ab Version 2.4.1 ist die Inhaltsbearbeitung jetzt nur noch für alle Bereiche im Vollbildmodus, die von Page Builder—CMS-Seiten, Produkt- und Kategorieseiten, Blöcke und dynamische Blöcke. Die Bearbeitung im Vollbildmodus konzentriert sich auf Ihren Inhalt und bietet eine Ansicht, die dem Benutzererlebnis auf der Storefront besser entspricht.

Staging mit Seiteninhalt

NOTE
Wenn Sie wesentliche Änderungen an Page Builder -Inhalt verwenden, wird empfohlen, die Lebensdauer der Admin-Sitzung , um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Viewports

A viewport ist der sichtbare Bereich einer Webseite, den ein Benutzer sieht. Im Designmodus für den Vollbildmodus werden die Viewport-Schaltflächen über dem Page Builder -Bühne, um Ihnen den Inhalt anzuzeigen, sobald der Site-Benutzer ihn auf der Storefront sieht.

Anzeigeschaltflächen

Page Builder definiert auch Haltepunkte für Viewports. Breakpoints definieren Mindest- und Höchstbreiten, innerhalb derer bestimmte Stile angewendet werden. Die Page Builder Viewports bieten die folgenden Inhaltshaltepunkte:

  • Desktop-Breakpointmin-width: 1024px. Dieser Breakpoint wendet Stile an, die für Darstellungsfeldbreiten mit einer Größe von 1024 Pixel und mehr definiert sind.
  • Mobile Haltepunktemax-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.

Inhaltsvorschau

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

  • Desktop — Zeigt die Inhaltsvorschau ohne vordefinierte Breite an. Desktop-definierte Stile (mit einer Breakpoint-Mindestbreite von 1024 Pixel) werden weiterhin auf die Seite angewendet. Die Breite des Desktop-Viewports wird jedoch durch Einstellungen für Container-Inhaltstypen wie Zeilen definiert. Wenn Sie den Desktop-Viewport auswählen, wird angezeigt, wie der Inhalt auf der Storefront formatiert wird, wenn die Browser-Seitenbreite 1024 Pixel und mehr beträgt.

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

  • Mobilnummer — Zeigt die Inhaltsvorschau mit einer vordefinierten Breite von 768 Pixel an. Im Gegensatz zum Desktop-Viewport zeigt der mobile Viewport Ihren Seiteninhalt mit einer Breite von 768 Pixel zusammen mit den Stilen an, die für die Breakpoint-Breiten von 768 Pixel (Maximum) und 640 Pixel (Minimum) definiert sind.

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

Breakpoint-Einstellungen

Die Viewport-Schaltflächen bieten außerdem die Möglichkeit, verschiedene Breakpoint-Stile auf Inhaltstypen anzuwenden, die auf dem ausgewählten Viewport basieren. Standardmäßig ist Page Builder stellt Breakpoint-Einstellungen für die Minimum Height ​Felder von Zeilen, Spalten, Registerkarten, Registerkartenelementen, Bannern, Reglern und Folien. Wenn Sie den mobilen Viewport auswählen und dann den Editor für einen dieser Inhaltstypen öffnen, können Sie Feldwerte eingeben, die für die Mobile Viewport-Haltepunkte spezifisch sind. Inhaltsfelder, die bestimmte Breakpoint-Einstellungen ermöglichen, zeigen ein Symbol rechts neben dem Feld an, ähnlich wie im folgenden Beispiel für eine Zeile:

Symbolanzeige für Breakpoint-Einstellung

Bedienfeld

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

Layout

Die Layout ​Abschnitt Page Builder -Bedienfeld wird verwendet, um der Bühne Zeilen, Spalten oder Registerkarten hinzuzufügen. Wenn Sie einen Inhaltstyp aus dem Bedienfeld auf die Bühne ziehen, wird ein Container mit einer Toolbox von Optionen angezeigt, die für den Inhaltstyp spezifisch sind.

Standardmäßig wird die Variable Page Builder stage ist leer. Wenn Sie Layout-Inhaltstypen aus dem Bedienfeld auf die Bühne ziehen, können Sie sie über, unter oder in andere Layout-Container auf der Seite platzieren. Zeilen können nur direkt zur Bühne hinzugefügt werden.

Page Builder Bedienfeld mit Layout-Inhaltstypen und Bühne

Layout-Inhaltstyp
Beschreibung
Zeile
Eine neue Zeile kann nur vom Bedienfeld auf die Bühne 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 vom Bedienfeld in die Bühne oder in Zeilen und Registerkarten gezogen werden. Die maximale Anzahl der Spalten, die hinzugefügt werden können, hängt von der Anzahl der Rasterdivisionen ab, die in der Variablen Konfiguration.
Registerkarten
Eine einzelne Registerkarte kann vom Bedienfeld in die Bühne oder in Zeilen und Spalten gezogen werden. Zusätzliche Registerkarten können über die Toolbox hinzugefügt werden.

Elemente

Verwenden Sie die Elements ​Abschnitt Page Builder -Bedienfeld zum Hinzufügen von Text, Überschriften, Schaltflächen, Dividern und HTML-Code zu einem Layout-Container im Page Builder Schritt. Wenn Sie einen Inhaltstyp aus dem Bedienfeld in eine Zeile oder Spalte oder in eine auf der Bühne festgelegte Registerkarte ziehen, wird ein Container angezeigt. Verwenden Sie die Inhaltstyp-Toolbox, um auf die für den Typ spezifischen Einstellungen zuzugreifen.

Page Builder Bedienfeld mit Elementinhaltstypen

Elementinhaltstyp
Beschreibung
Text
Fügt einen Textcontainer und Editor zur Bühne hinzu.
Überschrift
Fügt der Bühne einen Überschriftencontainer hinzu.
Schaltflächen
Fügt einen Container für eine einzelne Schaltfläche oder einen Satz von Schaltflächen zur Bühne hinzu.
Trennlinie
Fügt der Bühne einen Container für einen Divider hinzu.
HTML-Code
Fügt der Bühne einen Container für HTML-Code hinzu.

Medien

Verwenden Sie die Media ​Abschnitt Page Builder Bedienfeld zum Hinzufügen von Bildern, Videos, Bannern, Reglern und Google Maps zu einem Layout-Container auf der Page Builder Schritt. Wenn ein Medien-Content-Typ aus dem Bedienfeld auf die Bühne gezogen wird, wird ein Container mit einer Toolbox von Optionen angezeigt, die für den Inhaltstyp spezifisch sind.

Page Builder Bedienfeld mit Medientypen

Medien-Content-Typ
Beschreibung
Bild
Fügt der Bühne einen Bild-Container hinzu.
Video
Fügt einen Video-Container zur Bühne hinzu.
Banner
Fügt der Bühne einen Banner-Container hinzu.
Regler
Fügt der Bühne einen Regler-Container hinzu.
Zuordnung
Fügt eine Google Maps Container zur Bühne hinzufügen.

Inhalt hinzufügen

Verwenden Sie die Add Content ​Abschnitt Page Builder Bereich zum Hinzufügen vorhandener Inhalte zum Page Builder Schritt. Wenn Sie einen Medientyp aus dem Bedienfeld auf die Bühne ziehen, wird ein Container angezeigt. Verwenden Sie die Inhaltstyp-Toolbox, um auf die_ Einstellungen _die für den Typ spezifisch sind.

Page Builder Bedienfeld mit Typ "Inhalt hinzufügen"

Inhaltstyp
Beschreibung
Block
Fügt einen vorhandenen Block zur Bühne hinzu.
Dynamischer Block
Fügt einen vorhandenen dynamischen Block zur Bühne hinzu.
Produkte
Fügt der Bühne eine Liste von Produkten hinzu.
Nur Adobe Commerce Produkt-Recommendations
Fügt der Bühne eine Empfehlungseinheit hinzu.

Toolbox

Jeder Inhaltscontainer auf der Bühne verfügt über eine Toolbox mit Optionen. Die Optionen variieren je nach Inhaltstyp, umfassen jedoch in der Regel Verschieben, Einstellungen, Ausblenden/Anzeigen, Duplizieren und Entfernen.

Werkzeugkasten anzeigen

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

Zeilen-Toolbox-Optionen

Toolbox-Optionen

Option
Symbol
Beschreibung
Verschieben
Symbol Verschieben {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, Folie oder Registerkarte hinzu.
(Titel)
Gibt den Container-Inhaltstyp an.
Einstellungen
Symbol Einstellungen {width="25"}
Öffnet die Eigenschaften des Inhaltscontainers im Bearbeitungsmodus.
Ausblenden
Symbol "Ausblenden" {width="25"}
Blendet den aktuellen Inhaltscontainer aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt den aktuellen Inhaltscontainer an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert den aktuellen Inhalts-Container.
Entfernen
Entfernen {width="25"}
Löscht den aktuellen Inhalts-Container aus der Bühne.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden nicht sichtbar. 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 "Unsichtbarkeit"angefordert werden, es sei denn, Sie entfernen sie aus der Bühne.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d