So wechseln Sie ein Hintergrundbild mit einem animierten Gif bei Hover

Das Wechseln eines Hintergrundbilds mit einem animierten GIF bei Mauszeiger kann eine großartige Möglichkeit sein, Ihren Inhalten Leben einzuhauchen und gleichzeitig eine coole Illustration für Produkte oder Dienstleistungen bereitzustellen. Wenn Sie beispielsweise für die Funktionen eines bestimmten Softwareprodukts werben, kann ein animiertes GIF dabei helfen, Aspekte der Produktfunktionalität zu veranschaulichen (wir tun dies für die Produkte hier bei Elegant Themes). Anstatt dieses GIF zunächst anzuzeigen, möchten Sie möglicherweise einen Standbild-Screenshot dieser Funktion anzeigen, der beim Schweben durch eine animierte Version (oder GIF) ersetzt wird.

In diesem Tutorial zeige ich Ihnen, wie Sie einen Klappentext erstellen, der ein Hintergrundbild (Standbild) mit einem animierten GIF beim Schweben wechselt. Wir beginnen damit, wie Sie mit Snagit (einer Bildschirmaufnahmesoftware) einen Screenshot und ein GIF erstellen. Dann gehen wir darauf ein, wie Sie diese Hintergrundbilder in einen Klappentext implementieren, damit sie den Hover aktivieren. Das eigentliche Umschalten der Bilder ist mit Divis Hintergrund-Hover-Optionen extrem einfach.

Dieses Design hilft dabei, das Design im Vorfeld statisch zu halten und Benutzer zu motivieren, wenn sie mit dem Inhalt interagieren.

Lass uns anfangen.

Vorgeschmack

Laden Sie den GIF-Hintergrund im Hover-Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei mit aktivem Divi Builder in eine neue Seite.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Abonnieren Sie unseren Youtube-Kanal

Um zu beginnen, benötigen Sie Folgendes:

1. Das Divi Theme installiert und aktiv
2. Screen Capture Software (oder eine Kombination von Tools), mit der Sie Screenshots machen, Bildschirmvideos aufnehmen und GIFs erstellen können. In diesem Tutorial werde ich Snagit hauptsächlich verwenden, weil es eine All-in-One-Lösung ist, die ich täglich für meine Blog-Posts und Tutorials verwende.
3. Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)

Danach haben Sie eine leere Leinwand, um mit dem Erstellen einiger Hover-Tabs in Divi zu beginnen.

Teil 1: Screenshots und GIFs erstellen

Für dieses Design möchten wir einen Screenshot erstellen, der als Standbild für ein Klappenmodul angezeigt wird. Dann möchten wir ein GIF (ein animiertes Bild) erstellen, das dieses stille Hintergrundbild mit einer kurzen Illustration der Funktionsweise des Produkts zum Leben erweckt. Der Trick besteht darin, Bilder und GIFS zu erstellen, die so ähnlich aussehen, dass sie einen reibungslosen Übergang haben, wenn ein Bild mit dem anderen beim Schweben ausgetauscht wird.

Sobald die beiden Bilder erstellt wurden, können wir das Standbild als anfängliches Hintergrundbild verwenden. Dann können wir das Hintergrundbild auf das Gif-Bild umschalten, wenn wir mit der Maus über das Klappenmodul fahren.

Um die Screenshots und GIFs zu erstellen, verwende ich Snagit. Obwohl es keine kostenlose Software ist, ist es wirklich einfach zu bedienen und ermöglicht es Ihnen, Screenshots zu erstellen, Ihren Bildschirm aufzunehmen und Bildschirmaufnahmen in GIFs zu verbergen – alles an einem Ort.

Erstellen des Screenshot-Standbilds

Um den Screenshot zu erstellen, öffnen Sie Snagit und öffnen Sie das Aufnahmefeld. Stellen Sie dann sicher, dass Sie ein Bild aufnehmen möchten, indem Sie einen Bereich Ihres Bildschirms auswählen. Auf diese Weise können Sie einen Bereich auf Ihrem Bildschirm ziehen, um ihn als Bild aufzunehmen. Um die Bildschirmaufnahme zu starten, klicken Sie auf die Aufnahmeschaltfläche.

Klicken Sie dann auf den Aufnahmebereich und ziehen Sie ihn um den Bereich Ihres Bildschirms, den Sie als Bild aufnehmen möchten.

Speichern Sie das Bild auf Ihrem Computer. Öffnen Sie dann das Feld Snagit Capture erneut und wählen Sie ein Video auf, indem Sie einen Bereich Ihres Bildschirms auswählen. Um die Bildschirmaufnahme zu starten, klicken Sie auf die Aufnahmeschaltfläche.

