So erstellen Sie Flipbox-Overlays und Hover-Effekte in WordPress

Möchten Sie Flipbox-Overlays und Bild-Hover-Effekte zu Ihrer WordPress-Website hinzufügen?

Selbst wenn Sie ein hochwertiges WordPress-Theme verwenden, fühlen Sie sich möglicherweise durch die Anpassungsoptionen eingeschränkt. In diesem Fall können Sie Flipboxen und Bild-Hover verwenden, um auffällige animierte Effekte zu Ihrer Website hinzuzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie Flipbox-Overlays und Bild-Hovers zu Ihrer WordPress-Site hinzufügen.

Was ist eine Flipbox?

Eine Flipbox ist eine Box, die sich umdreht, wenn Sie mit der Maus darüber fahren. Sie können diesen Hover-Effekt zu Inhalten wie Bildern und Textfeldern hinzufügen.

Ähnlich wie andere animierte Inhalte wie GIFs und responsive Slidern kann der Flipbox-Effekt ihn interaktiver und ansprechender gestalten. Sie könnten zum Beispiel ein Foto und Namen eines Autors anzeigen und dann eine Flipbox-Animation verwenden, um dessen Biografie anzuzeigen, wenn ein Leser darüber fährt.

Wenn Sie ein WordPress-Freelancer sind, können Sie die Logos Ihrer Kunden anzeigen und dann eine Flip-Animation verwenden, um einen Link zu jedem Projekt anzuzeigen.

Während diese animierten Effekte die Benutzererfahrung Ihrer Website verbessern können, ist es wichtig, es nicht zu übertreiben. Eine große Anzahl von Animationen kann überwältigend und verwirrend sein und sogar die Leistung Ihrer Website beeinträchtigen.

Lassen Sie uns nun sehen, wie Sie Flipbox-Overlays und Bild-Hover-Effekte zu Ihrer WordPress-Website hinzufügen können.

So erstellen Sie Flipbox-Overlays und Hover-Effekte in WordPress

Es gibt viele verschiedene Möglichkeiten, Animationen zu WordPress hinzuzufügen, einschließlich der Verwendung des SeedProd Page Builders oder des Schreibens von benutzerdefiniertem Code.

Der beste Weg, Flipbox- und Hover-Effekte zu erstellen, ist jedoch die Verwendung des Plugins Flipbox – Awesomes Flip Boxes Image Overlay. Dieses kostenlose Plugin bietet mehrere verschiedene Flipbox-Stile mit einer Mischung aus Bildern, Text und Call-to-Action-Buttons.

Neue Flipbox erstellen

Das erste, was Sie tun müssen, ist das Plugin Flipbox – Awesomes Flip Boxes Image Overlay zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung unter how to install a WordPress plugin.

Sobald das Plugin installiert und aktiviert ist, können Sie Ihre erste Flipbox erstellen, indem Sie zu Flip Box » Neu erstellen gehen.

Dies zeigt alle verschiedenen Vorlagen an, die Sie verwenden können.

Wenn Sie keines dieser Designs verwenden möchten, klicken Sie auf „Vorlagen importieren“.

Wenn Sie eine Vorlage sehen, die Sie verwenden möchten, klicken Sie auf „Importieren“, um sie zu Ihrem WordPress-Blog oder Ihrer Website hinzuzufügen.

Nachdem Sie ein Design ausgewählt haben, müssen Sie auf dessen Schaltfläche „Stil erstellen“ klicken.

Geben Sie im erscheinenden Popup einen Namen für das Flipbox-Design ein. Dies dient nur Ihrer Referenz, Sie können also verwenden, was Sie möchten.

Sie können auch auswählen, welches Layout Sie verwenden möchten, indem Sie auf 1., 2. oder 3. klicken.

Wenn das erledigt ist, klicken Sie auf „Speichern“.

Inhalte zu Ihrer Flipbox hinzufügen

Sie können das Aussehen der Flipbox über die Registerkarten Allgemein, Vorderseite und Backend ändern.

Sie können Schriftarten, Abstände und Ränder ändern. Die meisten dieser Einstellungen sind selbsterklärend, daher lohnt es sich, sie durchzusehen, um zu sehen, welche verschiedenen Effekte Sie erzielen können.

Wenn Sie mit dem Aussehen der Box zufrieden sind, ist es Zeit, Inhalte hinzuzufügen. Scrollen Sie einfach zur Flipbox-Vorschau am unteren Bildschirmrand und bewegen Sie die Maus darüber.

Wenn es erscheint, klicken Sie auf die Schaltfläche „Bearbeiten“.

