Standard Elementor-skillelinjer er tilstrekkelige for typiske oppsett, men når designet krever en unik bølgekontur, en profilert fasing eller en diagonal som matcher skissen nøyaktig, kommer det innebygde settet med 26 former til kort. Designeren lager en tilpasset overgang mellom seksjoner, og utvikleren sitter igjen og lurer: hvordan legger du til din egen SVG i Elementor slik at den plukker opp fargen fra innstillingene og overlever neste plugin-oppdatering?

Problemet er ikke mangel på en mekanisme: filteret elementor/shapes/additional_shapes har eksistert i kjernen lenge. Problemet er at de fleste veiledninger på nettet foreslår å plassere SVG-en i selve plugin-mappen, noe som er en direkte vei til å miste filen under automatiske oppdateringer. Og parametrene url/path utelates ofte; uten dem rendres rett og slett ikke skillelinjen i editoren.

Nedenfor finner du en testet arbeidsflyt: fra klargjøring av vektorfilen til registrering via et filter med plassering i child theme. Etter dette vil din tilpassede formskillelinje dukke opp i nedtrekksmenyen sammen med standardformene og vil bestå uavhengig av Elementor-oppdateringer.

💡 Rask oversikt:

• Forbered en raster-skisse i Photoshop: beskjær det nødvendige området og fyll det med svart.
• Konverter PNG til SVG via en nettbasert tjeneste, og forenkle til én farge.
• Rydd opp i SVG-koden: fjern unødvendige tagger, legg til elementor-shape-fill og preserveAspectRatio.
• Plasser filen i child theme-mappen og registrer den via add_filter med nøklene url, path og has_negative.
• Test skillelinjen i Elementor-editoren, endre farge og høyde.

Hva er en formskillelinje og hvorfor legge til din egen

En formskillelinje er en SVG-form lagt over topp- eller bunnkanten av en seksjon i Elementor. Den skaper en jevn overgang mellom blokker: en bølge, fasing, bue eller spiss kant. Standardbiblioteket inkluderer 26 former: fjell, dråper, skyer, kurver og så videre.

En tilpasset skillelinje er nødvendig i tre tilfeller. For det første når designet inneholder en unik form som ikke finnes i standardsettet. For det andre for merkevarebygging (for eksempel en overgang formet som en logo eller en signaturbølge). For det tredje når flere prosjekter bruker det samme tilpassede settet; i så fall legges skillelinjer til sentralt via et child theme eller en tilpasset plugin.

Teknisk sett er mekanismen implementert gjennom filteret elementor/shapes/additional_shapes. Denne kroken aksepterer en matrise der hvert element beskriver én skillelinje: navnet, filbanen, muligheten for å speilvende og negativt alternativ. Etter registrering vises formen i editorens nedtrekksmeny.

Opprette en SVG-fil for skillelinjen

Prinsippet bak hvordan formskillelinjer fungerer, er at det synlige området er det du fyller i SVG-en. Så først må du forstå hvilken del av skissen som skal bli formen.

Anta at designeren laget en overgang med en blå nedre seksjon og en hvit øvre «bølge». Den hvite konturen skal bli formen; det er den du må skjære ut og fylle med en heltrukken farge.

Nøkkelpoeng: hvis du gjør en feil og velger det blå området i stedet for det hvite, vil skillelinjen i Elementor se invertert eller beskåret ut. Finn alltid ut nøyaktig hva som skal være den synlige formen.

Trinn i Photoshop

Åpne skissen i Photoshop og fullfør tre trinn:

• Slett bakgrunnsområdet som IKKE skal være skillelinjen. I eksemplet ovenfor, slett den blå delen.

• Fyll det gjenværende området (den hvite «bølgen») med svart. Svart forenkler påfølgende vektortracing; konvertereren blir ikke forvirret av forskjellige nyanser.

• Beskjær lerretet til formgrensene og eksporter til PNG. Photoshop genererer SVG-er med ekstra innpakninger og artefakter, så PNG som et mellomformat er mer pålitelig.

