De vanliga Elementor-avgränsarna räcker för typiska layouter, men när designen kräver en unik vågkontur, en profil med varumärkesprägel eller en diagonal som matchar mockupen exakt, kommer det inbyggda biblioteket med 26 former till korta. Designern skapar en anpassad övergång mellan sektioner, och utvecklaren står där och undrar: hur lägger man till sin egen SVG i Elementor så att den hämtar färgen från inställningarna och överlever nästa plugin-uppdatering?

Problemet är inte avsaknaden av en mekanism: filtret elementor/shapes/additional_shapes har funnits i kärnan länge. Problemet är att de flesta guider på nätet föreslår att man placerar SVG:n i själva plugin-mappen, vilket är en direkt väg till att förlora filen vid automatiska uppdateringar. Och parametrarna url/path utelämnas ofta; utan dem renderas avgränsaren helt enkelt inte i editorn.

Nedan följer ett testat arbetsflöde: från att förbereda vektorfilen till att registrera den via ett filter med placering i barntemat. Efter detta kommer din anpassade formavgränsare att dyka upp i rullgardinsmenyn tillsammans med standardformerna och bestå oberoende av Elementor-uppdateringar.

💡 Snabb översikt:

• Förbered en rasterskiss i Photoshop: beskär önskat område och fyll det med svart.
• Konvertera PNG till SVG via en onlinetjänst, med förenkling till en enda färg.
• Städa upp SVG-koden: ta bort onödiga taggar, lägg till elementor-shape-fill och preserveAspectRatio.
• Placera filen i barntemats mapp och registrera den via add_filter med nycklarna url, path och has_negative.
• Testa avgränsaren i Elementor-editorn, ändra färg och höjd.

Vad är en formavgränsare och varför lägga till en egen

En Shape Divider är en SVG-form som läggs ovanpå den övre eller nedre kanten av en sektion i Elementor. Den skapar en mjuk övergång mellan block: en våg, fasning, båge eller spetsig kant. Standardbiblioteket innehåller 26 former: berg, droppar, moln, kurvor och så vidare.

En anpassad avgränsare behövs i tre fall. För det första när designen innehåller en unik form som inte finns i standarduppsättningen. För det andra i profileringssyfte (till exempel en övergång formad som en logotyp eller en signaturvåg). För det tredje när flera projekt använder samma anpassade uppsättning; i så fall läggs avgränsare till centralt via ett barntema eller ett anpassat plugin.

Tekniskt sett implementeras mekanismen genom filtret elementor/shapes/additional_shapes. Hooken tar emot en array där varje element beskriver en avgränsare: namnet, filsökvägen, möjlighet att spegelvända och negativt alternativ. Efter registrering visas formen i editorns rullgardinsmeny.

Skapa en SVG-fil för avgränsaren

Principen bakom hur formavgränsare fungerar är att det synliga området är det du fyller i SVG:n. Så först måste du förstå vilken del av skissen som ska bli formen.

Anta att designern skapade en övergång med en blå nedre sektion och en vit övre "våg". Den vita konturen ska bli formen; det är den du behöver skära ut och fylla med en solid färg.

Viktig poäng: om du gör ett misstag och markerar det blå området istället för det vita, kommer avgränsaren i Elementor att se inverterad eller beskuren ut. Bestäm alltid exakt vad som ska vara den synliga formen.

Steg i Photoshop

Öppna skissen i Photoshop och genomför tre steg:

• Ta bort bakgrundsområdet som INTE ska vara avgränsaren. I exemplet ovan, ta bort den blå delen.

• Fyll det återstående området (den vita "vågen") med svart. Svart förenklar den efterföljande vektoriseringen; konverteraren blir inte förvirrad av olika nyanser.

• Beskär arbetsytan till formens gränser och exportera till PNG. Photoshop genererar SVG:er med extra omslag och artefakter, så PNG som mellanformat är mer tillförlitligt.

Varför svart istället för sajtens färg direkt? Elementor applicerar avgränsarens färg från sina egna inställningar; SVG-fyllningen spelar ingen roll. Och en svart siluett på vit bakgrund ger den renaste vektorn efter automatisk tracing.

Resultat efter bearbetning i Photoshop:

Konvertera PNG till SVG

