Page Builder Workspace
Wenn Page Builder aktiviert ist, werden der Abschnitt Content und der Inhaltserstellungsprozess geändert, um die erweiterten Page Builder-Tools für CMS pages, product und category Seiten, blocks und dynamische Blöcke zu nutzen. Dieser Abschnitt enthält ein Feld für die_ Inhaltsüberschrift _, eine Vorschau des Inhalts und einen einfachen Zugriff auf den Arbeitsbereich für den Vollbildmodus Page Builder.
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.
Damit Sie die Positionierung und das Format von Überschriften aller Ebenen optimal steuern können, sollten Sie das Feld Content Heading leer lassen und den Inhaltstyp Page Builder Überschrift verwenden.
Vorschau
Wenn Sie den Abschnitt Content erweitern und bereits vorhandener Inhalt mit Page Builder erstellt wurde, wird eine Vorschau des Inhalts so angezeigt, wie er auf einer Seite angezeigt würde. Klicken Sie auf "Edit with Page Builder"oder in der Inhaltsvorschau, um den Arbeitsbereich "Page Builder"zu öffnen, wo Sie erforderliche Aktualisierungen vornehmen können.
Staging
Wenn Sie den Arbeitsbereich "Page Builder"über die Vorschau öffnen, 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.
Viewports
Ein Viewport ist der sichtbare Bereich einer Webseite, den ein Benutzer sieht. Im Designmodus für den Vollbildmodus werden die Viewport-Schaltflächen oberhalb der Page Builder-Bühne angezeigt, um Ihnen den Inhalt anzuzeigen, sobald der Site-Benutzer ihn auf der Storefront sieht.
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-Breakpoint—
min-width: 1024px. Dieser Breakpoint wendet Stile an, die für Darstellungsfeldbreiten mit einer Größe von 1024 Pixel und mehr definiert sind. - Mobile Haltepunkte—
max-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 bietet Page Builder 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.
-
Mobil - 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.
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 bietet Page Builder 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:
Bedienfeld
Das Bedienfeld "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
Der Abschnitt "Layout"im Bedienfeld "Page Builder"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 ist die Page Builder -Phase 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.
Elemente
Verwenden Sie den Abschnitt "Elements"des Bereichs "Page Builder", um Text, Überschriften, Schaltflächen, Trennlinien und HTML-Code zu einem Layout-Container auf der Page Builder Bühne hinzuzufügen. 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.
Medien
Verwenden Sie den Abschnitt "Media"des Bereichs "Page Builder", um Bilder, Videos, Banner, Schieberegler und Google Maps zu jedem Layout-Container auf der Page Builder Bühne hinzuzufügen. 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.
Inhalt hinzufügen
Verwenden Sie den Abschnitt Add Content des Bereichs Page Builder , um vorhandenen Inhalt zur Page Builder Bühne hinzuzufügen. Wenn Sie einen Medientyp aus dem Bedienfeld auf die Bühne ziehen, wird ein Container angezeigt. Verwenden Sie die Inhaltstyp-Toolbox, um auf die für den Typ spezifischen_ Einstellungen _zuzugreifen.
Bedienfeld
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.
Toolbox-Optionen
