Mit dem Portfolio-Modul von Divi können Sie Ihre Arbeit überall auf Ihrer Site mit einer beliebigen Spaltenstruktur anzeigen. In diesem Tutorial werde ich Ihnen zeigen, wie Sie das Wallet-Modul auf Divi verwenden.
So fügen Sie ein Divi Wallet-Modul hinzu
Bevor Sie Ihrer Seite ein Portfolio-Modul hinzufügen können, müssen Sie zuerst in den Divi Builder springen. Einmal die Divi-Thema auf deinem installiert Website, 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 durchsuchen Website im Vordergrund, wenn Sie in Ihr WordPress-Dashboard eingeloggt 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.
Suchen Sie das Portfolio-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 "Portfolio" eingeben und dann auf "Enter" klicken, um das Portfolio-Modul automatisch zu finden 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 .
Beispiel für einen Anwendungsfall: Hinzufügen eines Portfolio-Moduls zu einer Portfolio-Seite
In diesem Beispiel zeige ich Ihnen, wie Sie ein Portfolio auf einer Portfolio-Seite präsentieren.
Lassen Sie uns beginnen.
Verwenden Sie den Visual Builder, um einen regulären Abschnitt mit einer Zeile voller Breite (1 Spalte) unter dem Seitenkopf hinzuzufügen. Fügen Sie dann der Zeile ein filterbares Portfolio-Modul hinzu.
Aktualisieren Sie die Brieftascheneinstellungen wie folgt:
Inhaltsoptionen
Zahl der Artikel: 8
Paginierung anzeigen: NEIN
Design-Optionen
Layout: Gitter
Zoom-Farbsymbol: #ffffff
Hover Overlay Farbe: rgba (224,153,0,0.58)
Titelschrift: Standard, Fett, Großbuchstaben
Titel Schriftgröße: 14px
Titel Buchstabenabstand: 1px
Meta-Schriftgröße: 12px
Meta-Buchstabenabstand: 1px
Erweiterte Optionen (benutzerdefiniertes CSS)
Titel des Portfolios:
text-align: center;
Meta-Nachrichten-Portfolio:
text-align: center;
Das ist alles!
Portfolio-Inhaltsoptionen
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.
Artikelnummer
Steuern Sie die Anzahl der angezeigten Projekte. Lassen Sie das Feld leer oder verwenden Sie 0, um die Anzahl nicht zu begrenzen.
Kategorien einschließen
Wählen Sie die Kategorien aus, die Sie anzeigen möchten. Projekte aus nicht ausgewählten Kategorien werden nicht in der Liste der Projekte angezeigt.
Titel anzeigen
Wählen Sie aus, ob der Titel jedes Projekts angezeigt werden soll, wenn Sie mit der Maus über das Projektelement fahren.
Kategorien anzeigen
Hier können Sie Kategorielinks aktivieren oder deaktivieren.
Paginierung anzeigen
Hier können Sie das Paging für diesen Feed aktivieren oder deaktivieren.
Hintergrundfarbe
Definieren Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul 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 entfernen, entfernen Sie einfach die URL aus dem Einstellungsfeld. Hintergrundbilder werden über den Hintergrundfarben angezeigt. Dies bedeutet, dass die Hintergrundfarbe beim Anwenden eines Hintergrundbilds nicht sichtbar ist.
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.
Portfolio-Modul-Design-Optionen
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.
Bereitstellung
Wählen Sie das Layout, das Sie verwenden möchten. "Raster" zeigt alle Ihre Elemente in einem mehrspaltigen, mehrzeiligen Layout an. Fullwidth zeigt jedes Projekt in einer eigenen Zeile mit großen ungeschnittenen Bildern und Bildern mit großer Breite an.
Farbe des Zoomsymbols
Wenn Sie mit der Maus über ein Element im Portfolio-Modul fahren, wird ein Überlagerungssymbol angezeigt. Sie können die für dieses Symbol verwendete Farbe mithilfe des Farbwählers in dieser Einstellung anpassen.
Layerfarbe auf Flyover
Wenn Sie mit der Maus über ein Element im Portfolio-Modul fahren, wird oben im Bild und unter dem Titel und dem Symbol des Portfolio-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 schweben
Hier können Sie ein benutzerdefiniertes Symbol auswählen, das angezeigt wird, wenn ein Besucher über Portfolioelemente im Modul fährt.
Textfarbe
Hier können Sie wählen, ob Ihr Text hell oder dunkel sein soll.
Titel Schriftart
Sie können die Schriftart Ihres Titeltextes ä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.
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.
Metas Schriftart
Sie können die Schriftart Ihres Metatextes ä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 Fettdruck, Kursivschrift, Großbuchstaben und Unterstreichungsoptionen anpassen.
Metas Schriftgröße
Hier können Sie die Größe Ihres Meta-Textes 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.
Meta-Textfarbe
Standardmäßig werden alle Textfarben in Divi in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Meta-Textes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.
Meta-Buchstabenabstand
Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Metatextes 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 unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.
Höhe der Links im Metabereich
Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen in Ihrem Meta-Text 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 unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.
Benutze den Rand
Wenn Sie diese Option aktivieren, wird ein Rand um Ihr Modul gelegt. Dieser Rahmen kann mithilfe der folgenden bedingten Parameter 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 sind die Ränder 1 Pixel breit. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Schieberegler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt. Dies bedeutet, dass Sie die Standardeinheit von "px" in etwas anderes wie em, vh, vw usw. ändern können.
Grenzstil
Rahmen unterstützen acht verschiedene Stile: fest, gepunktet, gepunktet, doppelt, Rille, Grat, Überlagerung und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen anzuwenden.
Erweiterte Portfoliooptionen
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. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, getrennt durch ein Leerzeichen. Diese Klassen können in Ihrem Divi-Child-Theme oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website hinzufügen. Website Verwenden von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen.
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=“expanded“ 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][/vc_column][vc_column width=” 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“]LADEN SIE HERUNTER 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?
Ciao, ist es möglich, ein Portfolio auf 3 Spalten ein Scorrimento zu haben? Siccome ho molti elementi da visualizzare, vorrei far sì che venissero visualizzati als delle slide che scorrono verso sx… Nein, also se ho reso die Idee… Grazie!
Hallo, ich würde gerne wissen, ob es möglich ist, eine Präsentation in Form eines Rasters mit drei Spalten und nicht vier zu haben. Standardmäßig sind meine Projekte horizontal um vier ausgerichtet, und da ich sechs setzen wollte, hätte ich mir eine Präsentation in drei Spalten und zwei Zeilen gewünscht. Ich habe die Optionen durchsucht, konnte aber nichts darüber finden ...
Vielen Dank im Voraus für Ihre Hilfe.
Hallo, können Sie mir erklären, warum zwischen den einzelnen Spalten meines Portfolios unter den Elementen ein sehr großer Abstand ist? Nicht links und rechts, sondern unter den Reihen. Ich danke dir sehr.
Hallo, wenn wir einen Überblick haben, können wir Sie besser beraten.
Merci.
2019-09-21-Screenshot unter 14.49.53 copie.jpg
Hallo, dein Beitrag enthält keinen Link zum Screenshot. Sie können dieses Tool verwenden, um dies zu tun: https://screenshot.net/fr/
Hallo,
Wissen Sie, ob es möglich ist, dem Portfolio unter dem Titel einen sichtbaren Auszug hinzuzufügen?
Danke im voraus
Guten Abend Sally,
Leider noch nicht getestet.