So erstellen Sie einen expandierenden Hover-Effekt für Ihre Rasterlayouts in Divi

Das Hinzufügen eines expandierenden Hover-Effekts zu Ihrem Rasterlayout ist eine einzigartige Möglichkeit, Ihr Publikum dazu zu bringen, mit Ihrem Seiteninhalt zu interagieren. Die Idee ist, mit einer kompakten Anzeige Ihres Rasters zu beginnen und dieses Raster dann zu erweitern, um den Rasterinhalt in den Vordergrund zu rücken, wenn ein Benutzer mit der Maus über das Element in Divi fährt. Dies ist großartig, um eine Bildergalerie zu erweitern, um eine größere Galerie (mit größeren Bildern) beim Schweben anzuzeigen. Und Sie können auch eine Gruppe von Klappentexten erweitern, um Besucher dazu zu bringen, Ihre Dienste zu erkunden.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf die expandierenden Hover-Effekt-Beispiele, die ich in diesem Tutorial behandeln werde.

Einstieg

Für dieses Tutorial brauchen Sie nur Divi. Wir werden auch das vorgefertigte Layout der Design Agency About Page verwenden, das im Divi Builder verfügbar ist, um das Design zu starten.

Erstellen Sie zunächst eine neue Seite, geben Sie Ihrer Seite einen Titel und klicken Sie, um den Divi Builder zu verwenden. Wählen Sie als Nächstes die Option zum Auswählen eines vorgefertigten Layouts. Wählen Sie im Popup „Aus Bibliothek laden“ das Design Agency Layout Pack aus und klicken Sie dann auf , um die Info-Seite der Design Agency zu verwenden.

Nachdem das Layout auf die Seite geladen wurde, veröffentlichen Sie es. Für dieses Tutorial verwende ich den Divi-Builder am Frontend. Um dies zu tun, müssen Sie nur oben im Backend-Seiteneditor auf die Schaltfläche „Auf dem Frontend aufbauen“ klicken.

Jetzt können Sie loslegen!

Erweitern von Blurbs bei Hover

Für dieses erste Beispiel zeige ich Ihnen, wie Sie die Klappen im zweiten Abschnitt dieses Layouts erweitern, die die angebotenen Dienste anzeigen.

Verschieben Sie die Blurb-Module so, dass sie nur eine Zeile belegen

Derzeit besteht der Abschnitt aus zwei dreispaltigen Zeilen mit einem Klappentext in jeder Spalte.

Da wir unseren Hover-Effekt zu einer einzelnen Zeile hinzufügen, müssen wir die Klappentexte in der unteren Zeile in die obere Zeile verschieben. Stellen Sie sicher, dass jede Spalte in der oberen Reihe zwei Klappentexte enthält.

Löschen Sie dann die leere untere Zeile.

Anpassen der Blurb-Module

Als Nächstes verwenden wir Multiselect, um alle sechs Klappentexte auszuwählen, damit wir auf alle gleichzeitig dasselbe Design anwenden können. Halten Sie dazu Strg (oder cmd) gedrückt und klicken Sie auf jedes der Klappenmodule, bis alle ausgewählt sind. Klicken Sie dann auf das Einstellungssymbol in einem der Klappentexte, um das Elementeinstellungen-Modal zu öffnen.

Nehmen Sie den Inhalt aus der Inhaltsbox heraus und aktualisieren Sie dann die Designeinstellungen wie folgt:

Titeltextgröße 16px
Breite: 150px
Modulausrichtung: Mitte
Benutzerdefiniertes Padding: 10px oben, Standard unten, Standard links, Standard rechts

Wenn Sie den Modulen eine benutzerdefinierte Breite von 150 Pixeln geben, bleibt der Titeltext an Ort und Stelle, wenn wir die Zeile erweitern.

Speichern Sie die Änderungen und klicken Sie aus der Mehrfachauswahl heraus.

Machen Sie das Center Blurb ausgeprägter

Öffnen Sie als nächstes die Klappenmoduleinstellungen für den oberen Klappentext in der zweiten Spalte mit dem Titel "Markenidentität". Aktualisieren Sie dann Folgendes:

Symbolschriftgröße: 120px
Titeltextgröße: 18px (Standard)

Dadurch wird der mittlere Klappentext einfach stärker als das Mittelstück, von dem aus sich die anderen Klappentexte nach außen erweitern.

Anpassen der Zeile zum Erweitern bei Hover

Um unsere Module beim Schweben zu erweitern, werden wir die Größe und den Abstand der Reihe anpassen. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Breite: 750px
Dachrinnenbreite: 4
Benutzerdefiniertes Auffüllen (Standard): 150 Pixel links, 150 Pixel rechts
Benutzerdefiniertes Auffüllen (Hover): 0 Pixel links, 0 Pixel rechts
Benutzerdefiniertes Auffüllen (Tablet): 0 Pixel links, 0 Pixel rechts

Die Änderung der Padding-Werte beim Hover erzeugt den expandierenden Hover-Effekt. Die Zeile wird 150px nach rechts und 150px nach links erweitert.

Sehen Sie sich das Endergebnis an.

Erstellen eines kreisförmigen Gitters

Wenn Sie ein kreisförmiges Raster-Layout erstellen möchten, das sich erweitert, sind nur einige geringfügige Anpassungen erforderlich.

