Springe zum Hauptinhalt

Divi Tutorial: Wie man das Ladenmodul benutzt

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Divi wurde entwickelt, um mit WooCommerce kompatibel zu sein. Um WooCommerce zu integrieren, müssen Sie die neueste Version von WooCommerce installieren.

WooCommerce ist das von uns empfohlene E-Commerce-Plugin, da es über die schönsten Funktionen und die beste Benutzeroberfläche verfügt und die besten Codierungsmethoden befolgt. Nach der Aktivierung des Plugins sehen Sie zwei neue Abschnitte "WooCommerce" und "Produkte", die Ihrem WordPress-Dashboard hinzugefügt wurden. In diesen Feldern 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 der Hersteller zwar verschiedene WooCommerce-Module enthält, Sie WooCommerce jedoch auch alleine verwenden können, ohne dass der Konstruktor in Ordnung ist. Sie können Standardseiten für Checkout, Warenkorb usw. erstellen, wie in der Dokumentation angegeben. Sie können auch direkt auf Ihre Woocommerce-Kategorien verlinken oder die Shortcodes WooCommerce in einem Divi-Textmodul. Dies gibt Ihnen die Freiheit, so gut wie alles zu tun.

So fügen Sie Ihrer Seite ein Geschäftsmodul hinzu

Bevor Sie Ihrer Seite ein Geschäftsmodul hinzufügen können, müssen Sie zunächst in Divi Builder springen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. 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.

Divi Builder

Nachdem Sie Visual Builder aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen. Wir haben großartige Tutorials zur Verwendung von Divi-Linien- und -Abschnittselementen.

Ladenmodul divi.png

Suchen Sie das Speichermodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, das heißt, Sie können auch das Wort "shop" eingeben und dann die Eingabetaste drücken, um das Shopmodul zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Präsentieren Sie die neuesten Produkte mithilfe des Store-Moduls auf einer Homepage

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.

Produkte auf einer Accel-Seite anzeigen divi.jpg

Lassen Sie uns beginnen.

Verwenden Sie den Visual Builder, um einen regulären Abschnitt mit einer Linie voller Breite (1-Spalte) hinzuzufügen. Ändern Sie den Linienparameter, um ihn mit einer benutzerdefinierten Rinnenbreite von 2 in voller Breite anzuzeigen.

Zonenoption divi.png

Fügen Sie dann der Zeile ein Shop-Modul hinzu.

Fügen Sie das Boutique-Modul divi.png ein

Aktualisieren Sie die Moduleinstellungen wie folgt:

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

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;

Prix:

Textausrichtung: Mitte;
Hintergrund: #fff;
Polsterung: 15px;

Das ist alles Hier ist das Endergebnis.

Produktbereich divi.jpg

Shop-Inhalt Optionen

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Immobilientyp

Wählen Sie den Produkttyp aus, den Sie in Ihrem Produktfeed anzeigen möchten. Sie können aus den neuesten Produkten auswählen, die alle Ihre Produkte in chronologischer Reihenfolge anzeigen, sowie 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 in diesem Modul alles 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, die in Ihrem Geschäftsmodul angezeigt werden sollen. 4-Spalten sollten für eine Reihe von 1-Spalten verwendet werden. 3-Spalten sollten für eine Spalte verwendet werden, die 3 / 4-Platz in der Zeile belegt. Die 2-Spalte sollte für eine Spalte verwendet werden, die den 1 / 2-Lichtraum belegt. Eine Spalte sollte für eine Spalte mit 1 / 4-Leerzeichen in der Zeile verwendet werden.

Neu anordnen nach

Wählen Sie aus, wie Ihre Produkte bestellt werden sollen. Standardmäßig sortieren Sortieren, Beliebtheit, Bewertung, Datum, Preis aufsteigend, Preis absteigend, Älteste nach Neueste, Neueste nach Älteste.

Administratorkennzeichnung

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Workshop-Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Konstruktionsparametern, mit denen Sie alles ändern können.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Einstellung Geschäft Divi.png

Überlagerungssymbol

Wenn Sie im Shop-Modul den Mauszeiger über einen Artikel halten, wird ein Überlagerungssymbol angezeigt. Sie können die für dieses Symbol verwendete Farbe mithilfe der Farbauswahl in dieser Einstellung anpassen.

Farbe der Überlagerung

Wenn Sie den Mauszeiger über ein Objekt im Geschäftsmodul halten, wird oben im Bild und unter dem Text- und Titelsymbol des Geschäfts 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 sich ein Besucher über Artikeln im Geschäft befindet.

Farbe des Verkaufsausweises

Wenn ein Artikel zum Verkauf steht, wird auf dem Produktbild ein Verkaufsabzeichen angezeigt. Mit dieser Einstellung können Sie die Farbe anpassen, die für den Hintergrund des Abzeichens verwendet wird.

Titel Schriftart

Sie können die Schriftart Ihres Titeltexts ä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 Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Titel Schriftgröße

Hier können Sie die Größe Ihres Titeltextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Titel Textfarbe

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Titeltextes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Titelbriefe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Titeltext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Titelzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Titeltexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Preispolitik

Sie können die Schriftart Ihres Preistexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Preis Schriftgröße

Hier können Sie die Größe Ihres Preistextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Preis Textfarbe

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Preistexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Preisbuchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Preistext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, 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, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Erweiterte Optionen des Shops

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

Vorauswahl Boutique divi.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Andere Divi Tutorials

Dieser Artikel enthält 1 Kommentar
  1. Lieber Bair,

    Vielen Dank für Ihren Beitrag.
    Ich habe eine Frage zum Store-Modul und würde mich sehr freuen, wenn Sie es für mich beantworten könnten.
    Und ich möchte, dass in meinem Shopmodul individuell ausgewählte Produkte sichtbar werden. Ich dachte, das könnte erreicht werden, indem man "Sternprodukte" annimmt. Nach Auswahl dieser Option kann ich jedoch keine Möglichkeit finden, meine gewünschten Produkte für das Modul auszuwählen. Habe ich etwas verpasst? Hast du eine Erklärung?

    Mit freundlichen Grüßen Frederik

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
11 Aktien
Aktie4
tweet2
Registrieren5