Elementor FlipBox Widget: Opret interaktive svævekort (gratis vejledning)

En flip boks er et kort med to ansigter. Fronten bærer et ikon og en kort titel. Hold den, og kortet roterer til en bagside, der holder beskrivelsen og en knap. Elementor Pro sender en. Du behøver ikke Pro for at få en.

Den frie Master Addons Flipbox widget tilføjer en til almindelig Elementor, med over tredive flip animationer, begge ansigter stylet uafhængigt, og en knap, der linker, hvor du vil. Denne vejledning dækker bygningen, den ene indstilling, der løser de fleste flip problemer, og den mobile adfærd, der fanger folk ud, efter at de har udgivet.

Hvad en flipbox egentlig er

En flipboks er et tosidet kort, der bytter ansigter på hover eller tryk. Forsiden viser et ikon eller billede med en titel. Bagsiden viser en længere beskrivelse og normalt en knap. Det holder et gitter rent, mens det stadig bærer detaljen, fordi beskrivelsen sidder bag kortet i stedet for under det.

Du viser først en scanbar række, og lad derefter enhver, der er interesseret, selv trække i detaljen. Ingen behøver at læse en væg med kopi for at finde den ene tjeneste, de kom efter. Det er grunden til at række ud efter en.

Fire mønstre den håndterer godt:

• Servicegitre. Forsiden navngiver tjenesten, bagsiden forklarer den og linker til servicesiden.
• Holdkort. Foto og navn på forsiden, bio og et link på bagsiden. Hvis intet behøver at skjule, en almindelig teammedlemmer sektion er den mere simple bygning.
• Feature fliser. Ikon ude foran, specifikationen bagved.
• Stat kort. Et stort tal på forsiden, der vender til, hvad tallet betyder.

Har Elementor en flip box widget?

Elementor Pro har en. Gratis Elementor gør ikke. Den skelnen betyder noget, fordi masser af tutorials sløre det, og så går folk på jagt efter en widget, der ikke er i deres panel.

Så der er fire ærlige ruter til en flipboks, og hver beder om noget forskelligt:

Hvis du allerede betaler for Elementor Pro, skal du bruge dens Flip Box og springe det ekstra plugin over. Der er ingen præmie for at installere noget, du ikke har brug for. Hvis du er på gratis Elementor, er resten af denne guide din rute.

Før du starter

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Det er gratis på WordPress.org og kører på 30.000 + websteder.
• Ikonerne, kopi og destination link for begge ansigter. Sorter disse først. Design af et kort, mens du opfinder kopien, er, hvordan du ender med “Lorem ipsum” på en live side.

Byg en flipboks, trin for trin

Trin 1: Aktiver Flipbox-widgetten

Master Addons holder hver widget bag en toggle, så dem, du ikke bruger, aldrig indlæses. Gå til Master Addons → Indstillinger, åbne den Elementer fane, find Flipbox, tænd for den, gem.

Ingen skift? Opdater plugin'et. Fanen Elementer er vokset mellem versioner, og ældre bygger gruppeting forskelligt.

Trin 2: Drop widget på siden

Rediger enhver side med Elementor, skriv “Flipbox” i widget-søgningen, træk den ind i en beholder. Den indlæses med eksempelindhold på begge sider, og vender allerede.

Hold markøren i forhåndsvisningen, før du ændrer en ting. Du vil have en fornemmelse for standard animationshastigheden, for det er den indstilling, folk oftest lader være i fred og så spekulerer på, hvorfor kortet føles trægt.

Trin 3: Vælg en designvariation

Fanen Indhold åbnes på en Stilforudindstilling sektion med to kontroller: Designvariation og Animation Style. Under dem sidder Front Box, Back Box og Action Button.

Design Variation ændrer, hvordan forsiden er arrangeret. Den praktiske beslutning er, om et ikon eller et fotografi bærer dit budskab. Ikonledede variationer passer til servicegitter og funktionsrækker. Billedledede variationer passer til teammedlemmer, porteføljefliser og produktkort, hvor et ansigt eller et fotografi gør mere arbejde, end noget ikon kunne.

Trin 4: Vælg animationen

Animation Style dropdown bærer mere end tredive effekter. De falder i fire grupper:

• Flip vandret / flip lodret. Den klassiske kortrotation på hver akse. Læsbar, og den sikre standard, når du ikke har nogen grund til at vælge andet.
• Terning (top ned, ned øverst, venstre, højre). En 3D-terning rotation mellem ansigter. Dramatisk. Brug den på en helt, ikke på et gitter på otte.
• 3d Flip, Fade, Fade Up, Rollover. Blødere afsløringer for sider, der allerede har bevægelse andre steder.
• Slide retninger og Diagonal. Bagsiden skubber ind fra en side eller et hjørne. Disse læser godt på mobil, hvor en rotation kan føles tung.

