Wie man Flipbox-Overlays und Hovers in WordPress erstellt
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 vielleicht durch die Anpassungsoptionen eingeschränkt. Flipboxen und Bildschwebeeffekte fügen Ihrer Website auffällige animierte Effekte hinzu.
In diesem Artikel zeigen wir Ihnen, wie Sie Flipbox-Overlays und Bild-Hover-Effekte zu Ihrer WordPress-Website hinzufügen können.
Was ist eine Flipbox?
Eine Flipbox ist eine Box, die umkippt, wenn Sie mit der Maus darüber fahren.
Sie können diesen Hover-Animationseffekt zu bestimmten Abschnitten Ihrer Website hinzufügen, einschließlich Textfeldern und Bildern.
Der Begriff kommt von der einzigartigen "Flip"-Funktion, die passiert, wenn die Maus über dem Bild schwebt.
Sie können steuern, wie das Bild gespiegelt wird, zusammen mit den Informationen und dem Design der beiden Seiten des Bildes. Wenn Ihre Website relativ statisch ist, dann können Sie einen Flipbox-Effekt verwenden, um sie interaktiver zu gestalten. Zum Beispiel können Sie eine Bild-Hover-Flipbox zu einer Produktpreis-Seite hinzufügen.
Wenn Benutzer mit dem Mauszeiger über Ihre Preisstufen fahren, wird der Preis angezeigt. Oder, wenn Sie ein Freiberufler sind, können Sie Logos von Unternehmen hinzufügen, mit denen Sie gearbeitet haben, die sich drehen und zu jedem Projekt verlinken. Während diese animierten Effekte die Benutzerfreundlichkeit Ihrer Website verbessern können, ist es wichtig, dass Sie es nicht übertreiben.
Betrachten Sie den Flipbox-Effekt wie das Hinzufügen von Gewürzen zu einer Mahlzeit. Es ist dazu da, die vorhandenen Aromen und Zutaten zu verbessern, aber zu viel und es wird das Gericht ruinieren. Sehen wir uns also an, wie Sie Flipbox-Overlays und Bild-Hover-Effekte zu Ihrem WordPress-Blog oder Ihrer Website hinzufügen können.
Wie man Flipbox-Overlays und Hover-Effekte in WordPress erstellt
Sie können Flipboxen und Hover-Effekte zu Ihrer WordPress-Website hinzufügen, indem Sie viele Methoden verwenden, wie z.B. den Elementor Page Builder oder das Hinzufügen von benutzerdefiniertem CSS. Die von uns empfohlene Methode ist jedoch die Verwendung des Flipbox - Awesomes Flip Boxes Image Overlay Plugins.
Dieses Plugin ist flexibel und einfach zu bedienen. Es ist das beste Flipbox- und Image-Hover-WordPress-Plugin. Die kostenlose Version des Plugins bietet Ihnen Geschwindigkeit und Einfachheit.
Sobald das Plugin installiert ist, können Sie schnell gut aussehende Flipboxen zu Ihrer Website hinzufügen. Wenn Sie mehr Anpassungsmöglichkeiten benötigen, dann sollten Sie auf die Premium-Version des Plugins upgraden. Damit können Sie die Farben Ihrer Flipboxen steuern und benutzerdefinierte CSS hinzufügen.
Möglicherweise stellen Sie fest, dass vorhandene Vorlagen bereits gut aussehen, wenn Sie sie zu Ihrer Website hinzufügen; in diesem Fall ist ein Upgrade nicht erforderlich. Als erstes müssen Sie das Flipbox - Awesomes Flip Boxes Image Overlay Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins. Sobald das Plugin installiert und aktiviert ist, können Sie Ihre erste Flipbox erstellen, indem Sie auf Flipbox " Neu erstellen gehen
Daraufhin wird die gesamte Auswahl an Vorlagen angezeigt. Wenn diese nicht ausreichen, dann können Sie auf die Menüoption "Vorlagen importieren" klicken, um noch mehr Vorlagen zu verwenden.
In der kostenlosen Version des Plugins gibt es 5 verschiedene Vorlagen zur Auswahl, plus weitere 10 Vorlagen, die Sie importieren können. Um eine neue anpassbare Vorlage zu importieren, klicken Sie auf die Schaltfläche "Importieren" neben der Stilnummer.
Jetzt können Sie Ihre Vorlage auswählen und anpassen.
Sie müssen auf "Stil erstellen" klicken, um Ihr erstes Flipbox-Design zu laden. Daraufhin wird ein Popup-Menü angezeigt, in dem Sie Ihre Flipbox benennen und auswählen können, welches Layout Sie anpassen möchten.
Die Optionen 1, 2 und 3 "Layouts" entsprechen den einzelnen Flipboxen im Layout. Klicken Sie auf "Speichern", sobald Sie Ihre Auswahl getroffen haben. Es ist wichtig zu erwähnen, dass Ihr endgültiges Design eng mit der Flipbox-Vorlage übereinstimmt, daher ist es am besten, eine Vorlage zu wählen, die dem Aussehen Ihrer Website entspricht. Es gibt drei Hauptregisterkarten, mit denen Sie das Aussehen Ihrer flipbox ändern können: "Allgemein", "Vorderseite" und "Backend".
Auf jeder dieser Registerkarten können Sie die Schriftarten, die Polsterung und die Ränder ändern.
Wir finden jedoch, dass die Standardoptionen bereits sehr gut aussehen. Als nächstes werden wir den Text auf beiden Seiten der Flipbox ändern. Bewegen Sie den Mauszeiger über die Flipbox am unteren Rand des Bildschirms und klicken Sie auf "Bearbeiten".
Daraufhin wird ein Popup-Fenster angezeigt, 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.
Wenn Sie ein Hintergrundbild hinzufügen möchten, dann klicken Sie rechts neben der Option "Front Image" auf "Upload Image". Laden Sie dann ein neues Bild hoch oder wählen Sie ein Bild aus Ihrer vorhandenen Medienbibliothek aus.
Danach folgen Sie der gleichen Reihe von Schritten für die Rückseite der Flipbox unter den "Backend-Einstellungen".
Hier können Sie den Titel und den Text ändern, der angezeigt wird, wenn die Karte umklappt.
Sie können auch die Felder "Backend-Schaltflächentext" und "Link" ändern.
Diese ändern den Schaltflächentext und wo Ihre Benutzer hingehen, wenn sie darauf klicken.
Klicken Sie schließlich auf "Jetzt hochladen", um das Hintergrundbild auf der Rückseite der Flipbox zu ändern.
Wie oben beschrieben, können Sie entweder ein Bild hochladen oder eines aus Ihrer Medienbibliothek auswählen.
Wenn Sie mit der Bearbeitung fertig sind, klicken Sie 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, dann klicken Sie auf das "+"-Symbol im Metafeld "Neue Flipboxen hinzufügen".
Daraufhin wird ein Popup-Fenster ähnlich dem oben abgebildeten angezeigt, in dem Sie Ihre zweite Flipbox anpassen können. Inzwischen haben Sie Ihre Flipboxen erstellt und angepasst. Jetzt ist es an der Zeit, sie zu Ihrer WordPress-Website hinzuzufügen. Der einfachste Weg, dies zu tun, ist die Verwendung des mitgelieferten Shortcodes.
Auf der rechten Seite Ihres Bildschirms befindet sich ein Metafeld mit der Bezeichnung "Shortcode", kopieren Sie den Shortcode, der dem Bild unten ähnelt.
Als nächstes navigieren Sie zu einer Seite oder einem Beitrag, wo Sie die Flipbox hinzufügen möchten, und fügen den Shortcode ein. Klicken Sie dann auf "Veröffentlichen" oder "Aktualisieren", wenn Ihr Beitrag bereits live ist.
Ihre neuen Flipboxen sind nun live auf Ihrer Website.
Beachten Sie, dass sich die Flipboxen anpassen, wenn Sie die Größe Ihres Browserfensters ändern, da sie zu 100 % responsiv sind.
Dieses Plugin enthält auch ein Flipbox-Widget, das Sie zu jedem von Ihrem Theme unterstützten Widget-Bereich hinzufügen können. Navigieren Sie dazu zu Erscheinungsbild " Widgets und suchen Sie das Widget mit dem Titel 'Flipbox - Awesomes Flip Boxes Image Overlay'
Dann können Sie das Widget per Drag & Drop an die gewünschte Stelle ziehen. Geben Sie abschließend die Stil-ID ein, die Sie im Hauptmenü des Flipbox-Plugins finden, und klicken Sie auf "Speichern".
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Flipbox-Overlays und Hovers zu Ihrer WordPress-Website hinzufügen können.