Springe zum Hauptinhalt

Divi Tutorial: Wie benutzt man das Geldbörsenmodul mit Filter?

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]

Das Divi Theme Fullwidth Portfolio-Modul funktioniert genau wie das normale Brieftaschenmodul, mit dem Unterschied, dass es Ihr Projekt im atemberaubenden Fullwdth-Modus anzeigt. Es kommt auch mit einigen neuen einzigartigen Funktionen: Gitter und Karussell. Das Modul zeigt eine Liste Ihrer neuesten Projekte an und kann von Designern und Künstlern verwendet werden, die eine Galerie ihrer neuesten Werke anzeigen möchten.

Porfolio Modul in voller Breite divi.png

So fügen Sie Ihrer Seite ein Portfolio-Modul mit voller Breite hinzu

Bevor Sie Ihrer Seite ein vollständiges Portfolio-Modul 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.

filterbar port.png

Suchen Sie das filterbare Portfolio-Modul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "filterbares Portfolio" eingeben und dann auf "Eingabe" klicken, um das filterbare Portfolio-Modul automatisch zu suchen und 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: Hinzufügen eines filterbaren Portfolio-Moduls zu einer Portfolio-Seite

In diesem Beispiel zeige ich Ihnen, wie Sie ein Portfolio auf einer Portfolio-Seite präsentieren, die die gesamte Breite der Seite abdeckt.

Portfolio auf einer ganzen Seite divi.jpg

Lassen Sie uns beginnen.

Verwenden Sie den visuellen Konstruktor, um einen Abschnitt mit voller Breite unter dem Seitenkopf hinzuzufügen. Fügen Sie dann ein filterbares Portfolio-Modul hinzu.

fügen Sie ein filterbares Portfolio divi.jpg hinzu

Aktualisieren Sie die Einstellungen für das filterbare Portfolio wie folgt:

Inhaltsoptionen

Meldungsnummer: 8 Display Paginierung: NO

Design-Optionen

Layout: Raster Zoom Farbe Symbol: # 000000 Overlay Farbe Hover: #ffffff Schriftart: Standard Fett, Großbuchstabe Titel Schriftgröße: 14px Titel Buchstabenabstand: 1px Meta Schriftgröße: 12px Meta Abstand Buchstaben: 1px

filterbares Portfolio Modul divi.png

Das ist es!

Portfolio-Modul-Inhaltsoption

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.

filterbares Portfolio Modul divi content section.png

Titel des Portfolios

Geben Sie einen Titel ein, der über dem Portfolio angezeigt wird, oder lassen Sie ihn leer, damit Sie keinen Titel verwenden.

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]

Kategorien einschließen

Wählen Sie die Kategorien aus, die Sie anzeigen möchten. Projekte aus nicht ausgewählten Kategorien werden nicht in der Projektliste angezeigt.

Anzahl der Beiträge

Überprüfen Sie die Anzahl der angezeigten Projekte. Lassen Sie das Feld leer oder verwenden Sie 0, um die Anzahl nicht zu beschränken.

Titel anzeigen

Wählen Sie aus, ob der Titel jedes Projekts angezeigt wird oder nicht, wenn Sie den Mauszeiger über das Projektelement bewegen.

Datum anzeigen

Wählen Sie aus, ob das Veröffentlichungsdatum jedes Projekts angezeigt wird oder nicht, wenn Sie den Mauszeiger über das Projektelement bewegen.

Hintergrundfarbe

Legen Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul fest oder lassen Sie das Feld leer, um die Standardfarbe zu verwenden.

Hintergrundbild

Wenn festgelegt, wird dieses Bild als Hintergrund für dieses Modul verwendet. Um ein Hintergrundbild zu löschen, löschen Sie einfach die URL aus dem Einstellungsfeld. Die Hintergrundbilder werden über den Hintergrundfarben angezeigt. Dies bedeutet, dass die Hintergrundfarbe nicht sichtbar ist, wenn ein Hintergrundbild angewendet wird.

Admin Label

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.

Volle Breite Brieftasche 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.

Designmodul divi.png

Bereitstellung

Wählen Sie das Layout, das Sie verwenden möchten. "Grid" zeigt alle Ihre Elemente in einem mehrspaltigen und mehrzeiligen Layout an. Das Karussell zeigt Ihre Objekte in einer einzelnen Reihe von gekachelten Bildern an, die verschoben werden, um zusätzliche Objekte in der Liste anzuzeigen.

Zoom-Farbsymbol

Wenn Sie den Mauszeiger über ein Element im Brieftaschenmodul halten, wird ein Überlagerungssymbol angezeigt. Sie können die von diesem Symbol verwendete Farbe mit der Farbauswahl in dieser Einstellung anpassen.

Hover-Farbüberlagerung

Wenn Sie den Mauszeiger über ein Objekt im Portfolio-Modul bewegen, wird oben im Bild und unter dem Text- und Titelsymbol des Portfolios 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