Vælg en og forpligte sig til det på tværs af sektionen. Seks kort, der vender seks forskellige måder, ser ikke legende ud, det ser brudt ud. Den eneste gode grund til at blande er, når to sektioner skal føle sig bevidst adskilt.

Vil du se bevægelsesstile side om side, før du forpligter dig? Den Vejledning til elementoranimationseffekter forhåndsvisninger af de almindelige, og den 3D flip boks gennemgang går dybere på perspektivindstillingerne bag Cube og 3d Flip-mulighederne.

Trin 5: Skriv forsiden

Open Front Box. Dette er ansigtet, der skal tjene svæve, så det får mindre kopi end du tror, ikke mere.

• Ikonstil og ikon. Træk fra ikonbiblioteket, eller skift til et billede. Master Addons sender yderligere ikon biblioteker beyond Font Awesome, hvis du har brug for dem.
• Title. Tre til fem ord. Den skal overleve på én linje ved tabletbredde.
• Description. En linje. Både titel- og beskrivelsesfelterne har en Skriv med AI mulighed indbygget i panelet, hvis du sidder fast.
• Justering og titel HTML Tag. H1 til H6. Indstil dette korrekt. Et gitter med seks flipbokse med H2-titler inde i en sektion, der allerede har en H2, giver dig syv H2'er på siden og et revisionsværktøj, der markerer den. Den samme omhu gælder for enhver gentagen blokering i en brugerdefineret Elementor layout.

Trin 6: Skriv bagsiden

Samme felter, andet job. Back Box tager sit eget ikon, titel, beskrivelse, justering og heading tag, så de to ansigter ikke behøver at matche overhovedet.

Reglen, der holder dette afsnit nyttigt: fronten giver et løfte, bagsiden holder det. Hvis forsiden siger “Web Design”, bagsiden siger, hvad der faktisk er inkluderet og links til siden. Nogen svævede, fordi forsiden fangede dem. Tilbagebetale det med oplysninger, ikke et andet slogan.

To eller tre sætninger. Længere og kortet føles trangt ved tabletbredde, hvor kortet er smallere, men teksten ikke er krympet.

Trin 7: Tilføj handlingsknappen

The Action Button sektion sætter en etiket og et link, og knappen gengives kun på bagsiden. Indstil teksten til, hvad den næste side faktisk leverer. “Lær mere” er fint. “Se prissætning” er bedre, når linket går til prissætning.

Spring knappen helt over på et rent informationsgitter. Et kort, der vender til en beskrivelse og stopper, er et helt godt kort. Tilføj det, når sektionen laver konverteringsarbejde.

Den ene indstilling, der løser de fleste flip box klager

Skift til Style faneblad og åben General. Der er en kontrol, der hedder Flip Box Højde.

Indstil det.

Lad det være ustillet, og hvert kort størrelser sig selv til hvilken ansigt har mere indhold, så kortet ændrer størrelse midt-hover som den længere tilbage ansigt flips i. Rækken hopper. Kort, der skal matche ender i forskellige højder, fordi en tjeneste beskrivelse kørte to linjer længere end resten. Flipbox dokumentation lister dette som sin første arbejdstip, og det er den indstilling oftest efterladt alene.

200px er et fornuftigt gulv. 350px passer til de fleste funktionsgitre. Indstil det én gang på containerniveauet, og hvert kort i rækken matcher.

Mens du er i Generelt, holde animation varighed mellem 400ms og 700ms. Hurtigere læser som en fejl. Langsommere og markøren er gået videre, før flip slutter.

Styling af de to ansigter

Nedenfor Generelt får du separat Front Box og Back Box paneler, hver med sin egen baggrundsfarve eller billede, titel- og beskrivelsesfarver, typografi og ikonfarve.

Gør de to ansigter virkelig forskellige. En bleggrå front, der vender til en lidt blegere grå bagside, ligner en gengivelsesfejl snarere end en afsløring. De fleste designs lander på en blød farvetone foran og mærkefarven på bagsiden, hvilket gør flip tydeligt fra hele rummet.

Style knappens normale og hover-tilstande, så de passer til knapperne alle andre steder på webstedet. En flipbox-knap, der ikke ligner dine andre CTA'er, læses som en indlejret annonce.

Gør hele kortet klikbart

Som standard linket sidder på knappen, ikke kortet. Folk forsøger at klikke på kortet krop, intet sker, og de forlader. Det er en lille ting, der koster rigtige klik.

Rettelsen er ikke i Flipbox-widgetten. Det er den Wrapper Link extension, et separat modul, du aktiverer under Master Addons-indstillinger, som ombryder ethvert element i et enkelt link. Slå det til, og anvend det derefter på flipboksbeholderen.

En advarsel: Hvis hele kortet linker et sted, og knappen linker et andet sted, vinder den, den besøgende rammer først, og den anden bliver aldrig brugt. Peg dem på samme destination, eller slip knappen.

Mobil: den del, der fanger folk ud

