Master Addons
Prissætning
Se kategorier

Transformerer udvidelsesindstillinger

Roy Jemee
Opdateret den 16. september 2026

4 min læst

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 Transformerer forlængelse i Master Addons Pro tilføjer et transformationspanel til 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 pixels, fra -1000 til 1000.
  • Rotere: drej den på X-, Y- eller Z-aksen, fra -180 til 180 grader.
  • Skala: forstør eller krymp det på hver akse uafhængigt, fra 0 til 5.
  • 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.
  • A Master Addons Pro licens, fordi Transforms er en Pro-udvidelse.

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.

Transformerer udvidelsesskift med Hot-badget i afsnittet Animation Widgets på fanen Master Addons Extensions

Å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.

Panelet Transformerer under fanen Elementor Advanced, der viser kontrolelementerne Oversæt, Roter, Skaler, Skæv og Vend under fanerne Normal og Svæver

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 pixels, og hver akse har sin egen responsive indstilling pr. enhed.

Oversæt X skyderen indstillet til 71 i panelet Transforms, der flytter et billede mod sektionskanten i Elementor

The Scale kontrol fungerer på samme måde. Indstilling af skala X til 1.4 i demoen forstørrer billedet ud over dets kolonne, og overlapper sektionsgrænsen for den slags breakout-ramme, som et almindeligt gitter ikke kan gøre. Skala Y forbliver på sin standard på 1, medmindre du ændrer det, så indstil begge for en jævn forstørrelse.

Skala X sat til 1,4 i panelet Transforms, der forstørrer et billede forbi dets kolonnekant i Elementor-editoren

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.

Hold markøren under fanen Transforms panelet med Flip Horizontal aktiveret og Transition Duration sat til 400 millisekunder

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 almindelige CSS med en lille stylesheet, og layoutet omkring elementet aldrig reflows.

Udgivet side med billedet skaleret og flyttet forbi sin kolonnekant af udvidelsen Transforms

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. Elementors egen Transform-sektion i fanen Advanced tilbyder lignende kontrolelementer gratis.

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 X, Y og Z, Skala X og Y, Skæv X og Y, Flip Vandret, og Flip Lodret, hver tilgængelig i både normal og hover tilstande. Skyderne er lydhør, så værdier kan afvige pr. enhed.

Er Transforms-udvidelsen gratis?

Nej. Transforms er en Pro udvidelse i Master Addons. Elementor har også en gratis Transform sektion i Advanced fanen med lignende kontroller, og Transforms udvidelsessiden sammenligner de to.

Indpakning #

The Transformerer forlængelse rækker dig CSS transform værktøjssæt inde i Elementor panel: flytte, rotere, skalere, skæv, og flip noget, med hover tilstande og glatte overgange inkluderet. Start med et breakout billede eller en hover lift og bygge derfra. Det par naturligt med den Entrance Animation udvidelse for elementer, der kommer i bevægelse, og den fulde lineup af Master Addons widgets og udvidelser dækker resten.

Hvad er dine Følelser