Et kort, der vender om på hover, viser det dobbelte af indholdet i samme rum. Den gratis Flipbox widget i Master Addons til Elementor giver dig en tosidet boks: en forside med et ikon, titel og beskrivelse og en bagside, der vender til syne med sin egen tekst og en knap.
Du vælger en animation, udfylder begge ansigter, tilføjer en knap, og styler derefter hver side. Der er 22 flip-effekter: 6 i det gratis plugin og 16 mere med Master Addons Pro, fra en almindelig Fade til en 3D Cube. Denne guide går gennem hver indstilling i widgetten.
Hvad Flipbox-widgetten gør #
Widgetten bygger et flip-kort fra to ansigter. Den Front Box er, hvad besøgende ser først: et ikon eller billede, en titel og en beskrivelse. Hold markøren over det, og kortet vender til Back Box, som har sin egen titel, beskrivelse, og en knap, der kan linke hvor som helst.
Tre faner kører det hele. Content holder animationen, for- og bagteksten og knappen. Style håndterer boksens højde, kanter, farver og typografi for hvert ansigt. Advanced er den sædvanlige Elementor-afstand og synlighed.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- Teksten og ikonerne for begge ansigter og linket til bagsiden.
Sådan tilføjes Flipbox-widget #
I Elementor-editoren skal du åbne Elementer panel og søg efter Flipbox, eller rul til afsnittet Mastertilføjelser (widgetsene bærer et lilla MA-badge). Træk det over på siden, og det indlæses med en prøve foran og bagpå, du kan redigere.
Indstil animationsstilen #
Åbn Content fane. Den Stilforudindstilling sektion holder Designvariation og the Animation Style, og under den sidder sektionerne Front Box, Back Box og Action Button.
The Animation Style dropdown er den sjove del. Det bærer 22 muligheder, så det samme kort kan vende, falme, glide, eller terning sin vej til bagsiden ansigt. Flip Vandret, Flip Lodret, Fade, Flip Box, Flip Box Fade og Fade Up er gratis; resten har brug for Pro.
- Flip Vandret og Flip Lodret: det klassiske kort flip på hver akse.
- Terning (øverst nede, nederst, venstre højre, højre venstre): en 3D-terning rotation mellem flader (Pro).
- Fade og Fade Up (gratis), 3d Flip og Rollover (Pro): blødere afslører, når du vil have noget subtilt.
- Slide retninger og Diagonal (Pro): skub bagsiden ind fra en side eller et hjørne.
Sæt frontboksen op #
Åbn Front Box sektion. Det er det ansigt, folk ser, før de svæver, så det skal tjene flip.
- Ikon stil og ikon: vælg et ikon fra biblioteket. Et billede på forsiden leveres med designvariationen Front Image i Pro.
- Titel og Beskrivelse: den forreste overskrift og tekst, hver med en Write with AI-mulighed.
- Justering og titel HTML Tag: juster indholdet, og indstil overskriftsniveauet (H1 til H6).
Sæt bagkassen op #
Åbn Back Box sektion til ansigtet, der vender til syne. Det tager de samme felter som forsiden, så en kort teaser ude foran kan føre til den virkelige detalje på bagsiden.
- Ikon: et separat ikon til bagsiden.
- Titel og Beskrivelse: bagsiden og tekst.
- Justering og HTML Tag: layout og overskriftsniveau for bagsiden.
Tilføj handlingsknappen #
The Action Button sektion bor på bagsiden. Indstil etiketten, og hvor den peger, så en svæve kan føre direkte til et produkt, en formular eller en anden side.
- Knaptekst: mærket, som Kom i gang eller Lær mere.
- Link til: den URL, knappen åbner, med de sædvanlige Elementor-linkmuligheder.
Style flipkortet #
Åbn Style fane. Den General afsnittet sætter grænsen og den indstilling, der betyder mest her, den Flip Box Højde, hvilket giver begge ansigter én fast størrelse.
Under General bliver man adskilt Front Box og Back Box sektioner. Hver har sin egen baggrundsfarve eller billede, titel og beskrivelse farver, typografi, og ikon farve, så de to ansigter kan se intet ens, hvis du vil.
Almindelige brugstilfælde #
- Servicekort med et ikon på forsiden og detaljer plus en knap på bagsiden.
- Teammedlemmer viser et foto på forsiden og en bio på flip.
- Produktets højdepunkter det afslører pris og en Køb-knap på svæve.
- Featuregitre hvor hvert kort vender til en kort forklaring.
- Porteføljefliser med en miniaturefront og et projektlink på bagsiden.
Tips til at arbejde med Flipbox-widget #
- Indstil en fast højde. Flip Box Height holder begge ansigter i samme størrelse, så kortet ikke springer, når det vender. Lad det være ustillet, og en længere bagside vil ændre størrelsen på kortet midt på svævet, som ser ud.
- Hold tilbage tekst kort. Bagsiden vender hurtigt ind, så en stram linje og en knap læses bedre end et helt afsnit.
- Match animationen til stemningen. Fade passer til en rolig side; 3D Flip og Cube passer til en dristig helt.
- Kontrast de to ansigter. En anden baggrundsfarve på bagsiden gør flip indlysende på et øjeblik.
- Link altid knappen. Bagsideknappen er udbetalingen, så peg den på næste trin.
Se video tutorial #
Foretrækker du at følge med på skærmen? Videovejledningen nedenfor går gennem Flipbox-elementet fra start til slut og viser, hvordan animationsstilene, front- og bagsiderne og stylingen fungerer i Elementor-editoren.
Ofte stillede spørgsmål #
Hvad er Flipbox-widget i Master Addons?
Det er en Elementor widget, der bygger et tosidet kort. Forsiden viser et ikon, titel og beskrivelse, og ved at holde markøren vender den til en bagside med sin egen tekst og en knap. Alt er indstillet fra Elementor panelet uden kode.
Hvor mange flip-animationer har Flipbox-widgetten?
Animation Style dropdown indeholder 22 effekter, 6 gratis og 16 med Pro, såsom Flip Horizontal, Flip Vertical, Fade, Fade Up, Rollover, 3d Flip, Cube varianterne, diasretninger og Diagonal. Du vælger en pr. kort for at styre, hvordan bagsiden vises.
Kan jeg tilføje en knap til flipkortet?
Ja. Afsnittet Handlingsknap i fanen Indhold indstiller knappens etiket og dens link. Knappen sidder på bagsiden, så den viser, hvornår kortet vender, hvilket gør det til et naturligt sted at sende besøgende til et produkt eller en formular.
Kan jeg bruge et billede i stedet for et ikon på forsiden?
Ja. Brug designvariationen Front Image, en Master Addons Pro-indstilling, til at sætte et billede på forsiden. Fanen Style lader dig også indstille et baggrundsbillede for begge ansigt, så billedstyrede flipkort er nemme at bygge.
Hvordan holder jeg begge sider af flipkortet i samme størrelse?
Indstil Flip Box Height i afsnittet Generelt på fanen Stil. Det giver begge sider én fast højde, så kortet forbliver den samme størrelse før og efter flip i stedet for at ændre størrelsen, så det passer til hver sides indhold.
Indpakning #
Flipbox-widget'en forvandler et fladt kort til et interaktivt: Vælg en animation, udfyld front- og bagfladerne, link knappen, og stil derefter hver side. For relaterede widgets, se Infoboks widget og the Teammedlem widget, gennemse hele Master Addons widgets og udvidelser, og se den Flipbox-widgetside til demoer og en sammenligning med Elementor Pro Flip Box.
