Page Builder Anleitung Teil 1: Einfache Seite

In dieser dreiteiligen Übung machen Sie sich mit dem Page Builder Arbeitsbereich vertraut, indem Sie eine einfache Seite erstellen, die veranschaulicht, wie einfach es ist, inhaltsreiche Seiten Ihres eigenen Designs zu erstellen.

Beispiel für eine einfache Seite {width="700" modal="regular"}

NOTE
Diese exemplarischen Übungen werden aktualisiert, um die jüngsten Änderungen am Page Builder Workspace in Version 2.4.1 widerzuspiegeln.

Bevor Sie beginnen

Bevor Sie mit dieser Übung beginnen, sollten Sie die Admin-Sitzungslebensdauer erhöhen, um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Überprüfen Sie die erforderlichen Einstellungen für die Content-Management-Konfiguration:

Herunterladen der schrittweisen Bild-Assets

  1. Laden Sie die simple-page-assets-Datei herunter und speichern Sie die Datei auf Ihrem lokalen System.

  2. Navigieren Sie zur heruntergeladenen Datei und extrahieren Sie die komprimierten Dateien.

    Klicken Sie auf einem Windows-System mit der rechten Maustaste darauf und wählen Sie Extract All Dateien. Wählen Sie dann den Zielordner aus und klicken Sie auf Extract.

    Auf einem Mac-System können Sie einfach auf die ZIP-Datei doppelklicken und die extrahierten Dateien in den Zielordner verschieben.

    Der Ordner enthält die folgenden Grafikdateien:

    Page Builder Walkthrough-Dateien: Einfache Seiten-Assets {width="500"}

Befolgen Sie die drei Teile dieser Anleitung in der richtigen Reihenfolge.

Teil 1: Vollständige Anschnittzeile mit Banner

In diesem Teil der einfachen Seitenübung erstellen Sie eine Seite mit einer vollständigen Zeile und einem Banner. Die Zeile enthält verschiedene Hintergrundbilder für Desktop- und Mobilgeräte.

Page Builder vollständige Anschnittzeile mit Banner {width="700" modal="regular"}

