Standardit Elementor-jakajat riittävät tyypillisiin asetteluihin, mutta kun suunnitelma vaatii uniikin aaltomuodon, brändätyn viisteen tai diagonaalin, joka vastaa mallikuvaa tarkasti, sisäänrakennettu 26 muodon valikoima jää vajaaksi. Suunnittelija luo räätälöidyn siirtymän osioiden välille, ja kehittäjä jää miettimään: miten lisäät oman SVG:si Elementoriin niin, että se poimii värin asetuksista ja säilyy seuraavan liitännäispäivityksen yli?

Ongelma ei ole mekanismin puutteessa: elementor/shapes/additional_shapes -suodatin on ollut ytimessä pitkään. Ongelma on siinä, että useimmat verkosta löytyvät ohjeet ehdottavat SVG:n sijoittamista itse liitännäiskansioon, mikä on suora tie tiedoston menettämiseen automaattipäivitysten yhteydessä. Ja url/path-parametrit jätetään usein pois; ilman niitä jakaja ei yksinkertaisesti renderöidy editorissa.

Alla on testattu työnkulku: vektoritiedoston valmistelusta sen rekisteröintiin suodattimen kautta sijoitettuna lapsiteemaan. Tämän jälkeen räätälöity muotojakajasi ilmestyy pudotusvalikkoon standardien rinnalle ja säilyy Elementor-päivityksistä riippumatta.

💡 Pikaopas:

• Valmistele rasteriluonnos Photoshopissa: rajaa tarvittava alue ja täytä se mustalla.
• Muunna PNG SVG:ksi verkkopalvelun kautta yksinkertaistaen yhteen väriin.
• Siisti SVG-koodi: poista turhat tagit, lisää elementor-shape-fill ja preserveAspectRatio.
• Sijoita tiedosto lapsiteeman kansioon ja rekisteröi se add_filterillä url-, path- ja has_negative-avaimilla.
• Testaa jakaja Elementor-editorissa, vaihda väriä ja korkeutta.

Mikä on muotojakaja ja miksi lisätä oma

Muotojakaja (Shape Divider) on SVG-muoto, joka asetetaan Elementor-osion ylä- tai alareunan päälle. Se luo sulavan siirtymän lohkojen välille: aalto, viiste, kaari tai terävä reuna. Vakiokirjasto sisältää 26 muotoa: vuoria, pisaroita, pilviä, käyriä ja niin edelleen.

Räätälöityä jakajaa tarvitaan kolmessa tapauksessa. Ensinnäkin, kun suunnitelma sisältää uniikin muodon, jota ei löydy vakiovalikoimasta. Toiseksi, brändäystarkoituksiin (esimerkiksi logon tai tunnusomaisen aallon muotoinen siirtymä). Kolmanneksi, kun useat projektit käyttävät samaa räätälöityä sarjaa; tällöin jakajat lisätään keskitetysti lapsiteeman tai räätälöidyn liitännäisen kautta.

Teknisesti mekanismi on toteutettu elementor/shapes/additional_shapes -suodattimen kautta. Koukku vastaanottaa taulukon, jossa jokainen alkio kuvaa yhtä jakajaa: nimi, tiedostopolku, kääntömahdollisuus ja negatiivivaihtoehto. Rekisteröinnin jälkeen muoto ilmestyy editorin pudotusvalikkoon.

SVG-tiedoston luominen jakajaa varten

Muotojakajien toimintaperiaate on, että näkyvä alue on se, minkä täytät SVG:ssä. Joten ensin sinun on ymmärrettävä, mikä osa luonnoksesta tulee muodoksi.

Oletetaan, että suunnittelija loi siirtymän, jossa on sininen alaosa ja valkoinen ylä"aalto". Valkoisen ääriviivan tulisi olla muoto; se sinun on leikattava irti ja täytettävä yksivärisellä.

Avainkohta: jos teet virheen ja valitset sinisen alueen valkoisen sijasta, jakaja Elementorissa näyttää käänteiseltä tai rajautuneelta. Määritä aina, minkä tarkalleen tulisi olla näkyvä muoto.

Vaiheet Photoshopissa

Avaa luonnos Photoshopissa ja suorita kolme vaihetta:

• Poista tausta-alue, jonka EI tulisi olla jakaja. Yllä olevassa esimerkissä poista sininen osa.

• Täytä jäljellä oleva alue (valkoinen "aalto") mustalla. Musta yksinkertaistaa myöhempää vektorijäljitystä; muunnin ei mene sekaisin eri sävyistä.

• Rajaa kangas muodon rajoihin ja vie PNG-muodossa. Photoshop tuottaa SVG:t, joissa on ylimääräisiä kääreitä ja artefakteja, joten PNG välimuotona on luotettavampi.

