Sådan opretter du en skæv baggrund i Elementor (2026-vejledning)

En skæv baggrund skærer kanten af et afsnit hen over siden i en vinkel i stedet for at lade det være fladt. Det bryder den sædvanlige stak af vandrette bånd op, og øjet følger diagonalen ned i næste afsnit. Landingssider og SaaS-hjemmesider bruger det konstant.

Elementor har stadig ingen “skæv denne sektion” skifte, så du gør det med et par linjer af CSS. Problem er, Elementors egen Custom CSS felt er låst bag Pro. Det er derfor, denne tutorial bruger den gratis Brugerdefineret CSS-udvidelse i Master Addons, som tilføjer en CSS boks til hvert element på gratis Elementor.

Denne guide er blevet ombygget til, hvordan Elementor rent faktisk fungerer i 2026. Den oprindelige version af dette indlæg blev skrevet mod Sektioner og Indre Kolonner, og begge er arv nu. Alt nedenfor bruger Flexbox Containere, Elementors standardlayoutelement siden 3.6 og den eneste struktur, du får på en ny side.

Hvad du har brug for, før du starter

• Elementor fri (3.6 eller nyere, så Containere er tændt)
• Master Addons: installer det gratis fra WordPress.org, og tænd derefter for Custom CSS-udvidelsen
• En beholder med en baggrundsfarve eller et billedsæt. Spring ikke dette over. Skævhed forvandler kassen, så hvis kassen ikke har noget synligt i sig, vil du ikke se nogen ændring overhovedet. En gennemsigtig beholder er den vigtigste grund til, at folk tror, at dette trick er brudt.

Du behøver ikke Elementor Pro på noget tidspunkt. Hvis du allerede har det, opfører dets oprindelige Custom CSS-felt sig på samme måde, så indsæt koden der i stedet.

Forståelse af skævheden, før du indsætter noget

Skæving er en CSS-transformation. transform: skew(0deg, -10deg) vipper elementet langs Y-aksen med ti grader, og forvandler dets top- og bundkanter til diagonaler.

Det, der rejser folk op, er, at en transformation gælder for elementet og alt indeni. Skæv en beholder, og du skævvrider dens baggrund, sikker, men du også skæv overskriften, knappen, og billedet sidder i det. Din tekst ender med at vippe.

Så du counter-skæv. Rede en anden beholder inde i den første og vippe det tilbage med samme mængde i den modsatte retning. Forælderen går til minus ti grader, barnet går til plus ti, og de annullerer. Vinklet baggrund, opretstående indhold.

To containere, to regler, modsatte værdier. Det er det hele.

Trin 1: Byg beholderstrukturen

Åbn din side i Elementor og slip ind i en Container. Indstil dens bredde til Fuld bredde. Dette er den ydre, den der bærer vinklen.

Træk nu en anden Container inde i den første. Den indlejrede beholder indeholder det faktiske indhold: overskrift, tekst, knap, billede, hvad end sektionen er til. Design det som du vil.

Så strukturen er:

• Ydre beholder: baggrundsfarve eller billede, får skævheden
• Indre beholder: alt dit indhold, får mod-skævheden

Vedligeholdelse af en ældre side stadig bygget på sektioner og indre sektioner? Logikken er identisk. Ydre element skævheder, indre element un-skævheder. For noget nyt dog, brug Containere. De sender en masse mindre DOM, som tilføjer op, hvis du bekymrer dig om Elementor sidehastighed.

Trin 2: Tilføj den skæve CSS til den ydre beholder

Vælg den ydre beholder, gå til Advanced fane, og find MA Custom CSS boks som Master Addons tilføjer. Indsæt dette i:

selector {
  padding: 400px 0;
  margin-top: -200px;
  transform: skew(0deg, -10deg);
  overflow: hidden;
}

Her er hvad hver linje gør, så du kan justere det i stedet for bare at håbe:

