En vacker avsnittsavdelare får en sida att se dyrare ut med fem minuters arbete. Det är det billigaste sättet att ge karaktär åt en webbplats: ingen omdesign behövs, ingen designer behövs, bara en vektorlinje på rätt plats.

Problemet är att det inbyggda Elementor-biblioteket snabbt känns uttjatat. Standardvågor och trianglar från Shape Divider dyker upp på varannan landningssida, och widgeten Divider ritar bara en rak linje med en FontAwesome-ikon. Du vill ha ornament, botaniska motiv eller gnistrande detaljer, och det är där sökandet börjar.

Den här samlingen har allt du behöver för vackra avdelare: sex färdiga SVG-stilar som vi har ritat själva och inkluderat direkt i artikeln, en genomgång av tillägget SVG Divider for Elementor, en ärlig titt på de inbyggda verktygen och ett sätt att infoga valfri SVG-kod helt utan tillägg.

💡 Snabb översikt:

• Steg 1: bestäm avdelarstilen för din webbdesign, exempel på sex stilar finns nedan i galleriet
• Steg 2: för enkla vågor och sluttningar, aktivera den inbyggda Shape Divider i Elementors sektionsinställningar
• Steg 3: för handritade animerade avdelare, installera tillägget SVG Divider for Elementor
• Steg 4: för full kontroll, kopiera SVG-koden från artikeln och infoga den via HTML-widgeten

Varför en sida behöver avdelare och varför just SVG

En avdelare löser tre uppgifter: den separerar semantiska block, sätter scrollrytmen och riktar blicken mot nästa sektion. En vägg av text utan visuella pauser är tröttande, läsaren lämnar sidan innan hen når knappen.

SVG-formatet är bäst lämpat för den här uppgiften, och marknaden bekräftar det: enligt W3Techs statistik om SVG används formatet av 66,8% av alla webbplatser (juli 2026). Skälen är praktiska. Vektorgrafik förlorar inte skärpan på retinaskärmar eller vid någon zoomnivå. En fil med en hel illustration väger mindre än en enda rasterlogotyp. Och varje element inuti SVG, linje, kronblad, punkt, kan animeras separat via CSS.

Målgruppen för det här ämnet är enorm: enbart Elementor är, enligt WordPress.org-katalogen, installerat på 10 miljoner webbplatser, och WordPress som helhet driver 41,5% av alla webbplatser på internet (W3Techs räknare, juli 2026). Med andra ord använder miljontals sidor samma standardvågor. Det är lätt att sticka ut, och vi visar hur nedan.

Galleri: sex stilar av SVG-avdelare med exempel

Alla avdelare nedan har vi ritat specifikt för den här artikeln och laddat upp till mediebiblioteket som vanliga SVG-filer. Paletten är neutral, blå med en guldaccent, varje stil är märkt efter användningsområde. Använd dem som referens när du väljer din egen stil eller ta koden själv: hur man infogar SVG på en sida utan tillägg går vi igenom i ett avsnitt nedan.

Våg

Den mest mångsidiga stilen. En dubbel linje med olika transparens skapar djup, och prickar i mitten ger ögat ett ankare. Passar nästan överallt: bloggar, tjänstelandningssidor, portföljer.

Klassiskt ornament

En linje med snirklar och en diamant i mitten, en teknik direkt från trycklayout. En sådan avdelare efterfrågar serif-typografi: juridiska tjänster, finrestauranger, bröllopssajter, förlag.

Botaniskt motiv

Blad och bär på en tunn axel. En stil för allt "naturligt och handgjort": ekoprodukter, kosmetika, yogastudior, gårdsprodukter, hantverk.

Geometri av diamanter

En kedja av diamanter i minskande storlek. En strikt variant utan en enda böjd linje, som inte krockar med layoutrutnätet: företagswebbplatser, SaaS, finans, teknikbloggar.

Dubbel linje med medaljong

Den närmaste släktingen till den inbyggda Divider-widgeten, men märkbart elegantare: en dubbel linje med olika tjocklek och en rund medaljong med en stjärna. Bra som en avslutande avdelare före sidfoten eller författarsignaturen.

Prickad linje med gnistrar

