Tutorial 1: Einfache Seite

In diesem dreiteiligen Tutorial machen Sie sich mit dem Arbeitsbereich von Page Builder vertraut und erstellen eine einfache Seite, die zeigt, wie einfach es ist, inhaltsreiche Seiten nach eigenem Entwurf zu erstellen.

Beispiel für eine einfache Seite

Diese Tutorials wurden aktualisiert, um die jüngsten Änderungen am Arbeitsbereich Page Builder in der Version 2.4.1 zu berücksichtigen. Wenn Sie eine frühere Version von Adobe Commerce verwenden, verwenden Sie die Page Builder Tutorials, die im Commerce 2.3 User Guide enthalten sind.

Bevor Sie beginnen

Bevor Sie mit diesem Tutorial beginnen, empfehlen wir Ihnen, die Admin Session Lifetime zu erhöhen, um zu verhindern, dass die Sitzung während Ihrer Arbeit abbricht.

Überprüfen Sie die erforderlichen Konfigurationseinstellungen für das Content Management:

• Der WYSIWYG-Editor ist in der Konfiguration WYSIWYG-Optionen aktiviert.

• Page Builder ist in der Konfiguration Advanced Content Tools aktiviert.

Download der Bilddateien des Tutorials

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

2. Navigieren Sie zu der heruntergeladenen Datei und entpacken Sie die gezippten Dateien.

   Klicken Sie auf einem Windows-System mit der rechten Maustaste und wählen Sie Alle Dateien extrahieren. Wählen Sie dann den Zielordner und klicken Sie auf Extrahieren.

   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 Bilddateien:

   Page Builder tutorial files - simple page assets_

Folgen Sie den Teilen 1, 2 und 3 dieses Tutorials der Reihe nach.

Teil 1: Vollflächige Zeile mit Banner

In diesem Teil des Simple Page Tutorials erstellen Sie eine neue Seite mit einer Full-Bleed-Zeile und einem Banner. Die Zeile hat unterschiedliche Hintergrundbilder für Desktop- und Mobilgeräte.

Page Builder Vollbeschnittene Zeile mit Banner

Schritt 1: Erstellen Sie eine neue Seite

1. Gehen Sie in der Seitenleiste von Admin auf Inhalt > Elemente > Seiten.

2. Klicken Sie in der oberen rechten Ecke auf Neue Seite hinzufügen und gehen Sie wie folgt vor:

   • Um zu verhindern, dass diese Seite in Ihrem Shop veröffentlicht wird, setzen Sie Seite aktivieren auf Nein.

   • Geben Sie für Seitentitel Einfache Seite ein.

   Einstellungen für Basisseite

3. Erweitern Sie den Abschnitt Design.

   Beachten Sie, dass Layout standardmäßig auf Seite -- Volle Breite eingestellt ist. Zusätzlich zu den fünf Standard-[Layout]-Optionen(/de/jajuma-shop/magento-2-handbuch/design/page-layout.html) fügt Page Builder Layouts mit voller Breite für Seiten, Kategorien und Produkte hinzu.

4. Wenn die Beispieldaten verfügbar sind, setzen Sie Neu Theme auf Magento Luma. Andernfalls können Sie ein anderes verfügbares Thema wählen oder die Option leer lassen, um das Standardthema zu verwenden.

   Die Einstellung Neu Theme kann verwendet werden, um das Standardthema außer Kraft zu setzen und ein anderes Thema auf die Seite anzuwenden.

Das Layout “Volle Breite” kann nur mit einem kompatiblen Thema verwendet werden.

Einstellungen für das Seitendesign_

1. Klicken Sie in der oberen rechten Ecke auf Speichern.

   Wenn die Seite gespeichert wird, erscheint der Name Einfache Seite in der oberen linken Ecke der Seite.

Schritt 2: Formatieren Sie die Zeile

1. Erweitern Sie den Abschnitt Inhalt.

   Dadurch wird die Vorschau Page Builder mit einer leeren Zeile angezeigt.

