Elementor FlipBox Widget: Interaktive Hover-Karten erstellen (kostenloses Tutorial)

Eine Flipbox ist eine Karte mit zwei Gesichtern, Die Vorderseite trägt ein Symbol und einen kurzen Titel Bewegen Sie den Mauszeiger, und die Karte dreht sich zu einer Rückseite, die die Beschreibung und einen Knopf hält Elementor Pro versendet einen, Sie brauchen kein Pro, um einen zu bekommen.

Die freie Master Addons Flipbox Widget Fügt einen zum regulären Elementor hinzu, mit über dreißig Flip-animationen„Beide Gesichter werden unabhängig voneinander gestaltet und eine Schaltfläche, die verlinkt, wohin Sie möchten. Diese Anleitung behandelt den Build, die einzige Einstellung, die die meisten Flip-Probleme behebt, und das mobile Verhalten, das Menschen nach der Veröffentlichung auffängt.

Was eine Flipbox eigentlich ist

Eine Flipbox ist eine zweiseitige Karte, die beim Hover oder Tippen Gesichter vertauscht, die Vorderseite zeigt ein Icon oder Bild mit einem Titel Die Rückseite zeigt eine längere Beschreibung und meist einen Knopf, Sie hält ein Gitter sauber, während sie das Detail noch trägt, denn die Beschreibung sitzt hinter der Karte statt darunter.

Man zeigt zuerst eine scannbare Reihe, dann lässt jeder Interessierte das Detail selbst ziehen, niemand muss eine Wand des Kopierens lesen, um den einen Dienst zu finden, für den er gekommen ist Das ist der Grund, nach einem zu greifen.

Vier Muster, mit denen es gut zurechtkommt:

• Servicegitter. Front benennt den Dienst, back erklärt ihn und verlinkt auf die Service-Seite.
• Mannschaftskarten. Foto und Name auf der Vorderseite, Bio und ein Link auf der Rückseite Wenn nichts versteckt werden muss, eine Plain Teammitglieder Sektion Ist der einfachere Build.
• Merkmal Fliesen. Symbol vorne, die Spezifikation dahinter.
• Stat-karten. Eine große Zahl auf der Vorderseite, die auf das umschlägt, was die Zahl bedeutet.

Hat Elementor ein Flip-Box-Widget?

Elementor Pro hat eine Free Elementor nicht Diese Unterscheidung ist wichtig, denn viele Tutorials verwischen sie und dann machen sich die Leute auf die Suche nach einem Widget, das nicht in ihrem Panel ist.

Es gibt also vier ehrliche Wege zu einer Flipbox, und jeder verlangt etwas anderes:

Wenn Sie bereits für Elementor Pro bezahlen, verwenden Sie dessen Flip Box und überspringen Sie das zusätzliche Plugin. Es gibt keinen Preis für die Installation von etwas, das Sie nicht benötigen. Wenn Sie auf kostenlosem Elementor sind, ist der Rest dieses Leitfadens Ihre Route.

Bevor Sie beginnen

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor installiert und aktiv Es ist kostenlos auf WordPress.org und läuft auf 30.000+ Seiten.
• Die Icons, Kopie und Ziellink für beide Gesichter Sortieren Sie diese zuerst Eine Karte zu entwerfen, während Sie die Kopie erfinden, so landen Sie bei “Lorem ipsum” auf einer Live-Seite.

Bauen Sie Schritt für Schritt eine Flipbox

Schritt 1: Aktivieren Sie das Flipbox-Widget

Master Addons behält jedes Widget hinter einem Kipphebel, damit die, die Sie nicht verwenden, nie geladen werden Gehen Sie zu Master Addons → EinstellungenÖffnen Sie die Elemente Tab, Flipbox finden, einschalten, speichern.

Kein Umschalten? das Plugin aktualisieren Der Reiter Elemente ist zwischen Versionen gewachsen und ältere Builds gruppieren Dinge anders.

Schritt 2: Lassen Sie das Widget auf der Seite fallen

Jede Seite mit Elementor bearbeiten, “Flipbox” in die Widget-Suche eingeben, in einen Container ziehen, Auf beiden Seiten lädt es mit Beispielinhalten, bereits umdrehend.

Bewegen Sie den Mauszeiger in der Vorschau, bevor Sie eine Sache ändern Sie möchten ein Gefühl für die Standard-Animationsgeschwindigkeit, denn das ist die Einstellung, die Menschen am häufigsten in Ruhe lassen und sich dann fragen, warum die Karte träge wirkt.

Schritt 3: Wählen Sie eine Designvariante aus

Die Registerkarte Inhalt öffnet sich auf einem Stilvoreinstellung Abschnitt mit zwei Bedienelementen: Designvariation und Animationsstil. Darunter befinden sich Frontbox, Backbox und Action-Taste.