En prickad linje och utspridda fyruddiga gnistrar. Den mest "stämningsskapande" stilen: festliga kampanjer, barnprodukter, kreativa portföljer, landningssidor för nyår.

Vad Elementor klarar direkt ur lådan

Innan du installerar tillägg är det värt att pressa ut max ur de inbyggda verktygen. Elementor har två standardverktyg, och de täcker grundläggande scenarier.

Shape Divider finns i sektionsinställningarna (fliken Stil). Det är en formad kant mellan sektioner: våg, sluttning, kulle, moln, sicksack, totalt ett dussintal former med inställningar för färg, höjd och spegelvändning, en del stöder lager. Detaljer finns i Elementors guide om Shape Divider. Den grundläggande begränsningen: detta är en sektionskant, inte ett separat dekorativt element, och det finns ingen avslöjandeanimering.

Divider-widgeten placeras mellan innehållsblock: en rak linje, inställningar för tjocklek och färg, eventuellt en ikon eller text i mitten. Ett ärligt fungerande minimum. Men linjen är alltid rak, ikoner kommer bara från standarduppsättningar, ingen animering.

Slutsatsen är enkel: för en strikt företagslayout räcker de inbyggda verktygen. För ornament, handritad grafik och animering behöver du antingen ett tillägg eller egna händer. Låt oss börja med ett tillägg.

SVG Divider for Elementor-tillägget: 90 handritade avdelare

SVG Divider for Elementor av Let's WP studio lägger till en separat widget med två lägen. Enligt tillkännagivandet på Let's WP-bloggen innehåller uppsättningen 90 handritade designer och ett klassiskt läge med linjer och ikoner, inklusive 300+ ikoner från deras egen uppsättning plus exklusiva temaserier för resesajter och restauranger.

Drawn-läget är tilläggets kärna: dekorativa illustrationer med avslöjandeanimering, där varje kronblad och snirkel har sin egen timing. Alla animeringar är skrivna i ren CSS utan externa bibliotek, endast faktiskt använda stilar laddas på sidan. Ett valfritt glitterlager lägger till oändligt skimrande ovanpå teckningen.

Classic-läget upprepar idén med den vanliga Divider-widgeten, men mer flexibelt: dubbla och prickade linjer med avståndsjustering via reglage, ikon till vänster, i mitten eller till höger, integration med Elementor-knappen.

Designval sker via en egen popup-väljare med direktsökning: ett rutnät med 90 miniatyrer, animering startar vid muspekning, byte mellan alternativ tar ett par sekunder. Tillägget är lättviktigt: inline SVG på några kilobyte, det enda beroendet är jQuery, som redan laddas av WordPress kärna.

Nu den ärliga delen. Tillägget säljs på tilläggets sida på CodeCanyon under en standardlicens för en sajt, kräver Elementor 2.8+ och har inte uppdaterats märkbart sedan 2020. Dess arkitektur är enkel, det finns nästan inget som kan gå sönder, men att köpa en produkt utan aktiv support är fortfarande en risk som var och en väger för sig själv. Innan du betalar, kolla demon på den aktuella versionen av Elementor.

Så här infogar du en egen SVG-avdelare utan plugin

Vilken avdelare som helst från vårt galleri kan, precis som alla andra SVG-filer, infogas på en sida gratis i tre steg. Metoden fungerar i Elementor, Gutenberg och generellt i alla byggare med ett HTML-block.

Första steget: ta SVG-koden. Här är en förkortad version av vår våg, kopiera den direkt härifrån och ändra färgerna så att de matchar ditt varumärke:

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>

Andra steget: i Elementor drar du HTML-widgeten till önskad plats och klistrar in koden. Inline SVG renderas direkt, skapar inga HTTP-förfrågningar och ärver containerns skalning. Sökvägs- och formsyntaxen är väl förklarad i MDN-dokumentationen om SVG.

Tredje steget, om det är smidigare att arbeta via mediebiblioteket: notera att WordPress som standard förbjuder uppladdning av SVG-filer. Detta är inte ett infall, utan säkerhet: ett körbart skript kan finnas inuti en SVG, så filen måste saneras före publicering. Uppgiften löses av gratispluginet Safe SVG: det rensar filer vid uppladdning, varefter SVG infogas med den vanliga bildwidgeten.

