Magento 2 Page Builder: ein Leitfaden für Einsteiger

Hinweis: Der folgende Artikel hilft Ihnen dabei: Magento 2 Page Builder: ein Leitfaden für Einsteiger

Ihre E-Commerce-Website sollte es Ihnen ermöglichen, Inhalte schnell zu entwerfen und zu verschieben ohne Code zu schreibenund das alles unter Beibehaltung der Marke.

Dank dieser Flexibilität können Sie Website-Design- und Inhaltsaufgaben an fast jedes Teammitglied delegieren und so Verzögerungen oder Burnouts bei Entwicklern vermeiden – so können Sie Projekte schneller liefern.

Das ist die Lösung, die Drag-and-Drop-E-Commerce-Website-Builder bieten.

Aber nur eines. Sie haben einzigartige Unternehmensanforderungen.

Ihr Drag-and-Drop-Builder sollte diese also berücksichtigen. Beispielsweise sollte Ihre No-Code-Lösung flexibel sein und bei Bedarf verschiedene Anpassungen, einschließlich Code-Einbettungen, ermöglichen.

Hier kommt der Magento 2 Page Builder zum Einsatz.

Dieser Leitfaden hilft Ihnen, die Anwendungsfälle und Vorteile von Magento 2 Page Builder zu verstehen und zeigt Ihnen, wie Sie eine Zielseite, eine Storefront, eine Produktliste und eine Inhaltsseite erstellen.

Lass uns eintauchen.

Vorteile der Verwendung von Magento 2 Page Builder

Unternehmensanwender lieben Magento 2 Page Builder aus mindestens fünf Gründen.

• Keine Programmierkenntnisse erforderlich: Mit dem Magento 2 Page Builder kann jeder ohne Programmierkenntnisse erstklassige Content-Seiten erstellen.
• Benutzerfreundliches Bedienfeld: Der Magento 2 Page Builder hat eine Lernkurve von nahezu Null und ein intuitives Interface-Design.
• Drag-and-Drop und Live-Vorschau: Ziehen Sie Inhaltskomponenten, Layouts und Elemente per Drag-and-Drop und zeigen Sie sie in Echtzeit in der Vorschau an.
• Flexibles Content-Management: Die Page Builder-Erweiterung unterstützt alle Anforderungen an das Design von E-Commerce-Seiten und die Erstellung von Inhalten.
• Unterstützt Entwickleranpassungen: Unternehmens- oder fortgeschrittene Benutzer können mithilfe der Entwicklerhilfe benutzerdefinierte Funktionen erstellen.

Der beste Teil? Der Einstieg in den Magento 2 Page Builder ist einfach. Hier ist wie.

Beginnend mit Magento 2 Page Builder

Page Builder ist eine Magento-Erweiterung, die es Benutzern von Adobe Commerce und Magento Open Source ermöglicht, mit vorgefertigten Steuerelementen designreiche Inhaltsseiten zu erstellen.

Zu diesen Steuerelementen gehören intuitive Drag-and-Drop-Seitenersteller, Live-Vorschauen, Rich Media, Formulareditoren und Produktkataloge.

Allerdings können nur Magento Commerce-Benutzer auf die erweiterten Funktionen zugreifen.

Sehen wir uns an, wie Sie mit diesem CMS-Seitenersteller beginnen können.

Konfigurieren Sie Magento 2 Page Builder in 4 Schritten

Befolgen Sie diese Schritte, um Ihren Magento Page Builder-Staging-Bereich in Adobe Commerce einzurichten.

Schritt 1: Gehe zu Shops > Einstellungen > Konfiguration aus Ihrer Admin-Seitenleiste.

Schritt 2: Wählen Content-Management unter allgemein.

Schritt 3: Stellen Sie die ein Aktivieren Sie den Seitenersteller Feld zu Ja in erweiterten Content-Tools.

Schritt 4: Speichern Sie die Konfiguration.

Richten Sie Ihre Standardlayouts ein

Gehen Sie nun zum Konfigurationsbereich.

Unter Allgemeinwählen Netz. Erweitern Sie als Nächstes die Standardlayouts und wählen Sie Ihr Produkt, Ihre Kategorie und Ihr Seitenlayout.

Speichern Sie anschließend die Konfiguration.

Jetzt können Sie loslegen und die vielen Funktionen erkunden, die Magento 2 Page Builder zu bieten hat.

Funktionen des Magento 2 Page Builder

Page Builder verfügt über fünf Funktionen mit insgesamt über 20 Unterfunktionen.

Lassen Sie uns erkunden, was jede Komponente Ihnen bietet.

Toolbox-Optionen

Sie können Seitenlayouts, Elemente und Inhalte mithilfe von Toolbox-Optionen steuern. Mit diesen Funktionen können Sie beispielsweise Komponenten auf Ihrer Seite verschieben, hinzufügen, ausblenden und entfernen.