Klicken Sie dann auf den Aufnahmebereich und ziehen Sie ihn um den Bereich Ihres Bildschirms, den Sie aufnehmen und als Videoclip aufnehmen möchten. Um einen nahtloseren Übergang zwischen dem Standbild und dem GIF zu erzielen, sollten Sie für das Video denselben Bereich wie für das Bild aufnehmen (oder so nah wie möglich).

Wenn Sie bereit sind, klicken Sie auf die Aufnahmeschaltfläche und führen Sie die Demo durch, die Sie aufnehmen möchten.

Wenn Sie fertig sind, klicken Sie auf Stopp, um die Aufnahme zu stoppen. Anschließend können Sie den Videoclip im Snagit-Editor bearbeiten. Wenn Sie mit der Bearbeitung fertig sind, klicken Sie auf die Gif-Schaltfläche neben dem Video, um ein Gif aus Ihrem Video zu erstellen.

Ändern Sie im Popup-Fenster „Gif erstellen“ die Ausgabeeinstellungen nach Bedarf. Stellen Sie sicher, dass die Schleife aktiviert ist, damit Ihr Gif wiederholt wird. Klicken Sie dann auf die Schaltfläche Erstellen.

Nachdem das Gif erstellt wurde, speichern Sie es auf Ihrem Computer.

Jetzt haben Sie ein Standbild und ein GIF-Bild, das Sie Ihrem Design in Divi hinzufügen können.

Teil 2: Erstellen eines Klappentextes, der das Hintergrundbild mit dem animierten Gif-Bild beim Schweben wechselt

Falls noch nicht geschehen, erstellen Sie eine neue Seite und stellen Sie den Divi Builder bereit, um das Frontend zu erstellen. Erstellen Sie dann einen neuen regulären Abschnitt mit einer zweispaltigen Zeile.

Fügen Sie in Spalte 1 ein Klappenmodul hinzu.

Aktualisieren Sie dann die Inhaltseinstellungen wie folgt:

Hauptteil: „Der Fließtext gehört hierher“
Symbol verwenden: JA
Symbol: Wolke (siehe Screenshot)

Fügen Sie das Standardhintergrundbild hinzu

Fügen Sie als Nächstes das Standardhintergrundbild wie folgt zum Klappentext hinzu:

Hintergrundbild: Laden Sie das von Ihnen erstellte Hintergrundbild (den Standbild-Screenshot) hoch.
Hintergrundbildgröße: Fit (dadurch wird sichergestellt, dass das gesamte Bild sichtbar bleibt)
Position des Hintergrundbilds: Oben in der Mitte (dadurch wird das Bild oben im Klappentext gehalten)

Fügen Sie das Hover-Hintergrund-Gif-Bild hinzu

Nachdem Sie das anfängliche Hintergrundbild eingerichtet haben, stellen Sie die Hover-Option für den Hintergrund bereit und wählen Sie die Registerkarte Hover aus. Fügen Sie dann das Gif-Bild hinzu, um im Hover-Zustand als neues Hintergrundbild zu dienen.

Styling des Blurb-Moduls

Fahren Sie mit dem Stylen des Klappenmoduls fort, indem Sie die folgenden Designeinstellungen aktualisieren:

Symbolfarbe: #6bb962
Kreissymbol: JA
Kreisfarbe: #ffffff
Textausrichtung: Mitte
Titelschriftart: Lora
Titeltextgröße: 34px
Polsterung: 50 % oben, 5 % unten, 3 % links, 3 % rechts

Der wahre Schlüssel zu diesem Design ist die Polsterung. Um den Hintergrund über dem Inhalt des Klappentexts zu platzieren, müssen Sie etwa 50% des oberen Paddings hinzufügen. Und da die Hintergrundbildgröße auf „fit“ und die Position auf „top center“ eingestellt ist, sitzt es schön über dem Inhalt und reagiert auf Browserbreiten.

Schließlich geben Sie dem Klappentext wie folgt einen Box-Schatten beim Schweben:

Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe: 0px (Standard), 24px (Hover)

Endergebnis

Hier ist das Endergebnis.

Und hier ist das Design auf Tablet und Telefon.

Und so könnte es mit zusätzlichen Klappentexten mit verschiedenen Screenshots und Farben aussehen.

Abschließende Gedanken

Wenn Sie mit der Verwendung von GIFs auf Ihrer Website nicht vertraut sind, sollten Sie dies auf jeden Fall in Betracht ziehen. Sie können Ihre Inhalte wirklich zum Leben erwecken und Ihren Besuchern äußerst nützliche Illustrationen bieten. Und mit den Hintergrund-Hover-Optionen von Divi können Sie ganz einfach ein Standbild mit einem GIF beim Hover wechseln. Diese Lösung kann im Vorfeld ein weniger ablenkendes Design bieten, das den Benutzer bei der Interaktion mit Ihren Inhalten wirklich einbezieht. Ich hoffe, Sie finden es nützlich für Ihr nächstes Projekt.

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

Danke schön!