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.
{width="700" modal="regular"}
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:
-
Der WYSIWYG-Editor ist in der Konfiguration WYSIWYG-Optionen aktiviert.
-
Page Builder ist in der Konfiguration Erweiterte Inhaltstools aktiviert.
Herunterladen der schrittweisen Bild-Assets
-
Laden Sie die
simple-page-assets
-Datei herunter und speichern Sie die Datei auf Ihrem lokalen System. -
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:
{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.
{width="700" modal="regular"}
Schritt 1: Erstellen einer Seite
-
Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages.
-
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.
{width="600" modal="regular"}
-
-
Erweitern Sie 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. -
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. {width="600" modal="regular"}
-
Klicken Sie oben rechts auf Save.
Beim Speichern der Seite wird Name „Einfache" oben links auf der Seite angezeigt.
Schritt 2: Zeile formatieren
-
Erweitern Sie 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. {width="600" modal="regular"}
-
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.
-
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.
{width="600" modal="regular"}
-
Wählen Sie in der Toolbox „Zeile das Symbol Einstellungen {width="20"}).
-
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.
{width="600" modal="regular"}
-
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.
{width="600" modal="regular"}
-
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
-
Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Banner-Platzhalter auf die Bühne.
{width="600" modal="regular"}
-
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.
{width="600" modal="regular"}
-
Wählen Sie in der Banner-Toolbox das Symbol Einstellungen ( {width="20"} ) aus.
-
Wählen Sie unter Appearance die Option Collage Right aus.
Mit der Einstellung „Collage Right“ werden Inhalte auf der rechten Seite des Banners positioniert.
{width="600" modal="regular"}
-
Scrollen Sie nach unten zum Abschnitt Background und legen Sie das Hintergrundbild für das Banner fest:
-
Klicken Sie Background Image auf 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.
{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.
{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.
{width="600" modal="regular"}
Beachten Sie den Platzhaltertext, der rechts in der Zeile angezeigt wird. Die Position dieses Textes entspricht der Collage Right Erscheinungsbildeinstellung.
-
-
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.
{width="600" modal="regular"}
-
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.{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.
{width="600" modal="regular"}
-
__
-
Um die Banner-Toolbox anzuzeigen, wählen Sie erneut das Symbol Einstellungen ( {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.
{width="600" modal="regular"}
-
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.{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.
-
-
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.
{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.
{width="600" modal="regular"}
-
-
Klicken Sie oben rechts im Stadium auf das Symbol Vollbild 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.
-
Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.
-
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.
{width="600" modal="regular"}
Schritt 1: Zeile hinzufügen
-
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.
-
Erweitern Sie den Abschnitt Content .
-
Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.
-
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.
{width="600" modal="regular"}
-
Bewegen Sie den Mauszeiger über die neue Zeile, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen {width="20"} ) aus.
{width="600" modal="regular"}
-
Akzeptieren Sie unter Appearance die Standardeinstellung Enthalten.
Diese Einstellung beschränkt den Inhaltsbereich der Zeile auf die Breite der Seite, wie vom Design definiert.
{width="600" modal="regular"}
-
Klicken Sie oben rechts auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.
Schritt 2: Spalte hinzufügen
-
Ziehen Sie im Page Builder unter Layout einen Column Platzhalter in die neue Zeile.
{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.
{width="600" modal="regular"}
-
Klicken Sie oben links in der ersten Spalte auf das runde 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.
{width="600" modal="regular"}
Schritt 3: Bilder mit Links hinzufügen
In diesem Schritt erfahren Sie, wie Sie ein Bild in das Banner hochladen.
-
Erweitern Sie im Page Builder den Abschnitt Media und ziehen Sie einen Image Platzhalter in die erste Spalte.
{width="600" modal="regular"}
-
Fügen Sie das Beispielbild in den Platzhalter ein.
{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.{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.{width="600" modal="regular"}
Wiederholen Sie diese Aktion, um die
small-banner-2.jpg
-Datei zur zweiten Spalte hinzuzufügen.
-
-
Bestimmen Sie, welche Seite aus Ihrem Katalog mit den einzelnen Bildern verknüpft werden soll.
-
Bewegen Sie den Mauszeiger über das Bild in der ersten Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ) aus.
{width="600" modal="regular"}
-
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.
-
-
Wiederholen Sie den vorherigen Schritt, um das Bild in der zweiten Spalte mit der Kategorie Zahnrad zu verknüpfen.
-
Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).
Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content Abschnitt für die Seite mit der angezeigten Vorschau zurück.
-
Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.
-
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.
{width="500"}
Schritt 1: Zeile hinzufügen
-
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.
-
Erweitern Sie den Abschnitt Content .
-
Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.
-
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.
{width="600" modal="regular"}
-
Bewegen Sie den Mauszeiger über die neue Zeile, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen ( {width="20"} ) aus.
{width="600" modal="regular"}
-
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.
{width="600" modal="regular"}
-
Geben Sie im Abschnitt Background
#f1f1f1
als Background Color ein.{width="600" modal="regular"}
-
Scrollen Sie nach unten zum Abschnitt Advanced und legen Sie alle Werte Ränder und Abstand auf
0
fest.{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 Hintergrundfarbe der Zeile ist jetzt ein blasses Beige.
{width="600" modal="regular"}
Schritt 2: Spalten mit unterschiedlichen Breiten hinzufügen
-
Ziehen Sie im Page Builder Bedienfeld unter Layout einen Column Platzhalter in die oberste Zeile auf der Bühne.
{width="600" modal="regular"}
-
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.{width="600" modal="regular"}
-
Bewegen Sie den Mauszeiger über den ersten Spalten-Container, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen {width="20"}) aus.
-
Scrollen Sie nach unten zum Abschnitt Advanced und legen Sie alle Werte Ränder und Abstand auf
0
fest.{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.
Schritt 3: Hinzufügen eines Bildes zur ersten Spalte
-
Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Image Inhaltstyp in die erste Spalte.
{width="600" modal="regular"}
-
Klicken Sie im Bildplatzhalter auf Upload Image.
{width="600" modal="regular"}
-
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.
{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.
-
Erweitern Sie im Page Builder den Abschnitt Elements und ziehen Sie den Text Inhaltstyp in die zweite Spalte.
{width="600" modal="regular"}
-
Klicken Sie auf das Textelement, um die Editor-Symbolleiste anzuzeigen.
-
Klicken Sie in der Symbolleiste auf Bild einfügen ( ) und führen Sie folgende Schritte aus:
{width="600" modal="regular"}
-
Klicken Sie im Insert/edit image auf das Symbol_ Suchen _( ) neben dem Feld Source.
{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.
{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 ( ), um das Bild in der Spalte zu zentrieren.
{width="600" modal="regular"}
-
-
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.
{width="600" modal="regular"}
-
Formatieren Sie den Text:
-
Klicken Sie auf eine beliebige Stelle in der ersten Textzeile und wählen Sie in der Editor Symbolleiste unter Formate
Heading 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.
-
-
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.
{width="600" modal="regular"}
-
Klicken Sie oben rechts auf Schließen.
-
-
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 (
{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.
{width="600" modal="regular"}
-
-
Scrollen Sie nach unten zum Abschnitt Advanced und legen Sie alle Margins and Padding auf null fest (
0
).{width="600" modal="regular"}
-
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.
{width="600" modal="regular"}
Schritt 5: Katalog-Produkt-Link einfügen
-
Wählen Sie den
Antonia Racer Tank
Text aus und klicken Sie auf das Symbol Link einfügen ( einfügen) in der Editor-Symbolleiste. -
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.
{width="600" modal="regular"}
-
Klicken Sie abschließend auf OK , um den Link zu speichern.
Der verknüpfte Text wird jetzt im Banner hervorgehoben.
{width="600" modal="regular"}
-
-
Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).
Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content Abschnitt für die Seite mit der angezeigten Vorschau zurück.
-
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.
-
Erweitern Sie bei Bedarf den Abschnitt Content .
-
Klicken Sie Edit with Page Builder oder in den Inhaltsvorschaubereich.
-
Bewegen Sie den Mauszeiger über die erste Zeile auf der Bühne, um die Toolbox anzuzeigen, und wählen das Symbol Verschieben ) aus.
{width="600" modal="regular"}
-
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. {width="600" modal="regular"}
-
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.
-
Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).
Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content Abschnitt für die Seite mit der angezeigten Vorschau zurück.
-
Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.
-
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.