Bewegen Sie den Mauszeiger über die Inhaltscontainer des Page Builders, um diese Toolbox-Optionen zu finden.

Beachten Sie, dass diese Funktionen Container-spezifisch sind. Daher variieren die Optionen von Container zu Container. Das Bild unten zeigt die Toolbox-Optionen für das Zeilenlayout.

Layouts

Magento 2 Page Builder bietet Ihnen drei Layouttypen:

Ziehen Sie einen dieser Inhaltstypen aus dem Page Builder-Layout auf die Bühne in Ihrem Panel. Klicken Sie dann in der Toolbox auf das Zahnradsymbol, um auf die Einstellungen zuzugreifen und das Layout anzupassen.

Elemente

Mit Seitenerstellungselementen können Sie Ihren Seiten schriftliche Inhalte, Bilder, Handlungsaufforderungen und andere Inhaltsfunktionen hinzufügen.

Wie alles andere können Sie Inhaltselemente per Drag-and-Drop verschieben und nach Herzenslust anpassen.

Magento 2 Page Builder besteht aus fünf Elementen. Lassen Sie uns etwas Licht ins Dunkel bringen.

• Text: Mit dieser Funktion können Sie Text, Bilder, Links usw. hinzufügen. Inhaltsvorlagenund Widgets zu Ihren Inhalten.

• Überschriften: Mit dieser Funktion können Sie Überschriften-Tags hinzufügen, um einen thematischen Fluss in Ihren Inhalten für eine bessere SEO (Suchmaschinenoptimierung) herzustellen.

• Tasten: Mit dieser Funktion können Sie die Call-to-Action- oder Navigationsschaltflächen Ihrer Seite hinzufügen und anpassen.

• Teiler: Trenner fügen visuelle Unterbrechungen zwischen Inhaltsabschnitten hinzu.

• HTML Quelltext: Mit dieser Funktion können Sie JavaScript-, HTML- und CSS-Codefragmente in Ihre Seite einbetten.

Medien

Mit dieser Drag-and-Drop-Oberfläche können Sie Rich Media zu Ihren Inhalten hinzufügen.

Sie können diese Medientypen hinzufügen:

• Bilder
• Video
• Banner
• Schieberegler
• Google Maps

Magento Page Builder unterstützt die Bildtypen PNG, JPG und GIF und Sie können Ihr Bild mit beliebigen Inhalts-, Produkt- oder Kategorieseiten verknüpfen.

Die gleiche Idee gilt auch für andere Medientypen: Ziehen Sie sie auf die Bühne und verwenden Sie dann die Optionen ihrer Toolbox, um die Medien hinzuzufügen, die Ihr Publikum sehen soll.

Inhaltskomponenten

Inhaltskomponenten sind praktisch zum Hinzufügen von Formularen, zum Erstellen einzigartiger E-Commerce-Erlebnisse und zum Verteilen von Inhalten auf Ihrer Website.

Magento 2 Page Builder verfügt über vier Inhaltstypen:

• CMS-Blöcke
• Dynamische Blöcke
• Produkte
• Produktempfehlungen

Blöcke sind die grundlegenden Seitenerstellungseinheiten von Magento 2 Page Builder. Sie können Blöcke in Blöcke einbetten.

CMS-Blöcke Zeigen Sie statische Informationen wie Bilder und Texte an dynamische Blöcke Zeigen Sie Informationen aus Ihrer Datenbank mithilfe von Widgets an.

Produktempfehlungsinhalte helfen Ihnen Servieren Sie empfohlene Produkte an Käufer auf Ihrer Seite. Diese Funktion ist jedoch nur für Magento Commerce-Benutzer verfügbar.

Lassen Sie uns nun einige kurze Tutorials mit diesen Funktionen durchführen.

Benutzerhandbücher für Magento 2 Page Builder

Bevor Sie Seiten erstellen oder Inhalte im Page Builder erstellen, erhöhen Sie Ihre Lebensdauer der Admin-Sitzung um Sitzungs-Timeouts während der Arbeit zu vermeiden.

So erstellen Sie eine Seite

Starten Sie die Seitenerstellung über Ihren Admin-Bereich über diesen Pfad: Inhalt > Elemente > Seiten.

Füge hinzu ein neue Seite in der oberen rechten Ecke Ihres Bildschirms.

Stellen Sie die ein Seite aktivieren Schieberegler auf NEIN um Live-Änderungen an Ihrem Shop zu vermeiden. Und dann geben Sie Ihrer Seite einen Titel.

Erweitern Sie den Designbereich, wählen Sie ein Design oder verwenden Sie das Standard-Magento-Design.

Speichern.

Als Nächstes fügen wir Ihrer Seite Zeilen und Spalten hinzu.

So fügen Sie Zeilen und Spalten zu Seiten hinzu

Beginnen wir mit dem Hinzufügen von Zeilen.

Erstellen Sie eine Zeile

Öffnen Sie die Seite, die Sie bearbeiten möchten, in der Page Builder-Phase.

