So zeigen Sie Inhalte mit einem Shutter-Hover-Effekt in Divi . an

Das Aufdecken von Modulinhalten beim Schweben kann einige hilfreiche Vorteile haben. 1) Es kann eine großartige Möglichkeit sein, anfangs ein kompakteres oder eleganteres Design Ihrer Webseite zu haben. 2) Es spart Platz. 3) Es kann Benutzer dazu verleiten, mit Ihrer Seite zu interagieren. 4) Es sieht cool aus :). Die Grundidee besteht darin, nur einen Teil des Modulinhalts anzuzeigen (wie ein Teaser), was es für Besucher verlockend macht, mit der Maus darüber zu fahren, um mehr zu sehen. Sobald sie über das Modul schweben, wird der gesamte Inhalt mit einem sanften Hover-Effekt angezeigt, der sich wie ein Verschluss öffnet und schließt.

In diesem Tutorial zeige ich Ihnen, wie Sie Modulinhalte mit einem Hover-Effekt im Shutter-Stil mit dem Divi-Builder anzeigen können.

Vorgeschmack

Hier ist ein kurzer Blick darauf, was wir gemeinsam bauen werden.

Einstieg

Abonnieren Sie unseren Youtube-Kanal

Um zu beginnen, erstellen Sie eine neue Seite, geben Sie der Seite einen Titel und stellen Sie dann den Divi Builder bereit, um das Frontend zu erstellen. Wählen Sie die Option "Wählen Sie ein vorgefertigtes Layout". Wählen Sie dann im Divi-Bibliothek-Popup das Day Spa-Layout-Paket aus und klicken Sie auf , um das Landing Page-Layout zu verwenden.

Sobald das Layout auf die Seite geladen ist, können Sie loslegen!

Hinzufügen von Trennwänden am oberen und unteren Rand des Blurb

Scrollen Sie auf der Seite nach unten zum Abschnitt mit dem Titel „Luxury Spa Experiences“ mit den vier Klappentexten. Wir werden die Zeile mit den vier Klappentexten verwenden, um das Design zu starten.

Hinzufügen des ersten Teilers

Unser erster Schritt besteht darin, Trennwände über und unter dem Klappenmodul hinzuzufügen, um unseren Klappeninhalt dahinter zu verbergen. Sie können sich diese Trennwände wie Fensterläden vorstellen, die sich beim Schweben öffnen und schließen.

Fügen Sie über dem Klappentext in der ersten Spalte ein Trennmodul hinzu und aktualisieren Sie Folgendes:

Hintergrundfarbe: #ffffff
Farbe (des Teilers): #ffffff
Teilergewicht: 100px
Höhe: 100px
Benutzerdefinierter Rand: 0px unten

Der weiße Hintergrund entspricht dem Hintergrund unseres Abschnitts, da wir ihn nicht sehen möchten. Stellen Sie sicher, dass das Gewicht und die Höhe des Teilers gleich sind.

Hinzufügen des zweiten (orangefarbenen) Teilers

Erstellen Sie als Nächstes einen weiteren Teiler direkt unter dem gerade erstellten Teiler und aktualisieren Sie Folgendes:

Farbe: #ff7a6b
Teilergewicht: 2px
Höhe: 2px
Benutzerdefinierter Rand: 0px unten

Springen Sie dann zum Inhalts-Tab und geben Sie dem Teiler ein Admin-Label „orange Divider“. Dies hilft, den Teiler vom vorherigen (weißen) Teiler zu unterscheiden, wenn wir den Drahtmodellmodus verwenden, um den Teiler zu kopieren und in die anderen Spalten einzufügen.

Speichern Sie Ihre Seite.

Kopieren und Einfügen der Trennlinien um die Blurbs

Jetzt können wir unsere Trennlinien über und unter jedem der Klappen in jeder der Spalten kopieren und einfügen. Um diesen Vorgang ein wenig zu vereinfachen, stellen Sie den Drahtmodellmodus bereit, indem Sie das Einstellungsmenü unten auf der Seite öffnen und auf das Drahtmodellsymbol klicken. (oder verwenden Sie Shift + w)

Suchen Sie im Wireframe-Modus die Zeile mit den Klappentexten und Trennlinien, die wir gerade erstellt haben. Kopieren Sie dann den Teiler und den orangefarbenen Teiler über und unter jedem der Klappentexte und fügen Sie sie ein, damit das Endergebnis wie folgt aussieht.

Gehen Sie als nächstes zurück zur Desktop-Ansicht (Umsch + W), um das Design abzuschließen. Ihre Seite sollte so aussehen.

Anpassen der Blurb-Module

Nachdem Sie nun alle Trennwände installiert haben, ist es an der Zeit, unsere Klappenmodule mit einigen Stilanpassungen zu bearbeiten, einschließlich eines benutzerdefinierten Rands, um den Hover-Effekt im Shutter-Stil zu erstellen.

