Elementori standardsed Elementor eraldajad on tüüpiliste paigutuste jaoks piisavad, kuid kui disain nõuab unikaalset lainekontuuri, bränditud kallet või diagonaali, mis vastab täpselt maketile, jääb sisseehitatud 26 kujundi komplektist väheks. Disainer loob sektsioonide vahele kohandatud ülemineku ja arendaja jääb mõtlema: kuidas lisada Elementorisse oma SVG nii, et see võtaks seadetest värvi üle ja jääks ellu järgmise pluginauuenduse ajal?

Probleem ei ole mehhanismi puudumises: filter elementor/shapes/additional_shapes on tuumas juba ammu olemas. Probleem on selles, et enamik veebipõhiseid õpetusi soovitab paigutada SVG plugina enda kausta, mis on otsetee faili kaotamisele automaatsete uuenduste käigus. Ning url/path parameetrid jäetakse sageli märkimata; ilma nendeta eraldaja lihtsalt ei kuvata redaktoris.

Allpool on testitud töövoog: alates vektorfaili ettevalmistamisest kuni selle registreerimiseni filtri kaudu, paigutades faili alamteemasse. Pärast seda ilmub sinu kohandatud kujunderaldaja rippmenüüsse koos standardsetega ja püsib sõltumatuna Elementori uuendustest.

💡 Kiire ülevaade:

• Valmista Photoshopis ette rastervisand: kärbi vajalik ala ja täida see mustaga.
• Teisenda PNG võrguteenuse abil SVG-ks, lihtsustades ühevärviliseks.
• Puhasta SVG kood: eemalda mittevajalikud sildid, lisa elementor-shape-fill ja preserveAspectRatio.
• Paiguta fail alamteema kausta ja registreeri see add_filter abil koos url, path ja has_negative võtmetega.
• Testi eraldajat Elementori redaktoris, muuda värvi ja kõrgust.

Mis on kujunderaldaja ja miks lisada oma

Kujunderaldaja (Shape Divider) on SVG kujund, mis asetatakse Elementoris sektsiooni ülemisele või alumisele servale. See loob sujuva ülemineku plokkide vahel: laine, kaldserv, kaar või terav serv. Standardne teek sisaldab 26 kujundit: mäed, tilgad, pilved, kõverad jne.

Kohandatud eraldajat on vaja kolmel juhul. Esiteks, kui disain sisaldab unikaalset kujundit, mida standardkomplektis pole. Teiseks, brändingu eesmärgil (näiteks logo või signatuurlaine kujuline üleminek). Kolmandaks, kui mitmes projektis kasutatakse sama kohandatud komplekti; sel juhul lisatakse eraldajad tsentraalselt alamteema või kohandatud plugina kaudu.

Tehniliselt on mehhanism realiseeritud läbi elementor/shapes/additional_shapes filtri. See konks võtab vastu massiivi, kus iga element kirjeldab ühte eraldajat: nimi, failitee, pööramisvõimalus ja negatiivi valik. Pärast registreerimist ilmub kujund redaktori rippmenüüsse.

SVG faili loomine eraldaja jaoks

Kujunderaldajate tööpõhimõte seisneb selles, et nähtav ala on see, mille sa SVG-s täidad. Seega pead kõigepealt aru saama, millisest visandi osast saab kujund.

Oletame, et disainer lõi ülemineku sinise alumise sektsiooni ja valge ülemise "lainega". Valge kontuur peaks saama kujundiks; see on see, mille pead välja lõikama ja ühtlase värviga täitma.

Võtmepunkt: kui teed vea ja valid sinise ala valge asemel, näeb eraldaja Elementoris välja pööratud või kärbitud. Tee alati kindlaks, mis täpselt peaks olema nähtav kujund.

Tööetapid Photoshopis

Ava visand Photoshopis ja tee läbi kolm sammu:

• Kustuta taustaala, mis EI peaks olema eraldaja. Ülaltoodud näites kustuta sinine osa.

• Täida järelejäänud ala (valge "laine") mustaga. Must lihtsustab hilisemat vektorjälitust; konverter ei satu erinevatest toonidest segadusse.

• Kärbi lõuend kujundi piirideni ja ekspordi PNG-na. Photoshop genereerib SVG-sid koos lisamähiste ja artefaktidega, seega on PNG vahevorminguna usaldusväärsem.

