Wie kann ich den Divi Builder auf einer Produktseite nutzen?
In dieser Anleitung zeigen wir dir drei Möglichkeiten, wie du den Divi Builder für deine Produkte nutzen kannst.
Für die optimale Darstellung haben wir auf der Produktseite die Sektionen mit einer blauen, die Zeilen mit einer grünen und die Module mit einer grauen Rahmenkante gestaltet.
INHALTSVERZEICHNIS
1. Divi Builder mit Sidebar
Zu aller erst aktivieren wir den Divi Builder bei einem Produkt.
Wir empfehlen dir, alle Anpassungen mit dem Divi Builder immer im Frontend umzusetzen. Dafür rufen wir unser bereits erstelltes Produkt im Frontend auf und aktivieren den visuellen Builder von Divi.
Hast du noch nie mit dem Divi Builder gearbeitet, empfehlen wir dir das Video aus dieser Anleitung.
Standardmäßig wird der Divi Builder bei einem Produkt nur im Editor-Inhaltsbereich aktiviert und kann daher auch nur innerhalb dieses Bereichs genutzt werden:
Weiterhin sichtbar sind also der Produkt-Titel, die Produkt-Meta, die Standard-Sidebar auf der rechten Seite und der Kaufen-Button am Ende der Produktseite, welcher sich automatisch aus dem Produkt-Preiseinstellungen generiert.
2. Divi Builder ohne Sidebar
Im Backend im Bearbeitungsmodus des Produktes kann bei der Optionen-Box "Divi Seiteneinstellungen" das Seitenlayout Keine Seitenleiste (Sidebar) ausgewählt werden:
Solltest du die Box "Divi Seiteneinstellung" nicht sehen können, so stelle oben rechts über den Tab "Ansicht anpassen" sicher, dass der Haken bei dieser Option gesetzt ist.
Somit wird auf der Produktseite (nach Speichern über den orangenen Button "Aktualisieren") im Frontend die Sidebar deaktiviert und der Divi Builder erstreckt sich über die Rasterbreite deiner Plattform:
Weiterhin sichtbar sind der Produkt-Titel, die Produkt-Meta und der Kaufen-Button am Ende der Produktseite, welcher sich automatisch aus dem Produkt-Preiseinstellungen generiert.
3. Divi Builder über die volle Breite
Um das ganzheitliche Divi Buider Erlebnis zu aktivieren, wie du es von den Seiten kennst, kannst du auch den Divi Builder über die gesamte Browser-Breite aktivieren.
Diese Einstellung ist eine globale Einstellung und wirkt sich daher auf alle deine Produkte aus, auf denen du den Divi Builder benutzt.
Gehe dazu im Backend zu "Design" > "Theme Optionen" > Reiter "Builder" und aktiviere bei "Divi Builder im Vollbildmodus aktivieren" die Option Produkte:
Nach Speichern (Button "Änderungen speichern") wird der Divi Builder auf allen Produktseiten über die gesamte Browser-Fläche gestreckt:
Wie du siehst, wird bei Aktivierung dieser Option nun auch automatisch der Produkt-Titel, die Produkt-Meta und auch die Sidebar komplett deaktiviert. Unabhängig davon, ob du bei einem Produkt in den Divi Seiteneinstellungen die Sidebar rechts oder keine Sidebar gewählt hast.
Nutze das Divi Modul "Posttitel", um den Produkt-Titel auf der Produktseite auszugeben.
Du kannst nun das ganzheitlich Divi Builder erlebnis erfahren – nutze doch auf deiner Produktseite eine fertige Layout-Vorlage von Divi? Lese hier weiter.
4. Kaufen-Button am Ende der Produktseite deaktivieren
Bei allen drei oben genannten Möglichkeiten ist der Kaufen-Button am Ende der Produktseite immer sichtbar. Die automatische Ausgabe des Kaufen-Buttons kannst du deaktivieren und über einen Kaufen-Button-Shortcode kannst du diesen überall auf deiner Produktseite (und auch auf deiner Plattform) einbinden.
Im Bearbeitungsmodus des Produktes findest du die Ausgabe des Kaufen-Buttons deaktivieren bei der Optionen-Box "Produkt Einstellung":
3.1 Kaufen-Button beliebig auf Produktseite platzieren
Ebenfalls in der Optionen-Box "Produkt Einstellung" findest du den Kaufen-Button-Shortcode:
Diesen kannst du kopieren und überall auf deiner Produktseite beliebig platzieren. Nutze dabei am besten das Divi Modul "Text". In dieser Anleitung zeigen wir dir, wie du den Kaufen-Button auf deiner Produktseite verschieben oder auch zentriert ausrichten kannst.
Möchtest du den Kaufen-Button in ein Divi Button Modul einbinden, so wird der Kaufen-Button Shortcode nicht funktionieren. Erstelle stattdessen einen individuellen Warenkorblink und binde diesen Link in ein Button-Modul von Divi ein. Wie das geht, zeigen wir in dieser Anleitung.