Das Feld Inhaltsüberschrift ist optional. Es ist standardmäßig als Überschrift der Ebene 1 (H1) entsprechend dem Thema formatiert. Für die Zwecke dieses Tutorials wird das Feld Inhaltsüberschrift leer gelassen.

Seiteninhaltsvorschau mit leerer Zeile

1. Klicken Sie auf Bearbeiten mit Page Builder oder im Bereich der Inhaltsvorschau.

   Im erweiterten Arbeitsbereich Page Builder bietet das Panel auf der linken Seite die Inhaltswerkzeuge, mit denen Sie Ihren Inhalt im Arbeitsbereich erstellen können.

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

   Jeder Inhaltscontainer verfügt über eine Toolbox mit einer ähnlichen Anzahl von Optionen.

   Page Builder row toolbox_

3. Wählen Sie in der Row-Toolbox das Symbol Settings ( ) Symbol.

4. Wählen Sie unter Auftritt die Option Voller Beschnitt.

   Die Einstellung für das Erscheinungsbild “Voller Beschnitt” erweitert den linken und rechten Rand des Inhaltsbereichs der Zeile und des Hintergrunds auf die gesamte Breite der Seite.

   Zeileneinstellungen - voller Anschnitt_

5. Blättern Sie nach unten zum Abschnitt Erweitert und setzen Sie alle Einstellungen für Ränder und Abstände auf 0.

   Mit dieser Einstellung wird sichergestellt, dass sich das Banner über die gesamte Breite der Zeile erstreckt.

   Zeileneinstellungen - Ränder und Auffüllungen

6. Scrollen Sie zum oberen Rand der Seite und klicken Sie auf Speichern in der oberen rechten Ecke, um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 3: Ein Banner hinzufügen

Page Builder hat einen neuen Inhaltstyp namens Banner, der in diesem Schritt vorgestellt wird. Was vorher die Option Banner im Menü Inhalt war, ist jetzt ein Dynamischer Block.

1. Erweitern Sie im Page Builder Panel Medien und ziehen Sie einen Platzhalter Banner auf den Arbeitsbereich.

   Ziehen eines Banner-Inhaltstyps auf den Arbeitsbereich

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

Der Arbeitsbereich verfügt nun über zwei Inhaltscontainer, die jeweils über eine eigene Toolbox verfügen. Da das Banner in der Zeile verschachtelt ist, stellen Sie sicher, dass Sie in der richtigen Toolbox arbeiten.

Zusätzlich zur Toolbox sind die Schaltflächen Bild hochladen und Aus Galerie auswählen enthalten, damit Sie schnelle Änderungen am Banner direkt vom Arbeitsbereich aus vornehmen können.

Banner-Werkzeugkasten

1. Wählen Sie in der Banner-Toolbox das Settings ( ) Symbol.

2. Wählen Sie unter Erscheinungsbild die Option Rechts kollagieren.

   Die Einstellung “Collage rechts” positioniert den Inhalt auf der rechten Seite des Banners.

   Erscheinungsbild des Banners - Collage rechts

3. Blättern Sie nach unten zum Abschnitt Hintergrund und legen Sie das Hintergrundbild für das Banner fest:

   • Klicken Sie unter Hintergrundbild auf Hochladen.

     Banner-Hintergrund - Bild hochladen

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

     Auswahl der Beispiel-Bannerbilddatei_

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

     Hintergrundbild in der Mediengalerie hochgeladen

   • Klicken Sie bei Hintergrundbild für Mobiltelefone auf Hochladen.

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

     Das mobile Hintergrundbild wird für mobile Geräte verwendet und auch immer dann, wenn die Größe eines Desktop-Browserfensters auf die Breite eines mobilen Geräts angepasst wird.

     Auswahl der Beispiel-Bannerbilddatei für mobile Geräte

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

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

     Banner mit Hintergrundbild

   Beachten Sie den Platzhaltertext, der auf der rechten Seite der Reihe erscheint. Die Position dieses Textes spiegelt die Einstellung für das Erscheinungsbild Collage Right wider.

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

   Machen Sie sich fit und sehen Sie fantastisch aus in den neuen Styles der Saison

   Neue LUMA Yoga-Kollektion

   Die Editor-Symbolleiste erscheint oberhalb des Textfeldes. Der Text kann entweder direkt vom Arbeitsbereich aus eingegeben und formatiert werden oder durch Auswahl von Einstellungen in der Symbolleiste des Banners.

   Bearbeiten von Bannerinhalten vom Arbeitsbereich aus

