So erstellen Sie Flipbox-Overlays und Hover in WordPress 

Wenn es um die Gestaltung einer attraktiven und ansprechenden WordPress-Site geht, kann das Hinzufügen interaktiver Elemente das Benutzererlebnis erheblich verbessern. Die Flipbox ist ein solches Element, mit dem Sie Inhalte dynamisch und interaktiv anzeigen können. 

In diesem Blogbeitrag werden wir untersuchen, was Flipbox ist, welche Rolle Flipbox-Overlays und Hover in WordPress-Sites spielen, und Ihnen eine Schritt-für-Schritt-Anleitung zum Hinzufügen von Flipbox-Overlays und Hovern in WordPress geben.

Was ist Flipbox?

Eine Flipbox ist eine Designfunktion, mit der Sie Material in Form einer Box bereitstellen können, die sich dreht oder dreht, wenn der Benutzer mit der Maus darüber fährt. Es umfasst normalerweise zwei Seiten, die Vorder- und die Rückseite, mit unterschiedlichem Inhalt auf jeder Seite. 

Rolle von Flipbox-Overlays und Hovern in der WordPress-Site

Flipbox-Overlays und Hover können dazu beitragen, das Benutzererlebnis und die visuelle Attraktivität Ihrer WordPress-Site zu verbessern. Sie ermöglichen es Ihnen, die Aufmerksamkeit auf wichtige Details zu lenken, Besonderheiten hervorzuheben oder Ihre Fotos und Videos dynamisch darzustellen. Durch die Einbindung von Flipbox-Overlays und Hovern können Sie Ihre Website attraktiver gestalten, die Benutzerinteraktion fördern und die Gesamtästhetik des Designs verbessern. 

Eine Schritt-für-Schritt-Anleitung zum Hinzufügen von Flipbox zur WordPress-Site 

Um Flipbox-Overlays und Hovers zu Ihrer WordPress-Site hinzuzufügen, benötigen Sie ein geeignetes Plugin, das diese Funktionalität bietet. Es stehen mehrere Flipbox-Plugins zur Verfügung, zwei beliebte Optionen sind es jedoch Elementor Und ElementsKit Flipbox Plugins. Diese Plugins bieten benutzerfreundliche Optionen und eine Vielzahl von Anpassungseinstellungen, um atemberaubende Flipbox-Effekte zu erstellen. Installieren und Aktivieren eines Plugins ist keine Raketenwissenschaft. Sie können dies ganz einfach tun, indem Sie ein paar Schritte befolgen. 

Kommen wir nun zurück zum Hinzufügen von Flipbox zu Ihrer Website. Hier sind 4 einfache Möglichkeiten, dies zu tun:

Schritt 1: Aktivieren des Flip-Box-Widgets

Melden Sie sich dazu bei Ihrem WordPress-Admin-Dashboard an und navigieren Sie zu ElementsKit ⇒ Widgets ⇒ Flipbox-Widget, Schalten Sie das Widget ein, Und Klicken Sie auf Änderungen speichern.

Schritt 2: Ziehen Sie das Widget per Drag & Drop

Bearbeiten Sie die Seite, indem Sie die Option „Mit Elementor bearbeiten“ auswählen. Dann, suchen für das Flip-Box-Widget mit einem Ekit-Symbol und einfach Ziehen Sie das Widget per Drag & Drop auf die Seite.

Schritt 3: Passen Sie die Einstellungen an

Erweitern Sie das Flip-Box-Menü, um die Einstellungen zu ändern: 

0. Flip-Optionen: Sie können wählen, wie die Flip-Animation aussehen soll. Es gibt vier Optionen: Hineindrehen, Vergrößern, Hineinschieben und 3D. Jeder hat einen anderen Stil.

• Umkehrrichtung: Dies bestimmt, in welche Richtung die Flip-Animation verläuft. Abhängig von der Art des Umdrehens, das Sie gewählt haben, werden Ihnen unterschiedliche Optionen für die Richtung angezeigt, in die es umgedreht werden kann.

• Flip-Trigger: So gelingt der Umschwung. Sie können zwischen drei Optionen wählen: Hover (wenn Sie mit der Maus darüber fahren), Box Click (wenn Sie auf das Feld klicken) oder Button Click (wenn Sie auf eine bestimmte Schaltfläche klicken).

