En vakker seksjonsdeler får en side til å se dyrere ut på fem minutters arbeid. Dette er den billigste måten å gi et nettsted karakter på: ingen redesign nødvendig, ingen designer nødvendig, bare én vektorlinje på riktig sted.

Problemet er at det innebygde Elementor-utvalget fort blir oppbrukt. Standardbølger og trekanter fra Shape Divider dukker opp på annenhver landingsside, og Divider-widgeten tegner bare en rett linje med et FontAwesome-ikon. Du ønsker deg ornamenter, botaniske motiver eller gnister, og det er der letingen begynner.

Denne samlingen har alt du trenger for vakre skillelinjer: seks ferdige SVG-stiler som vi har tegnet selv og inkludert rett i artikkelen, en gjennomgang av SVG Divider for Elementor-pluginen, en ærlig titt på innebygde verktøy og en måte å sette inn hvilken som helst SVG-kode uten plugin i det hele tatt.

💡 Rask oversikt:

• Steg 1: bestem skillelinjestilen for nettstedets design, eksempler på seks stiler nedenfor i galleriet
• Steg 2: for enkle bølger og skråninger, aktiver den innebygde Shape Divider i Elementors seksjonsinnstillinger
• Steg 3: for håndtegnede animerte skillelinjer, installer SVG Divider for Elementor-pluginen
• Steg 4: for full kontroll, kopier SVG-koden fra artikkelen og sett den inn via HTML-widgeten

Hvorfor en side trenger skillelinjer og hvorfor akkurat SVG

En skillelinje løser tre oppgaver: den skiller semantiske blokker, setter scrolerytmen og leder blikket til neste seksjon. En vegg av tekst uten visuelle pauser er slitsom, leseren forlater siden før de når knappen.

SVG-formatet egner seg best til denne oppgaven, og markedet bekrefter det: ifølge W3Techs statistikk om SVG brukes formatet av 66,8% av alle nettsteder (juli 2026). Årsakene er praktiske. Vektor mister ikke skarphet på retina-skjermer eller ved noe zoomnivå. En fil med en hel illustrasjon veier mindre enn én enkelt rasterlogo. Og hvert element inni SVG, linje, kronblad, prikk, kan animeres separat via CSS.

Målgruppen for dette temaet er enorm: Elementor selv er, ifølge WordPress.org-katalogen, installert på 10 millioner nettsteder, og WordPress som helhet driver 41,5% av alle internettsider (W3Techs-teller, juli 2026). Med andre ord bruker millioner av sider de samme standardbølgene. Det er enkelt å skille seg ut, og vi skal vise deg hvordan nedenfor.

Galleri: seks stiler av SVG-skillelinjer med eksempler

Alle skillelinjene nedenfor tegnet vi spesifikt for denne artikkelen og lastet opp til mediebiblioteket som vanlige SVG-filer. Paletten er nøytral, blå med gullaksent, hver stil er merket etter formål. Bruk dem som referanse når du velger din egen stil, eller ta koden selv: hvordan du setter inn SVG på en side uten plugin, dekker vi i et avsnitt nedenfor.

Bølge

Den mest allsidige stilen. En dobbel linje med ulik gjennomsiktighet skaper dybde, og prikker i midten gir blikket et anker. Passer nesten overalt: blogger, tjenestelandingssider, porteføljer.

Klassisk ornament

En linje med krøller og en diamant i midten, en teknikk rett fra trykt layout. En slik skillelinje ber om serif-typografi: juridiske tjenester, gourmetrestauranter, bryllupsnettsteder, forlag.

Botanisk motiv

Blader og bær på en tynn akse. En stil for alt «naturlig og håndlaget»: økoprodukter, kosmetikk, yogastudioer, gårdsprodukter, håndverksvarer.

Geometri av diamanter

En kjede av diamanter i avtagende størrelse. En streng variant uten en eneste buet linje, som ikke kolliderer med layoutrutenettet: bedriftsnettsteder, SaaS, finans, teknologiblogger.

Dobbel linje med medaljong

Den nærmeste slektningen til den innebygde Divider-widgeten, men merkbart mer forseggjort: en dobbel linje med ulik tykkelse og en rund medaljong med en stjerne. God som en avsluttende skillelinje før bunnteksten eller forfattersignaturen.

Stiplet linje med gnistre

En stiplet linje og spredte firspissede gnistre. Den mest stemningsskapende stilen: festlige kampanjer, barneprodukter, kreative porteføljer, nyttårs-landingssider.

