Gitterlayouts er ryddelige, og ryddelige kan blive kedelige. Et billede, der læner sig ud af sin kolonne, eller et kort, der vokser lidt under markøren: små transformationer som disse adskiller en designet side fra en stablet. Den Forvandler forlængelse i Master Addons til Elementor sætter det fulde CSS-transformationsværktøjssæt på hvert element: oversæt, roter, skaler, skæv og vend, med separate indstillinger for normal- og svævetilstande.
Hvad Transforms-udvidelsen gør #
Når det er aktiveret, får hvert Elementor-element en Forvandler afsnit under dens Advanced fane. Flip Aktiveret Transforms til Ja og seks kontrolelementer vises, hver anvender en CSS-transformation til elementet uden at røre ved det faktiske layoutflow:
- Oversæt: flyt elementet langs X- og Y-akserne, i procent af dets egen størrelse.
- Rotere: drej det i enhver vinkel.
- Skala: forstør eller krymp det på hver akse uafhængigt.
- Skæv: skrå den for et diagonalt, dynamisk look.
- Flip Vandret / Flip Lodret: spejl det med et klik.
The Normal og Hover faner holder separate værdier, så et element kan sidde en vej i hvile og transformere, når markøren lander på den, med en overgangsvarighed, du styrer.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
- Transforms er en gratis udvidelse, så der kræves ingen Pro-licens.
Sådan aktiveres udvidelsen Transforms #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Transforms sidder i Animation Widgets gruppe med et Hot badge, mellem Indgang Animation og Afslør. Klik på dens toggle, så den bliver lilla, og hit derefter Gem ændringer og vent på den grønne “Indstillinger gemt med succes”-meddelelse.
Åbn panelet Transformerer på et element #
Vælg elementet i Elementor-editoren, en Image-widget i demoen, og åbn Advanced fane. Udvid Forvandler sektion med det lilla MA-badge og switch Aktiveret Transforms til Ja. De seks transformationskontrolelementer vises under fanerne Normal og Hover, hver åbning med sit blyantikon.
Flyt og skaler elementet #
Klik på blyanten ved siden af Oversætte og to skydere åbner: Oversæt X og Oversæt Y. Demoen skubber billedet 71 på X-aksen, og det glider mod kanten af sektionen på lærredet, når skyderen bevæger sig. Værdier er i forhold til elementets egen størrelse, og hver akse har sin egen responsive indstilling pr. enhed.
The Scale kontrol fungerer på samme måde. Indstilling af skala X til 1.4 i demoen forstørrer billedet ud over dets kolonne, overlapper sektionsgrænsen for den slags breakout-ramme, som et almindeligt gitter ikke kan gøre. Lad Skala Y være tom, og den følger X, eller indstil begge til uafhængig strækning.
Roter og Skæv fungerer på samme måde. Åbn kontrolelementet, træk skyderen, og lærredet viser vinklen, mens du går.
Tilføj en svævetransformation #
Skift til Hover tabulator og de samme kontrolelementer gælder kun, mens markøren er på elementet, plus to ekstraelementer: Flip Vandret og Flip Lodret bliv Ja/Nej-kontakter, og en Overgangsvarighed (ms) slider styrer, hvor hurtigt ændringen animerer. Demoen tænder Flip Horizontal med en 400ms overgang, så billedet spejler sig selv jævnt på hover og klikker tilbage, når markøren går.
Resultatet på siden #
Publicer og tjek frontenden. Billedet sidder forskudt og forstørret forbi sin kolonne nøjagtigt som arrangeret i editoren, og svævende det spiller flip med 400ms lethed. Transformerne er ren CSS, så intet ekstra belastninger og layoutet omkring elementet aldrig reflows.
En ting at huske: transformationer er kun visuelle. Elementet optager stadig sin oprindelige plet i layoutet, så et stærkt oversat element kan overlappe sine naboer. Det er normalt punktet, men tjek tablet og mobil, hvor den samme offset dækker mere af skærmen.
Hvor transformationer tjener deres plads #
- Breakout billeder. Et foto skaleret og forskudt forbi sin søjlekant giver en heltesektionsdybde.
- Svævefeedback. Kort, der løfter, vipper eller vokser lidt under markøren, læses som klikbare.
- Roterede accenter. Badges, frimærker og etiketter sidder mere naturligt i en lille vinkel.
- Skæve sektioner. Et par grader af skævhed på en skillevæg eller knap bryder rektangelmonotonien.
- Spejlede aktiver. Vend én pil eller illustration i stedet for at eksportere et andet billede.
Video Tutorial #
Se alle kontrolelementer i aktion, fra aktivering af udvidelsen til hover-flip på den publicerede side.
Ofte stillede spørgsmål #
Hvordan roterer eller skalerer jeg et element i Elementor?
Aktiver udvidelsen Transforms i fanen Master Addons Extensions, vælg elementet, og åbn Transforms under fanen Advanced. Slå Aktiveret Transforms til, og brug derefter kontrolelementet Rotate eller Scale; lærredet viser en forhåndsvisning af ændringen live, mens du trækker skyderen.
Kan jeg anvende en anden transformation på svæve?
Ja. Panelet har separate faner Normal og Hover. Indstil hvileværdier i Normal, hold markøren nede i Hover, og brug skyderen Overgangsvarighed til at styre, hvor hurtigt elementet animerer mellem de to tilstande.
Bryder transformationer mit sidelayout?
Nej. CSS-transformationer er kun visuelle, så elementet holder sin oprindelige plads i layoutet og omgivende indhold aldrig reflows. Et transformeret element kan overlappe naboer ved design, så preview tablet og mobil for at bekræfte forskydningerne stadig ser rigtigt ud.
Hvilke transformationer omfatter udvidelsen?
Oversæt X og Y, Roter, Skala X og Y, Skew, Flip Horizontal, og Flip Vertical, hver tilgængelig i både normal og hover tilstande. Hver kontrol er lydhør, så værdier kan variere pr. enhed.
Er Transforms-udvidelsen gratis?
Ja. Transformerer skibe med den gratis version af Master Addons for Elementor, i gruppen Animation Widgets under fanen Udvidelser. Prissiden dækker, hvad Pro-planerne tilføjer.
Indpakning #
Transforms-udvidelsen giver dig CSS-transformationsværktøjssættet inde i Elementor-panelet: Flyt, roter, skaler, skævt, og vend hvad som helst, med svævetilstande og glatte overgange inkluderet. Start med et breakout-billede eller et svæveløft og byg derfra. Det parrer naturligt med Entrance Animation udvidelse for elementer, der kommer i bevægelse, og den fulde lineup af Master Addons widgets og udvidelser dækker resten.