Design Variation verändert die Anordnung der Vorderseite Die praktische Entscheidung ist, ob ein Symbol oder ein Foto Ihre Botschaft trägt Icon-led Variationen passen zu Servicegittern und Feature-Reihen Bild-geführte Variationen passen zu Teammitgliedern, Portfolio-Plättchen und Produktkarten, wo ein Gesicht oder ein Foto mehr Arbeit leistet, als irgendein Icon könnte.

Schritt 4: Wählen Sie die Animation

Der Dropdown im Animation Style bringt mehr als dreißig Effekte mit sich Sie lassen sich in vier Gruppen einteilen:

• Horizontal umdrehen / Vertikal umdrehen. Die klassische Kartendrehung auf jeder Achse Lesbar, und der sichere Standard, wenn Sie keinen Grund haben, etwas anderes auszuwählen.
• Würfel (oben unten, unten oben, links, rechts). Eine 3 D-Würfelrotation zwischen Gesichtern Dramatisch Verwenden Sie es auf einem Helden, nicht auf einem Achtergitter.
• 3 d Flip, Fade, Fade Up, Rollover. Weicher enthüllt für Seiten, die bereits an anderer Stelle Bewegung haben.
• Folienrichtungen und Diagonale. Die Rückseite drückt von einer Seite oder einer Ecke nach innen Diese lesen sich gut auf dem Handy, wo sich eine Drehung schwer anfühlen kann.

Wählen Sie eine aus und legen Sie sich über den Abschnitt hinweg darauf fest Sechs Karten, die sechs verschiedene Wege umdrehen, sehen nicht spielerisch aus, es sieht kaputt aus Der einzige gute Grund zum Mischen ist, wenn sich zwei Abschnitte bewusst getrennt anfühlen müssen.

Möchten Sie Motion Styles nebeneinander sehen, bevor Sie sich verpflichten? Die Leitfaden für Elementoranimationseffekte Vorschau auf die gängigen, und die 3 D Flip Box Komplettlösung Geht tiefer auf die Perspektiveneinstellungen hinter den Optionen Cube und 3 d Flip ein.

Schritt 5: Schreiben Sie die Vorderseite

Offen Frontkasten. Das ist das Gesicht, das den Schwebeflug verdienen muss, also erhält es weniger Kopie, als man denkt, nicht mehr.

• Symbolstil und Symbol. Ziehen Sie aus der Symbolbibliothek oder wechseln Sie zu einem Bild Master Addons versendet zusätzliche Symbolbibliotheken Jenseits von Font Awesome, wenn Sie sie brauchen.
• Titel. Drei bis fünf Wörter Es muss auf einer Zeile in Tablettenbreite überleben.
• Beschreibung. Eine Zeile. Sowohl das Titel - als auch das Beschreibungsfeld haben eine Schreiben Sie mit KI Option in das Panel eingebaut, wenn Sie feststecken.
• Ausrichtung und Titel-HTML-Tag. H1 bis H6. Stellen Sie das richtig ein Ein Raster von sechs Flipboxen mit H2-Titeln innerhalb eines Abschnitts, der bereits ein H2 hat, gibt Ihnen sieben H2 auf der Seite und ein Audit-Tool, das es markiert Die gleiche Sorgfalt gilt für jeden wiederholten Block in einem Benutzerdefiniertes Elementorlayout.

Schritt 6: Schreiben Sie die Rückseite

Gleiche Felder, andere Arbeit. Rückbox Icon, Titel, Beschreibung, Ausrichtung und Überschrift-Tag selbst nimmt, so dass die beiden Gesichter überhaupt nicht übereinstimmen müssen.

Die Regel, die diesen Abschnitt nützlich hält: Die Vorderseite gibt ein Versprechen ab, die Rückseite hält es“Webdesign” steht auf der Vorderseite, steht auf der Rückseite was eigentlich drin ist und verlinkt auf die Seite Jemand schwebte, weil die Vorderseite ihn erwischt hat Bezahlen Sie das mit Informationen, nicht mit einem anderen Slogan.

Zwei, drei Sätze Länger und die Karte fühlt sich bei Tabletbreite eng an, wo die Karte zwar schmaler ist, der Text aber nicht geschrumpft ist.

Schritt 7: Fügen Sie den Aktionsknopf hinzu

Die Aktionstaste Abschnitt setzt ein Etikett und einen Link, und der Button rendert nur auf der Rückseite Setzen Sie den Text auf das, was die nächste Seite tatsächlich liefert “Mehr erfahren” ist in Ordnung “Siehe Preisgestaltung” ist besser, wenn der Link auf Preisgestaltung geht.

