So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

So erstellen Sie Flipbox-Overlays und Hover in WordPress

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

Selbst wenn Sie ein hochwertiges WordPress-Theme verwenden, fühlen Sie sich möglicherweise durch die Anpassungsoptionen eingeschränkt. Flipboxen und Hover-Bilder fügen Ihrer Website auffällige animierte Effekte hinzu.

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

Was ist eine Flipbox?

Eine zusammenklappbare Box ist eine Box, die sich umdreht, wenn Sie mit der Maus darüber fahren. Sie können diesen schwebenden Animationseffekt zu bestimmten Abschnitten Ihrer Website hinzufügen, einschließlich Textfeldern und Bildern.

Flipbox-Demo-Animation

Der Begriff kommt von der einzigartigen “Flip”-Funktion, die auftritt, wenn die Maus über das Bild schwebt. Sie können steuern, wie das Bild gespiegelt wird, zusammen mit Informationen und Layout auf beiden Seiten des Bildes.

Wenn Ihre Website relativ statisch ist, können Sie einen Flipbox-Effekt verwenden, damit sie sich interaktiver anfühlt.

Beispielsweise können Sie eine Floating Image Flipbox zu einer Produktpreisseite hinzufügen. Auf diese Weise wird der Preis angezeigt, wenn Benutzer mit der Maus über Ihre Preisstufen fahren.

Oder, wenn Sie ein Freiberufler sind, können Sie Logos des Unternehmens, mit dem Sie gearbeitet haben, auf dieser Seite und einen Link zu jedem Projekt hinzufügen.

Obwohl diese animierten Effekte die Benutzererfahrung Ihrer Website verbessern können, ist es wichtig, es nicht zu übertreiben.

Stellen Sie sich den Flipbox-Effekt wie das Hinzufügen von Gewürzen zu einer Mahlzeit vor. Es ist da, um vorhandene Aromen und Zutaten zu verbessern, aber zu viel und es wird das Gericht ruinieren.

Lassen Sie uns einen Blick darauf werfen, wie Sie Flipbox-Overlays und Bild-Hover-Effekte zu Ihrem WordPress-Blog oder Ihrer Website hinzufügen können.

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

Sie können Flipboxen und Hover-Effekte mit vielen Methoden zu Ihrer WordPress-Site hinzufügen, z. B. mit dem Elementor-Seitenersteller oder durch Hinzufügen von benutzerdefiniertem CSS.

Wir empfehlen jedoch die Verwendung des Plugins Flipbox – Awesomes Flip Boxes Image Overlay. Dieses Plugin ist flexibel und einfach zu bedienen. Es ist das beste WordPress-Plugin für Flipbox und Hover-Bild.

Die kostenlose Version des Plugins bietet Ihnen Geschwindigkeit und Einfachheit. Sobald das Plugin installiert ist, können Sie Ihrer Website schnell attraktive Flipboxen hinzufügen.

Wenn Sie weitere Anpassungsoptionen benötigen, möchten Sie möglicherweise auf die Premium-Version des Plugins upgraden. Auf diese Weise können Sie die Farben Ihrer Flipboxen steuern und benutzerdefiniertes CSS hinzufügen.

Möglicherweise stellen Sie fest, dass vorhandene Vorlagen bereits großartig aussehen, wenn sie zu Ihrer Website hinzugefügt werden. In diesem Fall ist kein Upgrade erforderlich.

Als erstes müssen Sie das Flipbox – Awesomes Flip Boxes Image Overlay Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

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

Erstellen Sie eine neue Flipbox

Dadurch wird die gesamte Auswahl an Vorlagen angezeigt.

Wenn das nicht ausreicht, können Sie auf die Menüoption „Vorlagen importieren“ klicken, um noch mehr Vorlagen zur Verwendung zu erhalten.

Importieren Sie eine Flipbox-Vorlage

Mit der kostenlosen Version des Plugins stehen 5 verschiedene Vorlagen zur Auswahl, plus 10 weitere Vorlagen, die Sie importieren können.

Um eine neue anpassbare Vorlage zu importieren, klicken Sie neben der Stilnummer auf die Schaltfläche „Importieren“.

Flipbox klicken Sie auf die Importschaltfläche

Jetzt ist es an der Zeit, Ihre Vorlage auszuwählen und mit der Anpassung zu beginnen.

Sie müssen auf „Stil erstellen“ klicken, um Ihr erstes Flipbox-Design hochzuladen.

Dies öffnet ein Popup-Menü, in dem Sie Ihre Flipbox benennen und auswählen können, welches Layout Sie anpassen möchten.

Wählen Sie die Flipbox aus, die Sie anpassen möchten

Die 1., 2. und 3. ‘Layout’-Optionen passen zu den einzelnen Flipboxen des Layouts. Klicken Sie auf „Speichern“, wenn Sie Ihre Auswahl getroffen haben.

Es ist wichtig zu erwähnen, dass Ihr endgültiges Design der Flipbox-Vorlage sehr ähnlich sein wird. Wählen Sie daher am besten eine Vorlage aus, die dem Aussehen Ihrer Website ähnelt.

