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.
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.
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.
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.
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.
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.
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 Breakpoints—
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.
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.
-
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.
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:
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.
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
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.
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.
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.
Toolbox-Optionen






