Elementor Flip Box Widget mit Hover Flip Card Animationen
Flipbox ist ein Master Addons Flip Box Widget für Elementor, ohne Elementor Pro benötigt Die Vorderseite zeigt ein Symbol oder Bild mit einem Titel und kurzen Text, und beim Schweben dreht sich die Karte zu einer Rückseite mit mehr Details und einer Aktionstaste Das Widget wird mit den Default und Front Icon Designs und 6 Animationen geliefert: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade und Fade Up. Master Add-dons Pro Fügt die Designs Front Image und Diagonal und 16 weitere Animationen, darunter Cube, Rollover und 3 D Flip, für insgesamt 22. Elementor selbst hat nur eine Flip-Box in Elementor Pro.
Designvariationen und Flip-Animationen
Designvariation Legt das vordere Layout fest: Standard und vorderes Symbol werden mit dem Widget geliefert, vorderes Bild und Diagonale benötigen Pro. Animationsstil Stellt ein, wie sich die Karte dreht Enthalten: Horizontal drehen, Vertikal drehen, 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 inklusive 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.
- ein 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 die 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.
Flipbox im Überblick
In der Tabelle ist aufgeführt, was das Widget heute macht, gelesen aus der Plugin-Quelle in Version 3.2.6.
| Artikel | Flipbox |
|---|---|
| Designvariationen | 4: Standard- und Frontsymbol enthalten; Vorderes Bild und Diagonale mit Pro |
| Animationen | 22: 6 inklusive (Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade, Fade Up) und 16 mit Pro (vier Würfelrichtungen, zwei Hideback Fades, vier Slides, zwei Diagonal Slides, Fade In Out, Nananana, Rollover, 3 D Flip) |
| Vorder - und Rückseite Inhalt | Symbol oder Bild (Bild mit dem Pro Front Image-Design), Titel mit eigenem HTML-Tag, Beschreibung und Ausrichtung auf jeder Seite |
| Symbolstil | Standardmäßig gestapelt oder gerahmt, mit einer Kreis- oder Quadraturform |
| Auslösen | Fahren Sie mit der Maus auf den Desktop und tippen Sie zunächst auf Touchscreens. Kein Klickauslöser |
| Ganzkistenlink | Nein. Die Zurück-Taste trägt den Link; Die Wrapper Link-Erweiterung macht die gesamte Karte anklickbar |
| Höhenkontrolle | Ja, Flip Box Höhe im Stil, Allgemein |
| Karussellmodus | Nein |
| 3 D-Wenderichtung | 4 Richtungen auf der Pro 3 D Flip Animation |
| Bedürfnisse | Elementor - und Master-Addons. Pro für die beiden Extra-Designs und die 16 Extra-Animationen |
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 | Master Addons; mehr Designs und Animationen in Pro |
| Flip-effekte | Flip, Slide, Push, Zoom In, Zoom Out und Fade, mit Richtung und 3 D Tiefe | 6 inklusive Animationen, 22 mit Pro, darunter Cube, Rollover und 3 D Flip |
| Auslösen | Schweben | Bewegen Sie den Mauszeiger; Tippen Sie zunächst auf Touchscreens |
| 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 Wrapper Link-Erweiterung |
| Knopf | Ja | Ja, mit Normal und Hover Styling |
Elementor Pro ist einfacher, wenn Sie eine Ganzkistenverbindung einbauen möchten Master Addons funktioniert auf Elementor ohne Pro und bietet mehr Animationsoptionen mit seinem eigenen Pro. Für eine statische Karte ohne verborgenes verwenden Sie die Info-box Widget.
Flipcard CSS oder ein Flipbox Widget?
Eine Flip-Karte ist dasselbe wie eine Flip-Box: eine Vorderseite, die sich zu einer Rückseite dreht. Sie können eine mit etwa 40 Zeilen CSS perspektivisch, transform-style: conserv-3 d und backface-visibility: versteckt handschreiben und in ein HTML-Widget fallen lassen. Dieser Weg ist für eine Karte auf einer von Ihnen kontrollierten Seite in Ordnung.
Die CSS-Version hat drei wiederkehrende Probleme Touch-Bildschirme haben keinen Schwebeflug, daher wird die Karte nie umgedreht, es sei denn, Sie fügen einen Tap-Handler hinzu. Beide Gesichter benötigen eine feste Höhe oder die Karte springt, wenn sie sich dreht. Und jede Änderung in Farbe, Text oder Symbol bedeutet, dass Sie den Code erneut bearbeiten, oft in einem benutzerdefinierten CSS-Feld, das Elementor Pro benötigt. Das Flipbox-Widget übernimmt den Tippvorgang, die Höhe und das Design vom Editor-Panel aus und bietet Ihnen eine Backface-Taste, 22 Animationen und eine Designvariation pro Karte, ohne Code zu berühren.
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.
Flip-Box-Beispiele
Jede Demo unten ist eine Live-Seite, die mit dem Widget erstellt wurde. Die Animations- und Designvariation ist benannt, sodass Sie jede davon aus dem Panel neu erstellen können.
Vertikal kippen
- SaaS-Analysekarten: Standarddesign, drei dunkle Stat-Karten, die sich einer Planbeschreibung zuwenden.
- Gerätekartenraster: Standarddesign, sechs Produktfliesen in einem zweireihigen Raster.
- Stat und Artenraster: Standard-Design, eine Zahl auf der Vorderseite und die Bedeutung auf der Rückseite.
- Arch Produktkarten: Standarddesign mit abgerundeter Bogenform auf der Vorderseite.
Horizontal umdrehen
- Nur-Icon-Service-Kacheln: Front Icon Design, vier gerahmte Icons, die sich in einen kurzen Service Klappentext verwandeln.
- Bento Service Fliesen: Gemischte Standard- und vordere Symbolkarten in einem Bento-Layout.
- Gestaffelte Disziplinarkarten: Standarddesign, drei Karten gegeneinander versetzt.
- Minimale Symbolkacheln: Front Icon Design, drei dunkle Kacheln mit je einem Icon.
Schwinden
- Vorderbild Reisekarten: Front Image Design (Pro), ein Foto auf der Vorderseite und die Fahrtdetails auf der Rückseite.
- Nummerierte Kapitelzeilen: Standarddesign, breite Zeilen, die zu einer Kapitelzusammenfassung übergehen.
- Zeitleistenlaufbuchzeilen: Standarddesign, Schrittkarten, die zu den Anweisungen verblassen.
Flip Box und Würfel
- Rundmarkenvitrine: Flip-Box-Animation auf runden Karten.
- Diagonalziegel: Diagonales Design (Pro) mit der Cube Left Right Animation (Pro).
- Erweiterte Transformationseffekte: Flipbox-Karten kombiniert mit der Transforms-Erweiterung.
3 D Flip und Slides
- Kaffeeproduktkarten: 3 D Flip Animation (Pro), Slide Right to Left Richtung.
- Interaktives Medien-Showcase: 3 D Flip (Pro) mit einer anderen Richtung auf jeder Karte.
- Multi-icon-karten: Links nach rechts, Rechts nach Links und von oben nach unten Folien (Pro) in einer Reihe.
Rollover, Diagonale und Fade In Out
- Dunkle Sportunterrichtskarten: Rollover-Animation (Pro) zu einem dunklen Thema.
- Pastell-Symbol-Kacheln: Front Icon Design mit der Diagonal Bottom to Top Animation (Pro).
- Gradientenrückkarten: Fade In Out-Animation (Pro) zu einer Farbverlaufsrückseite.
So fügen Sie eine Flip-Box in Elementor hinzu
Sie benötigen Elementor und das 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.
Flipbox-Paare mit einigen anderen Master Addons Widgets: Info-box Für eine Karte, die nie umdreht Kreativer Knopf Für einen gestylten Call to Action unter einem Raster, die Bild-Hover-Effekte Für ein Foto, das eine Bildunterschrift anstelle einer Rückseite zeigt, Teammitglied Für Personen Karten mit sozialen Links, und Inhalte umschalten Wenn die Enthüllung auf Klick statt mit dem Mauszeiger erfolgen muss.
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, ansonsten ein Icon auf der Vorderseite verwenden oder ein Hintergrundbild für das Gesicht im Tab Stil einstellen.
Brauche ich Master Addons Pro für das Flipbox Widget?
No. Flipbox kommt mit dem 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.
Flippt die Flipbox auf Klick?
Nein. Das Widget dreht sich beim Hover, und auf Touchscreens dreht der erste Tipp die Karte um, auf dem Desktop gibt es keinen Klickauslöser Für ein Panel, das sich beim Klicken öffnet, verwenden Sie die Inhalte umschalten Widget oder ein Popup-builder Popup.
Ist eine Flipcard dasselbe wie eine Flipbox?
Ja. Flipcard ist der CSS-Tutorialname für den gleichen Effekt: eine Vorderseite, die sich zu einer Rückseite dreht Das Flipbox-Widget baut eine Flipcard aus dem Editor-Panel, wobei die Höhe, der Tipp auf Touchscreens und die Backface-Taste für Sie verarbeitet werden.
Hat Elementor ein Flip-Box-Widget?
Nur Elementor Pro hat einen Elementor ohne Pro nicht, daher 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 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 kommen mit dem Widget Die anderen 16, inklusive Cube, Rollover und 3 D Flip, brauchen Master Addons Pro.
Kann ich Flipboxen in ein Karussell stecken?
Nicht mit eingebauter Einstellung Das Widget hat keinen Karussellmodus Speichern Sie eine Flipbox als Vorlage und zeigen Sie diese in der Bild Karussell oder ein Schleifenraster, oder legen Sie die Karten stattdessen in einen Verpackungsbehälter.
Was ist der Unterschied zur Elementor Pro Flip Box?
Elementor Pro hat sechs Effekte mit Richtung und 3 D-Tiefe, eine Whole-Box-Link-Option und benötigt einen Elementor Pro-Plan Flipbox arbeitet auf Elementor ohne Pro, hat 6 enthaltene Animationen und 22 mit Master Addons Pro, zwei Icon - oder Bilddesigns, und verknüpft die ganze Karte durch die Wrapper Link-Erweiterung.
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