Miksi musta eikä heti sivuston väri? Elementor soveltaa jakajan värin omista asetuksistaan; SVG:n täytöllä ei ole väliä. Ja musta siluetti valkoisella taustalla tuottaa puhtaimman vektorin automaattisen jäljityksen jälkeen.

Tulos Photoshop-käsittelyn jälkeen:

PNG:n muuntaminen SVG:ksi

Seuraavaksi tarvitset puhtaan vektorin. Käytä verkkopohjaista muunninta pngtosvg.com; se ei vaadi rekisteröitymistä ja käsittelee yksiväriset muodot ilman turhaa kohinaa koodissa.

Lataa PNG ja aseta parametrit:

• Maksimaalinen yksinkertaistus, yksi väri. Tämä poistaa "roskakäyrät" ja pitää SVG:n kompaktina.

• Värien määrä: 1 (tai 2, jos tarvitset läpinäkyvän taustan; siinä tapauksessa aseta toinen väri läpinäkyväksi).

Lataa tuloksena oleva SVG ja avaa se koodieditorissa: Notepad++, VS Code tai pelkkä tekstieditori. Seuraavaksi vuorossa on manuaalinen siivous.

SVG:n mukauttaminen Elementorin vaatimuksiin

Jotta jakaja poimii värin ja skaalautuu oikein, tee kolme muokkausta suoraan tiedoston koodiin:

Lisää luokka elementor-shape-fill. Ilman sitä Elementor ei voi värjätä SVG:tä uudelleen. Etsi <path>- tai <polygon>-tagi ja lisää attribuutti class="elementor-shape-fill".

Poista width ja height. Säilytä vain viewBox ja lisää preserveAspectRatio="none"; tämä sallii jakajan venymisen koko osion leveydelle. Jos width/height-attribuutteja ei ole, jätä ne rauhaan ja varmista vain, että viewBox on olemassa.

Poista kaikki tarpeeton. Poista <?xml...>-, <!DOCTYPE...>-rakenteet ja kaikki XML-otsikot <svg>-tagin ulkopuolelta. Säilytä vain puhdas koodi <svg>...</svg>-tagien sisällä; Elementor jäsentää tällaiset tiedostot luotettavammin.

Lopullisen SVG:n tulisi näyttää suunnilleen tältä:

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>

Mihin SVG-tiedosto sijoitetaan

Karkein ja yleisin lähestymistapa on /wp-content/plugins/elementor/assets/shapes/-kansio. Se toimii täsmälleen ensimmäiseen Elementorin automaattipäivitykseen asti, joka hiljaisesti ylikirjoittaa liitännäiskansion sisällön tiedostosi mukaan lukien.

Oikea lähestymistapa on lapsiteema. Luo sen sisään assets/shapes/-kansio ja sijoita SVG sinne:

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

Lähes kaikki modernit teemat (Hello Elementor, GeneratePress, Astra, Kadence) tukevat lapsiteemoja. Jos sinulla ei ole sellaista, luo se: teeman juureen tarvitset vain style.css-tiedoston, jossa on otsikko /* Theme Name: My Child Theme Template: parent-theme */, ja functions.php-tiedoston.

Vaihtoehto on räätälöity liitännäinen. Mutta yhdelle tai kahdelle jakajalle lapsiteema on yksinkertaisempi eikä luo ylimääräisiä entiteettejä.

Koodi jakajan rekisteröimiseksi

Lisää lapsiteeman functions.php-tiedostoon (tai Code Snippets -liitännäisen kautta) seuraava koodi:

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

Keskeinen erittely:

• title: jakajan nimi editorin pudotusvalikossa. Kirjoita latinalaisin kirjaimin; tämä on sisäinen tunniste, joka näytetään sellaisenaan käyttöliittymässä.
• url: julkinen tiedoston URL, jota käytetään editorin esikatseluun. get_stylesheet_directory_uri() osoittaa lapsiteeman kansioon.
• path: palvelinpolku tiedostoon. Vaaditaan palvelinpuolen renderöintiin ja joihinkin tarkistuksiin.
• has_flip: sallii jakajan pystysuuntaisen kääntämisen (Flip-painike editorissa).
• has_negative: tarvitaan, jos sinulla on kaksi tiedostoa: shape.svg (suora) ja shape-negative.svg (käänteisillä väreillä). Jos negatiivia ei ole, aseta arvoksi false.
• height_only: kun true, Elementor sallii vain jakajan korkeuden muuttamisen; kun false, myös leveyttä voidaan muuttaa.

Keskeinen ero foorumeilla kiertäviin ohjeisiin: **url- ja path-parametrien läsnäolo on pakollista. Ilman niitä jakaja ei renderöidy; Elementor ei yksinkertaisesti löydä tiedostoa.

Tärkeä huomio jakajan tunnisteesta

