Elementor Flip Box Widget med Hover Flip Card Animationer
Flipbox er en Master Addons flip boks widget til Elementor, uden behov for Elementor Pro. Forsiden viser et ikon eller billede med en titel og kort tekst, og ved hover vender kortet til en bagside med flere detaljer og en handlingsknap. Widgetten leveres med Standard- og Front Icon-designerne og 6 animationer: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade og Fade Up. Master Addons Pro tilføjer Front Image og Diagonal designs og 16 flere animationer, herunder Cube, Rollover og 3D Flip, for 22 i alt. Elementor selv har kun en flip boks i Elementor Pro.
Designvariationer og flipanimationer
Designvariation indstiller frontlayoutet: Standard- og frontikon leveres med widgetten, Front Image og Diagonal har brug for Pro. animation stil indstiller, hvordan kortet vender. Inkluderet: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade og Fade Up. Pro tilføjer fire Cube retninger, Fade Hideback, Fade Up Hideback, fire dias retninger, to Diagonal dias, Fade In Out, Nananana, Rollover og 3D Flip, som har sin egen retning indstilling.
- 22 animationer i alt: 6 inkluderet og 16 med Pro.
- Flip kører på hover på skrivebordet og på tryk på berøringsskærme.
- Brug én animation pr. sektion, så en række kort føles konsistent.
Dual-Side Content Builder
de Forkasse og Bagkasse hver har deres eget ikon med Standard, Stablet eller Indrammet visning og Cirkel eller Firkantet form, en Titel, en Beskrivelse, Justering og en overskrift tag. Hold forsiden kort, som en tjeneste navn, og bruge bagsiden til forklaringen. I fanen Stil hvert ansigt får sin egen baggrund, titel og beskrivelse farver, typografi, ikon farver og kant.
- Separat indhold og styling til hvert ansigt.
- Titel HTML Tag på begge sider, så et gitter af kort holder en ren overskriftsrækkefølge.
- -en Flip Box Højde indstilling i Generelt holder begge ansigter i samme størrelse.
CTA-knap med svæve
de Handlingsknap viser på bagsiden med din Knap Tekst og link. Style det til Normal og Hover med tekst farve, baggrund, kant, kant radius og polstring, plus typografi. Knappen er det eneste link inde i widget. For at gøre hele kortet klikbar, tilføje Indpakningslink udvidelse til widgetten.
- Brug en bestemt etiket som “Se priser”, når det er der, linket går.
- Spring knappen over på rent informationskort.
- Hvis du bruger Wrapper Link, skal du pege på knappen til den samme side.
Flipbox på et øjeblik
Tabellen viser, hvad widgetten gør i dag, læst fra plugin-kilden i version 3.2.6.
| Item | flipbox |
|---|---|
| Designvariationer | 4: Standard og Front Icon inkluderet; Forsidebillede og Diagonal med Pro |
| Animationer | 22: 6 inkluderet (Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade, Fade Up) og 16 med Pro (fire Cube retninger, to Hideback fades, fire dias, to Diagonal dias, Fade In Out, Nananana, Rollover, 3D Flip) |
| Forside og bagside indhold | Ikon eller billede (billede med Pro Front Image-designet), titel med sit eget HTML-tag, beskrivelse og justering på hvert ansigt |
| Ikon stil | Standard, stablet eller indrammet, med en cirkel- eller firkantet form |
| aftrækker | Hold markøren på skrivebordet, tryk først på berøringsskærme. Ingen klik på udløser |
| Hel-boks link | Nej. Tilbage-knappen bærer linket; Wrapper Link-udvidelsen gør hele kortet klikbart |
| Højdekontrol | Ja, Flip Box Højde i stil, Generelt |
| Karruseltilstand | ingen |
| 3D Flip retning | 4 retninger på Pro 3D Flip animationen |
| Behov | Elementor og Master Addons. Pro til de to ekstra designs og de 16 ekstra animationer |
Elementor Pro Flip Box vs Master Addons Flipbox
Elementor Pro har sin egen Flip Box widget. Hvis du allerede betaler for det, har du muligvis ikke brug for en anden. Her er hvordan de to sammenligner.
| særpræ | Elementor Pro Flip Box | Master Addons Flipbox |
|---|---|---|
| værdi | Behov Elementor Pro | Master Addons; flere designs og animationer i Pro |
| Flip effekter | Flip, Slide, Push, Zoom ind, Zoom ud og Fade, med retning og 3D Dybde | 6 inkluderede animationer, 22 med Pro, inklusive Cube, Rollover og 3D Flip |
| aftrækker | svæve | Hover; tryk først på berøringsskærme |
| Frontgrafik | Ingen, billede eller ikon | Ikon eller et billede med Pro Front Image-designet |
| Hele kortlink | Anvend Link On: Kun hele boksen eller knappen | Kun knap, eller hele kortet med Wrapper Link-udvidelsen |
| knap | Ja | Ja, med Normal og Hover styling |
Elementor Pro er enklere, hvis du vil have et link til hele kassen indbygget. Master Addons fungerer på Elementor uden Pro og giver flere animationsvalg med sin egen Pro. For et statisk kort med intet skjult, skal du bruge Infoboks widget.
Flip card CSS eller en flip box widget?
Et flip-kort er det samme som en flip-boks: en frontflade, der roterer til en bagside. Du kan håndskrive en med omkring 40 linjer CSS ved hjælp af perspektiv, transform-stil: bevar-3d og backface-synlighed: skjult, og slip den i en HTML-widget. Den rute er fint for et kort på en side, du styrer.
CSS-versionen har tre tilbagevendende problemer. Touchskærme har ingen hover, så kortet vender aldrig, medmindre du tilføjer en taphandler. Begge ansigter har brug for en fast højde, eller kortet hopper, når det drejer. Og hver ændring til farve, tekst eller ikon betyder at redigere kode igen, ofte inde i et Custom CSS-felt, der har brug for Elementor Pro. Flipbox-widgeten håndterer tapet, højden og stylingen fra editorpanelet, og den giver dig en back-face-knap, 22 animationer og en designvariation pr. kort uden at røre kode.
Flip Box Ideer og Tips
En flipboks holder et gitter rent, mens det stadig bærer detaljer, fordi beskrivelsen sidder bag kortet i stedet for under det. Det fungerer godt til servicegitter, holdkort med et foto på forsiden og en bio på bagsiden, feature fliser og stat kort, der vender til, hvad et tal betyder.
- Indstil Flip Box Højde. Uden den ændrer en længere bagside størrelsen på kortet, når det drejer, og rækken hopper.
- Få ansigterne til at se anderledes ud. En farvetone på forsiden og din brandfarve på bagsiden gør flip indlysende.
- Plan for telefoner. Touchskærme har ingen svæve, så kortet vender på tryk, og knappen har brug for et andet tryk. Test på en rigtig telefon.
- Opbevar væsentlige detaljer på forsiden. Priser, telefonnumre og bookinglinks bør ikke kun leve på bagsiden.
- Begræns bevægelsen. En eller to flip boks rækker pr. side læser bedre end seks forskellige animationer.
Flipboks eksempler
Hver demo nedenfor er en live side bygget med widget. Animationen og designvariationen er navngivet, så du kan genopbygge nogen af dem fra panelet.
Flip Lodret
- SaaS analysekort: Standard design, tre mørke stat kort, der vender sig til en plan beskrivelse.
- Udstyrskortgitter: Standarddesign, seks produktfliser i et to-rækket gitter.
- Stat og artsgitter: Standarddesign, et tal på forsiden og betydningen på bagsiden.
- Arch produktkort: Standarddesign med en afrundet bueform på forsiden.
Flip Vandret
- Ikon-kun servicefliser: Front Icon design, fire indrammede ikoner, der bliver til en kort service blurb.
- Bento servicefliser: Blandet Default og Front Icon kort i en bento layout.
- Forskudte disciplinkort: Standard design, tre kort forskudt fra hinanden.
- Minimale ikonfliser: Front Icon design, tre mørke fliser med et ikon hver.
Fade
- Front billede rejsekort: Front Image design (Pro), et foto på forsiden og turdetaljerne på bagsiden.
- Nummererede kapitelrækker: Standarddesign, brede rækker, der falmer til et kapiteloversigt.
- Tidslinje runbook rækker: Standard design, trinkort, der falmer til instruktionerne.
Flip Box og Cube
- Cirkulært mærke udstillingsvindue: Flip Box animation på runde kort.
- Diagonalfliser: Diagonal design (Pro) med Cube Venstre Højre animation (Pro).
- Avancerede transformeringseffekter: Flipbox-kort kombineret med Transforms-udvidelsen.
3D Flip og slides
- Kaffeproduktkort: 3D Flip animation (Pro), Slide Højre til Venstre retning.
- Interaktivt medieudstillingsvindue: 3D Flip (Pro) med en anden retning på hvert kort.
- Multi-icon kort: Venstre mod højre, Højre mod venstre og Top til Bund slides (Pro) i én række.
Rollover, Diagonal og Fade In Out
- Mørke gymnastik klassekort: Rollover animation (Pro) på et mørkt tema.
- Pastel ikon fliser: Front Icon design med Diagonal Bottom to Top animation (Pro).
- Gradient bagkort: Fade In Out animation (Pro) til en gradient bagside.
Sådan tilføjes en flipboks i Elementor
Du skal bruge Elementor og Master Addons plugin fra WordPress.org.
- Kontrollér, at Flipbox er tændt under Master Addons, Widgets.
- I Elementor-editoren skal du søge efter flipbox og træk den ind i en container.
- Vælg en designvariation og en animationsstil, og hold derefter kortet nede for at få vist det.
- Udfyld Front Box og Back Box: ikon, titel, beskrivelse og overskriftsmærke.
- Tilføj teksten Handlingsknap og link.
- I Stil, Generelt, sæt Flip Box Højde så kortet ændrer ikke størrelsen midt på vendingen, og styler derefter hvert ansigt.
For 3D-effekter, læs Sådan oprettes 3D Elementor Flipbox Animationer. Hver indstilling er i Flipbox-widgetindstillinger.
Flipbox parrer med et par andre Master Addons widgets: Infoboks for et kort, der aldrig vender, Kreativ knap for en stylet opfordring til handling under et gitter, Billedhover-effekter for et foto, der afslører en billedtekst i stedet for et ansigt bagpå, Teammedlem for folk kort med sociale links, og Skift indhold når afsløringen skal ske ved klik frem for at svæve.
Ofte stillede spørgsmål til Flipbox
Hvordan fungerer flipboksen på telefoner?
Touchskærme har ingen svæve, så kortet vender, når der trykkes på. Bagsideknappen har brug for sit eget tryk efter flip. Hold must-see oplysninger på forsiden og test på en rigtig enhed.
Kan jeg bruge et billede i stedet for et ikon på forsiden?
Ja, med designvariationen Front Image, som er en Master Addons Pro-indstilling. Ellers skal du bruge et ikon på forsiden eller indstille et baggrundsbillede til ansigtet på fanen Stil.
Har jeg brug for Master Addons Pro til Flipbox-widgetten?
Nej. Flipbox leveres med Master Addons plugin med Standard og Front Icon designs og 6 animationer. Master Addons Pro tilføjer 2 flere designs og 16 flere animationer.
Flip-boksen ved klik?
Nej. Widgeten vender på hover, og på berøringsskærme vender det første tryk kortet. Der er ingen klikudløser på skrivebordet. For et panel, der åbnes ved klik, skal du bruge Skift indhold widget eller en Popup Builder popup.
Er et flipkort det samme som en flipboks?
Ja. Flip-kort er CSS tutorial navn for den samme effekt: en front ansigt, der roterer til en bagside. Flipbox widget bygger et flip-kort fra editor panel, med højden, hanen på touch-skærme og back-face knappen håndteres for dig.
Har Elementor en flip box widget?
Kun Elementor Pro har en. Elementor uden Pro har ikke, så du har brug for en tilføjelse som denne Flipbox widget.
Kan jeg linke hele flipboxen til en side uden den separate knap?
Widgetten linker kun knappen. For at gøre hele kortet klikbart, skal du tænde for Indpakningslink udvidelse og tilføj linket til Flipbox-widgetten.
Hvor mange flip animationer er der?
22 i alt. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade og Fade Up kommer med widget. De andre 16, herunder Cube, Rollover og 3D Flip, har brug for Master Addons Pro.
Kan jeg lægge flipbokse i en karrusel?
Ikke med en indbygget indstilling. Widgetten har ingen karruseltilstand. Gem en flipboks som skabelon og vis den i Billedkarrusel eller et loopgitter, eller læg kortene ud i en indpakningsbeholder i stedet.
Hvad er forskellen fra Elementor Pro Flip Box?
Elementor Pro har seks effekter med retning og 3D-dybde, en hel-boks link mulighed og har brug for en Elementor Pro plan. Flipbox virker på Elementor uden Pro, har 6 inkluderede animationer og 22 med Master Addons Pro, to ikon eller billede designs, og forbinder hele kortet gennem Wrapper Link udvidelse.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/sideduplikator