5. Wenden Sie eine Formatierung auf den Text an:

   • Markieren Sie die erste Zeile des Textes. Wählen Sie dann in der Symbolleiste des Editors unter Formate Überschrift 2.

     Anwenden des Formats Überschrift 2

   • Markieren Sie die zweite Textzeile. Wählen Sie dann in der Symbolleiste des Editors unter Formate Absatz.

   Die Formateinstellungen wenden die Formatvorlagen aus der Stilvorlage an, die mit dem aktuellen Thema verknüpft ist.

   Banner in der Inhaltsphase mit formatiertem Text

6. Bewegen Sie den Mauszeiger, um die Banner-Toolbox anzuzeigen, wählen Sie das Symbol Settings ( ) und blättern Sie dann zum Abschnitt Inhalt.

   Beachten Sie, dass Ihr Text im Feld Message Text angezeigt wird. Der Text kann entweder über den Arbeitsbereich oder über den Abschnitt Inhalt der Bannereinstellungen eingegeben und bearbeitet werden.

   Banner-Einstellungen - Nachrichtentext

7. Im Abschnitt Inhalt legen Sie den Link und die Schaltfläche des Banners fest:

   • Setzen Sie Link auf Kategorie, und klicken Sie dann auf Auswählen, um den Kategoriebaum anzuzeigen.

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

     Bannerinhalt - Link zur Kategorie

   • Setzen Sie Schaltfläche anzeigen auf Immer.

   • Geben Sie für Schaltflächentext Jetzt einkaufen als den Text ein, der auf der Schaltfläche erscheint.

   • Übernehmen Sie für Schaltflächentyp den Standard Primär.

     Der Schaltflächenstil des aktuellen Designs bestimmt das Format der Schaltfläche.

8. Legen Sie das Banner-Overlay fest:

   Sie können ein Overlay verwenden, um eine Hintergrundfarbe auf den aktiven Inhaltsbereich anzuwenden, die durch die Einstellung Erscheinungsbild definiert ist. Das Hintergrundbild des Banners ist weiterhin über die gesamte Breite des Banners sichtbar.

   • Setzen Sie Overlay anzeigen auf Immer.

   • Wählen Sie für Überlagerungsfarbe eine der folgenden Möglichkeiten:

     • Klicken Sie auf das Farbquadrat und wählen Sie das weiße Farbfeld aus.
     • Klicken Sie in das Textfeld Keine Farbe und geben Sie Weiß oder den hexadezimalen Wert #ffffff ein.

     Klicken Sie dann auf Übernehmen.

     Banner-Einstellungen - Farbe der Schaltflächenüberlagerung

   • Blättern Sie zurück zum Anfang der Seite und klicken Sie auf Speichern, um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

     Die Schaltfläche wird unterhalb der Bannermeldung auf dem Arbeitsbereich angezeigt.

     Banner in der Inhaltsbühne mit Textnachricht und Schaltfläche

9. Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ().

   Damit kehren Sie zum Abschnitt Inhalt der Seite zurück, auf der die Vorschau angezeigt wird.

   Sie können jederzeit zwischen den beiden Arbeitsbereichen hin- und herschalten.

10. Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern und schließen.

    Auswählen der Option “Speichern und schließen”

11. Wenn Sie dazu aufgefordert werden, klicken Sie in der Meldung oben auf der Seite auf den Link Cache-Verwaltung und aktualisieren Sie einen ungültigen Cache.

Glückwunsch! Sie haben Teil 1 des Tutorials Einfache Seite abgeschlossen. Bewahren Sie die von Ihnen erstellte Arbeit auf, damit Sie später darauf zurückgreifen können.