• Flip-Box-Höhe: Sie können die Höhe der Flipbox ändern. Innerhalb dieser Einstellung gibt es zwei Registerkarten: FRONT und BACK. Sie können den Inhalt auf jeder Seite separat anpassen.

Für jede Seite der Flip-Box können Sie Folgendes anpassen:

• Medientyp: Wählen Sie, ob Sie ein Symbol, ein Bild oder keines verwenden möchten (wenn Sie keine Bilder hinzufügen möchten).

• Symbol/Datei auswählen: Wenn Sie ein Symbol oder Bild ausgewählt haben, können Sie aus einer Liste auswählen, welches Sie verwenden möchten, oder eine Datei von Ihrem Computer auswählen.

• Titel: Geben Sie dieser Seite der Flipbox einen Titel oder Namen.

• Untertitel: Fügen Sie unter dem Titel einen kleineren Text hinzu, um weitere Informationen bereitzustellen.

• Flip-Beschreibung: Schreiben Sie eine Beschreibung oder Erklärung für diese Seite der Flip-Box.

• Ausrichtung: Entscheiden Sie, ob der Inhalt auf der linken Seite, in der Mitte oder auf der rechten Seite angezeigt werden soll.

Sobald Sie mit der Anpassung des Inhalts für beide Seiten der Flip-Box fertig sind, können Sie den Stil ändern, damit er Ihren Wünschen entspricht.

Schritt 4: Formulieren Sie Ihre Flipbox

Gehen Sie nun zur Registerkarte „Stil“ und erweitern Sie jeden Abschnitt um die entsprechenden Stiloptionen:

Verpackung: Hier können Sie den Hintergrundtyp, die Farbe, die Position, die zweite Farbe, die Position, den Typ, den Winkel usw. unter dem Wrapper ändern. Die Optionen sowohl für die Vorder- als auch für die Rückseite der Flip-Box können individuell angepasst werden. 

Symbol: Durch die Erweiterung dieser Option. Sie können die Farbe, den Hintergrundtyp, den Boxschatten, den Rahmentyp und andere Einstellungen sowohl für die normale als auch für die Hover-Ansicht ändern. Sowohl das vordere als auch das hintere Ende der Flipbox können mit individuellen Symbolstilen versehen werden.  

Titel: Von hier aus können Sie Ändern Sie die Typografie, Titelfarbe und Titelrand für beide Seiten der Flipbox.

Untertitel: Ändern Sie diese Option, um die Typografie, die Titelfarbe und den Titelrand des Untertitels für beide Seiten der Flipbox anzupassen.

Beschreibung: Hier können Sie die Typografie, die Beschreibungsfarbe und den Rand der Beschreibung für beide Seiten der Flipbox anpassen.

Taste: Erweitern Sie den Schaltflächenbereich, um Textfarbe, Hintergrundfarbe, Rahmentyp, Rahmenradius, Rahmenrahmen und andere Einstellungen zu ändern. Die Schaltfläche kann sowohl für die normale Ansicht als auch für die Hover-Ansicht gestaltet werden. 

Klicken Sie abschließend auf „Veröffentlichen/Aktualisieren“, um die Änderungen zu speichern und eine Vorschau Ihrer Elementor-Flipbox anzuzeigen:

Übersichtliches Diagramm

Bestes Flipbox-Overlays- und Hovers-Plugin für WordPress 

Hier ist mein Überblick über zwei beliebte Flipbox-Overlays und Hover-Plugins für WordPress nebeneinander. Diese sind Elementor Und ElementsKit Flipbox Plugins. Guck mal

Elementor Flipbox-Plugin

Elementor ist ein weit verbreitetes und hoch angesehenes Seitenerstellungs-Plugin für WordPress. Es bietet ein Flipbox-Widget, mit dem Sie atemberaubende Flip-Animationen auf Ihrer Website erstellen können. Mit Elementorkönnen Sie ganz einfach interaktive Flip-Effekte zu Ihren Bildern, Symbolen, Titeln und Beschreibungen hinzufügen. Das Plugin bietet eine benutzerfreundliche Oberfläche, über die Sie die Flip-Richtung, den Animationsstil, das Auslöseereignis (Hover, Klick) und verschiedene Designelemente anpassen können. Elementor ist bekannt für seine Flexibilität, umfangreiche Gestaltungsmöglichkeiten und Kompatibilität mit verschiedenen Themes.