Um den Titel zu ändern, der auf der Vorderseite der Flipbox angezeigt wird, können Sie ihn in das Feld „Front Title“ eingeben.

Danach können Sie das vordere Symbol ändern, indem Sie auf das Feld „Font Icon“ klicken und dann ein neues Bild aus dem erscheinenden Popup auswählen.

Als Nächstes können Sie der Vorderseite der Flipbox ein Bild hinzufügen. Klicken Sie einfach auf „Bild hochladen“ und wählen Sie dann eine Datei aus der Mediathek aus oder laden Sie ein neues Bild von Ihrem Computer hoch.

Wenn Sie noch kein Bild haben, das Sie verwenden möchten, können Sie eines mit Webdesign-Software wie Canva erstellen.

Wenn Sie mit der Vorderseite der Flipbox zufrieden sind, ist es Zeit, die Rückseite zu gestalten. Geben Sie dazu den Inhalt ein, den Sie anzeigen möchten, in das Feld „Backend Info“ ein.

Oft möchten Sie eine Handlungsaufforderung verwenden, um Besucher auf eine verwandte Seite zu leiten, z. B. auf die Auflistung eines beliebten Produkts, Preisinformationen oder andere Inhalte.

Um den Text zu ändern, der auf der Call-to-Action-Schaltfläche angezeigt wird, geben Sie einfach in das Feld „Backend Button Text“ ein. Sie können dann die Ziel-URL in das Feld „Link“ einfügen.

Klicken Sie abschließend auf „Jetzt hochladen“, um das Hintergrundbild zu ändern.

Wenn Sie mit der Einrichtung der Rückseite der Flipbox zufrieden sind, ist es Zeit, auf „Submit“ zu klicken.

Die Vorschau wird nun aktualisiert, um alle Ihre Änderungen anzuzeigen.

Mehrere Flipboxen erstellen

An diesem Punkt möchten Sie vielleicht weitere Boxen hinzufügen, indem Sie im Abschnitt „Neue Flipboxen hinzufügen“ auf das „+“ klicken.

Dies ermöglicht es Ihnen, mehrere Flipboxen mit demselben Stil zu erstellen und sie dann in Spalten und Zeilen zu organisieren.

Sie können jetzt weitere Flipboxen erstellen, indem Sie den oben beschriebenen Prozess befolgen.

Sie könnten zum Beispiel für jeden Ihrer Preispläne eine Flipbox erstellen.

Die Flipbox zu Ihrer WordPress-Website hinzufügen

Wenn Sie mit der Flipbox zufrieden sind, können Sie sie mit einem Shortcode zu Ihrer WordPress-Website hinzufügen, den das Plugin automatisch bereitstellt.

Kopieren Sie auf der rechten Seite Ihres Bildschirms den Wert aus dem Feld „Shortcode“.

Sie können die Flipbox nun mit einem Shortcode zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich hinzufügen.

Eine Schritt-für-Schritt-Anleitung zum Platzieren des Shortcodes finden Sie in unserer Anleitung unter how to add a shortcode in WordPress.

Das Plugin verfügt auch über ein Flipbox-Widget, das Sie zu jedem Widget-fähigen Bereich Ihres WordPress-Themes hinzufügen können.

Wenn Sie mehr als eine Flipbox-Animation erstellt haben, benötigen Sie die ID. Um diese Informationen zu erhalten, gehen Sie zu Flip Box » Flip Box und schauen Sie in der Spalte „ID“ nach.

Im folgenden Bild ist die Flipbox-ID 1.

Wenn Sie diese Informationen haben, gehen Sie zu Darstellung » Widgets.

Hier müssen Sie auf die Schaltfläche „+“ klicken.

Sie können jetzt „Flipbox“ eingeben.

Wenn das richtige Widget erscheint, ziehen Sie es einfach per Drag & Drop in die Seitenleiste, den Footer oder einen ähnlichen Bereich.

Das Flipbox-Widget zeigt standardmäßig eine Ihrer Animationen an.

Um stattdessen eine andere Flipbox anzuzeigen, geben Sie deren ID in das Feld ein.

Wenn Sie mit dem Aussehen des Widgets zufrieden sind, klicken Sie auf „Aktualisieren“.

Weitere Informationen finden Sie in unserem Leitfaden zum Thema Hinzufügen und Verwenden von Widgets in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Flipbox-Overlays und -Hovers zu Ihrer WordPress-Website hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Erstellen einer Bildergalerie lesen oder unsere Expertenauswahl der besten WordPress-Slider-Plugins ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.