Teil 2: Enthaltene Zeile mit zwei gleichen Spalten

In diesem Teil des Tutorials fügen Sie der Seite eine neue Zeile hinzu und unterteilen die Zeile in zwei gleiche Spalten. Dann fügen Sie jeder Spalte ein verlinktes Bild hinzu. In der Anleitung wird jede neue Zeile vor der ersten Zeile eingefügt, damit das Panel Page Builder mit des Arbeitsbereich übereinstimmt. Am Ende des Tutorials ordnen Sie die Zeilen so an, dass sie mit dem Beispiel der einfachen Seite übereinstimmen.

Beispielseite mit enthaltenen Zeilen und zwei gleichen Spalten

Schritt 1: Eine neue Zeile hinzufügen

1. Suchen Sie im Seitengitter die Einfache Seite, die Sie im ersten Teil dieses Tutorials erstellt haben, und wählen Sie Bearbeiten in der Spalte Aktion.

2. Erweitern Sie den Abschnitt Inhalt.

3. Klicken Sie auf Bearbeiten mit Page Builder oder im Bereich der Inhaltsvorschau.

4. Ziehen Sie im Bereich Page Builder unter Layout einen Reihenplatzhalter auf den Arbeitsbereich und platzieren Sie ihn über dem Banner.

   Die rote Hilfslinie markiert die Grenze zwischen den beiden Zeilen.

   Hinzufügen einer neuen Zeile über dem Banner

5. Bewegen Sie den Mauszeiger über die neue Zeile, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings ().

   Reihen-Werkzeugkasten

6. Übernehmen Sie unter Auftritt die Standardeinstellung Geschlossen.

   Diese Einstellung begrenzt den Inhaltsbereich der Zeile auf die Breite der Seite, wie sie im Thema definiert ist.

   Beibehaltung der Standardeinstellung für das Erscheinungsbild Geschlossen

7. Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Schritt 2: Hinzufügen einer Spalte

1. Ziehen Sie im Bereich Page Builder unter Layout einen Platzhalter Spalte in die neue Zeile.

   Ziehen eines Spalteninhaltstyps auf den Arbeitsbereich

   Die Zeile ist nun in zwei gleich breite Spalten unterteilt. Jede Spalte ist ein separater Container für Inhalte mit einer eigenen Toolbox mit Optionen.

   Zeile mit zwei gleich breiten Spalten

2. Klicken Sie in der oberen linken Ecke der ersten Spalte auf das kreisförmige Steuerelement Grid (), um die Rasterlinien anzuzeigen.

   Das Raster stellt sicher, dass der Inhalt einheitlich ausgerichtet ist und sowohl auf dem Desktop als auch auf mobilen Geräten korrekt dargestellt wird. Informationen zum Konfigurieren der Rastergröße finden Sie im Abschnitt Configure Page Builder im Thema Page Builder Setup.

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

   Details zur Rastergröße für die Spalte anzeigen

Schritt 3: Bilder mit Links hinzufügen

In diesem Schritt lernen Sie, wie Sie ein Bild in das Banner hochladen können.

1. Erweitern Sie im Panel Page Builder den Bereich Medien und ziehen Sie einen Platzhalter Bild in die erste Spalte.

   Ziehen des Bildinhaltstyps in die erste Spalte

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

   Bildplatzhalter

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

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

     Hochgeladenes Bild in der ersten Spalte hinzugefügt

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

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

     Ziehen Sie das Bild in die zweite Spalte

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

3. Legen Sie fest, welche Seite aus Ihrem Katalog Sie mit jedem Bild verknüpfen möchten.

4. Bewegen Sie den Mauszeiger über das Bild in der ersten Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

   Bild-Werkzeugkasten

5. Verknüpfen Sie das Bild mit einer Kategorie:

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

   • Gehen Sie im Kategorienbaum nach unten und wählen Sie die Kategorie Herren Kapuzenpullis &&& Sweatshirt.

   • Speichern Sie die Einstellungen in der oberen rechten Ecke 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 Gear zu verknüpfen.

7. Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ().

   Dadurch kehren Sie zum Abschnitt Inhalt der Seite zurück, auf der die Vorschau angezeigt wird.

8. Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern && Schließen.

   Auswählen der Option “Speichern und schließen”

9. Wenn Sie dazu aufgefordert werden, klicken Sie in der Meldung oben auf der Seite auf den Link Cache-Verwaltung und aktualisieren Sie einen ungültigen Cache.

Glückwunsch! Sie haben Teil 2 des Tutorials Einfache Seite abgeschlossen. Bewahren Sie die von Ihnen erstellte Arbeit auf, damit Sie später darauf zurückgreifen können.

Teil 3: Zeile in voller Breite mit ungleichen Spalten

Die letzte Zeile auf dieser Seite enthält den Inhalt eines Produktberichts. Sie fügen eine Zeile in voller Breite hinzu und teilen sie in zwei Spalten mit unterschiedlicher Breite. Der ersten Spalte wird ein Hintergrundbild mit einer passenden Hintergrundfarbe hinzugefügt, die auf die Zeile angewendet wird, um einen einheitlichen Effekt zu erzielen.

Beispiel für eine Zeile in voller Breite mit unterschiedlich breiten Spalten

Schritt 1: Hinzufügen einer neuen Zeile

1. Suchen Sie im Seitengitter die Einfache Seite, die Sie im ersten Teil dieses Tutorials erstellt haben, und wählen Sie Bearbeiten in der Spalte Aktion.

2. Erweitern Sie den Abschnitt Inhalt.

3. Klicken Sie auf Bearbeiten mit Page Builder oder im Bereich der Inhaltsvorschau.

4. Ziehen Sie im Bedienfeld Page Builder unter Layout einen Platzhalter Zeile auf den Arbeitsbereich und platzieren Sie ihn über der Zeile, die im zweiten Teil des Tutorials erstellt wurde.

   Eine rote Hilfslinie markiert die Grenze zwischen den beiden Zeilen.

   Hinzufügen einer neuen Zeile

5. Bewegen Sie den Mauszeiger über die neue Zeile, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

   Zeilen-Werkzeugkasten

6. Wählen Sie auf der Seite Zeile bearbeiten unter Erscheinungsbild die Option Volle Breite.

   Diese Einstellung begrenzt den Inhaltsbereich auf die maximale Seitenbreite, die durch das Thema definiert ist. Die Hintergrundfarbe und/oder das Bild sind nicht begrenzt und erstrecken sich über die gesamte Breite der Zeile.

   Auswählen des Erscheinungsbildes “Volle Breite

7. Geben Sie im Abschnitt Hintergrund #f1f1f1 als Hintergrundfarbe ein.

   Hintergrundfarbe einstellen

8. Scrollen Sie nach unten zum Abschnitt Erweitert und setzen Sie alle Werte für Ränder && Auffüllung auf 0.

   Einstellung der Ränder und Auffüllungen

9. Blättern Sie zurück zum Anfang der Seite und klicken Sie auf Speichern, um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

   Die Hintergrundfarbe der Zeile ist jetzt ein helles Beige.

   Zeile mit der Hintergrundfarbe in des Arbeitsbereich

Schritt 2: Hinzufügen von Spalten unterschiedlicher Breite

1. Ziehen Sie im Page Builder Panel unter Layout einen Spalten Platzhalter in die oberste Zeile des Arbeitsbereich.

   Ziehen einer Spalte auf den Arbeitsbereich

2. Ziehen Sie den rechten Rand der ersten Spalte auf die Position “vier von zwölf” (4/12) im Raster.

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

   Anpassung der ersten Spalte

3. Bewegen Sie den Mauszeiger über den Container der ersten Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

4. Scrollen Sie nach unten zum Abschnitt Erweitert und setzen Sie alle Werte für Ränder && Auffüllung auf 0.

   Einstellung der Ränder und Auffüllungen

5. Blättern Sie zurück zum Anfang der Seite und klicken Sie auf Speichern, 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 Bereich Page Builder Medien und ziehen Sie einen Inhaltstyp Bild in die erste Spalte.

   Ziehen eines Bildinhaltstyps in die erste Spalte_