Miks must, mitte kohe saidi värv? Elementor rakendab eraldaja värvi oma seadetest; SVG täide ei oma tähtsust. Ja must siluett valgel taustal annab pärast automaatset jälitust kõige puhtama vektori.

Tulemus pärast töötlemist Photoshopis:

PNG teisendamine SVG-ks

Järgmiseks vajad puhast vektorit. Kasuta võrgukonverterit pngtosvg.com; see ei nõua registreerimist ja käsitleb ühevärvilisi kujundeid ilma tarbetu koodimürata.

Lae PNG üles ja määra parameetrid:

• Maksimaalne lihtsustamine, üks värv. See eemaldab "prügikõverad" ja hoiab SVG kompaktsena.

• Värvide arv: 1 (või 2, kui vajad läbipaistvat tausta; sel juhul määra teine värv läbipaistvaks).

Lae saadud SVG alla ja ava see koodiredaktoris: Notepad++, VS Code või tavalises tekstiredaktoris. Järgneb käsitsi puhastamine.

SVG kohandamine Elementori nõuetele

Selleks, et eraldaja võtaks värvi üle ja skaleeruks õigesti, tee kolm muudatust otse faili koodis:

Lisa klass elementor-shape-fill. Ilma selleta ei saa Elementor SVG-d ümber värvida. Leia <path> või <polygon> silt ja lisa atribuut class="elementor-shape-fill".

Eemalda width ja height. Jäta alles ainult viewBox ja lisa preserveAspectRatio="none"; see võimaldab eraldajal venida üle kogu sektsiooni laiuse. Kui width/height atribuudid puuduvad, jäta need rahule ja veendu lihtsalt, et viewBox on olemas.

Eemalda kõik mittevajalik. Kustuta <?xml...>, <!DOCTYPE...> konstruktsioonid ja kõik XML päised väljaspool <svg> silti. Jäta alles ainult puhas kood <svg>...</svg> sees; Elementor parsimisel on sellised failid usaldusväärsemad.

Valmis SVG peaks välja nägema umbes selline:

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>

Kuhu SVG fail paigutada

Kõige robustsem ja levinum lähenemine on kaust /wp-content/plugins/elementor/assets/shapes/. See töötab täpselt kuni esimese Elementori automaatse uuenduseni, mis kirjutab vaikimisi üle plugina kausta sisu koos sinu failiga.

Õige lähenemine on alamteema. Loo selle sisse kaust assets/shapes/ ja paiguta SVG sinna:

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

Peaaegu kõik kaasaegsed teemad (Hello Elementor, GeneratePress, Astra, Kadence) toetavad alamteemasid. Kui sul seda pole, loo see: teema juurkaustas on vaja ainult style.css faili päisega /* Theme Name: My Child Theme Template: parent-theme */ ja functions.php faili.

Alternatiiv on kohandatud plugin. Kuid ühe või kahe eraldaja jaoks on alamteema lihtsam ega tekita lisaolemeid.

Kood eraldaja registreerimiseks

Alamteema functions.php failis (või Code Snippets plugina kaudu) lisa järgmine kood:

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

Võtmete selgitus:

• title: eraldaja nimi redaktori rippmenüüs. Kirjuta ladina tähtedega; see on sisemine identifikaator, mida kuvatakse liideses sellisena, nagu see on.
• url: faili avalik URL, mida kasutatakse redaktori eelvaates. get_stylesheet_directory_uri() osutab alamteema kaustale.
• path: serveritee failini. Vajalik serveripoolseks renderdamiseks ja mõningateks kontrollideks.
• has_flip: lubab eraldaja vertikaalse pööramise (Flip nupp redaktoris).
• has_negative: vajalik, kui sul on kaks faili: shape.svg (otse) ja shape-negative.svg (pööratud värvidega). Kui negatiivi pole, määra false.
• height_only: kui true, lubab Elementor muuta ainult eraldaja kõrgust; kui false, saab muuta ka laiust.

Peamine erinevus foorumites levivatest juhistest: url ja path olemasolu on kohustuslik. Ilma nendeta eraldajat ei kuvata; Elementor lihtsalt ei leia faili.

Oluline märkus eraldaja ID kohta

