Manchmal müssen wir eine einfache Vorlage für eine Produktdetailseite erstellen, um die Produktdetails von der normalen Artikeldetailseite zu unterscheiden. In diesem Artikel werden wir erklären, wie man dieElementor und der Gutenberg-EditorErzielen Sie diese Art der Erstellung von Vorlagen für Produktdetailseiten und teilen Sie die damit verbundenen Umsetzungsideen und konkreten Schritte.

Seitenteilung und Layout

Bevor wir sie erstellen können, müssen wir die Seiteuntrennbare Bestandteile.. Eine Standard-Produktdetail-Seite kann unterteilt werden inOber- und UnterteilDer obere Teil kann in einen linken und einen rechten Teil aufgeteilt werden, und der untere Teil besteht ebenfalls aus einem linken und einem rechten Teil. Indem wir die Seite auf diese Weise aufteilen, können wir das Design und das Layout besser modularisieren.

Vorlagen für Produktdetailseiten mit Elementor erstellen

1. einzelne Beitragsvorlagen erstellen

1. Neue Vorlage: Mit Elementor'sTheme BuilderFunktion eine neue Vorlage für einen einzelnen Beitrag erstellen.
2. Die erste Halbzeit::
   • Hinzufügen einerContainerund als zweispaltige Struktur mit gleichen linken und rechten Spalten eingerichtet.
   • Um das Hintergrundbild des Containers festzulegen, verwenden Sie die Funktion "Dynamische Beschriftung", um "Featured Image" als Hintergrundbild auszuwählen, und die Stileinstellungen, um es zu überschreiben.
   • Linke Spalte: Modul Post Title hinzufügen, Breadcrumb-Navigation (kann verwendet werden)Rang Math SEOvielleichtSchlankes SEOusw., die von Plugins bereitgestellt werden), sowie zwei Schaltflächenmodule. Die WeChat-Schaltfläche kann als Popup-Popup für den Klick auf den QR-Code eingerichtet werden.
   • Rechte Seitenleiste: Fügen Sie ein Featured Image-Modul hinzu.
3. Die zweite Halbzeit::
   • Fügen Sie einen Container hinzu, der wiederum in zwei Spalten unterteilt ist, wobei die linke Spalte etwa 75% breit sein sollte.
   • Linke Spalte: Ziehen Sie das Modul Post Content hinein, um den Inhalt des Artikels aufzurufen. Sie können auch Module wie Page Flipping und Sharing hinzufügen.
   • Rechte Spalte: Einfügen des Suchmoduls, des Titelmoduls, Aufruf der letzten Artikel oder Produkte.

Nach der Erstellung veröffentlichen Sie die Vorlage und wenden sie auf alle Artikel oder bestimmte Kategorien an. Wenn wir auf diese Weise unterschiedliche Produkt- (Artikel-) Titel, Bilder und Detailbeschreibungen festlegen, ändert sich der Inhalt der Produkte automatisch, das Format ist fest und einheitlich, und es ist einfacher zu verwenden.

2. das Einfügen von Artikelinhalten

Anstatt Beiträge direkt in Elementor zu schreiben, empfiehlt es sich, normale Beitragsinhalte durch Einfügen des Moduls Post Content aufzurufen. Auf diese Weise können wir weiterhin Inhalte mit dem Gutenberg-Editor im WordPress-Backend schreiben, was bequemer und effizienter ist.

Vorlagen für Produktdetailseiten mit dem Gutenberg-Editor erstellen

Die Funktionalität des Gutenberg-Editors wird durch die Erweiterung derPlug-in (Softwarekomponente)Sie können leistungsstarke Funktionen für den Seitenaufbau erreichen. Die nächsten beiden Implementierungsideen werden gemeinsam genutzt.

Idee 1: Der einfache Ansatz

Diese Methode ähnelt dem regelmäßigen Verfassen von Artikeln, ohne dass feste Vorlagen erstellt werden müssen oder die Vorlagenanpassungsfunktionen des Plugins genutzt werden.

1. Installation des Gutenberg Enhancement PluginAlsKadenz-BlöckevielleichtGreenshift zuusw.

2. Die erste Halbzeit::
   • Erstellen Sie einen neuen Artikel und fügen Sie das ROW-Modul mit dem Gutenberg-Editor hinzu, unterteilt in zwei Spalten.
   • Linke Spalte: Fügen Sie ein Titelmodul, ein Breadcrumb-Navigationsmodul bzw. ein Schaltflächenmodul hinzu. Popup-Schaltflächen können mit dem Popup-Modul von Greenshift erstellt werden.
   • Rechte Seitenleiste: Fügen Sie das Cover-Modul ein, das mit WordPress geliefert wird, und legen Sie das angezeigte Bild fest.
3. Die zweite Halbzeit::
   • Fügen Sie ein ROW-Modul hinzu. Wenn das Theme bereits über eine Seitenleistenfunktion verfügt, stellen Sie den Produktinhalt direkt zusammen; wenn nicht, legen Sie die Seitenleiste manuell fest.
4. Schnellkopierfunktion::
   • Installieren Sie ein Replikations-Plugin wie z. B. Yoast Post.
   • Wenn Sie ein neues Produkt hinzufügen, klicken Sie einfach auf Klonen oder Schnellentwurf neben [Produktvorlage] in der Artikelliste und ändern Sie den Text und das Bild.

Diese Methode scheint zwar mühsam zu sein, funktioniert aber in Verbindung mitPlugin kopierenEs ist sehr praktisch und kann regelmäßig verwendet werden, um die Effizienz zu steigern.

Idee 2: Fortgeschrittene Methoden

Diese Methode erfordert die Verwendung des ThemesFunktion der HakenDerzeitAstra ProundKadence ProundBlocksy Prousw. unterstützen diese Funktion.

1. Neue Haken Vorlage: Gibt an, dass der Antrag auf die gewünschte Artikelkategorie angewendet werden soll.
2. Die erste Halbzeit::
   • Erstellen Sie ein neues ROW-Modul, das in zwei Spalten unterteilt ist, und fügen Sie auf der linken Seite ein Titel-, Breadcrumb-Navigations- und Schaltflächenmodul hinzu; fügen Sie auf der rechten Seite ein Cover-Modul hinzu und legen Sie es als Featured Image fest.
3. Die zweite Halbzeit::
   • Fügen Sie das Modul Post Content ein, das mit WordPress geliefert wird.
   • Abhängig von der tatsächlichen Situation, wenn das Thema bereits eine Sidebar-Funktion hat, gibt es keine Notwendigkeit, zusätzliche zu erstellen; wenn nicht, dann manuell in zwei Spalten geteilt, die rechte Seite als Sidebar.

Dieser Ansatz ist fortschrittlicher und flexibler und eignet sich für Projekte, die eine detailliertere Anpassung erfordern.

Zusammenfassungen

Oben finden Sie eine ausführliche Anleitung zum Erstellen einfacher Produktdetail-Seitenvorlagen mit Elementor und Gutenberg-Editor. Durch die sinnvolle Aufteilung der Seitenstruktur und die Nutzung der leistungsstarken Funktionen von Elementor und Gutenberg Editor können Sie leicht ein modulares und schablonenhaftes Design von Produktdetailseiten erreichen.