Schritt 1: Erstellen einer Seite

  1. Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages.

  2. Klicken Sie oben rechts auf Add New Page und führen Sie folgende Schritte aus:

    • Um zu verhindern, dass diese Seite in Ihrem Store veröffentlicht wird, setzen Sie Enable Page auf No.

    • Geben Sie Page Title Simple Page ein.

    Grundlegende Seiteneinstellungen {width="600" modal="regular"}

  3. Erweitern Sie Erweiterungsauswahl den Abschnitt Design .

    Beachten Sie, dass Layout standardmäßig auf Page -- Full Width festgelegt ist. Zusätzlich zu den fünf standardmäßigen Layout-Optionen fügt Page Builder Layouts für Seiten, Kategorien und Produkte in voller Breite hinzu.

  4. Wenn die Beispieldaten verfügbar sind, setzen Sie New Theme auf Magento Luma. Andernfalls können Sie ein anderes verfügbares Design auswählen oder es leer lassen, um das Standard-Design zu verwenden.

    Die New Theme ​kann verwendet werden, um das Standarddesign zu überschreiben und ein anderes Design auf die Seite anzuwenden.

    note note
    NOTE
    Das Layout „Volle Breite“ kann nur mit einem kompatiblen (Design verwendet.

    Seitendesign-Einstellungen {width="600" modal="regular"}

  5. Klicken Sie oben rechts auf Save.

    Beim Speichern der Seite wird Name „Einfache" oben links auf der Seite angezeigt.

Schritt 2: Zeile formatieren

  1. Erweitern Sie Erweiterungsauswahl den Abschnitt Content .

    Diese Aktion zeigt die Page Builder Vorschau mit einer leeren Zeile an.

    note note
    NOTE
    Das Inhaltsüberschrift ist optional. Standardmäßig wird sie entsprechend dem Design als Überschriftenebene 1 (H1) formatiert. Für diese Übung wird die Inhaltsüberschrift leer gelassen.

    Seiteninhaltsvorschau mit leerer Zeile {width="600" modal="regular"}

  2. Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

    Im erweiterten Page Builder Arbeitsbereich bietet das Bedienfeld auf der linken Seite die Inhalts-Tools, die Sie zum Erstellen von Inhalten in der Phase verwenden können.

  3. Bewegen Sie den Mauszeiger über die leere Zeile, um die Toolbox anzuzeigen.

    Jeder Inhalts-Container verfügt über eine Toolbox mit einem ähnlichen Satz von Optionen.

    Page Builder-Toolbox {width="600" modal="regular"}

  4. Wählen Sie in der Toolbox „Zeile das Symbol Einstellungen ( {width="20"}).

  5. Wählen Sie unter Appearance ​die Option Vollständiger Anschnitt.

    Mit der Einstellung Vollständiger Anschnitt werden der linke und rechte Rand des Inhaltsbereichs der Zeile und des Hintergrunds auf die gesamte Seitenbreite erweitert.

    Zeileneinstellungen - Vollständiger Anschnitt {width="600" modal="regular"}

  6. Scrollen Sie nach unten zum Abschnitt Advanced ​und setzen Sie alle Margins and Padding ​auf 0.

    Durch diese Einstellung wird sichergestellt, dass das Banner die gesamte Breite der Zeile erweitert.

    Zeileneinstellungen - Ränder und Abstand {width="600" modal="regular"}

  7. Um die Einstellungen zu speichern und zum Arbeitsbereich "Page Builder" zurückzukehren, scrollen Sie nach oben auf der Seite und klicken Sie oben rechts auf Save .

Schritt 3: Banner hinzufügen

NOTE
Page Builder hat einen neuen Inhaltstyp mit dem Namen Banner, der in diesem Schritt verwendet wird. Was zuvor die Option Banner im Menü „Inhalt“ war, ist jetzt ein dynamischer Block.
  1. Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Banner-Platzhalter auf die Bühne.

    Ziehen eines Banner-Inhaltstyps auf den Schritt {width="600" modal="regular"}

  2. Bewegen Sie den Mauszeiger über den Banner-Container, um die Toolbox anzuzeigen.

    note note
    NOTE
    Die Phase verfügt jetzt über zwei Inhalts-Container mit jeweils einer separaten Toolbox. Da das Banner in der Zeile verschachtelt ist, stellen Sie sicher, dass Sie mit der richtigen Toolbox arbeiten.

    Zusätzlich zur Toolbox sind die Schaltflächen Bild hochladen und Aus Galerie auswählen enthalten, sodass Sie direkt auf der Bühne schnelle Änderungen am Banner vornehmen können.

    Banner-Toolbox {width="600" modal="regular"}

  3. Wählen Sie in der Banner-Toolbox das Symbol Einstellungen ( Einstellungssymbol {width="20"} ) aus.

  4. Wählen Sie unter Appearance ​die Option Collage Right ​aus.

    Mit der Einstellung „Collage Right“ werden Inhalte auf der rechten Seite des Banners positioniert.

    Banner Erscheinungsbild - Collage rechts {width="600" modal="regular"}

  5. Scrollen Sie nach unten zum Abschnitt Background ​und legen Sie das Hintergrundbild für das Banner fest:

    • Klicken Sie Background Image auf Hochladen.

      Bannerhintergrund - Bild hochladen {width="600" modal="regular"}

      Navigieren Sie zu dem Verzeichnis, in dem Sie die extrahierten einfachen Seiten-Assets gespeichert haben, und wählen Sie die wide-banner-background.jpg aus.

      Das Bild wird hochgeladen und eine Miniaturansicht des hochgeladenen Bildes wird angezeigt. Der Dateiname, die Bildabmessungen und die Dateigröße werden unten angegeben.

      Hochgeladenes Hintergrundbild in der Mediensammlung {width="600" modal="regular"}

    • Klicken Sie Background Mobile Image auf Hochladen.

      Wählen Sie im selben Dateiverzeichnis die wide-banner-background-mobile.jpg.

      Das mobile Hintergrundbild wird für Mobilgeräte verwendet und auch immer dann, wenn ein Desktop-Browser-Fenster auf die Breite eines Mobilgeräts geändert wird.

      Auswählen der Beispiel-Bannerbilddatei für Mobilgeräte {width="600" modal="regular"}

    • Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

      Der Hintergrund wird auf der Bühne angezeigt und erstreckt sich über die gesamte Breite der Zeile.

      Banner mit Hintergrundbild {width="600" modal="regular"}

    Beachten Sie den Platzhaltertext, der rechts in der Zeile angezeigt wird. Die Position dieses Textes entspricht der Collage Right Erscheinungsbildeinstellung.

  6. Klicken Sie auf den Platzhaltertext und geben Sie die folgende Nachricht in zwei Zeilen ein:

    Get fit and look fab in new seasonal styles.

    New LUMA yoga collection

    Die Editor-Symbolleiste wird über dem Textfeld angezeigt. Text kann entweder direkt über die Bühne eingegeben und formatiert werden oder durch Auswahl von Einstellungen in der Banner-Toolbox.

    Bannerinhalt von der Bühne aus bearbeiten {width="600" modal="regular"}

  7. Anwenden der Formatierung auf den Text:

    • Markieren Sie die erste Textzeile. Wählen Sie dann in der Editor-Symbolleiste unter Formate die Option Heading 2 aus.

      Anwenden des Formats für Überschrift 2 {width="600" modal="regular"}

    • Wählen Sie die zweite Textzeile aus. Wählen Sie dann in der Editor-Symbolleiste unter Formate die Option Paragraph aus.

    Die Formateinstellungen wenden die Stile aus dem Stylesheet an, das mit dem aktuellen Design verknüpft ist.

    Banner im Inhaltsstadium mit formatiertem Text {width="600" modal="regular"}

__

  1. Um die Banner-Toolbox anzuzeigen, wählen Sie erneut das Symbol Einstellungen ( Einstellungssymbol {width="20"} ) aus und scrollen Sie dann zum Abschnitt Content.

    Beachten Sie, dass Ihr Text im Feld Text angezeigt wird. Text kann entweder über die Bühne oder den Content ​Abschnitt der Bannereinstellungen eingegeben und bearbeitet werden.

    Bannereinstellungen - Nachrichtentext {width="600" modal="regular"}

  2. Legen Sie anschließend im Abschnitt Content ​den Bannerlink und die Schaltfläche fest:

    • Legen Sie Link auf Category fest und klicken Sie dann auf Select, um die Kategoriestruktur anzuzeigen.

    • Wählen Sie What's New als verknüpfte Kategorie aus.

      Bannerinhalt - Link zur Kategorie {width="600" modal="regular"}

    • Legen Sie Show Button auf Always fest.

    • Geben Sie Button Text Shop Now als Text ein, der auf der Schaltfläche angezeigt wird.

    • Akzeptieren Sie Button Type den Primary.

      Der Schaltflächenstil des aktuellen Designs bestimmt das Schaltflächenformat.

  3. Festlegen der Bannerüberlagerung:

    Sie können eine Überlagerung verwenden, um eine Hintergrundfarbe auf den aktiven Inhaltsbereich anzuwenden, der durch die Einstellung Erscheinungsbild definiert wird. Das Hintergrundbild des Banners bleibt für die gesamte Breite des Banners sichtbar.

    • Legen Sie Show Overlay auf Always fest.

    • Führen Sie Overlay Color einen der folgenden Schritte aus:

      • Klicken Sie auf das Farbfeld und wählen Sie das weiße Farbfeld aus.
      • Klicken Sie in das Keine Farbe und geben Sie White oder den Hexadezimalwert #ffffff ein.

      Klicken Sie dann auf Apply.

      Bannereinstellungen - Farbe der Schaltflächenüberlagerung {width="600" modal="regular"}

    • Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

      Die Schaltfläche wird unterhalb der Bannermeldung auf der Bühne angezeigt.

      Banner in der Inhaltsphase mit Textnachricht und Schaltfläche {width="600" modal="regular"}

  4. Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( Vollbildsymbol schließen ).

    Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

    Sie können jederzeit zwischen den beiden Arbeitsbereichsmodi wechseln.

  5. Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

  6. Wenn Sie dazu aufgefordert werden klicken Sie auf den LinkCache-Verwaltung“ in der Meldung oben auf der Seite und aktualisieren Sie alle ungültigen Cache-Einträge.

Teil 2: Enthaltene Zeile mit zwei gleichen Spalten

In diesem Teil der Übung fügen Sie der Seite eine Zeile hinzu und teilen die Zeile in zwei gleiche Spalten. Anschließend fügen Sie jeder Spalte ein verknüpftes Bild hinzu. In den Anweisungen wird jede neue Zeile vor der ersten Zeile hinzugefügt, damit das Page Builder Bedienfeld an die Phase angepasst ist. Am Ende der Übung ordnen Sie die Zeilen so an, dass sie dem Beispiel Einfache Seite entsprechen.

Beispielseite mit enthaltener Zeile mit zwei gleichen Spalten {width="600" modal="regular"}

Schritt 1: Zeile hinzufügen

  1. Suchen Sie im Seitenraster nach der einfachen Seite die Sie im ersten Teil dieser Übung erstellt haben, und wählen Sie Edit in der Spalte Action ​aus.

  2. Erweitern Sie Erweiterungsauswahl den Abschnitt Content .

  3. Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

  4. Ziehen Sie im Page Builder Bedienfeld unter Layout ​einen Row ​Platzhalter auf die Bühne und platzieren Sie ihn über dem Banner.

    Die rote Richtlinie markiert die Grenze zwischen den beiden Zeilen.

    Hinzufügen einer neuen Zeile über dem Banner {width="600" modal="regular"}

  5. Bewegen Sie den Mauszeiger über die neue Zeile, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen ( {width="20"} ) aus.

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

  6. Akzeptieren Sie unter Appearance ​die Standardeinstellung Enthalten.

    Diese Einstellung beschränkt den Inhaltsbereich der Zeile auf die Breite der Seite, wie vom Design definiert.

    Beibehalten der Standardeinstellung „Enthaltenes Erscheinungsbild“ {width="600" modal="regular"}

  7. Klicken Sie oben rechts auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 2: Spalte hinzufügen

  1. Ziehen Sie im Page Builder unter Layout ​einen Column ​Platzhalter in die neue Zeile.

    Ziehen eines Spalten-Inhaltstyps auf den Schritt {width="600" modal="regular"}

    Die Zeile ist jetzt in zwei Spalten gleicher Breite unterteilt. Jede Spalte ist ein separater Container für Inhalte mit einer eigenen Toolbox mit Optionen.

    Zeile mit zwei Spalten gleicher Breite {width="600" modal="regular"}

  2. Klicken Sie oben links in der ersten Spalte auf das runde Grid-Steuerelement ( Grid-Steuerelement ), um die Rasterrichtlinien anzuzeigen.

    Das Raster stellt sicher, dass Inhalte konsistent ausgerichtet sind und auf Desktop- und Mobilgeräten korrekt gerendert werden. Informationen zum Konfigurieren der Rastergröße finden Sie Abschnitt „Konfigurieren Page Builder im Thema Page Builder.

    Die Zahlen in Klammern (6/12) am oberen Rand jedes Spaltencontainers geben die Anzahl der Rasteraufteilungen in jeder Spalte und die Gesamtzahl der Aufteilungen in der Zeile an.

    Anzeigen von Rastergrößendetails für die Spalte {width="600" modal="regular"}

In diesem Schritt erfahren Sie, wie Sie ein Bild in das Banner hochladen.

  1. Erweitern Sie im Page Builder den Abschnitt Media und ziehen Sie einen Image Platzhalter in die erste Spalte.

    Ziehen Sie den Inhaltstyp des Bildes in die erste Spalte {width="600" modal="regular"}

  2. Fügen Sie das Beispielbild in den Platzhalter ein.

    Bildplatzhalter {width="600" modal="regular"}

    Für ein Bild, das sich auf Ihrem System befindet, können Sie eine der folgenden Methoden wählen:

    • Bilddatei hochladen: Klicken Sie in der ersten Spalte auf Upload Image. Navigieren Sie dann zu dem Verzeichnis, in dem Sie die extrahierten einfachen Seiten-Assets gespeichert haben, und wählen Sie die small-banner-1.jpg aus.

      Hochgeladenes Bild zur ersten Spalte hinzugefügt {width="600" modal="regular"}

      Wiederholen Sie diese Aktion, um die small-banner-2.jpg-Datei zur zweiten Spalte hinzuzufügen.

    • Ziehen Sie die Bilddatei: Öffnen Sie auf Ihrem Desktop den Ordner Einfache Seiten-Assets und positionieren Sie ihn neben dem Admin-Browser-Fenster, in dem Sie mit dem Page Builder arbeiten. Ziehen Sie dann die Datei small-banner-1.jpg aus dem Ordner Einfache Seiten-Assets und legen Sie sie in der ersten Spalte ab.

      Ziehen Sie das Bild auf die zweite Spalte {width="600" modal="regular"}

      Wiederholen Sie diese Aktion, um die small-banner-2.jpg-Datei zur zweiten Spalte hinzuzufügen.

  3. Bestimmen Sie, welche Seite aus Ihrem Katalog mit den einzelnen Bildern verknüpft werden soll.

  4. Bewegen Sie den Mauszeiger über das Bild in der ersten Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ) aus.

    Bild-Toolbox {width="600" modal="regular"}

  5. Verknüpfen des Bildes mit einer Kategorie:

    • Scrollen Sie nach unten und setzen Sie Link auf Category.

    • Gehen Sie in der Kategoriestruktur nach unten und wählen Sie die Men's Hoodies & Sweatshirt Kategorie aus.

    • Save Sie oben rechts die Einstellungen aus und kehren Sie zum Arbeitsbereich Page Builder zurück.

  6. Wiederholen Sie den vorherigen Schritt, um das Bild in der zweiten Spalte mit der Kategorie Zahnrad zu verknüpfen.

  7. Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( Vollbildsymbol schließen ).

    Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

  8. Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

  9. Wenn Sie dazu aufgefordert werden klicken Sie auf den LinkCache-Verwaltung“ in der Nachricht oben auf der Seite und aktualisieren Sie alle ungültigen Cache-Einträge.