Überspringen Sie den Knopf vollständig auf einem reinen Informationsraster Eine Karte, die zu einer Beschreibung umdreht und stoppt, ist eine vollkommen gute Karte. Fügen Sie sie hinzu, wenn der Abschnitt Konvertierungsarbeiten durchführt.

Die eine Einstellung, die die meisten Flip-Box-Beschwerden behebt

Wechseln Sie zu den Stil Tab und öffnen General. Es gibt eine Steuerung namens Höhe der Flip-Box.

Stellen Sie es ein.

Lassen Sie es ungesetzt und jede Karte vergrößert sich auf das Gesicht, das mehr Inhalt hat, also ändert sich die Größe der Karte mitten im Schwebeflug, wenn die längere Rückseite eindreht. Die Reihe springt. Karten, die übereinstimmen sollten, landen in unterschiedlichen Höhen, da eine Dienstbeschreibung zwei Zeilen länger lief als der Rest. Die Flipbox-Dokumentation listet dies als ersten Arbeitstipp auf und es ist die Einstellung, die am häufigsten in Ruhe gelassen wird.

200 px ist ein vernünftiger Boden.350 px passt zu den meisten Feature-Gittern Stellen Sie es einmal auf Container-Ebene ein und jede Karte in der Reihe stimmt überein.

Wenn du in Allgemein bist, halte die Animationsdauer zwischen 400 ms und 700 ms. Schneller liest sich als Panne Langsamer und der Cursor ist weitergegangen, bevor der Flip beendet ist.

Die beiden Gesichter stylen

Im Folgenden Allgemein erhalten Sie eine separate Frontkasten und Rückbox Tafeln mit jeweils eigener Hintergrundfarbe oder eigenem Bild, Titel- und Beschreibungsfarben, Typografie und Symbolfarbe.

Machen Sie die beiden Gesichter wirklich unterschiedlich. Eine hellgraue Vorderseite, die auf eine etwas hellere graue Rückseite umschlägt, sieht eher wie ein Rendering-Fehler als wie eine Enthüllung aus. Die meisten Designs landen vorne auf einem sanften Farbton und die Markenfarbe auf der Rückseite, was den Flip von der anderen Seite des Raums aus deutlich macht.

Stylen Sie die normalen und Hover-Zustände der Schaltfläche so, dass sie überall auf der Website zu den Schaltflächen passen. Eine Flip-Box-Taste, die nicht wie Ihre anderen CTAs aussieht, wird als eingebettete Anzeige gelesen.

Die ganze Karte anklickbar machen

Standardmäßig sitzt der Link auf dem Button, nicht auf der Karte, Leute versuchen den Kartenkörper anzuklicken, es passiert nichts, und sie gehen Es ist eine Kleinigkeit, die echte Klicks kostet.

Der Fix ist nicht im Flipbox Widget Es ist die Wrapper Link Erweiterung‘ein separates Modul, das Sie unter Master Addons Einstellungen aktivieren, welches jedes Element in einem einzigen Link umhüllt, schalten Sie es ein, dann wenden Sie es auf den Flip Box Container an.

Eine Vorsicht: wenn die ganze Karte irgendwo verlinkt und der Button woanders hin verlinkt, gewinnt, welches der Besucher zuerst trifft und das andere wird nie benutzt Zeigen Sie sie auf das gleiche Ziel, oder lassen Sie den Button fallen.

Mobil: der Teil, der die Menschen auffängt

Telefone haben keinen Hover Der Flip feuert stattdessen beim Tippen. Erster Tippen dreht die Karte nach hinten, zweiter Tipp dreht sie nach Hause und der Knopf benötigt einen eigenen Tipp, sobald die Rückseite angezeigt wird.

Das sind zwei Fingertipps, bevor jemand zu Ihrem Call to Action kommt Auf dem Desktop kostet die Rückseite eine Cursorbewegung, auf dem Handy kostet es bewussten Aufwand, und ein sinnvoller Anteil der Besucher gibt ihn nie aus.

Beim zweiten Tippen geht es auch kaputt Berichte über eine vorwärts kippende, aber nicht zurückklappbare Flipbox tauchen regelmäßig in Elementor-Community-Threads auf, und die Editor-Vorschau gibt das Touch-Verhalten nicht zuverlässig genug wieder, um es zu erfassen Testen Sie es vor dem Versand auf einem echten Mobilteil, da Ihnen der Responsive-Modus im Editor dies nicht anzeigt.

Was zu der Regel führt, die hier wichtiger ist als jede Styling-Wahl:

Legen Sie wichtige Informationen niemals nur auf die Rückseite. Wenn ein mobiler Besucher es haben muss, kommt ein Preis, eine Telefonnummer, eine Adresse oder ein Buchungslink auf die Vorderseite oder irgendwo ganz von der Karte. Behandeln Sie die Rückseite als einen Ort für zusätzliche Details, nicht für irgendetwas, von dem die Seite abhängt.