Identifikaator shape-custom-wave (massiivi võti) peab olema unikaalne. Kui mõni teine plugin registreerib sama võtmega eraldaja, kirjutatakse sinu oma üle. Kasuta alati prefiksit: näiteks mytheme-wave-1, mitte lihtsalt wave.

Testimine redaktoris

Pärast koodi lisamist ava Elementori redaktoris ükskõik milline leht, vali sektsioon ja mine vahekaardile Stiil → Kujunderaldaja. Sinu eraldaja peaks ilmuma rippmenüüsse standardsete alla.

Testi kolme stsenaariumi:

• Värv: muuda eraldaja värvi seadetes. SVG peaks ümber värvuma. Kui mitte, kontrolli class="elementor-shape-fill" olemasolu failis.
• Kõrgus: reguleeri kõrgust liuguriga. Eraldaja peaks skaleeruma moonutusteta.
• Pööramine: kui has_flip on lubatud, peaks pööramisnupp olema aktiivne.

Kui seda üldse ei ilmu, kontrolli esmalt URL-i: ava brauseris get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg'. See peaks kuvama puhast SVG koodi, mitte 404 viga.

Vaata kogu protsessi maketist töötava eraldajani reaalajas; selles videos läbib autor kogu tee, sealhulgas nüansid preserveAspectRatio ja katkiste radade silumisega:

⁉️🤔 Korduma kippuvad küsimused

Kas kohandatud eraldaja kaob, kui Elementori uuendatakse?

Ei, kui SVG on alamteemas või kohandatud pluginas. Elementori uuendused kirjutavad üle ainult tema enda kausta /wp-content/plugins/elementor/. Teemafaile ei puudutata. Kui aga paigutasid SVG kausta /wp-content/plugins/elementor/assets/shapes/, kustutatakse see esimese automaatse uuendusega.

Kas ma saan luua gradient-eraldaja?

Mitte otse Elementori seadete kaudu; seal on saadaval ainult ühtlased värvid. Kuid sa võid defineerida gradiendi otse SVG-s, <defs> ja <linearGradient> sees. Sel juhul Elementor kujundit ümber ei värvi (ära lisa sellele teele elementor-shape-fill klassi) ja eraldajat kuvatakse "sissepõletatud" gradiendiga.

Miks eraldajat redaktoris ei kuvata, kuigi koodis vigu pole?

Kolm kõige levinumat põhjust: unustatud url/path registreerimismassiivis, katkine failitee (kontrolli otsest URL-i juurdepääsu) või puuduv elementor-shape-fill klass SVG-s; ilma selleta jätab Elementor eraldaja vaikimisi vahele.

Kas Photoshop on kohustuslik?

Ei, sobib ükskõik milline rasterredaktor: GIMP, Figma (eksport PNG-na), Photopea, isegi Paint.NET. Võti on saada puhas must siluett läbipaistval või valgel taustal enne SVG-ks teisendamist. Jälitus ise toimub mitte redaktoris, vaid pngtosvg või sarnase tööriista kaudu.

Mitu kohandatud eraldajat võin lisada?

Koguselist piirangut pole; registreeri samas add_filter väljakutses nii palju kui vaja. Igaüks oma võtme, tee ja seadetega. Praktiline piir on mugavus: üle 10-15 eraldaja rippmenüüs muutub otsimine tülikaks.

Kas kohandatud kujunderaldaja loomine on vaeva väärt

Kui projekt on ühekordne ja standardne "laine" on piisav, siis ei ole. Sisseehitatud 26 Elementor kujundit katavad enamiku tüüpilisi paigutusi ja SVG ettevalmistamisele ning koodi silumisele kulutatud aeg on parem investeerida sisusse.

Kuid kui disain nõuab täpset vastavust maketile või sul on rida saite sama bränditud sektsioonidevahelise üleminekuga, tasub kohandatud eraldaja end ära juba esimesest kasutuskorrast. Lisad selle ühe korra alamteema kaudu ja see muutub kättesaadavaks kõigil lehtedel üle võrgu ilma täiendava vaevata.

Peamine järeldus: **ära paiguta SVG-d plugina kausta, määra filtris alati url ja path ning ära unusta **elementor-shape-fill. Need kolm punkti on enamiku foorumilõimedes ja GitHub probleemides kerkivate küsimuste juurpõhjus.