• selector er Elementors stenografi for “dette specifikke element.” Master Addons scopes det for dig, så reglen kan ikke lække på andre containere.
• padding: 400px 0 giver beholderen nok lodret plads til, at de vinklede kanter kan gå et sted hen. Skæv en kort beholder, og du klipper bare hjørnerne af.
• margin-top: -200px trækker beholderen op i den over den så diagonalen overlapper, i stedet for at efterlade en hvid trekant. Halvdelen af polstringsværdien er et anstændigt startforhold.
• transform: skew(0deg, -10deg) er selve vinklen. Negativ vipper den ene vej, positiv den anden.
• overflow: hidden holder de skæve hjørner fra at vælte ud sidelæns. Lad det være, og du får en vandret rullebjælke, som jeg kommer tilbage til.

En ting, der er værd at markere: hvis du også har rørt ved Transform kontroller i Elementors egen Advanced-fane, de vil kæmpe med denne CSS, da begge skriver til det samme transform ejendom og den sidste, der indlæses, vinder. Vælg et sted for at indstille vinklen og lad den anden være i fred.

2020-versionen af denne tutorial listede fire leverandør-forudbestemte linjer (-webkit-, -moz-, -ms-, -o-). Slet dem. Ikke-foranstillet transform har arbejdet i hver browser i omkring et årti nu, og de ekstra linjer gør bare CSS-boksen sværere at læse.

Trin 3: Modskæv den indre beholder

På dette tidspunkt vippes dit indhold sammen med baggrunden. Vælg den indre beholder, åbne sin Avanceret fane, og indsætte dette i MA Brugerdefineret CSS:

selector {
  transform: skew(0deg, 10deg);
}

Samme nummer, modsat fortegn. Ydre beholder kl -10deg betyder indre beholder ved 10deg. Skift den ene uden at ændre den anden, og din tekst sidder i en lille vinkel, som læserne bemærker, selvom de ikke kan sige hvorfor.

Gem og forhåndsvisning. Du bør have en vinklet baggrund med lige indhold, der sidder oven på den. Hvis editoren stadig viser det vippet, genindlæses editorfanen; brugerdefineret CSS halter lejlighedsvis i preview- iframe.

Trin 4: Fix det mobile overløb (spring ikke dette over)

De fleste tutorials stopper ved trin 3, og det er derfor, at skæve sektioner bliver trukket tilbage fra live-websteder en uge senere.

Skæv et element i fuld bredde, og dets hjørner skubber ud forbi kanten af viewport. På skrivebordet bemærker ingen. På en telefon giver det udhæng dig en vandret rullebjælke, og siden begynder at glide sidelæns under brugerens tommelfinger. Det lyder som brudt, fordi det er det.

To ting forhindrer det:

1. Keep overflow: hidden på den skæve beholder, som i koden ovenfor.
2. Reducer vinklen på små skærme. En 10-graders skævhed, der ser skarp ud på en 1440px skærm, bliver til en hård diagonal på en 375px telefon, og den tærer på din overskrift.

Tilføj dette under koden i den ydre containers CSS-boks:

@media (max-width: 767px) {
  selector {
    padding: 200px 0;
    margin-top: -100px;
    transform: skew(0deg, -4deg);
  }
}

Og den matchende vending i den indre beholder:

@media (max-width: 767px) {
  selector {
    transform: skew(0deg, 4deg);
  }
}

Nu skalerer effekten ned i stedet for at ødelægge layoutet. Test det på en rigtig telefon, ikke kun redaktørens responsive forhåndsvisning, da forhåndsvisningsruden ikke altid gengiver overløbet. Hvis du kører brugerdefinerede brudpunkter i stedet for Elementors standarder, er Brugerdefineret Breakpoints udvidelse lader dig matche disse medieforespørgsler til dine faktiske enhedsbredder.

Det moderne alternativ: clip-sti, uden modskævhed overhovedet

Skæv-og-mod-skæv fungerer, og det er, hvad den oprindelige tutorial lærte. Der er dog en renere måde nu, og for en ny bygning er det normalt den, jeg ville nå ud til.