Tunnisteen shape-custom-wave (taulukon avain) on oltava uniikki. Jos toinen liitännäinen rekisteröi jakajan samalla avaimella, omasi ylikirjoitetaan. Käytä aina etuliitettä: esimerkiksi mytheme-wave-1 pelkän waven sijaan.

Testaus editorissa

Koodin lisäämisen jälkeen avaa mikä tahansa sivu Elementor-editorissa, valitse osio ja siirry Style-välilehdelle → Shape Divider. Jakajasi pitäisi ilmestyä pudotusvalikkoon standardien alapuolelle.

Testaa kolme skenaariota:

• Väri: vaihda jakajan väriä asetuksissa. SVG:n tulisi värjäytyä uudelleen. Jos ei, tarkista class="elementor-shape-fill":n läsnäolo tiedostossa.
• Korkeus: säädä korkeutta liukusäätimellä. Jakajan tulisi skaalautua vääristymättä.
• Käännä: jos has_flip on käytössä, kääntöpainikkeen tulisi olla aktiivinen.

Jos se ei ilmesty lainkaan, tarkista ensin URL: avaa get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' selaimessa. Sen tulisi näyttää puhdasta SVG-koodia, ei 404:ää.

Katso koko prosessi mallikuvasta toimivaksi jakajaksi reaaliajassa; tällä videolla tekijä käy läpi koko polun, mukaan lukien vivahteet preserveAspectRation ja rikkinäisten polkujen vianmäärityksen kanssa:

⁉️🤔 Usein kysytyt kysymykset

Katoaako räätälöity jakaja, kun Elementor päivitetään?

Ei, jos SVG on lapsiteemassa tai räätälöidyssä liitännäisessä. Elementor-päivitykset ylikirjoittavat vain oman /wp-content/plugins/elementor/-kansionsa. Teematiedostoihin ei kosketa. Jos kuitenkin sijoitit SVG:n kansioon /wp-content/plugins/elementor/assets/shapes/, se poistetaan ensimmäisessä automaattipäivityksessä.

Voinko luoda jakajan, jossa on liukuväri?

En suoraan Elementorin asetusten kautta; siellä on saatavilla vain yksivärisiä. Mutta voit määritellä liukuvärin suoraan SVG:ssä <defs>- ja <linearGradient>-tagien sisällä. Siinä tapauksessa Elementor ei värjää muotoa uudelleen (älä lisää elementor-shape-fill-luokkaa siihen polkuun), ja jakaja näkyy "sisäänleivotulla" liukuvärillä.

Miksi jakaja ei näy editorissa, vaikka koodissa ei ole virheitä?

Kolme yleisintä syytä: unohdetut url/path rekisteröintitaulukossa, rikkinäinen tiedostopolku (tarkista suora URL-yhteys) tai elementor-shape-fill-luokan puuttuminen SVG:stä; ilman sitä Elementor ohittaa jakajan hiljaisesti.

Vaaditaanko Photoshop?

Ei, mikä tahansa rasterieditori käy: GIMP, Figma (vie PNG-muodossa), Photopea, jopa Paint.NET. Avain on saada puhdas musta siluetti läpinäkyvälle tai valkoiselle taustalle ennen SVG:ksi muuntamista. Itse jäljitystä ei tehdä editorissa, vaan pngtosvgn tai vastaavan työkalun kautta.

Kuinka monta räätälöityä jakajaa voin lisätä?

Määrällistä rajoitusta ei ole; rekisteröi niin monta kuin tarvitset samassa add_filter-kutsussa. Jokaisella omalla avaimellaan, polullaan ja asetuksillaan. Käytännön rajoitus on mukavuus: yli 10-15 jakajaa pudotusvalikossa käy hankalaksi selata.

Kannattaako nähdä vaivaa räätälöidyn muotojakajan luomiseksi

Jos projekti on kertaluonteinen ja standardi "aalto" riittää, ei kannata. Sisäänrakennetut 26 Elementor-muotoa kattavat useimmat tyypilliset asettelut, ja SVG:n valmisteluun ja koodin vianmääritykseen käytetty aika on parempi sijoittaa sisältöön.

Mutta kun suunnitelma vaatii tarkkaa vastaavuutta mallikuvaan, tai sinulla on sarja sivustoja, joissa on sama brändätty siirtymä osioiden välillä, räätälöity jakaja maksaa itsensä takaisin jo ensimmäisestä käyttökerrasta. Lisäät sen kerran lapsiteeman kautta, ja se on saatavilla kaikilla sivuilla koko verkostossa ilman vaivaa.

Tärkein opetus: **älä sijoita SVG:tä liitännäiskansioon, määritä aina url ja path suodattimessa, äläkä unohda **elementor-shape-fill-luokkaa. Nämä kolme kohtaa ovat juurisyy useimpiin ongelmiin, jotka nousevat esiin foorumiketjuissa ja GitHub-tiketeissä.