Eine Karte, die beim Hover umdreht, zeigt auf demselben Feld den doppelten Inhalt an Das freie Flipbox-widget In Master-Addons für Elementor Gibt Ihnen ein zweiseitiges Kästchen: eine Vorderseite mit Symbol, Titel und Beschreibung und eine Rückseite, die mit eigenem Text und einer Schaltfläche in Sichtweite verschoben wird.
Man wählt eine Animation aus, füllt beide Gesichter aus, fügt einen Button hinzu, dann stylt man jede Seite, es gibt 22 Flip-Effekte: 6 im kostenlosen Plugin und 16 weitere mit Master Addons Pro, von einem einfachen Fade zu einem 3 D Cube Dieser Guide geht durch jede Einstellung im Widget.
Was das Flipbox-Widget macht #
Das Widget baut aus zwei Gesichtern eine Flipcard Die Frontkasten Ist, was die Besucher zuerst sehen: ein Symbol oder Bild, ein Titel, und eine Beschreibung Bewegen Sie den Mauszeiger darüber und die Karte dreht sich zum Rückbox, das seinen eigenen Titel, seine eigene Beschreibung und eine Schaltfläche hat, die überall verlinken kann.
Drei Tabs führen das Ganze aus. Inhalt Hält die Animation, den Vorder- und Rücktext sowie die Schaltfläche. Stil Behandelt die Kastenhöhe, Ränder, Farben und Typografie für jedes Gesicht. Fortgeschritten Ist der übliche Elementorabstand und die Sichtbarkeit.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Der Text und die Symbole für beide Seiten sowie der Link für die Rückseite.
So fügen Sie das Flipbox-Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Flipbox, oder scrollen Sie zum Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf die Seite und es wird mit einer Beispielvorder - und - rückseite geladen, die Sie bearbeiten können.
Legen Sie den Animationsstil fest #
Öffnen Sie die Inhalt Tab. Die Stilvoreinstellung Abschnitt hält die Designvariation und die Animationsstil, und darunter sitzen die Abschnitte Front Box, Back Box und Action Button.
Die Animationsstil Dropdown ist der lustige Teil Es trägt 22 Optionen, so kann dieselbe Karte umdrehen, verblassen, gleiten oder sich den Weg zur Rückseite würfeln. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade und Fade Up sind kostenlos; der Rest braucht Pro.
- Horizontal umdrehen und vertikal umdrehen: Der klassische Karten-Flip auf jeder Achse.
- Würfel (oben unten, unten oben, links rechts, rechts links): einer 3 D-Würfeldrehung zwischen Flächen (Pro).
- Fade and Fade Up (kostenlos), 3 d Flip and Rollover (Pro): Weichere Enthüllungen, wenn man etwas Subtiles will.
- Folienanweisungen und Diagonale (Pro): Drücken Sie die Rückseite von einer Seite oder einer Ecke nach innen.
Richten Sie die Frontbox ein #
Öffnen Sie die Frontkasten Abschnitt. Das ist das Gesicht, das die Leute sehen, bevor sie schweben, also muss es sich den Flip verdienen.
- Symbolstil und Symbol: Wählen Sie ein Symbol aus der Bibliothek. Ein Bild auf der Vorderseite wird mit der Designvariante Front Image in Pro geliefert.
- Titel und Beschreibung: Die vordere Überschrift und der Text, jeweils mit einer Option Schreiben mit KI.
- Ausrichtung und Titel HTML Tag: Richten Sie den Inhalt aus und legen Sie die Überschriftenebene (H1 bis H6) fest.
Richten Sie die hintere Box ein #
Öffnen Sie die Rückbox Abschnitt für das Gesicht, das in Sichtweite blättert Es nimmt die gleichen Felder wie die Vorderseite, so dass ein kurzer Teaser nach vorne zum echten Detail auf der Rückseite führen kann.
- Symbol: Ein separates Symbol für die Rückseite.
- Titel und Beschreibung: Die Rückseite Überschrift und Text.
- Ausrichtung und HTML-Tag: Layout und Überschriftsebene für die Rückseite.
Fügen Sie den Aktionsknopf hinzu #
Die Aktionstaste Abschnitt lebt auf der Rückseite Setzen Sie das Etikett und wo es zeigt, so kann ein Hover direkt zu einem Produkt, einem Formular, oder einer anderen Seite führen.
- Tastentext: Das Label, wie Get Started oder Learn More.
- Link zu: Die URL, die der Button öffnet, mit den üblichen Elementor-Linkoptionen.
Style die Flip Card #
Öffnen Sie die Stil Tab. Die General Abschnitt legt die Grenze fest und, auf die Einstellung, die hier am wichtigsten ist, die Höhe der Flip-Box, was beiden Seiten eine feste Größe verleiht.
Unter Allgemein wird man getrennt Frontkasten und Rückbox Abschnitte. Jedes hat seine eigene Hintergrundfarbe oder Bild, Titel - und Beschreibungsfarben, Typografie, und Symbolfarbe, so dass die beiden Gesichter nichts gleich aussehen können, wenn Sie möchten.
Häufige Anwendungsfälle #
- Dienstkarten Mit einem Symbol auf der Vorderseite und Details plus einem Knopf auf der Rückseite.
- Teammitglieder Zeigt ein Foto auf der Vorderseite und eine Biografie auf dem Flip.
- Produkt Highlights Das zeigt den Preis und einen Kaufbutton im Schwebeflug.
- Merkmalsgitter Wo jede Karte zu einer kurzen Erklärung umdreht.
- Portfolio-fliesen Mit Miniaturansicht vorne und einem Projektlink auf der Rückseite.
Tipps für die Arbeit mit dem Flipbox Widget #
- Legen Sie eine feste Höhe fest. Die Höhe der Flip Box behält beide Gesichter gleich groß, sodass die Karte beim Umdrehen nicht springt. Lassen Sie sie ungesetzt und eine längere Rückseite ändert die Größe der Karte mitten im Schwebeflug, was aus der Luft schaut.
- Halten Sie den Text kurz zurück. Die Rückseite blättert schnell ein, sodass eine enge Linie und ein Knopf besser lesen als ein vollständiger Absatz.
- Passen Sie die Animation der Stimmung an. Fade passt zu einer ruhigen Seite; 3 D Flip und Cube passen zu einem mutigen Helden.
- Kontrastieren Sie die beiden Gesichter. Eine andere Hintergrundfarbe auf der Rückseite macht den Flip auf einen Blick offensichtlich.
- Verlinken Sie immer den Button. Die Rückseite Taste ist die Auszahlung, also richten Sie es auf den nächsten Schritt.
Sehen Sie sich das Video-Tutorial an #
Bevorzugen Sie, auf dem Bildschirm mitzumachen? Das Video-Tutorial unten geht von Anfang bis Ende durch das Flipbox-Element und zeigt, wie die Animationsstile, Vorder- und Rückseite sowie das Styling im Elementor-Editor funktionieren.
Häufig gestellte Fragen #
Was ist das Flipbox-Widget in Master Addons?
Es handelt sich um ein Elementor-Widget, das eine zweiseitige Karte erstellt. Die Vorderseite zeigt ein Symbol, einen Titel und eine Beschreibung, und im Schwebeflug wechselt sie zu einer Rückseite mit eigenem Text und einer Schaltfläche. Alles wird aus dem Elementor-Panel ohne Code eingestellt.
Wie viele Flip-Animationen hat das Flipbox-Widget?
Der Dropdown im Animationsstil umfasst 22 Effekte, 6 kostenlose und 16 mit Pro, wie z. B. Flip Horizontal, Flip Vertical, Fade, Fade Up, Rollover, 3 d Flip, die Cube-Varianten, Slide Directions und Diagonal. Sie wählen einen pro Karte aus, um zu steuern, wie die Rückseite erscheint.
Kann ich der Flipkarte einen Button hinzufügen?
Ja. Der Abschnitt Aktionstaste im Reiter Inhalt setzt das Button-Label und dessen Link, Der Button sitzt auf der Rückseite, so zeigt er an, wenn die Karte umdreht, was es zu einem natürlichen Ort macht, Besucher zu einem Produkt oder Formular zu schicken.
Kann ich ein Bild anstelle eines Symbols auf der Vorderseite verwenden?
Ja. Verwenden Sie die Designvariante Front Image, eine Master Addons Pro-Option, um ein Bild auf die Vorderseite zu legen. Mit der Registerkarte Stil können Sie außerdem ein Hintergrundbild für beide Seiten festlegen, sodass bildgeführte Flip-Karten einfach zu erstellen sind.
Wie halte ich beide Seiten der Flipkarte gleich groß?
Stellen Sie die Höhe des Flip-Boxs im allgemeinen Abschnitt der Registerkarte Stil ein. Es gibt beiden Seiten eine feste Höhe, sodass die Karte vor und nach dem Flip die gleiche Größe behält, anstatt die Größe an den Inhalt jeder Seite anzupassen.
Einwickelnd #
Das Flipbox-Widget verwandelt eine flache Karte in eine interaktive: Wählen Sie eine Animation aus, füllen Sie die Vorder- und Rückseite aus, verknüpfen Sie die Schaltfläche und stylen Sie dann jede Seite. Zu verwandten Widgets siehe die Info-Box-Widget und die Widget für TeammitgliederDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Flipbox-Widget-Seite Für Demos und einen Vergleich mit der Elementor Pro Flip Box.