Teil 3: Zeile mit voller Breite und ungleichen Spalten

Die letzte Zeile auf dieser Seite enthält Inhalte aus einer Produktbewertung. Sie fügen eine Zeile mit voller Breite hinzu und teilen sie in zwei Spalten mit unterschiedlichen Breiten. Der ersten Spalte wird ein Hintergrundbild mit einer entsprechenden Hintergrundfarbe hinzugefügt, die auf die Zeile angewendet wird, um einen einheitlichen Effekt zu erzielen.

Beispiel: Zeile mit voller Breite mit Spalten unterschiedlicher Breite {width="500"}

Schritt 1: Zeile hinzufügen

  1. Suchen Sie im Seitenraster nach der einfachen Seite die Sie im ersten Teil dieser Übung erstellt haben, und wählen Sie Edit in der Spalte Action ​aus.

  2. Erweitern Sie Erweiterungsauswahl den Abschnitt Content .

  3. Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

  4. Ziehen Sie im Page Builder Bedienfeld unter Layout ​einen Row ​Platzhalter auf die Bühne und platzieren Sie ihn über der Zeile, die im zweiten Teil dieser Übung erstellt wurde.

    Eine rote Richtlinie markiert die Grenze zwischen den beiden Zeilen.

    Neue Zeile hinzufügen {width="600" modal="regular"}

  5. Bewegen Sie den Mauszeiger über die neue Zeile, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen ( Einstellungssymbol {width="20"} ) aus.

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

  6. Wählen Sie auf der Seite Zeile bearbeiten unter Appearance ​die Option Full Width ​aus.

    Diese Einstellung beschränkt den Inhaltsbereich auf die maximale Seitenbreite, die vom Design definiert wird. Die Hintergrundfarbe und/oder das Bild sind nicht beschränkt und erweitern die gesamte Breite der Zeile.

    Auswählen des Erscheinungsbildes Vollbreite {width="600" modal="regular"}

  7. Geben Sie im Abschnitt Background#f1f1f1 als Background Color ​ein.

    Festlegen der Hintergrundfarbe {width="600" modal="regular"}

  8. Scrollen Sie nach unten zum Abschnitt Advanced ​und legen Sie alle Werte Ränder und Abstand ​auf 0 fest.

    Festlegen der Ränder und des Abstands {width="600" modal="regular"}

  9. Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

    Die Hintergrundfarbe der Zeile ist jetzt ein blasses Beige.

    Zeile mit der Hintergrundfarbe im Stadium {width="600" modal="regular"}