Därefter behöver du en ren vektor. Använd onlinekonverteraren pngtosvg.com; den kräver ingen registrering och hanterar enfärgade former utan onödigt brus i koden.

Ladda upp PNG:n och ställ in parametrarna:

• Maximal förenkling, en färg. Detta tar bort "skräpkurvor" och håller SVG:n kompakt.

• Antal färger: 1 (eller 2 om du behöver en transparent bakgrund; i så fall, ställ in den andra färgen som transparent).

Ladda ner den resulterande SVG:n och öppna den i en kodredigerare: Notepad++, VS Code eller en vanlig textredigerare. Därefter kommer manuell städning.

Anpassa SVG:n till Elementors krav

För att avgränsaren ska hämta färgen och skalas korrekt, gör tre redigeringar direkt i filkoden:

Lägg till klassen elementor-shape-fill. Utan den kan Elementor inte färglägga om SVG:n. Hitta taggen <path> eller <polygon> och lägg till attributet class="elementor-shape-fill".

Ta bort width och height. Behåll endast viewBox och lägg till preserveAspectRatio="none"; detta gör att avgränsaren kan sträckas ut över hela sektionens bredd. Om attributen width/height inte finns, låt dem vara och se bara till att viewBox finns där.

Ta bort allt onödigt. Radera konstruktioner som <?xml...>, <!DOCTYPE...> och eventuella XML-headers utanför taggen <svg>. Behåll endast ren kod inuti <svg>...</svg>; Elementor tolkar sådana filer mer tillförlitligt.

Den slutliga SVG:n bör se ut ungefär så här:

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
2
  <path class="elementor-shape-fill" d="M0,0 C300,100 900,0 1200,120 L0,120 Z"/>
3
</svg>

Var du ska placera SVG-filen

Den mest brutala och vanligaste metoden är mappen /wp-content/plugins/elementor/assets/shapes/. Det fungerar exakt fram till den första automatiska Elementor-uppdateringen, som tyst skriver över plugin-mappens innehåll tillsammans med din fil.

Rätt tillvägagångssätt är ett barntema. Skapa en mapp assets/shapes/ inuti det och placera SVG:n där:

1
/wp-content/themes/your-child-theme/assets/shapes/shape-custom.svg

Nästan alla moderna teman (Hello Elementor, GeneratePress, Astra, Kadence) stöder barnteman. Om du inte har ett, skapa det: i temats rot behöver du bara en style.css med en header /* Theme Name: My Child Theme Template: parent-theme */ och en functions.php.

Ett alternativ är ett anpassat plugin. Men för en eller två avgränsare är ett barntema enklare och skapar inte extra entiteter.

Kod för att registrera avgränsaren

I barntemats functions.php-fil (eller via pluginet Code Snippets), lägg till följande kod:

1
/**
2
 * Registers a custom shape divider in Elementor.
3
 * SVG is located in the assets/shapes/ folder of the child theme.
4
 */
5
add_filter( 'elementor/shapes/additional_shapes', function( $additional_shapes ) {
6
 
7
    $additional_shapes['shape-custom-wave'] = [
8
        'title'        => esc_html__( 'Custom Wave', 'my-child-theme' ),
9
        'url'          => get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg',
10
        'path'         => get_stylesheet_directory() . '/assets/shapes/shape-custom.svg',
11
        'has_flip'     => true,
12
        'has_negative' => true,
13
        'height_only'  => false,
14
    ];
15
 
16
    return $additional_shapes;
17
 
18
} );

Viktig genomgång:

• title: avgränsarens namn i editorns rullgardinsmeny. Skriv med latinska tecken; detta är en intern identifierare som visas som den är i gränssnittet.
• url: den publika fil-URL:en, används för förhandsvisning i editorn. get_stylesheet_directory_uri() pekar på barntemats mapp.
• path: serversökvägen till filen. Krävs för rendering på serversidan och vissa kontroller.
• has_flip: aktiverar vertikal spegelvändning av avgränsaren (Flip-knappen i editorn).
• has_negative: behövs om du har två filer: shape.svg (direkt) och shape-negative.svg (med inverterade färger). Om det inte finns någon negativ, sätt den till false.
• height_only: när true tillåter Elementor endast ändring av avgränsarens höjd; när false kan bredden också ändras.

