Kostenloses Elementor-Flip-Box-Widget mit Hover-Flip-Animationen
Flipbox ist ein kostenloses Master Addons Flip Box Widget für Elementor Die Vorderseite zeigt ein Symbol oder Bild mit einem Titel und kurzem Text, und beim Hover dreht sich die Karte zu einer Rückseite mit mehr Details und einem Aktionstaste Das kostenlose Plugin enthält die Designs Standard und Front Icon und 6 Animationen: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade und Fade Up. Master Addons Pro Fügt die Front Image und Diagonal Designs und 16 weitere Animationen, darunter Cube, Rollover und 3 D Flip, für insgesamt 22. Free Elementor hat kein Flip-Box-Widget, so dass dies ohne Elementor Pro funktioniert.
Designvariationen und Flip-Animationen
Designvariation Legt das vordere Layout fest: Standard und vorderes Symbol sind kostenlos, vorderes Bild und Diagonale benötigen Pro. Animationsstil Stellt ein, wie sich die Karte dreht Frei: Horizontal umdrehen, Vertikal umdrehen, Fade, Flip Box, Flip Box Fade und Fade Up Pro fügt vier Würfelrichtungen, Fade Hideback, Fade Up Hideback, vier Folienrichtungen, zwei Diagonal-Folien, Fade In Out, Nananana, Rollover und 3 D Flip hinzu, das eine eigene Richtungseinstellung hat.
- Insgesamt 22 Animationen: 6 kostenlos und 16 mit Pro.
- Der Flip läuft auf dem Desktop mit dem Hover und auf Touchscreens mit dem Tippen.
- Verwenden Sie eine Animation pro Abschnitt, damit sich eine Kartenreihe konsistent anfühlt.
Dual-Side-Content-Builder
Die Frontkasten und Rückbox Jeder hat sein eigenes Symbol mit Standard, Stapel - oder Rahmenansicht und Kreis - oder Quadratur, einen Titel, eine Beschreibung, Ausrichtung und ein Überschriften-Tag Halten Sie die Vorderseite kurz, wie einen Dienstnamen, und verwenden Sie die Rückseite für die Erklärung Im Register Stil erhält jedes Gesicht seinen eigenen Hintergrund, Titel - und Beschreibungsfarben, Typografie, Symbolfarben und Rand.
- Separater Inhalt und Styling für jedes Gesicht.
- Titel HTML Tag auf beiden Seiten, so dass ein Raster von Karten eine saubere Überschrift Reihenfolge hält.
- A Höhe der Flip-Box Einstellung in Allgemein hält beide Gesichter gleich groß.
CTA-Taste mit Hover
Die Aktionstaste Auf der Rückseite mit Ihrem Button Text und Link zeigt an Style it for Normal and Hover mit Textfarbe, Hintergrund, Rand, Randradius und Auffüllung, plus Typografie Der Button ist der einzige Link im Inneren des Widgets, um die ganze Karte anklickbar zu machen, füge das kostenlose hinzu Wrapper Link Erweiterung zum Widget.
- Verwenden Sie ein bestimmtes Label wie “Siehe Preise”, wenn der Link dorthin führt.
- Überspringen Sie den Knopf bei reinen Informationskarten.
- Wenn Sie Wrapper Link verwenden, zeigen Sie den Button auf dieselbe Seite.
Elementor Pro Flip Box vs. Master Addons Flipbox
Elementor Pro hat ein eigenes Flip Box Widget, wer schon dafür bezahlt, braucht vielleicht kein weiteres Hier ist der Vergleich der beiden.
| Merkmal | Elementor Pro Flip Box | Master Addons Flipbox |
|---|---|---|
| Preis | Benötigt Elementor Pro | Kostenlos, mit mehr Designs und Animationen in Pro |
| Flip-effekte | Flip, Slide, Push, Zoom In, Zoom Out und Fade, mit Richtung und 3 D Tiefe | 6 kostenlose Animationen, 22 mit Pro, darunter Cube, Rollover und 3 D Flip |
| Frontgrafik | Keine, Bild oder Symbol | Symbol oder ein Bild mit dem Pro Front Image-Design |
| Ganzer Kartenlink | Link auftragen: Nur ganze Box oder Schaltfläche | Nur Schaltfläche oder die gesamte Karte mit der kostenlosen Wrapper Link-Erweiterung |
| Knopf | Ja | Ja, mit Normal und Hover Styling |
Elementor Pro ist einfacher, wenn Sie eine Ganzkistenverbindung einbauen möchten Master Addons passt zu kostenlosen Elementor-Sites und bietet mehr Animationsoptionen mit Pro. Für eine statische Karte ohne versteckte Inhalte verwenden Sie die kostenlose Info-box Widget.
Flip Box Ideen und Tipps
Eine Flipbox hält ein Gitter sauber und trägt dabei immer noch Details, denn die Beschreibung sitzt hinter der Karte statt darunter, sie funktioniert gut für Servicegitter, Teamkarten mit einem Foto auf der Vorderseite und einer Biografie auf der Rückseite, verfügt über Plättchen und Stat-Karten, die auf das umdrehen, was eine Zahl bedeutet.
- Legen Sie die Höhe der Flip-Box fest. Ohne sie ändert eine längere Rückseite die Größe der Karte, während sie sich dreht und die Reihe springt.
- Lass die Gesichter anders aussehen. Eine Tönung auf der Vorderseite und Ihre Markenfarbe auf der Rückseite machen den Flip offensichtlich.
- Planen Sie Telefone ein. Touch-Screens haben keinen Hover, daher dreht sich die Karte beim Tippen und der Knopf braucht einen zweiten Tipp Test auf einem echten Telefon.
- Bewahren Sie wesentliche Details auf der Vorderseite auf. Preise, Telefonnummern und Buchungslinks sollten nicht nur auf der Rückseite wohnen.
- Begrenzen Sie die Bewegung. Ein oder zwei Flip-Box-Zeilen pro Seite lesen sich besser als sechs verschiedene Animationen.
So fügen Sie eine Flip-Box in Elementor hinzu
Sie benötigen Elementor und das kostenlose Master Addons Plugin von WordPress.org.
- Überprüfen Sie, ob die Flipbox eingeschaltet ist Master-Addons, Widgets.
- Suchen Sie im Elementor-Editor nach Flipbox Und in einen Container ziehen.
- Wählen Sie eine Designvariante und einen Animationsstil aus und bewegen Sie dann die Karte mit der Maus, um eine Vorschau anzuzeigen.
- Füllen Sie das Front-Box- und Back-Box-Symbol aus: Symbol, Titel, Beschreibung und Überschriften-Tag.
- Fügen Sie den Text und Link der Aktionstaste hinzu.
- Im Stil, Allgemein, Satz Höhe der Flip-Box Die Größe der Karte ändert sich also nicht in der Mitte des Flips und dann wird jedes Gesicht gestylt.
Für 3 D-Effekte lesen Sie So erstellen Sie 3 D Elementor Flipbox Animationen. Jede Einstellung ist in der Einstellungen für das Flipbox-Widget.
Häufig gestellte Fragen für Flipbox
Wie funktioniert die Flipbox bei Telefonen?
Touchscreens haben keinen Hover, daher dreht die Karte beim Tippen um, die Taste für die Rückseite benötigt nach dem Flip einen eigenen TippMuss-Informationen auf der Vorderseite aufbewahren und auf einem echten Gerät testen.
Kann ich ein Bild anstelle eines Symbols auf der Vorderseite verwenden?
Ja, mit der Designvariante Front Image, die eine Master Addons Pro Option ist, verwenden Sie in der kostenlosen Version ein Symbol auf der Vorderseite oder legen Sie ein Hintergrundbild für das Gesicht im Tab Stil fest.
Ist das Flipbox Widget kostenlos?
Ja. Flipbox ist im kostenlosen Master Addons Plugin mit den Default und Front Icon Designs und 6 Animationen Master Addons Pro fügt 2 weitere Designs und 16 weitere Animationen hinzu.
Hat Elementor ein Flip-Box-Widget?
Nur Elementor Pro hat einen Free Elementor nicht, also auf free Elementor benötigen Sie ein Addon wie dieses Flipbox-Widget.
Kann ich die gesamte Flipbox ohne den separaten Button mit einer Seite verknüpfen?
Das Widget verlinkt nur den Button Damit die ganze Karte anklickbar ist, schalten Sie die kostenlose Wrapper Link Erweiterung und fügen Sie den Link zum Flipbox-Widget hinzu.
Wie viele Flip-Animationen gibt es?
Insgesamt 22. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade und Fade Up sind kostenlos Die anderen 16, inklusive Cube, Rollover und 3 D Flip, benötigen Master Addons Pro.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