Hover Icon Selector

Hier können Sie ein benutzerdefiniertes Symbol auswählen, das angezeigt wird, wenn ein Besucher über die Portfolioelemente im Modul fliegt.

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]

Textfarbe

Hier können Sie wählen, ob Ihr Text hell oder dunkel sein soll.

Option Design filterbares Portfolio Modul divi.png

Titel Schriftart

Sie können die Schriftart Ihres Titeltexts ä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.

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.

filterbares Portfolio Divi Modul Abschnitt metadonnee.png

Meta-Schriftart

Sie können die Schriftart Ihres Metatexts ä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.

Metas Schriftgröße

Hier können Sie die Größe Ihres Metatextes 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.

Meta-Textfarbe

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

Meta-Buchstabenabstand

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Metatexts 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 Meta-Linie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Metatexts 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.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird Ihr Modul mit einem Rahmen versehen. Dieser Rahmen kann mit den folgenden bedingten Parametern angepasst werden.

Farbe der Grenze

Diese Option wirkt sich auf die Farbe Ihres Rahmens aus. Wählen Sie im Farbwähler eine benutzerdefinierte Farbe aus, um sie auf Ihren Rand anzuwenden.

Breite der Grenze

Standardmäßig haben die Ränder eine Breite von 1-Pixeln. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Regler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt, dh Sie können die Standardeinheit von "px" in eine andere Einheit ändern, z. B. em, vh, vw usw.

Border Style

Rahmen unterstützen acht verschiedene Stile: Solide, Gepunktete, Gepunktete, Doppelte, Groove, Crest, Inlay und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rand anzuwenden.

Erweiterte Portfoliooptionen in voller Breite

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

divi filterable portfolio modul forward.png Abschnitt

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.

Automatisches Karussell

Wenn die Karussell-Layout-Option ausgewählt ist und Sie möchten, dass das Karussell automatisch verschoben wird, ohne dass der Besucher auf die nächste Schaltfläche klicken muss, aktivieren Sie diese Option und passen Sie bei Bedarf die Rotationsgeschwindigkeit an.

Automatische Karussellgeschwindigkeit

Hier können Sie die Rotationsgeschwindigkeit des Karussells eingeben, wenn oben die Option "Automatische Rotation des Karussells" aktiviert ist. Je höher die Zahl, desto länger dauert die Pause zwischen den einzelnen Umdrehungen. (Bsp. 1000 = 1 Sek.)

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 Kommentare 7
  1. Guten Tag,
    Es gelingt mir, entweder eine filterbare Brieftasche oder eine Brieftasche mit voller Breite zu haben, aber die volle Breite ist nicht filterbar.
    Ich möchte in der Lage sein, den Titel des betreffenden Projekts zu meinen filterbaren Portfoliobildern hinzuzufügen, wie dies bei „klassischen“ Portfolios der Fall ist. Weißt du wie es geht?

  2. Hallo!

    Ich habe gerade bei Divi gearbeitet und bin über das Erstellen einer Seite mit "Anzeigen" gestolpert, auf der meine neuen Anzeigen in kleinen Miniaturansichten / Miniaturen nebeneinander erscheinen, wie auf Websites von Immobilienagenturen. Für Informationen habe ich bereits meine Seiten ANNONCES und einige Artikel (ein Artikel für eine Ankündigung) erstellt, die ich mit der Kategorie ANNOUNCEMENTS verknüpfe. aber sie erscheinen im Großformat. Ich hoffe in meiner Problematik gut erklärt zu werden! Ich freue mich auf Ihre Vorschläge und danke Ihnen im Voraus für Ihre Erklärungen und Ratschläge! Guten Abend !! Grüße - Jerome

    1. Hallo, wenn Sie das Blog-Modul verwenden, müssen Sie ein spezielles CSS hinzufügen, das für dieses Modul gilt. Leider bietet diese Form nicht viele Anpassungsmöglichkeiten.

  3. Guten Tag,

    Vielen Dank für Ihren sehr vollständigen Artikel.
    Es gelingt mir, entweder ein Porftolio mit voller Breite oder ein filterbares Portfolio zu zeigen, jedoch mit erheblichen Margen.
    Wissen Sie, ob divi ein filterbares Portfolio in voller Breite anzeigen kann?
    Oder ein filterbares Portfolio ohne signifikante Margen anzeigen?

    Danke

  4. Hallo, Ihr Artikel hat mir gefallen, aber wenn ich versuche, diese Art von Layout zu reproduzieren, habe ich große Lücken zwischen meinen Bildern. Ich hätte es vorgezogen, die angehängten Bilder wie in Ihrem Beispiel zu haben. Wie konfiguriere ich das Modul dafür?

    Thanks!

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
14 Aktien
Aktie2
tweet2
Registrieren10