So ersetzen Sie Kundenlogos durch Testimonials bei Hover/Click mit Divi

Suchen Sie nach einer Möglichkeit, Kundenlogos und passenden Testimonials mit Interaktion zu versehen? Mit der responsiven Inhaltsfunktion von Divi ist es jetzt einfacher denn je, verschiedene Inhalte im Standardzustand eines Moduls und beim Hover anzuzeigen. Im heutigen Divi-Tutorial demonstrieren wir dies, indem wir Ihnen zeigen, wie Sie Kundenlogos durch Testimonials ersetzen, wenn Sie den Mauszeiger (Desktop) und klicken (Tablet und Telefon). Wir werden das Blurb-Modul verwenden, um uns dabei zu helfen, dorthin zu gelangen! Sie können auch die JSON-Datei des Layouts kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Kundenlogo-Layout KOSTENLOS herunter

Um das kostenlose Layout für Kundenlogos in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie mit dem Hinzufügen eines neuen Abschnitts zu einer neuen oder vorhandenen Seite. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #000000

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 200px
• Untere Polsterung: 200px

Grenze

Vervollständigen Sie die Abschnittseinstellungen, indem Sie einen weißen Rahmen hinzufügen.

• Randbreite: 1vw
• Rahmenfarbe: #ffffff

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und erhöhen Sie die maximale Breite der Zeile.

• Maximale Breite: 1500px

Textmodul zur Spalte hinzufügen

Responsive H2-Inhalte hinzufügen

Das erste Modul, das wir in dieser Zeile benötigen, ist ein Textmodul mit einigen responsiven H2-Inhalten.

• Desktop: Bewegen Sie den Mauszeiger über die Kundenlogos, um zu sehen, was sie zu sagen haben!
• Tablet & Telefon: Klicken Sie auf die Kundenlogos, um zu sehen, was sie zu sagen haben!

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Work Sans
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße: 40px (Desktop), 30px (Tablet), 25px (Telefon)

Trennmodul zur Spalte hinzufügen

Sichtweite

Das nächste und letzte Modul, das wir in dieser Reihe benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie dann die Linienfarbe des Moduls.

• Linienfarbe: #ffffff

Größe

Ändern Sie auch die Größeneinstellungen des Moduls.

• Teilergewicht: 4px
• Breite: 10%
• Modulausrichtung: Mitte

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie etwas oberen Rand hinzufügen.

• Oberer Rand: 100px

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie eine weitere Zeile direkt unter der vorherigen hinzu und verwenden Sie dafür die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen für verschiedene Bildschirmgrößen. Stellen Sie sicher, dass Sie auch die Spaltenhöhen ausgleichen, dies wird beim nächsten Schritt helfen; Zentrieren des Spalteninhalts.

• Spaltenhöhen ausgleichen: Ja
• Breite: 100 % (Desktop), 80 % (Tablet & Telefon)
• Maximale Breite: 1500px
• Mindesthöhe: 500px (Desktop), automatisch (Tablet & Telefon)

Hauptelement

Um den Spalteninhalt Ihrer Zeile zu zentrieren, müssen Sie 1) die Option "Spaltenhöhen ausgleichen" aktivieren (vorheriger Schritt) und 2) die folgende Zeile CSS-Code zum Hauptelement Ihrer Zeile hinzufügen:

align-items: center;

Blurb-Modul zur Spalte hinzufügen

Lassen Sie den Standardinhalt leer

Um Client-Logos beim Hover zu ersetzen, verwenden wir Blurb-Module. Beginnen Sie mit dem ersten in Spalte 1. Stellen Sie sicher, dass Sie den Standardtitel und den Hauptinhalt leer lassen, aber weiterhin die Hover-Option für beide aktivieren.

Inhalt bei Hover hinzufügen

Fügen Sie in beide Hover-Felder schriftlichen Inhalt Ihrer Wahl ein.

Standardbild

Fahren Sie fort, indem Sie in den Bild- und Symboleinstellungen ein Firmenlogo Ihrer Wahl hochladen.

Bild beim Hover entfernen

Wir ersetzen Kundenlogos beim Hover, indem wir sie im Hover-Zustand vollständig entfernen.

Hintergrundfarbe schweben

Wie Sie in der Vorschau dieses Beitrags sehen können, ändern wir auch die Hintergrundfarbe des Moduls beim Bewegen des Mauszeigers. Verwenden Sie keine Standardhintergrundfarbe und fügen Sie beim Hover den folgenden Farbcode hinzu:

• Hintergrundfarbe: #191919

Bild-/Symboleinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und stellen Sie sicher, dass die folgende Bild-/Symbolausrichtung gilt:

• Bild-/Symbolausrichtung: Mitte

Texteinstellungen

Da wir eine schwarze Hintergrundfarbe für den Abschnitt verwenden, ändern wir die Textfarbe des Moduls in den allgemeinen Texteinstellungen.

• Textfarbe: Hell

Einstellungen für Titeltext

Ändern Sie als Nächstes die Einstellungen für den Titeltext entsprechend:

• Titelüberschriftsebene: H3
• Titelschriftart: Work Sans
• Titeltextgröße: 24px
• Höhe der Titelzeile: 1,4 em

Textkörpereinstellungen

Nehmen Sie auch einige Änderungen an den Textkörpereinstellungen vor.

• Körperschriftart: Open Sans
• Textkörperfarbe: #8c8c8c
• Körperlinienhöhe: 2.5em

Standardabstand

Gehen Sie dann zu den Abstandseinstellungen und stellen Sie sicher, dass im Standardzustand des Moduls kein benutzerdefinierter Abstand vorhanden ist.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 0px
• Rechte Polsterung: 0px

Hover-Abstand

Beim Hovern erstellen wir jedoch einen Leerraum für unser Testimonial mit den folgenden Werten:

• Obere Polsterung: 20px
• Untere Polsterung: 50px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Übergang

Vervollständigen Sie die Einstellungen des Moduls, indem Sie die Standardübergangsdauer entfernen. Dadurch wird das Testimonial sofort angezeigt, wenn Sie mit der Maus über das Logo fahren/anklicken.

• Übergangsdauer: 0ms

Blurb-Modul zweimal klonen und Duplikate in verbleibende Spalten platzieren

Nachdem Sie das erste Blurb-Modul in Spalte 1 fertiggestellt haben, können Sie das Modul zweimal klonen und die Duplikate in die verbleibenden Spalten der Zeile einfügen.

Ganze Zeile klonen

Sie können diese Zeile nun beliebig oft klonen, je nachdem, wie viele Kundenlogos Sie anzeigen möchten.

Hover-Inhalt jedes Duplikats des Blurb-Moduls ändern

Stellen Sie sicher, dass Sie das Kundenlogo in jedem duplizierten Blurb-Modul ändern.

Logo jedes Duplikats des Blurb-Moduls ändern

Ändern Sie auch den Hover-Inhalt jedes duplizierten Moduls und Sie sind fertig!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit der Funktion für reaktionsschnelle Optionen von Divi Kundenlogos durch Testimonials beim Bewegen/Klicken ersetzen. Dies ist eine hervorragende Möglichkeit, Platz auf Ihren Seiten zu sparen und interaktives Design für verschiedene Bildschirmgrößen zu erstellen. Wir haben nicht nur das Tutorial gezeigt, sondern auch die JSON-Datei zu Beginn dieses Beitrags kostenlos geteilt! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.