Verwenden Sie zunächst Multiselect, um alle vier Klappenmodule auszuwählen. Halten Sie dazu einfach Strg (oder cmd) gedrückt und klicken Sie auf jedes Modul. Öffnen Sie dann die Einstellungen eines der Module, um die Elementeinstellungen modal bereitzustellen.

Fügen Sie auf der Registerkarte "Inhalt" einige Zeilen mit simuliertem Inhalt hinzu.

Deaktivieren Sie dann den Schatten der Bildbox vollständig.

Um den Shutter-Hover-Effekt zu erzeugen, müssen wir negative obere und untere Ränder hinzufügen, um den Inhalt standardmäßig hinter den Trennwänden auszublenden. Dann setzen wir die Ränder auf 0px, um den Inhalt beim Schweben anzuzeigen. Fügen Sie dazu den folgenden Abstand hinzu.

Benutzerdefinierter Rand (Standard): -100px oben, -65px unten
Benutzerdefinierter Rand (Hover): 0px oben, 0px unten

Benutzerdefinierte Polsterung (Hover): 10 Pixel oben, 10 Pixel unten

Je nachdem, wie viele Inhalte Sie haben, müssen Sie möglicherweise die negativen Randwerte anpassen. Beispielsweise benötigen Sie möglicherweise einen größeren negativen Rand für längeren Textinhalt.

Sehen Sie sich nun das bisherige Ergebnis an.

Beachten Sie, dass die Ober- und Unterseite jedes Moduls hinter den Trennwänden verborgen ist, bis Sie mit der Maus darüber fahren.

Bereinigen des Shutter Hover-Effekts

Vertikale Zentrierung der Module

Derzeit schiebt der Shutter-Hover-Effekt den Rest des Inhalts bei jedem Hover auf der Seite nach unten. Dies verursacht einige Seitenbewegungen, die ablenken können. Außerdem geht die Schwebeaktion nur nach unten, was kein echter Verschlusseffekt ist. Wir möchten, dass sich der Inhalt von der Mitte aus sowohl nach oben als auch nach unten öffnet. Um dies zu erreichen, müssen wir Folgendes tun:

Öffnen Sie die Zeileneinstellungen und gleichen Sie die Spaltenhöhen aus.

Gehen Sie dann zur Registerkarte Erweitert und geben Sie das folgende benutzerdefinierte CSS unter dem Hauptelement ein:

align-items: center;

Dadurch wird sichergestellt, dass die Module innerhalb der Säule vertikal zentriert bleiben, was uns den nach oben und unten gerichteten Verschlusseffekt verleiht.

Der Reihe eine feste Höhe geben

Um zu verhindern, dass der Hover-Effekt den unteren Seiteninhalt nach unten drückt, müssen wir verhindern, dass die Zeile mit jedem Hover in die Höhe wächst. Dazu müssen wir auf dem Desktop eine feste Höhe für unsere Zeile festlegen. Da die Höhe festgelegt wird, müssen Sie sicherstellen, dass die Höhe der Zeile hoch genug ist, um die Höhe des Klappentexts im Schwebezustand aufzunehmen. Sie sollten es jedoch nicht zu hoch machen, da Sie zu viel Platz über und unter den Modulen lassen. In diesem Beispiel setze ich die Zeilenhöhe auf 600px. Da wir jedoch nur die feste Höhe auf dem Desktop festlegen möchten, müssen wir mithilfe einer Medienabfrage CSS zu unseren Seiteneinstellungen hinzufügen.

Hier ist, was Sie tun müssen.

Geben Sie Ihrer Zeile zunächst in den Zeileneinstellungen eine CSS-ID:

CSS-ID: feste Höhe

Öffnen Sie dann die Seiteneinstellungen (unter der Registerkarte Erweitert) und fügen Sie das folgende benutzerdefinierte CSS hinzu:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Dadurch erhält Ihre Zeile eine feste Höhe von 600 px auf dem Desktop und verhindert, dass der Hover-Effekt den Rest des Seiteninhalts nach unten drückt.

Das ist es!

Das Endergebnis

Sehen Sie sich das endgültige Design an.

Und hier ist der Shutter-Hover-Effekt.

Es kann eine gute Idee sein, den Hover-Effekt auf Mobilgeräten zu deaktivieren. Dazu müssen Sie lediglich den benutzerdefinierten Rand für jedes Klappenmodul wie folgt festlegen:

Benutzerdefinierter Rand (Tablet): 0 Pixel oben, 0 Pixel unten

Abschließende Gedanken

Dieser Shutter-Hover-Effekt ist eine kreative Möglichkeit, Ihr Publikum dazu zu bringen, nach weiteren Informationen zu Ihren verschiedenen Diensten zu suchen. Und mit der Magie von Divi und ein paar CSS-Schnipseln ist das Endergebnis ziemlich elegant. Ich bin sicher, es gibt noch viele weitere Anwendungen für diesen Shutter-Hover-Effekt, da Sie jedes beliebige Modul verwenden können. Fühlen Sie sich frei, einige aufregende neue Designs zu entdecken, und zögern Sie nicht, sie mit uns zu teilen. Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!