Es gibt drei Hauptregisterkarten, mit denen Sie das Aussehen Ihrer Flipbox ändern können: „Allgemein“, „Front“ und „Backend“.

Menü „Allgemeine Flipbox-Einstellungen“.

Auf jeder dieser Registerkarten können Sie Schriftarten, Auffüllung und Ränder ändern. Aber wir denken, dass die Standardoptionen bereits großartig aussehen.

Als Nächstes ändern wir den Text auf beiden Seiten der Flipbox.

Bewegen Sie den Mauszeiger über die Flipbox am unteren Bildschirmrand und klicken Sie auf „Bearbeiten“.

Flipbox-Vorschau Text bearbeiten

Dadurch wird ein Popup geöffnet, in dem Sie den vorderen Text, den hinteren Text und das Hintergrundbild ändern können.

Um den Titel zu ändern, bearbeiten Sie das Textfeld „Front Title“ und das Feld „Font Icon:“, wenn ein anderes Symbol angezeigt werden soll.

Ändern Sie den Titel und das vordere Symbol der Flipbox

Wenn Sie ein Hintergrundbild hinzufügen möchten, klicken Sie rechts neben der Option „Vorderbild“ auf „Bild hochladen“.

Laden Sie als Nächstes ein neues Bild hoch oder wählen Sie ein Bild aus Ihrer bestehenden Medienbibliothek aus.

Vorderes Hintergrundbild für Flipbox laden

Danach befolgen Sie die gleichen Schritte für die Rückseite der Flipbox unter „Backend-Einstellungen“.

Hier können Sie den Titel und den Text ändern, der angezeigt wird, wenn die Karte umgedreht wird.

Backend-Flipbox-Text ändern

Sie können auch die Felder „Text der Backend-Schaltfläche“ und „Link“ ändern.

Diese ändern den Text der Schaltfläche und wohin Benutzer gelangen, wenn sie darauf klicken.

Flipbox-Backend-Schaltfläche und -Link hinzufügen

Klicken Sie abschließend auf „Jetzt laden“, um das Hintergrundbild auf der Rückseite der Flipbox zu ändern.

Wie oben können Sie ein Bild hochladen oder eines aus Ihrer Medienbibliothek auswählen.

Backend-Hintergrundbild hochladen

Wenn Sie mit der Bearbeitung fertig sind, klicken Sie unbedingt auf die Schaltfläche „Senden“, um Ihre Änderungen zu speichern.

Sie werden feststellen, dass Ihre neuen Änderungen sofort im Fenster „Vorschau“ angezeigt werden.

Wenn Sie eine ganze Reihe von Flipboxen erstellen möchten, klicken Sie auf das „+“-Symbol im Metafeld „Neue Flipboxen hinzufügen“.

Fügen Sie eine Reihe von Flipboxen hinzu

Ein Popup-Fenster ähnlich dem obigen wird angezeigt, in dem Sie Ihre zweite Flipbox anpassen können.

Inzwischen haben Sie Ihre Flipboxen erstellt und angepasst, also ist es an der Zeit, sie zu Ihrer WordPress-Site hinzuzufügen.

Der einfachste Weg, dies zu tun, ist die Verwendung des enthaltenen Shortcodes. Auf der rechten Seite des Bildschirms befindet sich ein Metafeld mit der Bezeichnung „Shortcode“. Kopieren Sie den Shortcode, der wie im Bild unten aussieht.

Kopieren Sie den Flipbox-Shortcode

Navigieren Sie als Nächstes zu einer Seite oder einem Beitrag, auf der Sie die Flipbox hinzufügen möchten, und fügen Sie Ihren Shortcode ein.

Klicken Sie dann auf „Veröffentlichen“ oder „Aktualisieren“, wenn Ihr Beitrag bereits veröffentlicht wurde.

Fügen Sie den Flipbox-Shortcode ein

Ihre neuen Flipboxen sind jetzt auf Ihrer Website aktiv.

Beachten Sie, dass sich die Flipboxen anpassen, wenn Sie die Größe Ihres Browserfensters ändern, da sie zu 100 % reagieren.

Flipbox Live-WordPress-Bildschirm

Dieses Plugin enthält auch ein Flipbox-Widget, das Sie zu jedem Widget-Bereich hinzufügen können, der von Ihrem Design unterstützt wird.

Navigieren Sie dazu zu Aussehen » Widgets und suchen Sie nach dem Widget mit dem Titel „Flipbox – Awesomes Flip Boxes Image Overlay“.

Flipbox-Widget hinzufügen

Sie können das Widget dann per Drag & Drop an Ihren bevorzugten Ort ziehen.

Geben Sie abschließend die Stil-ID ein, die Sie im Hauptmenü des Flipbox-Plugins finden, und klicken Sie auf „Speichern“.

Flipbox-Widget-ID

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Flipbox-Overlays und Hover zu Ihrer WordPress-Site hinzufügen. Vielleicht möchten Sie auch unseren Leitfaden zur Optimierung von Bildern für SEO und unseren Leitfaden zur Fehlerbehebung zur Behebung häufiger Probleme mit WordPress-Bildern lesen.

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