Duplizieren Sie zunächst einen der äußeren Klappentexte und ziehen Sie ihn über den großen Klappentext der zweiten Spalte. Löschen Sie dann den Titeltext im mittleren Klappentext mit dem großen Symbol.

Um die Klappentexte vertikal auszurichten, können Sie einen kleinen Ausschnitt aus benutzerdefiniertem CSS hinzufügen. Öffnen Sie die Zeileneinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

align-items: center;

Sehen Sie sich nun das Ergebnis an.

Erweiterung des Rasters nach rechts

Sie können das Raster auch nach links oder rechts erweitern. Organisieren Sie einfach Ihre Module und aktualisieren Sie dann die benutzerdefinierte Auffüllung Ihrer Zeile. Wenn Sie beispielsweise den Inhalt nach rechts erweitern möchten, legen Sie Ihren standardmäßigen benutzerdefinierten Abstand auf 0 Pixel links und 300 Pixel rechts fest.

Wie es auf dem Handy aussieht

Darauf wird das Design auf Tablet und Smartphone zurückgreifen. Der expandierende Hover-Effekt ist auch auf Mobilgeräten nicht aktiv.

Hinzufügen eines expandierenden Hover-Effekts zu einer Bildergalerie

Sie können eine Bildergalerie auch mit dem Galeriemodul erweitern, wenn Sie den Mauszeiger darüber bewegen, um ein größeres Rasterlayout mit größeren Bildern anzuzeigen. Suchen Sie dazu den Abschnitt am unteren Rand des Seitenlayouttitels „Unsere Arbeit“ der Designagentur.

Fügen Sie dann eine neue einspaltige Zeile unter der Zeile mit den drei Bildern hinzu. Fügen Sie innerhalb der Zeile ein Galeriemodul hinzu.

Aktualisieren Sie die Einstellungen des Galeriemoduls wie folgt:

Fügen Sie der Galerie 4 Bilder mit den gleichen Abmessungen hinzu, damit sie in der Reihe gleich aussehen.

Anzahl der Bilder: 4
Titel und Bildunterschrift anzeigen: NEIN
Paginierung anzeigen: Nein

Wechseln Sie als Nächstes zur Registerkarte Design und aktualisieren Sie Folgendes:

Farbe des Zoomsymbols: #353740
Hover-Overlay-Farbe: rgba(252,210,29,0.92)

Breite (Desktop): 40%
Breite (schweben): 100%
Breite (Tablette): 100%

Das Ändern der Breite des Galeriemoduls beim Hovern erzeugt den expandierenden Hover-Effekt. Wenn Sie die Tablettbreite auf 100 % einstellen, wird der Hover-Effekt auch auf Mobilgeräten verhindert.

So sieht es bisher aus.

Wir müssen unsere Zeileneinstellungen noch aktualisieren, um die Funktionalität ein wenig zu verbessern und das Layout anzupassen.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Breite: 80%
Dachrinnenbreite: 2
Spaltenhöhen ausgleichen: JA

Verhindern, dass der expandierende Hover-Effekt Inhalte auf der Seite nach unten verschiebt

Wenn Sie möchten, dass die Bildergalerie erweitert wird, ohne den Seiteninhalt nach unten zu verschieben, können Sie dies tun, indem Sie eine Mindesthöhe für Ihre Zeile festlegen. Dies führt zu einer besseren UX, insbesondere mit einem Button direkt unter der Galerie.

Gehen Sie zu den Zeileneinstellungen und fügen Sie das folgende benutzerdefinierte CSS im Hauptelement hinzu:

min-height: 350px

Fügen Sie dann das folgende benutzerdefinierte CSS im Column Main Element hinzu:

margin: auto;

Das Angleichen der Spaltenhöhen aktiviert die CSS-Eigenschaft „display: flex“ im Backend, die es „margin: auto“ ermöglicht, den Inhalt der Spalte vertikal zentriert innerhalb der Zeile auszurichten, die jetzt eine Mindesthöhe von 350px hat. Erfahren Sie mehr über dieses Konzept in unserem vollständigen Artikel zum vertikalen Ausrichten von Inhalten in Divi.

Sehen Sie sich das Endergebnis an.

Hinzufügen weiterer Bilder zur Galerie

Sie können der Galerie auch 4 weitere Bilder hinzufügen und die Mindesthöhe Ihrer Zeile auf 475 Pixel erhöhen, um das folgende Ergebnis zu erhalten.

Wie es auf dem Handy aussieht

So sieht die Galerie auf dem Handy aus. Der expandierende Hover-Effekt ist nicht aktiv.

Abschließende Gedanken

Die angegebenen Beispiele sind nur einige Möglichkeiten, wie Sie Divi verwenden können, um einen expandierenden Hover-Effekt für Ihren gesamten Rasterinhalt zu erzeugen. Aber ich bin sicher, Sie können es für unzählige andere Anwendungsfälle verwenden. Sie können Portfolio-Module, Shop-Module oder sogar Blog-Module erweitern. Seien Sie also kreativ und haben Sie Spaß beim Erkunden der Möglichkeiten auf eigene Faust.

Ich freue mich, von Ihnen in den Kommentaren unten zu hören.

Danke schön!