Hva Elementor kan gjøre ut av boksen

Før du installerer utvidelser, er det verdt å presse maksimalt ut av de innebygde verktøyene. Elementor har to standardverktøy, og de dekker grunnleggende scenarioer.

Shape Divider ligger i seksjonsinnstillingene (Stil-fanen). Dette er en formet kant mellom seksjoner: bølge, skråning, bakke, skyer, sikksakk, omtrent et dusin former totalt med innstillinger for farge, høyde og speilvending, noen støtter lag. Detaljer i Elementor-guiden om Shape Divider. Den grunnleggende begrensningen: dette er en seksjonskantform, ikke et separat dekorativt element, og det finnes ingen avsløringsanimasjon.

Divider-widgeten plasseres mellom innholdsblokker: en rett linje, innstillinger for tykkelse og farge, eventuelt et ikon eller tekst i midten. Et ærlig fungerende minimum. Men linjen er alltid rett, ikoner er bare fra standardsett, ingen animasjon.

Konklusjonen er enkel: for en stram bedriftslayout er de innebygde verktøyene nok. For ornamenter, håndtegnede grafikk og animasjon trenger du enten en utvidelse eller egne hender. La oss starte med en utvidelse.

SVG Divider for Elementor-utvidelsen: 90 håndtegnede skillelinjer

SVG Divider for Elementor fra Let's WP studio legger til en egen widget med to moduser. Ifølge kunngjøringen på Let's WP-bloggen inkluderer settet 90 håndtegnede design og en klassisk modus med linjer og ikoner, inkludert 300+ ikoner fra deres eget sett pluss eksklusive temaserier for reisesider og restauranter.

Drawn-modusen er utvidelsens kjerne: ornamentale illustrasjoner med avsløringsanimasjon, der hvert kronblad og hver krøll har sin egen timing. Alle animasjoner er skrevet i ren CSS uten eksterne biblioteker, bare stiler som faktisk brukes lastes inn på siden. Et valgfritt glitterlag legger til uendelig skimring oppå tegningen.

Classic-modusen gjentar ideen til standard Divider-widgeten, men mer fleksibel: doble og stiplede linjer med avstandsjustering via glidebryter, ikon på venstre, midten eller høyre side, integrasjon med Elementor-knappen.

Designvalg skjer gjennom en proprietær popup-velger med direktesøk: et rutenett med 90 miniatyrbilder, animasjon starter ved musepeker, bytte mellom alternativer tar et par sekunder. Utvidelsen er lett: innebygd SVG på noen få kilobyte, den eneste avhengigheten er jQuery, som allerede lastes av WordPress-kjernen.

Så den ærlige delen. Utvidelsen selges på utvidelsessiden på CodeCanyon under en standardlisens for ett nettsted, krever Elementor 2.8+ og har ikke blitt merkbart oppdatert siden 2020. Arkitekturen er enkel, det er nesten ingenting som kan gå i stykker, men å kjøpe et produkt uten aktiv support forblir en risiko som hver enkelt må vurdere selv. Før du betaler, sjekk demoen på gjeldende versjon av Elementor.

Slik setter du inn din egen SVG-deler uten en plugin

Enhver deler fra galleriet vårt, som enhver annen SVG, kan settes inn på en side gratis i tre trinn. Metoden fungerer i Elementor, Gutenberg og generelt i ethvert byggeverktøy med en HTML-blokk.

Første trinn: ta SVG-koden. Her er en forkortet versjon av bølgen vår, kopier den rett herfra og endre fargene slik at de passer din profil:

1
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="120" viewBox="0 0 1200 120">
2
  <path d="M60,60 C210,20 360,100 510,60 S810,20 960,60 S1140,100 1140,60"
3
        fill="none" stroke="#4a6fa5" stroke-width="3" stroke-linecap="round"/>
4
  <circle cx="600" cy="60" r="6" fill="#c9a227"/>
5
</svg>

Andre trinn: i Elementor drar du HTML-widgeten til ønsket plassering og limer inn koden. Inline SVG rendres umiddelbart, skaper ingen HTTP-forespørsler og arver containerens skalering. Syntaks for baner og former er godt forklart i MDN-dokumentasjonen om SVG.

Tredje trinn, hvis det er mer praktisk å jobbe via mediebiblioteket: merk at WordPress som standard forbyr opplasting av SVG-filer. Dette er ikke et innfall, men sikkerhet: et kjørbart skript kan ligge inne i en SVG, så filen må renses før publisering. Oppgaven løses av den gratis pluginen Safe SVG: den renser filer ved opplasting, hvoretter SVG settes inn med den vanlige bilde-widgeten.