ElementsKit Flipbox-Plugin

ElementsKit ist ein umfassendes Zusatzpaket für Elementor, das dessen Funktionalität erweitert. Es gibt ein spezielles Flipbox-Modul ElementsKit. Es fügt Ihrer Elementor-basierten Website erweiterte Flipbox-Funktionen und -Effekte hinzu. Dieses Plugin bietet eine umfangreiche Bibliothek vorgefertigter Flipbox-Vorlagen. Dadurch können Sie schnell optisch ansprechende Flip-Animationen erstellen. ElementsKit Flipbox Das Plugin bietet außerdem zusätzliche Anpassungsoptionen. Sie können verschiedene Flipbox-Stile, Overlay-Effekte, Hover-Effekte und verschiedene Triggerereignisse verwenden. Es lässt sich nahtlos in Elementor integrieren und bietet eine nahtlose Benutzererfahrung beim Entwerfen faszinierender Flipbox-Elemente.

Sowohl das Elementor Flipbox Plugin als auch das ElementsKit Flipbox Plugin können die beste Wahl für Sie sein. Diese bringen interaktive und ansprechende Flip-Animationen auf Websites. Diese Plugins verfügen über benutzerfreundliche Oberflächen und umfangreiche Anpassungsmöglichkeiten. Außerdem sind diese mit dem Elementor-Seitenersteller kompatibel. Es besteht keine Notwendigkeit, Codes zu schreiben. Diese Plugins erleichtern Ihnen also die Erstellung optisch ansprechender und interaktiver Flipbox-Elemente.

Häufig gestellte Fragen (FAQs)

Wie fügt man in WordPress einen Hover-Effekt hinzu?

Um in WordPress einen Hover-Effekt hinzuzufügen, können Sie CSS oder Plugins verwenden, die Hover-Effekt-Funktionen bieten. Viele Seitenersteller und Customizer-Plugins bieten Optionen zum Hinzufügen von Hover-Effekten zu verschiedenen Elementen, einschließlich Flipboxen.

Wie erstellt man eine Flipbox in WordPress?

Sie können eine Flipbox in WordPress mit speziellen Flipbox-Plugins wie ElementsKit erstellen. Mit diesen Plugins können Sie Flipbox-Elemente einfach erstellen und anpassen, ohne dass Programmierkenntnisse erforderlich sind.

Wie fügt man in WordPress ein Hover-Bild hinzu?

Um in WordPress ein Hover-Bild hinzuzufügen, können Sie CSS oder Plugins verwenden, die Hover-Effekte für Bilder bereitstellen. Diese Plugins verfügen normalerweise über Optionen zum Festlegen eines anderen Bilds oder zum Ändern des Erscheinungsbilds, wenn Sie mit der Maus über ein Bildelement fahren.

Wie zeigt man Inhalte beim Hover in WordPress an?

Sie können Inhalte beim Hover in WordPress mit verschiedenen Methoden anzeigen. Eine Möglichkeit besteht darin, mithilfe von CSS versteckte Inhalte anzuzeigen, wenn Sie mit der Maus über ein bestimmtes Element fahren. Alternativ bieten Flipbox-Plugins häufig Optionen zum Anzeigen unterschiedlicher Inhalte auf der Vorder- und Rückseite der Flipbox, die beim Bewegen der Maus sichtbar sind.

Einpacken

Das Hinzufügen von Flipbox-Overlays und Hovers zu Ihrer WordPress-Site kann das Benutzererlebnis erheblich verbessern und Ihre Inhalte ansprechender machen. Wenn Sie der Schritt-für-Schritt-Anleitung in diesem Blogbeitrag folgen und beliebte Flipbox-Plugins wie ElementsKit verwenden, können Sie ganz einfach und ohne Programmierkenntnisse beeindruckende Flipbox-Effekte erstellen. Peppen Sie Ihre Website also mit Flipbox-Overlays und Hovern auf und fesseln Sie Ihre Website-Besucher mit interaktiven und optisch ansprechenden Inhalten.