2. Klicken Sie im Bildplatzhalter auf Bild hochladen.

   Bild hochladen

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

   Das hochgeladene Bild erscheint in der ersten Spalte und fügt sich nahtlos in die Hintergrundfarbe der Zeile ein.

   Hochgeladenes Bild zur Spalte hinzugefügt

Schritt 4: Fügen Sie den Inhalt der Rezension in die zweite Spalte ein

Die zweite Spalte der Zeile enthält den Inhalt einer Kundenbewertung, einschließlich des Bildes der Fünf-Sterne-Bewertung und der formatierten Textnachricht.

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

   Ziehen des Inhaltstyps “Text” auf den Arbeitsbereich

2. Klicken Sie in das Textelement, um die Symbolleiste des Editors anzuzeigen.

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

   Einfügen eines Bildes in den Text

   • Klicken Sie im Dialogfeld Bild einfügen/bearbeiten auf das Symbol Suchen ( ) neben dem Feld Quelle.

     Dialogfeld Bild einfügen/bearbeiten

   • Klicken Sie auf der Seite Bilder auswählen auf Dateien auswählen.

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

   • Zurück auf der Seite doppelklicken Sie auf die Bildkachel, um sie auszuwählen und ihre URL in das Feld Quelle einzufügen.

     Auswählen des Bildes auf der Seite

   • Geben Sie unter Bildbeschreibung 5-Sterne-Bewertung ein und klicken Sie auf OK, um das Bild in die Spalte einzufügen.

   • Klicken Sie in der Symbolleiste des Editors auf Mitte ausrichten (), um das Bild in der Spalte zu zentrieren.

     Bewertung Bild zentrieren

4. Positionieren Sie die Einfügemarke direkt hinter dem Bild mit den fünf Sternen, drücken Sie die Enter/Return-Taste, um eine neue Zeile zu beginnen, und geben Sie den folgenden Text ein:

   Fantastisches Tank-Top!

   Ich bin ein Langstreckenläufer und es hält mich ziemlich bequem, obwohl diese Firmen immer so tun, als wären ihre Shirts magisch und in Wirklichkeit ist es nur ziemlich einfacher Stoff. Trotzdem ist es ein tolles Shirt, und ich würde es empfehlen

   Antonia Racer Tank - Bewertet von Allyson

   Der Text wird beim Tippen zentriert.

   Rezensionstext zentriert in der Spalte_

5. Formatieren Sie den Text:

   • Klicken Sie auf eine beliebige Stelle in der ersten Textzeile und wählen Sie in der Symbolleiste des Editors unter Formate Überschrift 2.

   • Markieren Sie den restlichen Text und wählen Sie in der Editor-Symbolleiste unter Formate Absatz.

   Der Text wird gemäß der Stilvorlage formatiert, die mit dem Thema verknüpft ist.

6. Ermitteln Sie die Abmessungen des Bildes, 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 das Symbol Settings ( (/de/jajuma-shop/magento-2-handbuch/images/images-ee/icon-pb-settings.png) ).

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

     Abmessungen des Bildes, die unter der Miniaturansicht angezeigt werden

   • Klicken Sie in der oberen rechten Ecke auf Schließen.

7. Zentrieren Sie den Inhalt vertikal in der zweiten Spalte:

   • Bewegen Sie den Mauszeiger über die zweite Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( (/de/jajuma-shop/magento-2-handbuch/images/images-ee/icon-pb-settings.png) ).

     Achten Sie darauf, dass Sie den Spaltencontainer und nicht den Textcontainer auswählen, damit die richtige Toolbox angezeigt wird.

   • Geben Sie für Mindesthöhe 450 als Höhe in Pixeln für das Bild in der ersten Spalte ein.

   • Setzen Sie Vertikale Ausrichtung auf Center .

   Einstellen der Mindesthöhe und der vertikalen Ausrichtung