Sikkerhetsregelen er én: ikke last opp SVG fra ubekreftede kilder til nettstedet ditt uten rensing. Din egen kode og filer fra denne artikkelen er rene av design, det er kun baner og former.

Sammenligning: hvilken metode bør du velge

Noen ord om raden fra midten av tabellen: Shape Dividers Plus utvider den innebygde Shape Divider med nye kantstiler (pensel, geometri, papir), fungerer i det opprinnelige grensesnittet og oppdateres, den siste utgivelsen er datert februar 2026. En lignende Animated Shape Divider-modul med støtte for egendefinert SVG er også tilgjengelig i Premium Addons. Hvis du spesifikt trenger en formet seksjonskant, start med disse alternativene, ikke med betalt kunst.

⁉️🤔 Ofte stilte spørsmål

Fungerer SVG Divider-pluginen uten Elementor?

Nei. Dette er et tillegg som legger til en widget i Elementor-panelet og fungerer ikke uten, det finnes ingen frittstående versjon. Minimumskravet, Elementor 2.8+, er angitt på CodeCanyon. For nettsteder uten Elementor, bruk innsetting av din egen SVG-kode via en HTML-blokk.

Senker SVG-delere farten på et nettsted?

Praktisk talt nei. Inline vektor rendres uten ekstra HTTP-forespørsler, og delerens vekt måles i kilobyte, noe som bekreftes av gjennomgangen fra plugin-forfatteren. CSS-animasjoner bruker nettleserens maskinvareakselerasjon. Ett rasterbanner er vanligvis tyngre enn alle sidens delere til sammen.

Hvorfor lar ikke WordPress deg laste opp SVG til mediebiblioteket?

Av sikkerhetsgrunner: SVG er et XML-dokument, og inne i det kan et skript bygges inn. Kjernen blokkerer slike opplastinger som standard. Løsningen, Safe SVG-pluginen fra den offisielle katalogen: den renser filer ved opplasting og åpner en forhåndsvisning i mediebiblioteket.

Kan jeg bruke delere fra galleriet deres på nettstedet mitt?

Ja, fritt. Vi tegnet dem spesifikt for denne artikkelen: lagre SVG-filen fra galleriet eller kopier eksempelkoden fra avsnittet om innsetting uten plugin og endre fargene slik at de passer din palett. Kreditering er ikke påkrevd, det er ingen lisensbegrensninger.

Pluginen har ikke blitt oppdatert på flere år, er den verdt å kjøpe?

Vurder risikoen. Arkitekturen er enkel, ren CSS pluss Elementor API, så pluginen fortsetter å fungere på gjeldende versjoner. Men det er ingen aktiv støtte, og hvis den neste Elementor-oppdateringen ødelegger noe, vil det ikke være noen til å fikse det. Sjekk demoen før du kjøper og ha en reserveplan i form av din egen SVG-kode.

Hvordan skiller Shape Divider seg fra Divider-widgeten?

Dette er forskjellige Elementor-verktøy. Shape Divider setter en formet kant på en hel seksjon (bølge, skråning, skyer) og konfigureres i seksjonsstilen. Divider-widgeten setter en horisontal linje mellom innholdsblokker, eventuelt med et ikon. Den første handler om layoutgeometri, den andre om en pause inne i en tekstkolonne.

💎 Konklusjoner og hovedpunkter

Vakre skillelinjer er en rimelig visuell oppgradering, tilgjengelig for ethvert budsjett. Oppskrift etter scenario: for enkel seksjonsgeometri holder den innebygde Shape Divider eller gratis Shape Dividers Plus. For håndtegnet kunst med avsløringsanimasjon finnes SVG Divider for Elementor, men kjøp den med et øye på stillestående oppdateringer. Og maksimal fleksibilitet får du med din egen SVG-kode via en HTML-widget: gratis, uten avhengigheter og med full kontroll over hver eneste linje.

Praktisk tips: velg én skillelinjestil og bruk den over hele nettstedet. Tre ulike ornamenter på én side ser verre ut enn fraværet av dem, og én gjentakende stil fungerer som et element i merkevareidentiteten.

Ta skillelinjen du liker fra galleriet, endre fargene så de matcher merkevaren din og skriv i kommentarfeltet hvilken av de seks stilene du ville installert: bølge, ornament eller gnister?