Möchten Sie einen Testimonials-Bereich in Form eines Rasters erstellen auf Ihrer Webseite mit dem Testimonial-Modul von Divi ?
Rasterlayouts sind ideal für Inhalt die zusammengehalten werden müssen. Erfahrungsberichte sind ein gutes Beispiel dafür. In Divi, Testimonials werden mit einem neuen Modul für jedes Testimonial erstellt. Aber zum Glück ist es einfach, sie in einem Raster anzuzeigen.
In diesem Artikel werden wir sehen, wie man Testimonials in Form eines Rasters mit dem Modul anordnet Referenzen de Divi. Wir sehen zwei verschiedene Layouts, sodass Sie das auswählen können, das Ihren Anforderungen am besten entspricht.
Lassen Sie uns beginnen!
Übersicht
Hier ist eine Übersicht darüber, was wir in diesem Tutorial tun werden.
Gitterstruktur
Alternatives Layout
Gestaltung des ersten Layouts mit Divi
Wir zeigen die Details beider Layouts, aber das zweite Layout verwendet die Module des ersten.
Erstellen Sie eine Linie
Erstellen Sie zunächst eine neue Zeile und wählen Sie a aus 3-Spalten-Layout.
Öffnen Sie dann die Zeilenparameter indem Sie auf das Zahnradsymbol klicken.
Wählen Sie die Registerkarte Design und aktivieren Benutzerdefinierte Dachrinnenbreite verwenden und auf 1 setzen.
- Benutzerdefinierte Bundstegbreite verwenden: Ja
- Rinnenbreite: 1
Scrollen Sie dann nach unten zu Abstand und ändern Sie die Abstandseinstellungen wie folgt. Schließen Sie die Reihe. Wir werden eine zweite Reihe erstellen, aber wir werden diese zuerst fertig stellen und sie dann klonen.
- Polsterung (oben und unten): 0px
Fügen Sie ein „Testimonial“-Modul hinzu
Fügen Sie dann ein hinzu Zeugnismodul in der linken Spalte.
Modulinhaltseinstellungen
Fügen Sie dann die hinzu Inhalt des Zeugnisses. Dazu gehören der Name des Autors, die Berufsbezeichnung, der Firmenname, Inhalt des Leichnams und das Foto der aussagenden Person.
- Autor: Name des Autors
- Berufsbezeichnung: Position im Unternehmen
- Firma: Firmenname
- Body Content: das Zeugnis
- Bild: das ausgewählte Bild
Moduldesignparameter
Wählen Sie dann die Registerkarte aus Design.
Zitat-Symbol
Symboleinstellungen ändern. Die Symbolfarbe wird auch für den Namen der Person verwendet. Es wird für alle Module gleich sein.
- Farbe des Zitatsymbols: #fd335a
- Hintergrundfarbe des Zitatsymbols: #ffffff
Bild
Scrollen Sie dann nach unten zu Bild und ändern Sie die folgenden Einstellungen:
- Bildrandbreite: 4 Pixel
- Bildrahmenfarbe: #000645
Hauptteil
Scrollen Sie dann nach unten zu Textkörper und ändern Sie die Schriftart
- Körperschrift: Roboto Mono
AutorText
Scrollen Sie dann nach unten zu AutorText.
- Autor Schriftart: Oswald
- Schriftstärke: Semi Bold
- Schriftstil: TT
- Textfarbe: #fd335a
Text positionieren
Scrollen Sie dann nach unten zu Text positionieren (die Berufsbezeichnung) und ändern Sie die Schriftart.
- Positionsschrift: Roboto Mono
Firmentext
Scrollen Sie dann nach unten zu Firmentext und ändern Sie auch die Schriftart.
- Firmenschrift: Roboto Mono
Grenze
Scrollen Sie schließlich nach unten zu Grenze und ändern Sie den Rand wie folgt:
- Randbreite: 24px
- Randfarbe: #000645
Duplizieren Sie das Testimonial-Modul
ensuite, Duplizieren Sie das Modul zweimal und ziehen Sie die beiden geklonten Module in die anderen Spalten der Reihe.
Passen Sie das zweite Testimonial-Modul an
Öffne sie Einstellungen des zweiten Testimonial-Moduls und bearbeiten Sie den Inhalt.
Bild
Wählen Sie dann die Registerkarte aus Desing und scrolle zu Bild. Ändern Sie die Rahmenfarbe.
- Bildrahmenfarbe: #acf8f5
Grenze
Scrollen Sie schließlich nach unten zu Grenze und die Farbe ändern.
- Rahmenfarbe: #acf8f5
Passen Sie das dritte Testimonial-Modul an
Öffne sie Einstellungen des dritten Testimonial-Moduls und bearbeiten Sie den Inhalt.
Bild
Dann gehen Sie auf die Registerkarte Design, scrollen Sie zu Bild und ändern Sie die Rahmenfarbe.
- Bildrandfarbe: #fccaa0
Grenze
Scrollen Sie schließlich nach unten zu Grenze und ändern Sie die Randfarbe so, dass sie mit dem Bildrand übereinstimmt. Schließen Sie die Moduleinstellungen.
- Rahmenfarbe: #fccaa0
Doppelte Zeile
ensuite, die Zeile duplizieren indem Sie auf die Option zum Duplizieren klicken, die angezeigt wird, wenn Sie mit der Maus über die Linie fahren. Da wir 0px zur oberen und unteren Polsterung hinzugefügt haben, berührt diese neue Zeile automatisch die darüber liegende Zeile. Wir werden jedes Modul im zweiten Abschnitt öffnen, um seinen Inhalt und seine Farben zu ändern.
Passen Sie das vierte Testimonial-Modul an
Öffne sie Einstellungen des zweiten Testimonial-Moduls und bearbeiten Sie den Inhalt.
Bild
Scrollen Sie dann nach unten zu Bild und ändern Sie die Rahmenfarbe in #6eea9d.
- Bildrandfarbe: #6eea9d
Grenze
Scrollen Sie schließlich nach unten zu Grenze und ändern Sie die Randfarbe in #6eea9d, damit sie mit dem Rand des Bildes übereinstimmt. Schließen Sie die Moduleinstellungen.
- Rahmenfarbe: #6eea9d
Passen Sie das fünfte Testimonial-Modul an
Öffne sie Einstellungen des fünften Testimonial-Moduls und ändern Sie dessen Inhalt.
Bild
Scrollen Sie dann nach unten zu Bild und ändern Sie die Rahmenfarbe in #fff67f.
- Bildrandfarbe: #fff67f
Grenze
Scrollen Sie schließlich nach unten zu Grenze und ändern Sie die Randfarbe so, dass sie mit dem Bildrand übereinstimmt. Schließen Sie die Moduleinstellungen.
- Randfarbe: #fff67f
Passen Sie das sechste Testimonial-Modul an
Öffnen Sie schließlich die Einstellungen des sechsten Testimonial-Moduls und ersetzen die Inhalte.
Bild
Scrollen Sie dann nach unten zu Bild und ändern Sie die Rahmenfarbe in #593a94.
- Randbildfarbe: #593a94
Grenze
Scrollen Sie schließlich nach unten zu Grenze und ändern Sie die Farbe so, dass sie mit dem Rand des Bildes übereinstimmt. Schließen Sie die Moduleinstellungen.
- Randfarbe: #593a94
Ergebnis
Hier ist das Ergebnis, das wir bisher haben.
Design des zweiten Layouts mit Divi
Das von uns erstellte Testimonial-Raster funktioniert hervorragend, wenn die Testimonials ungefähr gleich groß sind.
Was wäre, wenn Sie kurze und lange Erfahrungsberichte hätten? Dafür ein Ideal ist ein Raster mit unterschiedlichen Säulengrößen. Die Erfahrungsberichte mit den meisten Informationen können wir in den großen Spalten platzieren.
Für dieses Beispiel. Wir erstellen neue Spalten mit denselben Abstandseinstellungen und verwenden dieselben Testimonials wie zuvor, jedoch mit unterschiedlichen Textmengen.
Erstellen Sie die alternativen Linien
Erstens füge eine Zeile zu 2 Spalten hinzu mit einem Spalte 1/3 nach links und a Spalte 2/3 rechts.
Öffnen Sie dann die Leitungseinstellungen, gehen Sie auf die Registerkarte von Design, scrollen Sie zu Größe und wählen Sie Benutzerdefinierte Bundstegbreite verwenden. Ändern Sie die Bundstegbreite auf 1.
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
Scrollen Sie dann nach unten zu Abstand.
- Polsterung (oben und unten): 0px
dann, Duplikat die Linie.
Wählen Sie die Optionen Layout zweite Reihe und wählen Sie das Layout mit aus 2/3 übrig et 1/3 richtig.
Fügen Sie vier Testimonial-Module hinzu
Endlich, Erstellen oder ziehen Sie Ihre Testimonial-Module zu den Linien. Wir verwenden dieselben Module wie im vorherigen Beispiel, aber der Inhalt wurde geändert, um andere Größen zu erstellen.
Die Module passen sich wie im vorherigen Beispiel an die Breite ihrer Spalten an, haben aber aufgrund ihres Inhalts jeweils unterschiedliche Höhen. Dadurch entstehen unangenehme Abstände im Raster. Glücklicherweise ist es leicht zu beheben.
Öffnen Sie die Einstellungen des ersten Moduls und gehen Sie auf die Registerkarte Design. Scrollen Sie zu Größe und geben Sie bei „Höhe“ 100 % ein.
Wiederholen Sie dies für jedes Modul .
- Höhe: 100 %
Endergebnisse
Gitterstruktur
Hier ist ein Blick auf unser Rasterlayout. Dies funktioniert hervorragend, wenn die Testimonials die gleiche Größe haben.
Alternatives Layout
Hier ist das alternative Layout. Es ist ideal für Testimonials unterschiedlicher Größe.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Dies ist unser Blick darauf, wie Sie mit dem Modul einen Testimonials-Bereich in einem Rasterformat erstellen Referenzen von Divi. Die Zeilen- und Moduleinstellungen von Divi arbeiten perfekt zusammen, um ein Raster aus mehreren Zeilen und Spalten zu erstellen.
Die hier gezeigten Beispiele können leicht erweitert werden, um noch größere Gitter zu erstellen. Die Konzepte funktionieren auch mit anderen Arten von Divi-Modulen.
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.
...