Säkerhetsregeln är enkel: ladda inte upp SVG från overifierade källor till din webbplats utan sanering. Din egen kod och filerna från denna artikel är rena i sin konstruktion, det finns bara sökvägar och former.

Jämförelse: vilken metod ska man välja

Några ord om raden från mitten av tabellen: Shape Dividers Plus utökar den inbyggda Shape Divider med nya kantstilar (pensel, geometri, papper), fungerar i det ursprungliga gränssnittet och uppdateras, den senaste versionen är daterad februari 2026. En liknande modul för animerad formavdelare med stöd för anpassad SVG finns också i Premium Addons. Om du specifikt behöver en formad sektionskant, börja med dessa alternativ, inte med betald konst.

⁉️🤔 Vanliga frågor

Fungerar SVG Divider-pluginet utan Elementor?

Nej. Detta är ett tillägg som lägger till en widget i Elementor-panelen och fungerar inte utan det, ingen fristående version finns. Minimikravet, Elementor 2.8+, anges på CodeCanyon. För webbplatser utan Elementor, använd infogning av egen SVG-kod via ett HTML-block.

Saktar SVG-avdelare ner en webbplats?

Praktiskt taget nej. Inline vektorgrafik renderas utan extra HTTP-förfrågningar, och avdelarens vikt mäts i kilobyte, vilket bekräftas av nedbrytningen från plugin-författaren. CSS-animationer använder webbläsarens hårdvaruacceleration. En raster-banner är vanligtvis tyngre än alla sidans avdelare tillsammans.

Varför låter WordPress dig inte ladda upp SVG till mediebiblioteket?

Av säkerhetsskäl: SVG är ett XML-dokument, inuti vilket ett skript kan bäddas in. Kärnan blockerar sådana uppladdningar som standard. Lösningen, Safe SVG-pluginet från den officiella katalogen: det sanerar filer vid uppladdning och öppnar en förhandsvisning i mediebiblioteket.

Kan jag använda avdelare från ert galleri på min webbplats?

Ja, fritt. Vi ritade dem specifikt för denna artikel: spara SVG-filen från galleriet eller kopiera exempelkoden från avsnittet om infogning utan plugin och ändra färgerna så att de matchar din palett. Attribution krävs inte, det finns inga licensbegränsningar.

Pluginet har inte uppdaterats på flera år, är det värt att köpa?

Väg risken. Arkitekturen är enkel, ren CSS plus Elementor API, så pluginet fortsätter att fungera på aktuella versioner. Men det finns ingen aktiv support, och om nästa Elementor-uppdatering förstör något kommer ingen att finnas där för att fixa det. Kontrollera demon före köp och ha en reservplan i form av din egen SVG-kod.

Hur skiljer sig Shape Divider från Divider-widgeten?

Det är olika Elementor-verktyg. Shape Divider sätter en formad kant på en hel sektion (våg, lutning, moln) och konfigureras i sektionsstilen. Divider-widgeten placerar en horisontell linje mellan innehållsblock, eventuellt med en ikon. Det första handlar om layoutgeometri, det andra om en paus inuti en textkolumn.

💎 Slutsatser och sammanfattning

Vackra avdelare är en billig visuell uppgradering, tillgänglig oavsett budget. Recept efter scenario: för grundläggande sektionsgeometri räcker den inbyggda Shape Divider eller gratisversionen Shape Dividers Plus. För handritad grafik med reveal-animation finns SVG Divider för Elementor, men köp den med ett öga på uteblivna uppdateringar. Och maximal flexibilitet ger din egen SVG-kod via en HTML-widget: gratis, utan beroenden och med full kontroll över varje linje.

Praktiskt tips: välj en avdelarstil och använd den över hela webbplatsen. Tre olika ornament på en sida ser sämre ut än inga alls, och en återkommande stil fungerar som en del av varumärkesidentiteten.

Ta den avdelare du gillar från galleriet, ändra färgerna så de matchar ditt varumärke och skriv i kommentarerna vilken av de sex stilarna du skulle installera: våg, ornament eller gnistor?