8. Blättern Sie zum Abschnitt Erweitert und setzen Sie alle Werte für Ränder und Auffüllung auf Null ( 0 ).

   Einstellen der Ränder und Auffüllungen

9. Blättern Sie zurück zum Anfang der Seite und klicken Sie in der oberen rechten Ecke aufSpeichern, um die Einstellungen zu speichern und zum Arbeitsbereich zurückzukehren.

   Zeile mit Überprüfungsinhalt auf dem Arbeitsbereich

Schritt 5: Einfügen eines Katalogprodukt-Links

1. Wählen Sie den Text Antonia Racer Tank und klicken Sie auf das Symbol Link einfügen ( (/de/jajuma-shop/magento-2-handbuch/images/images/editor4-toolbar/btn-insert–edit-link.png)) in der Symbolleiste des Editors.

2. Geben Sie im Dialog Link einfügen den Link zum Katalogprodukt an:

   • Geben Sie die URL des Produkts ein.

     Sie können entweder eine relative oder eine vollqualifizierte URL eingeben. Für dieses Beispiel wird der folgende relative Link eingegeben:

     ../antonia-racer-tank.html

   • (Optional) Geben Sie für Title den Produktnamen ein.

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

     Einfügen eines Links in den Text

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

     Der verlinkte Text wird nun im Banner hervorgehoben.

     Banner mit verlinktem Text

3. Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ( (/de/jajuma-shop/magento-2-handbuch/images/images-ee/icon-pb-reduce.png)).

   Damit kehren Sie zum Abschnitt Inhalt der Seite zurück, auf der die Vorschau angezeigt wird.

4. Klicken Sie in der oberen rechten Ecke auf Speichern.

Schritt 6: Anordnen der Zeilen

Wenn alle drei Zeilen vollständig sind, müssen Sie die Zeilen neu anordnen, damit sie mit dem ursprünglichen Beispiel Einfache Seite übereinstimmen. Um dem Originalbeispiel zu entsprechen, muss die erste Zeile an den unteren Rand und die letzte Zeile an den oberen Rand verschoben werden.

1. Erweitern Sie, falls erforderlich, den Inhaltsbereich (/de/jajuma-shop/magento-2-handbuch/images/images/btn-expand.png).

2. Klicken Sie auf Bearbeiten mit oder im Bereich der Inhaltsvorschau.

3. Bewegen Sie den Mauszeiger über die erste Zeile auf dem Arbeitsbereich, um die Toolbox anzuzeigen, und wählen Sie das Symbol Move ( (/de/jajuma-shop/magento-2-handbuch/images/images-ee/icon-pb-move.png)).

   Verschieben

4. Halten Sie die Maustaste gedrückt, während Sie sich vergewissern, dass alle Inhalte in der Zeile ausgewählt sind, und ziehen Sie die Zeile in eine Position unterhalb der roten Hilfslinie am unteren Rand der Seite.

   Wenn Sie versehentlich nur einen Teil des Inhalts - z. B. das Bild - verschieben, verschieben Sie den Inhalt einfach wieder an die richtige Stelle und versuchen Sie es erneut.

   Verschieben einer Zeile auf dem Arbeitsbereich

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

   Die Reihenfolge der Zeilen auf Ihrer Seite entspricht nun dem Beispiel der einfachen Seite.

6. Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ( (/de/jajuma-shop/magento-2-handbuch/images/images-ee/icon-pb-reduce.png)).

   Damit kehren Sie zum Abschnitt Inhalt der Seite zurück, auf der die Vorschau angezeigt wird.

7. Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern && Schließen.

   Auswählen der Option “Speichern und schließen”

8. Wenn Sie dazu aufgefordert werden, klicken Sie in der Meldung oben auf der Seite auf den Link [Cache-Verwaltung] und aktualisieren Sie einen ungültigen Cache.

Glückwunsch! Sie haben Teil 3 des Tutorials Einfache Seite abgeschlossen. Bewahren Sie die von Ihnen erstellte Arbeit auf, damit Sie später darauf zurückgreifen können.

Wenn Sie bereit sind, fahren Sie mit [Tutorial 2: Blöcke] fort