Schritt 2: Spalten mit unterschiedlichen Breiten hinzufügen

  1. Ziehen Sie im Page Builder Bedienfeld unter Layout ​einen Column ​Platzhalter in die oberste Zeile auf der Bühne.

    Eine Spalte auf die Bühne ziehen {width="600" modal="regular"}

  2. Ziehen Sie den rechten Rand der ersten Spalte an die vier der 12 (4/12) -Positionen im Raster.

    Die Größe der zweiten Spalte wird auf acht von zwölf (8/12) angepasst.

    Ändern der Größe der ersten Spalte {width="600" modal="regular"}

  3. Bewegen Sie den Mauszeiger über den ersten Spalten-Container, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen ( ( {width="20"}) aus.

  4. Scrollen Sie nach unten zum Abschnitt Advanced ​und legen Sie alle Werte Ränder und Abstand ​auf 0 fest.

    Festlegen der Ränder und des Abstands {width="600" modal="regular"}

  5. Scrollen Sie zurück zum Anfang der Seite und klicken Sie auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 3: Hinzufügen eines Bildes zur ersten Spalte

  1. Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Image Inhaltstyp in die erste Spalte.

    Ziehen eines Bild-Inhaltstyps in die erste Spalte {width="600" modal="regular"}

  2. Klicken Sie im Bildplatzhalter auf Upload Image.

    Bild hochladen {width="600" modal="regular"}

  3. Navigieren Sie zu dem Verzeichnis, in dem Sie die extrahierten einfachen Seiten-Assets gespeichert haben, und wählen Sie die review-image.jpg aus.

    Das hochgeladene Bild wird in der ersten Spalte angezeigt und ist nahtlos mit der Hintergrundfarbe der Zeile vermischt.

    Hochgeladenes Bild zur Spalte hinzugefügt {width="600" modal="regular"}

Schritt 4: Hinzufügen von Prüfungsinhalten zur zweiten Spalte

Die zweite Spalte der Zeile sollte Inhalte aus einer Kundenbewertung enthalten, einschließlich des Fünf-Sterne-Bewertungsbildes und der formatierten Textnachricht.

  1. Erweitern Sie im Page Builder den Abschnitt Elements und ziehen Sie den Text Inhaltstyp in die zweite Spalte.

    Ziehen Sie den Textinhaltstyp auf den Schritt {width="600" modal="regular"}

  2. Klicken Sie auf das Textelement, um die Editor-Symbolleiste anzuzeigen.

  3. Klicken Sie in der Symbolleiste auf Bild einfügen ( Symbol „Bild einfügen ) und führen Sie folgende Schritte aus:

    Einfügen eines Bildes in den Text {width="600" modal="regular"}

    • Klicken Sie im Insert/edit image ​auf das Symbol_ Suchen _( Suchen ) neben dem Feld​ Source.

      Dialogfeld „Bild einfügen/bearbeiten“ {width="600" modal="regular"}

    • Klicken Sie auf der Select Images ​Seite auf Choose Files.

    • Wählen Sie im Ordner, in dem Sie die einfachen Seiten-Assets gespeichert haben, rating.png aus.

    • Doppelklicken Sie auf der Seite erneut auf die Bildkachel, um sie auszuwählen und ihre URL in das Feld Source einzufügen.

      Auswählen des Bildes auf der Seite {width="600" modal="regular"}

    • Geben Sie Image Description 5-Star Rating ein und klicken Sie auf OK , um das Bild in die Spalte einzufügen.

    • Klicken Sie in der Editor-Symbolleiste auf Zentrieren ( Zentrierte Schaltfläche ausrichten ), um das Bild in der Spalte zu zentrieren.

      Zentriertes Bewertungsbild {width="600" modal="regular"}

  4. Positionieren Sie die Einfügemarke direkt nach dem Fünf-Sterne-Bild, drücken Sie die Eingabetaste, um eine neue Zeile zu beginnen, und geben Sie folgenden Text ein:

    Awesome Tank!

    I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

    Antonia Racer Tank – Reviewed by Allyson

    Der Text wird während der Eingabe zentriert.

    Text zentriert in der Spalte überprüfen {width="600" modal="regular"}

  5. Formatieren Sie den Text:

    • Klicken Sie auf eine beliebige Stelle in der ersten Textzeile und wählen Sie in der Editor Symbolleiste unter FormateHeading 2 die Option aus.

    • Wählen Sie den verbleibenden Text aus und klicken Sie in der Editor-Symbolleiste unter Formate auf Paragraph.

    Der Text wird entsprechend dem Stylesheet formatiert, das mit dem Design verknüpft ist.

  6. Rufen Sie die Abmessungen des Bildes ab, damit Sie den Inhalt vertikal in der Spalte zentrieren können:

    • Bewegen Sie den Mauszeiger über das Bild in der ersten Spalte, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen ( {width="20"}) aus.

    • Notieren Sie sich die Abmessungen des Bildes unter der Miniaturansicht des Bildes.

      Bildabmessungen werden unter der Miniatur angezeigt {width="600" modal="regular"}

    • Klicken Sie oben rechts auf Schließen.

  7. Inhalt vertikal in der zweiten Spalte zentrieren:

    • Bewegen Sie den Mauszeiger über die zweite Spalte, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen (

      Einstellungssymbol {width="20"}

      ) aus.

    note note
    NOTE
    Wählen Sie den Spalten-Container anstelle des Text-Containers aus, um die richtige Toolbox anzuzeigen.
    • Geben Sie Minimum Height 450 als Höhe in Pixel für das Bild in der ersten Spalte ein.

    • Legen Sie Vertical Alignment auf Center fest.

    Festlegen der Mindesthöhe und vertikalen Ausrichtung {width="600" modal="regular"}

  8. Scrollen Sie nach unten zum Abschnitt Advanced ​und legen Sie alle Margins and Padding ​auf null fest ( 0 ).

    Festlegen der Ränder und des Abstands {width="600" modal="regular"}

  9. Scrollen Sie zurück zum Seitenanfang und klicken Sie oben rechts auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

    Zeile mit Überprüfungsinhalt auf der Bühne {width="600" modal="regular"}

  1. Wählen Sie den Antonia Racer Tank Text aus und klicken Sie auf das Symbol Link einfügen ( Link- einfügen) in der Editor-Symbolleiste.

  2. Geben im Dialogfeld „Link einfügen den Link zum Katalogprodukt an:

    • Geben Sie die URL ein.

      Sie können entweder eine relative oder eine vollständig qualifizierte URL eingeben. Für dieses Beispiel wird folgender relativer Link eingegeben:

      ../antonia-racer-tank.html

    • (Optional) Geben unter "" den Produktnamen ein.

      Das Link-Attribut Titel wird von einigen Browsern als QuickInfo verwendet.

      Link in den Text einfügen {width="600" modal="regular"}

    • Klicken Sie abschließend auf OK , um den Link zu speichern.

      Der verknüpfte Text wird jetzt im Banner hervorgehoben.

      Banner mit verknüpftem Text {width="600" modal="regular"}

  3. Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( Vollbildsymbol schließen ).

    Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

  4. Klicken Sie oben rechts auf Save.

Schritt 6: Zeilen neu anordnen

Nachdem alle drei Zeilen abgeschlossen sind, besteht der letzte Schritt darin, die Zeilen neu anzuordnen, sodass sie dem ursprünglichen Beispiel Einfache Seite entsprechen. Um dem ursprünglichen Beispiel zu entsprechen, muss die erste Zeile nach unten und die letzte Zeile nach oben verschoben werden.

  1. Erweitern Sie bei Bedarf Erweiterungsauswahl den Abschnitt Content .

  2. Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.

  3. Bewegen Sie den Mauszeiger über die erste Zeile auf der Bühne, um die Toolbox anzuzeigen, und wählen das Symbol Verschieben (Symbol ) aus.

    Verschieben {width="600" modal="regular"}

  4. Halten Sie die Maustaste gedrückt, während Sie überprüfen, ob der gesamte Inhalt in der Zeile ausgewählt ist, und ziehen Sie die Zeile unter der roten Richtlinie am unteren Seitenrand an eine Position.

    note note
    NOTE
    Wenn Sie versehentlich nur einen Teil des Inhalts verschieben - z. B. das Bild - verschieben Sie den Inhalt einfach dorthin zurück, wo er hingehört, und versuchen Sie es erneut.

    Verschieben einer Zeile auf der Bühne {width="600" modal="regular"}

  5. Wiederholen Sie diesen Vorgang, um die erste Zeile an die zweite Position zu verschieben.

    Die Reihenfolge der Zeilen auf der Seite stimmt jetzt mit dem Beispiel Einfache Seite überein.

  6. Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( Vollbildsymbol schließen ).

    Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

  7. Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

  8. Wenn Sie dazu aufgefordert werden klicken Sie auf den LinkCache-Verwaltung“ in der Meldung oben auf der Seite und aktualisieren Sie alle ungültigen Cache-Einträge.

Sie haben die Übung „Einfache Seite“ abgeschlossen. Behalten Sie das von Ihnen erstellte Werk bei, damit Sie später darauf verweisen können.

Wenn Sie fertig sind, fahren Sie mit Teil 2: Blöcke fort.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d