Hvorfor svart i stedet for nettstedets farge med en gang? Elementor bruker skillelinjefargen fra sine egne innstillinger; SVG-fyllingen spiller ingen rolle. Og en svart silhuett på hvit bakgrunn gir den reneste vektoren etter automatisk tracing.

Resultat etter behandling i Photoshop:

Konvertere PNG til SVG

Deretter trenger du en ren vektor. Bruk den nettbaserte konvertereren pngtosvg.com; den krever ingen registrering og håndterer enfargede former uten unødvendig støy i koden.

Last opp PNG-en og angi parametrene:

• Maksimal forenkling, én farge. Dette fjerner «søppel»-kurver og holder SVG-en kompakt.

• Antall farger: 1 (eller 2 hvis du trenger en gjennomsiktig bakgrunn; i så fall sett den andre fargen som gjennomsiktig).

Last ned den resulterende SVG-en og åpne den i et koderedigeringsprogram: Notepad++, VS Code eller et vanlig tekstredigeringsprogram. Deretter kommer manuell opprydding.

Tilpasse SVG-en til Elementors krav

For at skillelinjen skal plukke opp fargen og skalere riktig, gjør tre redigeringer direkte i filkoden:

Legg til klassen elementor-shape-fill. Uten den kan ikke Elementor fargelegge SVG-en på nytt. Finn taggen <path> eller <polygon> og legg til attributtet class="elementor-shape-fill".

Fjern width og height. Behold bare viewBox og legg til preserveAspectRatio="none"; dette lar skillelinjen strekke seg over hele seksjonsbredden. Hvis attributtene for bredde/høyde ikke er til stede, la dem være og bare sørg for at viewBox er der.

Fjern alt unødvendig. Slett konstruksjonene <?xml...>, <!DOCTYPE...> og eventuelle XML-topptekster utenfor <svg>-taggen. Behold bare ren kode inne i <svg>...</svg>; Elementor tolker slike filer mer pålitelig.

Den endelige SVG-en skal se omtrent slik ut:

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>

Hvor du skal plassere SVG-filen

Den groveste og vanligste tilnærmingen er mappen /wp-content/plugins/elementor/assets/shapes/. Det fungerer nøyaktig frem til den første automatiske Elementor-oppdateringen, som lydløst overskriver plugin-mappens innhold sammen med filen din.

Den riktige tilnærmingen er et child theme. Opprett en assets/shapes/-mappe inne i det og plasser SVG-en der:

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

Nesten alle moderne temaer (Hello Elementor, GeneratePress, Astra, Kadence) støtter child themes. Hvis du ikke har et, opprett det: i temaroten trenger du bare en style.css med en topptekst /* Theme Name: My Child Theme Template: parent-theme */ og en functions.php.

Et alternativ er en tilpasset plugin. Men for én eller to skillelinjer er et child theme enklere og skaper ikke ekstra entiteter.

Kode for registrering av skillelinjen

I functions.php-filen til child theme (eller via Code Snippets-pluginen), legg til følgende kode:

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
} );

Nøkkelgjennomgang:

• title: navnet på skillelinjen i editorens nedtrekksmeny. Skriv med latinske tegn; dette er en intern identifikator som vises som den er i grensesnittet.
• url: den offentlige fil-URL-en, brukt til forhåndsvisning i editoren. get_stylesheet_directory_uri() peker til child theme-mappen.
• path: serverbanen til filen. Nødvendig for rendering på serversiden og noen sjekker.
• has_flip: aktiverer vertikal speilvending av skillelinjen (Flip-knappen i editoren).
• has_negative: nødvendig hvis du har to filer: shape.svg (direkte) og shape-negative.svg (med inverterte farger). Hvis det ikke er noen negativ, sett den til false.
• height_only: når true, tillater Elementor bare endring av skillelinjehøyden; når false, kan bredden også endres.

Nøkkelforskjellen fra instruksjoner som flyter rundt på forum: tilstedeværelsen av url og path er obligatorisk. Uten dem vil ikke skillelinjen rendres; Elementor vil rett og slett ikke finne filen.

Viktig merknad om skillelinje-ID-en

Identifikatoren shape-custom-wave (matrisenøkkelen) må være unik. Hvis en annen plugin registrerer en skillelinje med samme nøkkel, vil din bli overskrevet. Bruk alltid et prefiks: for eksempel mytheme-wave-1 i stedet for bare wave.