Telefoner har ingen svæve. Flip brande på tryk i stedet. Første tryk vender kortet til bagsiden, andet tryk vender det hjem, og knappen har brug for et tryk på sin egen, når bagsiden er vist.

Det er to tryk, før nogen når dit opkald til handling. På skrivebordet koster bagsiden en markørbevægelse. På mobil koster det bevidst indsats, og en meningsfuld andel af besøgende bruger det aldrig.

Det andet tryk er også, hvor tingene går i stykker. Rapporter om en flipboks, der vender fremad, men som ikke vender tilbage, dukker op regelmæssigt i Elementor-fællesskabstråde, og editor-forhåndsvisningen gengiver ikke berøringsadfærd pålideligt nok til at fange den. Test den på et rigtigt håndsæt, før du sender, fordi responsiv tilstand i editoren ikke viser dig dette.

Hvilket fører til reglen, der betyder mere end noget stylingvalg her:

Sæt aldrig væsentlige oplysninger kun på bagsiden. Hvis en mobil besøgende skal have det, går en pris, et telefonnummer, en adresse eller et bookinglink på forsiden, eller et sted helt væk fra kortet. Behandl bagsiden som et sted for ekstra detaljer, ikke for noget siden afhænger af.

Kortet skalerer og ombrydes på tværs af brudpunkter, og højden er responsiv, så du kan stramme den til mobil i Elementors responsive tilstand. Hvis gitteret går i stykker i en bredde, du ikke havde planlagt, skal du kontrollere standard Elementor brudpunkter først, så tilføj brugerdefinerede breakpoints hvis du har brug for størrelser Elementor sender ikke.

Tilgængelighed, ærligt

En flipboks skjuler halvdelen af sit indhold bag en interaktion, som en tastaturbruger og en skærmlæser ikke kan udføre, som en musebruger kan. Værd at sortere ud, før afsnittet går live, ikke efter.

To ting gør det forsvarligt:

• Tilføj en synlig fokustilstand så en tastaturbruger, der tabberer gennem siden, kan se og udløse kortet.
• Gør rygindholdet tilgængeligt på en anden måde, en sektion i nærheden, en side, der er knyttet til hinanden, en blok, der kan klappes sammen. Hvis den eneste sti til din tjenestebeskrivelse er en svævebane, har nogle besøgende ingen sti.

Søgemaskiner indekserer back-face-teksten, da den sidder i DOM i stedet for at indlæse på efterspørgsel, så at skjule kopi bag en flip fjerner den ikke fra siden, hvad angår crawling. Om en person kan nå det er et separat spørgsmål, og det, der skal besvares først.

Hvornår skal vippe flipboksen over

Tre situationer, hvor en anden widget tjener dig bedre.

Bagsideteksten betyder noget for enhver læser. Hvis alle har brug for beskrivelsen, skal du ikke få dem til at svæve for den. En Infoboks viser et ikon, en overskrift og en kopilinje uden noget skjult og ingen interaktion at teste på fire enheder.

Du vil have bevægelsen, ikke det andet ansigt. Hvis appellen er en glat svæveeffekt, og du ikke har noget ægte bagsideindhold, skal Transformerer forlængelse tilføjer 3D-bevægelse til ethvert element uden at opfinde kopi for at fylde et ansigt, ingen bad om.

Siden flytter sig allerede. Parallax, rulle afslører, en animeret helt, og nu et gitter af flipping kort. Forbi en vis mængde bevægelse en besøgende stopper med at registrere nogen af det, og hver effekt er mere arbejde for browseren. Tæl hvad der allerede er på siden, før du tilføjer mere, og hvis det indlæses langsomt, fix hastigheden før du tilføjer en anden animation.

Og en blød kasket, der er værd at respektere: mere end seks eller otte flip-bokse på en side tips til gimmick. En eller to sektioner er det søde sted.

Gratis vs Pro

Flipbox-widgetten er i det gratis plugin. Hver designvariation, hver animation, begge ansigter stylet uafhængigt, ubegrænsede websteder. Pro låser ikke flipboksen op, den låser op for andre ting omkring den.

Hvis flipboksen er det, du kom efter, er gratis hele svaret. Hvis du genopbygger det samme kortlayout på tværs af klientwebsteder, er Widget Builder gemmer det én gang som en genanvendelig widget, og det sidder på det betalte niveau. Fuld opdeling på prissætning side, og et bredere syn på, hvad der ellers er tilgængeligt i vores roundup af Elementor addons.

Ofte stillede spørgsmål

Relateret læsning

• Sådan oprettes 3D Elementor Flipbox Animationer
• Flipbox widget dokumentation, hver kontrol, i rækkefølge
• Elementor animationseffekter
• Billede Hotspot widget, til fremhævelse af områder inde i ét billede frem for at vende hele kort
• Infoboks widget, det statiske alternativ, når intet skal skjules
• Gratis Elementor sektion skabeloner at importere og redigere