Ziehen Sie das Zeilenlayout aus dem Abschnitt „Layout“ auf die Seite. Zwischen den Zeilen sehen Sie eine rote Linie, die die Grenze anzeigt. Fügen Sie dort Ihre neue Zeile hinzu.

Passen Sie diese Zeile mithilfe der Toolbox-Optionen an. Legen Sie dann das Erscheinungsbild der Zeile fest.

Wählen Sie eine Breite für Ihre Zeile.

Und dann speichern.

Erstellen Sie eine Spalte

Teilen Sie diese Zeile in zwei gleiche Teile, indem Sie die Spalte aus den Layoutoptionen per Drag & Drop in den Staging-Bereich von Magento Page Builder ziehen.

Jede Spalte ist ein einzigartiger Container mit seinen Toolbox-Optionen. Sie haben also die vollständige Kontrolle über die Anpassung.

So fügen Sie einer Seite Banner hinzu

Öffnen Sie die Seite, auf der Sie ein Banner hinzufügen möchten, und ziehen Sie dann einen Bannercontainer per Drag & Drop in das Page Builder-Backend.

Wählen Sie ein Bannerbild aus der Toolbox aus – Hochladen oder Galerie.

Wählen Sie ein Banner-Erscheinungsbild aus Toolbox-Einstellungen.

Scrollen Sie nach unten zum Hintergrund Abschnitt zum Festlegen des Banner-Hintergrundbilds.

Ändern und formatieren Sie den Platzhaltertext im WYSIWYG-Editor.

Kehren Sie zu den Einstellungen zurück, um eine Schaltflächenfarbe hinzuzufügen, wählen Sie Schriftarten aus und gehen Sie dann zum Inhaltsbereich, um einen Banner-Link hinzuzufügen.

Ihr Banner-Frontend sollte also am Ende so aussehen:

Schließen Sie Ihr Setup ab, speichern Sie es und schließen Sie es.

So fügen Sie einer Seite Rezensionsinhalte hinzu

Das Hinzufügen von Rezensionsinhalten ist so einfach wie das Erstellen von Zeilen und Spalten und das Hinzufügen neuer Inhalte mithilfe von Elementen und Medien.

Schauen wir uns ein Beispiel an.

Erstellen Sie eine Zeile und zwei Spalten. Ziehen Sie jedoch den rechten Rand der ersten Spalte auf die 4/12-Position im Raster. Diese Einstellung passt die zweite Spalte automatisch auf 8/12 an.

Fügen Sie Ihr Bewertungsproduktbild mit der ersten Spalte hinzu Bild Komponente aus dem Medien Abschnitt – siehe Bild unten.

Fügen Sie dann Ihren Bewertungstext mit in die andere Spalte ein Text aus Elemente.

Fügen Sie dem Textfeld ein Fünf-Sterne-Bild hinzu, indem Sie die native Funktion zum Einfügen von Bildern im WYSIWYG-Editor verwenden.

Und fügen Sie dann Ihren Rezensionstext zum Editor hinzu. Sie können Ihrem Rezensionstext auch Links hinzufügen.

Die endgültige Ausgabe sollte so aussehen.

So fügen Sie einer Seite einen Produktkatalog hinzu

Öffnen Sie die Seite, auf der Sie diesen Katalog hinzufügen möchten, oder erstellen Sie eine eigene Katalogseite im Page Builder-Editor.

Ziehen Sie die Datei per Drag-and-Drop Produkt Komponente auf die Bühne.

Legen Sie die Bedingungen und die Kategorie fest im Produkt Einstellungen Bereich.

Wählen Sie die Anzahl der anzuzeigenden Produkte und fügen Sie eine Kaufen-Schaltfläche hinzu.

Konfigurieren Sie den Checkout-Bereich, schreiben Sie Ihre Produktbeschreibung und fügen Sie weitere Seitenelemente hinzu, um die Katalogeinrichtung abzuschließen.

Und dann speichern.

Verlassen Sie die CMS-Seite, indem Sie oben rechts auf das weiße Symbol mit zwei aufeinander zeigenden Pfeilen klicken.

Und dann speichern und schließen Sie es über das Dropdown-Menü auf der Admin-Seite.

Abschließende Gedanken: Starten Sie Ihren Magento 2 Page Builder

Magento 2 Page Builder ist eine flexible Content-Management-Lösung, mit der Sie Ihre Produktivität steigern können. Also keine Kopfschmerzen mehr beim Content-Management.

Aber ein flexibles CMS kann Sie nur begrenzt weiterbringen. Es wäre hilfreich, wenn Sie eine E-Commerce-Hosting-Lösung hätten, die auf dem neuesten Stand ist.

Geben Sie Hostinger Enterprise Hosting ein. Hostinger kümmert sich um die E-Commerce-Hosting-Anforderungen Ihres Unternehmens, einschließlich Magento-Hosting. Probieren Sie es noch heute aus.