Testing i editoren

Etter å ha lagt til koden, åpne en hvilken som helst side i Elementor-editoren, velg en seksjon og gå til fanen Stil → Formskillelinje. Din skillelinje skal vises i nedtrekksmenyen under standardformene.

Test tre scenarier:

• Farge: endre skillelinjefargen i innstillingene. SVG-en skal fargelegges på nytt. Hvis ikke, sjekk om class="elementor-shape-fill" er til stede i filen.
• Høyde: juster høyden med glidebryteren. Skillelinjen skal skalere uten forvrengning.
• Speilvend: hvis has_flip er aktivert, skal speilvendingsknappen være aktiv.

Hvis den ikke vises i det hele tatt, sjekk først URL-en: åpne get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' i nettleseren. Den skal vise ren SVG-kode, ikke en 404.

Se hele prosessen fra skisse til fungerende skillelinje i sanntid; i denne videoen går forfatteren gjennom hele veien, inkludert nyanser med preserveAspectRatio og feilsøking av ødelagte baner:

⁉️🤔 Ofte stilte spørsmål

Vil den tilpassede skillelinjen forsvinne når Elementor oppdateres?

Nei, hvis SVG-en er i et child theme eller en tilpasset plugin. Elementor-oppdateringer overskriver bare sin egen mappe /wp-content/plugins/elementor/. Temafiler berøres ikke. Men hvis du plasserte SVG-en i /wp-content/plugins/elementor/assets/shapes/, vil den bli slettet ved første automatiske oppdatering.

Kan jeg lage en skillelinje med en gradient?

Ikke direkte gjennom Elementor-innstillinger; bare heltrukne farger er tilgjengelige der. Men du kan definere en gradient direkte i SVG-en, inne i <defs> og <linearGradient>. I så fall vil ikke Elementor fargelegge formen på nytt (ikke legg til elementor-shape-fill-klassen til den banen), og skillelinjen vil vises med den «innbakte» gradienten.

Hvorfor vises ikke skillelinjen i editoren selv om det ikke er feil i koden?

De tre vanligste årsakene: glemt url/path i registreringsmatrisen, en ødelagt filbane (sjekk direkte URL-tilgang), eller manglende elementor-shape-fill-klasse i SVG-en; uten den hopper Elementor lydløst over skillelinjen.

Er Photoshop nødvendig?

Nei, ethvert rasterredigeringsprogram vil fungere: GIMP, Figma (eksporter til PNG), Photopea, til og med Paint.NET. Nøkkelen er å få en ren svart silhuett på en gjennomsiktig eller hvit bakgrunn før konvertering til SVG. Selve tracingen gjøres ikke i redigeringsprogrammet, men via pngtosvg eller et lignende verktøy.

Hvor mange tilpassede skillelinjer kan jeg legge til?

Det er ingen mengdebegrensning; registrer så mange du trenger i det samme add_filter-kallet. Hver med sin egen nøkkel, bane og innstillinger. Den praktiske grensen er bekvemmelighet: mer enn 10-15 skillelinjer i en nedtrekksmeny blir tungvint å søke gjennom.

Er det verdt innsatsen å lage en tilpasset formskillelinje

Hvis prosjektet er et engangstilfelle og standard «bølge» er tilstrekkelig, er det ikke det. De innebygde 26 Elementor-formene dekker de fleste typiske oppsett, og tiden brukt på å forberede SVG og feilsøke kode er bedre investert i innhold.

Men når designet krever en nøyaktig match til skissen, eller du har en serie nettsteder med den samme merkede overgangen mellom seksjoner, lønner en tilpasset skillelinje seg fra første bruk. Du legger den til én gang via child theme, og den blir tilgjengelig på alle sider på tvers av nettverket uten noe bry.

Hovedpoenget: **ikke plasser SVG-en i plugin-mappen, spesifiser alltid url og path i filteret, og ikke glem **elementor-shape-fill. Disse tre punktene er roten til de fleste problemer som dukker opp i forumtråder og GitHub-saker.