clip-path skærer en form ud af elementet i stedet for at transformere det. Da det klipper i stedet for at rotere, bevæger indholdet indeni sig aldrig, så der er ingen indlejret beholder og ingen anden værdi at holde synkroniseret.

Én beholder, én regel:

selector {
  padding: 160px 0;
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

De fire koordinater er hjørnerne, med uret fra øverst til venstre. Nudge procenterne for at ændre vinklen: hæve 6% for et stejlere snit, slip det mod 0 for noget mere subtilt. Du kan også vinkle kun den nederste kant og lade toppen være flad, hvilket er det sædvanlige mønster for en helt.

Hvilken metode skal du bruge?

Hver nuværende browser håndterer begge dele. Kontroller clip-path supporttabeller på MDN hvis du sidder fast og støtter noget usædvanligt.

Spring helt over CSS: Importer den færdige skabelon

Vil du ikke røre kode? Det skæve baggrundslayout leveres som en skabelon. Rediger en hvilken som helst side med Elementor, klik på Master Addons skabelonbibliotek ikon ved siden af add-element knappen, og se efter den skæve baggrund skabelon. Importer det, og derefter bytte i din egen tekst og farver.

Samme teknik, allerede koblet op. Den Master Addons skabelonbibliotek har færdige sider, sektioner, sidehoveder og sidefødder bygget på samme måde, og den Skabelonsæt gå videre med komplette multi-side site designs.

Hvor skæve baggrunde rent faktisk virker

Værd at sige, fordi denne effekt bliver overudnyttet: vinklede sektioner tjener deres holde, når de markerer en overgang. Hero ind i funktioner, funktioner i prissætning, prissætning i testimonials. De giver en lang side nogle rytme.

De holder op med at arbejde, når hver sektion er vinklet. Intet læser som en overgang længere, og siden føles bare optaget. På en lang landingsside er to eller tre vinklede kanter normalt nok.

Hvis du vil have mere dybde uden geometrien, ligger andre effekter godt ovenpå. Animerede gradient baggrunde tilføj langsom farvebevægelse, partikler tilføje et interaktivt lag, og glasmorfisme giver kortene et frostet look, der sidder godt mod et skævt panel. Den Transformerer forlængelse sætter også dreje-, skalerings- og skævkontroller i Elementor UI, hvis du hellere vil trække en skyder end at skrive grader.

Fejlfinding

• Intet ændret. Beholderen har ingen baggrund. Indstil en farve eller et billede og se igen.
• Hele siden ruller sidelæns. Add overflow: hidden til den skæve beholder, og kontroller derefter, at dens forælder ikke også flyder over.
• Teksten er stadig vippet. Modskævingen er på det forkerte element, eller tegnet er forkert. Hvis den ydre beholder er negativ, skal den indre være positiv.
• Hvidt mellemrum over sektionen. Øg det negative margin-top så vinklen trækker længere ind i afsnittet ovenfor.
• Vinklen hopper uforudsigeligt rundt. Elementors indbyggede Transform-kontroller er indstillet på det samme element og tilsidesætter din CSS. Ryd dem.
• Ingen MA Custom CSS-boks på fanen Avanceret. Udvidelsen er slået fra. Master Addons, derefter Indstillinger, derefter Udvidelser, og aktivere det.

Ofte stillede spørgsmål

Indpakning

Oprettelse af en skæv baggrund i Elementor kommer ned til to regler i to CSS-bokse: skæv den ydre beholder, modskæv den indre. Tilføj overflow: hidden, lette off vinklen på mobil, og det vil holde op på rigtige enheder snarere end kun i editoren. På en ny build, clip-path får dig det samme udseende med halvdelen af opsætningen.

Det hele kører på gratis Elementor, siden Master Addons er det, der sætter Custom CSS-boksen der til at begynde med. Hvis du senere vil have resten af værktøjssættet (Theme Builder, Popup Builder, det fulde udvidelsessæt), er det hvad Pro dækker, men intet i denne tutorial har brug for det.

Relateret læsning: Elementor animationseffekter, sådan tilføjes flydende effekter i Elementor, og sådan oprettes en klæbrig overskrift i Elementor.