Divi wurde so konzipiert, dass es mit kompatibel ist WooCommerce. Integrieren WooCommerce, müssen Sie die neueste Version von installieren WooCommerce.
WooCommerce ist das Plugin e-commerce was wir empfehlen, da es die schönsten Funktionen und Schnittstellen hat und den besten Codierungspraktiken folgt. Nach der Aktivierung des Plugins sehen Sie zwei neue Abschnitte „WooCommerce“ und „Produkte“, die Ihrem WordPress-Dashboard hinzugefügt wurden. In diesen Bereichen können Sie Ihre E-Commerce-Einstellungen anpassen und neue Produkte veröffentlichen. Sie finden die Dokumentation komplett auf WooCommerce hier .
Bitte beachten Sie, dass Sie, obwohl der Builder verschiedene WooCommerce-Module enthält, WooCommerce auch ohne den Builder verwenden können. Sie können Standardseiten für die Kasse, den Warenkorb usw. erstellen, wie in der Dokumentation gezeigt. Sie können auch direkt auf Ihre Woocommerce-Kategorien verlinken oder die verwenden Shortcodes WooCommerce in einem Divi-Textmodul. Es gibt Ihnen die Freiheit, fast alles zu tun.
So fügen Sie Ihrer Seite ein Geschäftsmodul hinzu
Bevor Sie Ihrer Seite ein Shop-Modul hinzufügen können, müssen Sie zuerst in Divi Builder springen. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.
Nachdem Sie Visual Builder eingegeben haben, können Sie auf das graue Pluszeichen klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen. Wir haben großartige Tutorials zur Verwendung der Linien- und Abschnittselemente von Divi.
Suchen Sie das Shop-Modul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar. Sie können also auch das Wort "shop" eingeben und dann auf die Eingabetaste klicken, um das Shop-Modul automatisch zu suchen und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .
Anwendungsfallbeispiel: Präsentieren der neuesten Produkte auf einer Homepage mithilfe des Shop-Moduls
In diesem Beispiel verwende ich das Shop-Modul, um die neuesten Produkte auf einer Homepage anzuzeigen.
Hier ist die Seite mit den vier vorgestellten Produkten.
Lassen Sie uns beginnen.
Verwenden Sie den Visual Builder, um einen regulären Abschnitt mit einer Zeile voller Breite (1 Spalte) hinzuzufügen. Ändern Sie den Zeilenparameter so, dass er die volle Breite mit einer benutzerdefinierten Rinnenbreite von 2 aufweist.
Fügen Sie dann der Zeile ein Shop-Modul hinzu.
Aktualisieren Sie die Moduleinstellungen wie folgt:
Inhaltsoptionen
Typ: Neueste Produkte
Anzahl der Produkte: 4
Design-Optionen
Icon Hover Farbe: # ea1d63
Titel Polizei: Offen ohne
Titel Schriftgröße: 24px
Polizeipreis: Offen ohne
Preis Schriftgröße: 20px
Erweiterte Optionen (benutzerdefiniertes CSS)
Titel:
Textausrichtung: Mitte;
Hintergrund: #fff;
Rand oben: -10px! signifikant;
Preis:
Textausrichtung: Mitte;
Hintergrund: #fff;
Polsterung: 15px;
Das ist alles! Hier ist das Endergebnis.
Shop-Inhalt Optionen
Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer auf dieser Registerkarte.
Art
Wählen Sie den Produkttyp aus, den Sie in Ihrem Produkt-Feed anzeigen möchten. Sie können aus den neuesten Produkten wählen, in denen alle Ihre Produkte in chronologischer Reihenfolge angezeigt werden: Ausgewählte Produkte, Verkaufsprodukte, meistverkaufte Produkte oder am besten bewertete Produkte.
Anzahl der Produkte
Definieren Sie die Anzahl der Produkte, die Sie anzeigen möchten. Sie müssen Produkte herstellen lassen, damit alles in diesem Modul angezeigt wird.
Kategorien einschließen
Wählen Sie die Kategorien aus, die Sie einschließen möchten.
Anzahl der Spalten
Wählen Sie die Anzahl der Spalten aus, die in Ihrem Geschäftsmodul angezeigt werden sollen. Für eine Zeile mit 4 Spalte sollten 1 Spalten verwendet werden. Für eine Spalte, die 3/3 des Zeilenraums einnimmt, sollten 4 Spalten verwendet werden. Spalte 2 sollte für eine Spalte verwendet werden, die die Hälfte des Lichtraums einnimmt. Eine Spalte sollte für eine Spalte 1/2 des Zeilenraums verwendet werden.
Neu anordnen nach
Wählen Sie aus, wie Ihre Produkte bestellt werden sollen. Standardmäßig sortieren Sortieren, Beliebtheit, Bewertung, Datum, Preis niedrig bis hoch, Preis hoch bis niedrig, älteste bis neueste, neueste bis älteste.
Administratorkennzeichnung
Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.
Gestaltungsmöglichkeiten für Werkstätten
Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie Änderungen vornehmen können.
Überlagerungssymbol
Wenn Sie mit der Maus über einen Artikel im Shop-Modul fahren, wird ein Überlagerungssymbol angezeigt. Sie können die für dieses Symbol verwendete Farbe mithilfe des Farbwählers in dieser Einstellung anpassen.
Farbe der Überlagerung
Wenn Sie mit der Maus über einen Artikel im Shop-Modul fahren, wird oben im Bild und unter dem Text und dem Symbol des Shop-Titels eine Überlagerungsfarbe angezeigt. Standardmäßig wird eine halbtransparente weiße Farbe verwendet. Wenn Sie eine andere Farbe verwenden möchten, können Sie die Farbe mit dem Farbwähler in dieser Einstellung anpassen
Auswahlsymbol
Hier können Sie ein benutzerdefiniertes Symbol auswählen, das angezeigt wird, wenn ein Besucher über die Geschäftsartikel im Modul fährt.
Farbe des Verkaufsausweises
Wenn ein Artikel zum Verkauf steht, wird auf dem Produktbild ein Verkaufsausweis angezeigt. Mit dieser Einstellung können Sie die Farbe für den Abzeichenhintergrund anpassen.
Titel Schriftart
Sie können die Schriftart Ihres Titeltextes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi bietet Dutzende großartiger Schriftarten, die von Google Fonts angeboten werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit Fett, Kursiv, Großbuchstaben und Unterstreichungsoptionen anpassen.
Titel Schriftgröße
Hier können Sie die Größe Ihres Titeltextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.
Titel Textfarbe
Standardmäßig werden alle Textfarben in Divi in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Textfarbe Ihres Titels ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.
Abstand der Titelbriefe
Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Titeltext vergrößern möchten, passen Sie den Abstand mit dem Bereichsschieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.
Höhe der Titelzeile
Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Titeltextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.
Preispolitik
Sie können die Schriftart Ihres Preistextes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großartiger Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit Fett, Kursiv, Großbuchstaben und Unterstreichungsoptionen anpassen.
Preis Schriftgröße
Hier können Sie die Größe Ihres Preistextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.
Preis Textfarbe
Standardmäßig werden alle Textfarben in Divi in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Preistextes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.
Abstand der Preisbuchstaben
Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Preistext vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.
Höhe der Preislinie
Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Preistextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, können Sie den Abstand mithilfe des Bereichsreglers anpassen oder die gewünschte Abstandsgröße in das Eingabefeld eingeben befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.
Erweiterte Optionen des Shops
Auf der Registerkarte "Erweitert" finden Sie Optionen, die erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.
CSS-ID
Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.
CSS-Klasse
Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der Einstellungen auf der Divi Builder-Seite hinzufügen.
Benutzerdefiniertes CSS
Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.
Sichtbarkeit
Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.
[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "erweitert" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI-THEMA HERUNTERLADEN [/ vcex_button] [/ width_column] [»vc_col] vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700 "style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Andere Divi Tutorials
- 5 Websites, die Divi Restaurant Thema verwenden
- Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
- So ändern Sie die Menüfarbe zwischen Divi-Seiten
- So personalisieren Sie die Gitter eines Blogs mit Divi
- Wie die Rolle Divi-Editor auf Wordpress verwenden
- So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
- So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
- Funktionen, die Sie wahrscheinlich nicht über Divi kennen
- Wie man Divi Builder auf WordPress benutzt
- Wie benutzt man das Divi Video-Scroll-Modul?
- Wie benutze ich das Divi Builder Flip Modul?
- So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
- Wie benutzt man das Divi-Textmodul?
- So erstellen Sie einen Schieberegler auf Divi
- So bearbeiten Sie eine Divi-Benutzerrolle
- Wie benutzt man das Divi Social Media Modul?
- So verwenden Sie das Shop-Modul zum Thema WordPress Divi
- So verwenden Sie das Divi-Sidebar-Modul
- Wie benutzt man das Divi Preistabellen Modul?
- Wie verwende ich das Titelmodul von Divi-Publikationen?
- So fügen Sie ein Video-Modul von Divi hinzu
- Wie man das Artikelnavigationsmodul benutzt
- Wie benutzt man das Divi-Suchmodul?
- So verwenden Sie das Divi-Wallet-Modul
- Wie man das Personenmodul im Divi Builder benutzt
- Wie man das Geldbörsenmodul mit Divi-Filter verwendet
- So verwenden Sie das Schiebermodul mit voller Breite
- Wie benutzt man das Divi Builder Image Modul?
- So verwenden Sie das vollständige Navigationsmodul von Divi Builder
- So verwenden Sie das Bildergalerie-Modul
- So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
- So verwenden Sie das Divi Full Width Portfolio-Modul
- So verwenden Sie das Divi-Header-Modul in voller Breite
- Wie benutze ich das Divi Counter Modul?
- So verwenden Sie den Artikel-Schieberegler in Divi Builder
- Wie benutze ich das Divi Email Optin Modul?
Lieber Bair,
Vielen Dank für Ihren Beitrag.
Ich habe eine Frage zum Store-Modul und würde mich sehr freuen, wenn Sie diese für mich beantworten könnten.
Und ich möchte, dass individuell ausgewählte Produkte in meinem Shop-Modul sichtbar sind. Ich dachte, dies könnte durch die Einführung von „Star-Produkten“ erreicht werden. Nach Auswahl dieser Option kann ich jedoch keine Möglichkeit finden, meine gewünschten Produkte für das Modul auszuwählen. Vermisse ich etwas Hast du eine Erklärung?
Mit freundlichen Grüßen Frederik