Den viktigaste skillnaden från instruktioner som flyter runt på forum: närvaron av url och path är obligatorisk. Utan dem kommer avgränsaren inte att renderas; Elementor hittar helt enkelt inte filen.

Viktig notering om avgränsarens ID

Identifieraren shape-custom-wave (array-nyckeln) måste vara unik. Om ett annat plugin registrerar en avgränsare med samma nyckel, kommer din att skrivas över. Använd alltid ett prefix: till exempel mytheme-wave-1 istället för bara wave.

Testning i editorn

Efter att ha lagt till koden, öppna valfri sida i Elementor-editorn, välj en sektion och gå till fliken Stil → Shape Divider. Din avgränsare bör visas i rullgardinsmenyn under standardformerna.

Testa tre scenarier:

• Färg: ändra avgränsarens färg i inställningarna. SVG:n bör färgläggas om. Om inte, kontrollera förekomsten av class="elementor-shape-fill" i filen.
• Höjd: justera höjden med reglaget. Avgränsaren bör skalas utan förvrängning.
• Spegelvänd: om has_flip är aktiverad, bör flip-knappen vara aktiv.

Om den inte visas alls, kontrollera först URL:en: öppna get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' i webbläsaren. Den bör visa ren SVG-kod, inte en 404.

Se hela processen från mockup till fungerande avgränsare i realtid; i den här videon går författaren igenom hela vägen, inklusive nyanser med preserveAspectRatio och felsökning av trasiga sökvägar:

⁉️🤔 Vanliga frågor

Kommer den anpassade avgränsaren att försvinna när Elementor uppdateras?

Nej, om SVG:n finns i ett barntema eller anpassat plugin. Elementor-uppdateringar skriver endast över sin egen mapp /wp-content/plugins/elementor/. Temafiler rörs inte. Men om du placerade SVG:n i /wp-content/plugins/elementor/assets/shapes/, kommer den att raderas vid den första automatiska uppdateringen.

Kan jag skapa en avgränsare med en gradient?

Inte direkt via Elementors inställningar; endast solida färger är tillgängliga där. Men du kan definiera en gradient direkt i SVG:n, inuti <defs> och <linearGradient>. I så fall kommer Elementor inte att färglägga om formen (lägg inte till klassen elementor-shape-fill på den pathen), och avgränsaren kommer att visas med den "inbakade" gradienten.

Varför visas inte avgränsaren i editorn trots att det inte finns några fel i koden?

De tre vanligaste orsakerna: bortglömd url/path i registreringsarrayen, en trasig filsökväg (kontrollera direkt URL-åtkomst), eller att klassen elementor-shape-fill saknas i SVG:n; utan den hoppar Elementor tyst över avgränsaren.

Krävs Photoshop?

Nej, vilken rasterredigerare som helst fungerar: GIMP, Figma (exportera till PNG), Photopea, till och med Paint.NET. Nyckeln är att få en ren svart siluett på en transparent eller vit bakgrund innan konvertering till SVG. Själva tracningen görs inte i redigeraren, utan via pngtosvg eller ett liknande verktyg.

Hur många anpassade avgränsare kan jag lägga till?

Det finns ingen kvantitetsgräns; registrera så många du behöver i samma add_filter-anrop. Var och en med sin egen nyckel, sökväg och inställningar. Den praktiska gränsen är bekvämlighet: mer än 10-15 avgränsare i en rullgardinsmeny blir besvärligt att söka igenom.

Är det värt ansträngningen att skapa en anpassad formavgränsare

Om projektet är en engångsföreteelse och standardvågen räcker, är det inte det. De inbyggda 26 Elementor-formerna täcker de flesta typiska layouter, och tiden som läggs på att förbereda SVG och felsöka kod är bättre investerad i innehåll.

Men när designen kräver en exakt matchning mot mockupen, eller du har en serie sajter med samma profilerade övergång mellan sektioner, lönar sig en anpassad avgränsare från första användningen. Du lägger till den en gång via barntemat, och den blir tillgänglig på alla sidor i nätverket utan krångel.

Den viktigaste lärdomen: **placera inte SVG:n i plugin-mappen, specificera alltid url och path i filtret, och glöm inte **elementor-shape-fill. Dessa tre punkter är roten till de flesta problem som dyker upp i forumtrådar och GitHub-ärenden.