Sie möchten das Filterable Portfolio-Modul von Divi verwenden und wissen nicht, welches Layout Sie wählen sollen?
Das Modul « Filterbares Portfolio » Divi bietet dir zwei Layout-Optionen zur Auswahl. Beide Optionen haben Vorteile und eignen sich für bestimmte Zwecke sehr gut.
In diesem Artikel vergleichen wir die Vollbild- und Rasterlayouts dieses Moduls, um Ihnen bei der Entscheidung zu helfen, was Sie für Ihre Website benötigen.
Wir werden auch beide Layouts anpassen, um zu sehen, wie sie in einem Divi-Layout funktionieren.
Lassen Sie uns beginnen!
Übersicht
Lassen Sie uns zunächst sehen, was wir in diesem Tutorial erstellen werden.
Desktop-Version des Grid-Layouts
Laden Sie DIVI jetzt herunter!!!
Telefonversion des Rasterlayouts
Desktop-Version des Fullwidth-Layouts
Lesen Sie auch: Divi: So verwenden Sie Schatten- und Hover-Effekte, um interaktive Inhalte zu erstellen
Telefonversion des Layouts in voller Breite
So ändern Sie das Layout des filterbaren Portfoliomoduls
Standardmäßig zeigt das Modul „Filterbares Portfolio“ das Layout in voller Breite an. Sie können das Layout ändern, um Elemente in einem Raster anzuzeigen. Öffnen Sie zunächst die Modulparameter.
Wählen Sie dann die Registerkarte aus Design Die erste Möglichkeit ist Layout. Es hat eine Dropdown-Liste mit einigen Auswahlmöglichkeiten. Wählen Sie es aus, um zwischen zu wählen Gesamtbreite et Gitter.
Wenn Sie die derzeit nicht ausgewählte Option auswählen, lädt das Modul neu und zeigt die Portfolioelemente in diesem Layout an. Das folgende Beispiel zeigt das Rasterlayout.
Filterbarer Portfolio-Modul-Layout-Vergleich
Die beiden Layouts sind sehr unterschiedlich, haben aber einige Gemeinsamkeiten. Beide zeigen den Filter oben im Modul, den Titel und das Meta unter den Artikelbildern und die Paginierung unten im Modul an.
Hier ist ein Blick darauf, wie sie sich unterscheiden.
Layout in voller Breite
Volle Breite zeigt ein großes Bild mit einem Portfolioelement an, das die gesamte Breite des Portfoliobereichs einnimmt. Bilder werden in ihrer ursprünglichen Form angezeigt und auf die verfügbare Breite erweitert.
Es fügt nicht viel Platz zwischen Brieftaschenelementen hinzu. Wir empfehlen, die Anzahl der Beiträge auf wenige zu beschränken. Das folgende Beispiel zeigt das Layout in voller Breite mit 2 Pfosten.
Gitterstruktur
Das Rasterlayout zeigt bis zu 4 Elemente in einer Reihe an. Es fügt mehr Platz zwischen den Elementen hinzu. Bilder werden zugeschnitten, um unabhängig von Bildgröße und -form Miniaturansichten derselben Größe zu erstellen.
In diesem Fall haben wir das Modul auf die Anzeige von vier Beiträgen beschränkt, um die Paginierung anzuzeigen.
Wann Sie die einzelnen Layouts des Filterable Portfolio-Moduls verwenden sollten
Beide Anordnungen haben ihre Vorteile. Hier sind einige Tipps, wann Sie die einzelnen Layouts verwenden sollten.
Layout in voller Breite
Verwenden Sie das Layout „Volle Breite“, wenn Sie nur wenige Elemente anzuzeigen haben oder sich auf einige wenige Elemente konzentrieren möchten.
Verwenden Sie dieses Layout auch, wenn Sie vorgestellte Bilder hervorheben oder darauf aufmerksam machen möchten.
Gitterstruktur
Verwenden Sie das Raster-Layout, wenn Sie viele Elemente anzeigen möchten oder wenn ein Layout mehr Elemente auf kleinerem Raum anzeigen soll.
So passen Sie filterbare Portfolio-Modul-Layouts an
Nachdem wir nun gesehen haben, wie man Layouts auswählt, wie sie funktionieren und wann sie verwendet werden, sehen wir uns an, wie man diese beiden Layouts anpasst.
Wir werden die Portfolio-Seite des verwenden Kostenloses Painter-Layout-Paket erhältlich in Division. Hier ist die Originalseite.
Wir werden das Portfolio durch das Modul „Filterbares Portfolio“ ersetzen und dieselben Bilder und Titel verwenden.
Wir erstellen zwei Versionen: eine mit einem Layout in voller Breite und eine mit einem Rasterlayout.
So passen Sie das Rasterlayout des filterbaren Portfoliomoduls an
Wir beginnen mit dem Rasterlayout. Ich werde die Farben und Schriftarten aus dem ursprünglichen Layout verwenden.
Inhalt
Öffne sie Modulparameter und geben Sie 4 für die ein Beitragsanzahl. Wählen Sie Alle Kategorien die Sie im Modul anzeigen möchten.
- Beitragsanzahl: 4
- Enthaltene Kategorien: Kategorien auswählen
Bereitstellung
Wählen Sie dann die Registerkarte aus Design und wähle Gitter in den Layoutoptionen.
- Layout: Gitter
Bild
Scrollen Sie zu Bild und wählen Sie die Option Box Schatten. Ändern Sie es Schattenfarbe in RGB(0,0,0,0.05).
- Box Schatten: 4ème ganz ohne irgendetwas tun oder drücken zu müssen.
- Schattenfarbe: rgba(0,0,0,0.05)
Text
Scrollen Sie dann nach unten zu Text und ändern Sie die Ausrichtung Im Zentrum. Dadurch werden Filter, Titel, Meta und Paginierung zentriert.
- Textausrichtung: Zentriert
Titeltext
Scrollen Sie dann nach unten zu Titeltext und ändern Sie die folgenden Einstellungen.
- Schriftart des Titels: Merriweather
- Titeltextfarbe: #000000
Ändern Sie die Größe der Polizei bei 26 Pixel für Desktops, 20 Pixel für Tablets und 18 Pixel für Telefone.
- Titeltextgröße: Desktop 26 Pixel, Tablet 20 Pixel, Telefon 18 Pixel
Text des Filterkriteriums
Scrollen Sie dann nach unten zu Filterkriterientext und ändern Sie die folgenden Einstellungen:
- Filterkriterien:
- Schrift: Montserrat
- Schriftdicke: fett
- Stil: TT
- Textfarbe: #fd6927
- Textgröße: 12px
Metatext
Scrollen Sie dann nach unten zu Metatext. Ändern Sie es Polizei in Montserrat und der couleur in #fd6927.
- Metatextgröße: Montserrat
- Meta-Textfarbe: #fd6927
Definiere das taille auf 12 Pixel, dieBuchstaben-Abstand auf 2 Pixel und die hauteur Linie auf 1,2 em.
- Textgröße: 12px
- Meta-Buchstabenabstand: 2px
- Höhe der Metazeile: 1,2 cm
Paginierungstext
Scrollen Sie schließlich nach unten zu Paginierungstext und ändere es Polizei in Montserrat, und setze die couleur Schriftart auf schwarz. Schließen Sie das Modul und speichern Sie Ihre Einstellungen.
- Paginierungsschrift: Montserrat
- Paginierungstextfarbe: #000000
So passen Sie das filterbare Portfolio-Modul in einem Layout mit voller Breite an
Lassen Sie uns nun das Modul in einem Layout mit voller Breite konfigurieren.
Wir verwenden die gleichen Designelemente wie beim Rasterlayout, nehmen jedoch einige Änderungen vor, die für dieses Layout gut funktionieren. Wir werden einige einfache CSS verwenden, um einige kleinere Änderungen vorzunehmen.
Inhalt
Öffne sie Modulparameter und ändern Sie die Anzahl von Publikationen zu 2. Dadurch bleibt die Seite bei großen Bildern kleiner und übersichtlicher. Wählen Sie Alle Kategorien die Sie im Modul anzeigen möchten.
- Beitragsanzahl: 2
- Enthaltene Kategorien: Wählen Sie Kategorien aus
Elemente
Scrollen Sie zu verschiedenste Komponenten und deaktivieren Kategorien anzeigen. Lassen Sie die anderen aktiviert. Kategorien werden weiterhin für den Filter aktiviert, aber sie werden nicht mit dem Titel angezeigt.
- Kategorien anzeigen: NEIN
Bereitstellung
Wählen Sie die Registerkarte Design Sous Layout, lassen Sie das Layout auf eingestellt Gesamtbreite, was die Standardeinstellung ist.
- Layout: Volle Breite
Bild
Scrollen Sie dann nach unten zu Bild . Wählen Sie die Option Box Schatten und ändere es couleur Farbton in rgba (0,0,0,0.05).
- Box Schatten: 4ème ganz ohne irgendetwas tun oder drücken zu müssen.
- Schattenfarbe: rgba(0,0,0,0.05)
Text
Scrollen Sie dann nach unten zu Text. Ändere das Ausrichtung Im Zentrum. Filter, Titel und Paginierung werden mit den Bildern zentriert.
- Textausrichtung: Zentriert
Titeltext
Scrollen Sie dann nach unten zu Titeltext . Ändern Sie es Polizei zu Merriweather und ändern Sie die couleur in Schwarz.
- Schriftart des Titels: Merriweather
- Titeltextfarbe: #000000
Ändern Sie die Größe der Polizei bei 40 Pixel für Desktops, 20 Pixel für Tablets und 18 Pixel für Telefone.
- Titeltextgröße: Desktop 40 Pixel, Tablet 20 Pixel, Telefon 18 Pixel
Text des Filterkriteriums
Scrollen Sie dann nach unten zu Filterkriterientext und ändern Sie die folgenden Einstellungen:
- Filterkriterien:
- Schrift: Montserrat
- Schriftdicke: fett
- Stil: TT
- Textfarbe: #fd6927
Paginierungstext
Scrollen Sie dann nach unten zu Paginierungstext. Ändern Sie es Polizei in Montserrat, ändern Sie die poids halbfett und setze die Schriftfarbe auf #fd6927. Schließen Sie das Modul und speichern Sie Ihre Einstellungen.
- Paginierungsschrift: Montserrat
- Farbe: #fd6927
- Schriftstärke: Semi Bold
CSS-Titeltext
Öffnen Sie die Registerkarte Erweitert und scrolle zu Portfoliotitel. Wählen Sie das Desktop-Symbol aus. Kopieren Sie den folgenden Code für verschiedene Bildschirmgrößen. Schließen Sie das Modul und speichern Sie Ihre Einstellungen.
Titel des Portfolios:
- Desktop
padding-bottom:40px- Tablette
padding-bottom:30px- Telefon
padding-bottom:20px
Ergebnisse
Desktop-Version des Grid-Layouts
Telefonversion des Rasterlayouts
Laden Sie DIVI jetzt herunter!!!
Desktop-Version des Layouts in voller Breite
Siehe auch: Divi: So ändern Sie den Farbverlauf eines Hintergrunds beim Hover
Telefonversion des Layouts in voller Breite
Laden Sie DIVI jetzt herunter!!!
Fazit
Dies ist unsere Einstellung zur Verwendung eines Layouts in voller Breite im Vergleich zu einem Raster im Modul Filterbares Portfolio von Divi. Die Wahl zwischen den beiden Layout-Optionen ist einfach.
Jede Option hat ihre eigenen Vorteile und muss individuell gestaltet werden, um mit Ihrer Website zu funktionieren. Nehmen Sie einfach ein paar Anpassungen vor, um sicherzustellen, dass Ihr Modul mit jedem Divi-Layout gut funktioniert.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...