Die Karte skaliert und wickelt sich über Haltepunkte, und die Höhe ist responsiv, so dass Sie sie für Mobil im Responsive-Modus von Elementor festziehen können Wenn das Gitter bei einer Breite bricht, die Sie nicht geplant haben, überprüfen Sie die Standard-Elementor-Breakpoints Zuerst, dann hinzufügen Benutzerdefinierte Haltepunkte Wenn Sie Größen benötigen, versendet Elementor nicht.

Erreichbarkeit, ehrlich

Eine Flipbox versteckt die Hälfte ihres Inhalts hinter einer Interaktion, die ein Tastaturbenutzer und ein Screenreader nicht so ausführen können, wie es ein Mausbenutzer kann. Es lohnt sich, das Sortieren vor dem Live-Betrieb des Abschnitts und nicht danach durchzuführen.

Zwei Dinge machen es verteidigungsfähig:

• Fügen Sie einen sichtbaren Fokuszustand hinzu Ein Tastaturbenutzer, der die Seite durchschreibt, kann die Karte also sehen und auslösen.
• Machen Sie den Back-Content auf andere Weise erreichbar‘n, ein nahegelegener Abschnitt, eine verlinkte Seite, ein zusammenklappbarer Block, Wenn der einzige Pfad zu Ihrer Dienstbeschreibung ein Hover ist, haben einige Besucher keinen Pfad.

Suchmaschinen indizieren den Backface-Text, da er im DOM liegt und nicht auf Abruf geladen wird. Wenn Sie die Kopie also hinter einem Flip verstecken, wird sie nicht vom Seitentext entfernt, was das Crawlen betrifft. Ob eine Person ihn erreichen kann, ist eine separate Frage, und die Frage, die zuerst beantwortet werden soll.

Wann Sie die Flipbox überspringen sollten

Drei Situationen, in denen ein anderes Widget Ihnen besser dient.

Der Rücktext ist jedem Leser wichtig. Wenn alle die Beschreibung brauchen, dann lass sie nicht mit der Maus darauf fahren Ein Infobox Zeigt ein Symbol, eine Überschrift und eine Kopierzeile mit nichts Verstecktem und keiner Interaktion zum Testen auf vier Geräten.

Sie wollen die Bewegung, nicht das zweite Gesicht. Wenn es sich bei der Berufung um einen Slick-Hover-Effekt handelt und Sie keinen echten Backside-Inhalt haben, ist die Transformiert Erweiterung Fügt jedem Element 3 D-Bewegung hinzu, ohne eine Kopie zu erfinden, um ein Gesicht zu füllen, nach dem niemand gefragt hat.

Die Seite bewegt sich bereits. Parallaxe, Scroll enthüllt, ein animierter Held, und jetzt ein Gitter aus umdrehenden Karten Nach einer bestimmten Menge an Bewegung hört ein Besucher auf, etwas davon zu registrieren, und jeder Effekt ist mehr Arbeit für den Browser Zählen Sie, was bereits auf der Seite ist, bevor Sie mehr hinzufügen, und wenn es langsam geladen wird, Geschwindigkeit fixieren Bevor Sie eine weitere Animation hinzufügen.

Und eine weiche Kappe, die es wert ist, respektiert zu werden: Mehr als sechs oder acht Flipboxen auf einer Seite kippen in Gimmick Ein oder zwei Abschnitte sind der Sweet Spot.

Kostenlos vs. Pro

Das Flipbox-Widget befindet sich im kostenlosen Plugin Jede Design-Variante, jede Animation, beide Gesichter unabhängig voneinander gestylt, unbegrenzte Seiten Pro schaltet die Flip-Box nicht frei, es schaltet andere Dinge drumherum frei.

Wenn die Flipbox das ist, wofür Sie gekommen sind, ist die ganze Antwort kostenlos Wenn Sie das gleiche Kartenlayout auf allen Client-Sites neu erstellen, ist die Widget-builder Speichert es einmal als wiederverwendbares Widget, und das sitzt auf der kostenpflichtigen Stufe Vollständige Aufschlüsselung auf der Preisseite„und einen umfassenderen Überblick darüber, was sonst noch in unserem verfügbar ist Zusammenfassung von Elementor-Add-ons.

Häufig gestellte Fragen

Verwandte Lektüre

• So erstellen Sie 3 D Elementor Flipbox Animationen
• Flipbox-Widget-DokumentationJede Kontrolle, in der Reihenfolge
• Elementoranimationseffekte
• Bild Hotspot WidgetZum Hervorheben von Bereichen innerhalb eines Bildes, anstatt ganze Karten umzudrehen
• Infobox-widget, die statische Alternative, wenn nichts verborgen werden sollte
• Kostenlose Elementor-Abschnittvorlagen Importieren und bearbeiten