Kaunis jaotur muudab lehe viie minutiga kallimaks. See on odavaim viis saidile iseloomu lisada: pole vaja ümberkujundust, pole vaja disainerit, piisab ühest vektorjoonest õiges kohas.

Probleem on selles, et sisseehitatud Elementori komplekt tüütab kiiresti ära. Shape Divideri standardsed lained ja kolmnurgad ilmuvad igal teisel maandumislehel ning Divideri vidin joonistab vaid sirge joone koos FontAwesome ikooniga. Sa tahad ornamente, botaanilisi motiive või sädemeid ja siit algabki otsing.

Sellest kollektsioonist leiad kõik ilusate jaoturite jaoks vajaliku: kuus valmis SVG-stiili, mille me ise joonistasime ja otse artiklisse lisasime, ülevaate SVG Divider for Elementor pluginast, ausa pilgu sisseehitatud tööriistadele ja viisi, kuidas lisada ükskõik millist SVG-koodi üldse ilma pluginateta.

💡 Kiirülevaade:

• 1. samm: määra oma saidi kujundusele sobiv jaoturi stiil, kuue stiili näited allpool galeriis
• 2. samm: põhiliste lainete ja kallete jaoks luba sisseehitatud Shape Divider Elementori sektsiooni seadetes
• 3. samm: käsitsi joonistatud animeeritud jaoturite jaoks paigalda SVG Divider for Elementor plugin
• 4. samm: täieliku kontrolli saavutamiseks kopeeri artiklist SVG-kood ja lisa see HTML-vidina kaudu

Miks leht vajab jaotureid ja miks just SVG-d

Jaotur lahendab kolm ülesannet: eraldab semantilisi plokke, loob kerimisrütmi ja suunab pilgu järgmisele sektsioonile. Tekstisein ilma visuaalsete pausideta on väsitav, lugeja lahkub lehelt enne nupuni jõudmist.

SVG-vorming sobib selleks ülesandeks kõige paremini ja turg kinnitab seda: W3Techsi SVG statistika kohaselt kasutab seda vormingut 66,8% kõigist saitidest (juuli 2026). Põhjused on praktilised. Vektor ei kaota teravust võrkkesta ekraanidel ega ühelgi suumitasemel. Tervet illustratsiooni sisaldav fail kaalub vähem kui üks rasterlogo. Ja iga elementi SVG sees, joont, kroonlehte, täppi, saab eraldi animeerida CSS-i abil.

Selle teema sihtrühm on tohutu: Elementor ise on WordPress.org kataloogi andmetel paigaldatud 10 miljonile saidile ja WordPress tervikuna toidab 41,5% kõigist internetisaitidest (W3Techsi loendur, juuli 2026). Teisisõnu kasutavad miljonid lehed samu standardseid laineid. Silma paista on lihtne ja me näitame allpool, kuidas.

Galerii: kuus SVG-jaoturite stiili koos näidetega

Kõik allolevad jaoturid joonistasime spetsiaalselt selle artikli jaoks ja laadisime meediakogusse tavaliste SVG-failidena. Värvipalett on neutraalne, sinine kuldse aktsendiga, iga stiil on eesmärgipäraselt märgistatud. Kasuta neid võrdlusmaterjalina oma stiili valimisel või võta kood endale: kuidas SVG-d lehele ilma pluginata lisada, käsitleme allpool ühes osas.

Laine

Kõige mitmekülgsem stiil. Erineva läbipaistvusega topeltjoon loob sügavust ja täpid keskel annavad silmale ankru. Sobib peaaegu kõikjale: blogid, teenuste maandumislehed, portfooliod.

Klassikaline ornament

Keerdudega joon ja teemant keskel, tehnika otse trükiküljendusest. Selline jaotur eeldab serif-tüpograafiat: õigusteenused, peened restoranid, pulmasaidid, kirjastused.

Botaaniline motiiv

Lehed ja marjad peenel teljel. Stiil kõigele „looduslikule ja käsitööle": ökotooted, kosmeetika, joogastuudiod, talutooted, käsitöökaubad.

Teemantide geomeetria

Kahanevas suuruses teemantide kett. Range variant ilma ühegi kõverjooneta, mis ei lähe vastuollu küljendusvõrega: ettevõtete saidid, SaaS, rahandus, tehnoloogiablogid.

Topeltjoon medaljoniga

Sisseehitatud Divideri vidina lähim sugulane, kuid märgatavalt uhkem: erineva paksusega topeltjoon ja ümmargune medaljon tähega. Hea lõpujaoturina enne jalust või autori allkirja.

Punktiirjoon sädelustega

Punktiirjoon ja hajutatud neljaharulised sädemed. Kõige enam meeleolu loov stiil: pidulikud kampaaniad, lastetooted, loomingulised portfooliod, uusaasta maandumislehed.

Mida Elementor vaikimisi suudab

Enne pluginatega alustamist tasub sisseehitatud tööriistadest maksimum välja pigistada. Elementoril on kaks standardset tööriista ja need katavad põhistsenaariumid.

Shape Divider asub sektsiooni seadetes (Stiili vahekaart). See on kujundatud serv sektsioonide vahel: laine, kaldpind, küngas, pilved, siksak, kokku umbes kümmekond kuju koos värvi, kõrguse ja peegeldamise seadetega, mõned toetavad kihte. Täpsemalt Elementori Shape Divideri juhendis. Põhimõtteline piirang: see on sektsiooni serva kuju, mitte eraldiseisev dekoratiivne element, ja ilmumisanimatsiooni pole.

Divideri vidin paigutatakse sisuplokkide vahele: sirge joon, paksuse ja värvi seaded, valikuliselt ikoon või tekst keskel. Aus töötav miinimum. Aga joon on alati sirge, ikoonid ainult standardsetest komplektidest, animatsiooni pole.

Järeldus on lihtne: range korporatiivse kujunduse jaoks piisab sisseehitatud tööriistadest. Ornamentide, käsitsi joonistatud graafika ja animatsiooni jaoks on vaja kas pluginat või oma käsi. Alustame pluginast.

SVG Divider for Elementori plugin: 90 käsitsi joonistatud eraldajat

SVG Divider for Elementor Let's WP stuudiolt lisab eraldi vidina kahe režiimiga. Vastavalt teadaandele Let's WP blogis sisaldab komplekt 90 käsitsi joonistatud kujundust ja klassikalist režiimi joonte ja ikoonidega, sealhulgas 300+ ikooni nende enda komplektist pluss eksklusiivsed temaatilised seeriad reisisaitidele ja restoranidele.

Drawn režiim on plugina tuum: ornamentaalsed illustratsioonid ilmumisanimatsiooniga, kus igal kroonlehel ja kiharal on oma ajastus. Kõik animatsioonid on kirjutatud puhtas CSS-is ilma väliste teekideta, lehele laaditakse ainult tegelikult kasutatavad stiilid. Valikuline särakiht lisab joonistuse peale lõputu kuma.

Classic režiim kordab standardse Divideri vidina ideed, kuid on paindlikum: topelt- ja punktiirjooned vahekauguse reguleerimisega liuguri abil, ikoon vasakul, keskel või paremal, integratsioon Elementori nupuga.

Kujunduse valik käib läbi patenteeritud hüpikakna valija koos otseotsinguga: ruudustik 90 pisipildist, animatsioon käivitub hiirega üle liikudes, valikute vahel vahetamine võtab paar sekundit. Plugin on kergekaaluline: inline SVG mõne kilobaidina, ainus sõltuvus on jQuery, mille WordPressi tuum juba laadib.

Nüüd aus osa. Plugina müüakse plugina lehel CodeCanyonis standardlitsentsi alusel ühele saidile, see nõuab Elementor 2.8+ ja seda pole alates 2020. aastast märgatavalt uuendatud. Selle arhitektuur on lihtne, seal pole peaaegu midagi, mis katki minna saaks, kuid toote ostmine ilma aktiivse toeta jääb riskiks, mida igaüks ise kaalub. Enne maksmist kontrollige demot Elementori praegusel versioonil.

Kuidas lisada oma SVG eraldaja ilma pluginata

Iga meie galerii eraldaja, nagu iga teinegi SVG, on võimalik lehele tasuta lisada kolme sammuga. Meetod töötab Elementoris, Gutenbergis ja üldiselt igas leheehitajas, kus on HTML-plokk.

Esimene samm: võta SVG kood. Siin on meie laine lühendatud versioon, kopeeri see otse siit ja muuda värvid oma brändiga sobivaks:

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>

Teine samm: lohista Elementoris HTML vidin soovitud kohta ja kleebi kood. Reasisene SVG renderdub koheselt, ei tekita HTTP päringuid ja pärib konteineri skaleerimise. Tee ja kuju süntaks on hästi lahti seletatud MDN-i SVG dokumentatsioonis.

Kolmas samm, kui meediateegi kaudu on mugavam töötada: pane tähele, et WordPress keelab vaikimisi SVG-failide üleslaadimise. See pole tuju, vaid turvalisus: SVG sees võib olla käivitatav skript, seega tuleb fail enne avaldamist puhastada. Ülesande lahendab tasuta plugin Safe SVG: see puhastab failid üleslaadimisel, misjärel saab SVG lisada tavalise Pildi vidinaga.

Turvareegel on üks: ära lae oma saidile kontrollimata allikatest pärit SVG-d ilma puhastamiseta. Sinu enda kood ja selle artikli failid on olemuselt puhtad, seal on ainult teed ja kujundid.

Võrdlus: millist meetodit valida

Paar sõna tabeli keskelt pärit rea kohta: Shape Dividers Plus laiendab sisseehitatud Shape Dividerit uute servastiilidega (pintsel, geomeetria, paber), töötab natiivses liideses ja on uuendatud, viimane väljalase pärineb 2026. aasta veebruarist. Sarnane Animated Shape Divider moodul koos kohandatud SVG toega on saadaval ka lisas Premium Addons. Kui vajad konkreetselt kujundatud sektsiooni serva, alusta nendest valikutest, mitte tasulisest kunstist.

⁉️🤔 Korduma kippuvad küsimused

Kas SVG Divider plugin töötab ilma Elementorita?

Ei. See on lisand, mis lisab Elementori paneelile vidina ega toimi ilma selleta, eraldiseisvat versiooni pole olemas. Minimaalne nõue, Elementor 2.8+, on märgitud lehel CodeCanyon. Elementorita saitide puhul kasuta enda SVG koodi lisamist HTML-ploki kaudu.

Kas SVG eraldajad aeglustavad saiti?

Praktiliselt mitte. Reasisene vektor renderdub ilma täiendavate HTTP päringuteta ja eraldaja kaalu mõõdetakse kilobaitides, mida kinnitab plugina autori ülevaade. CSS-animatsioonid kasutavad brauseri riistvarakiirendust. Üks rasterbänner on tavaliselt raskem kui kõik lehe eraldajad kokku.

Miks WordPress ei lase SVG-d üles laadida meediateeki?

Turvakaalutlustel: SVG on XML-dokument, mille sisse saab põimida skripti. Tuumsüsteem blokeerib sellised üleslaadimised vaikimisi. Lahendus, ametliku kataloogi Safe SVG plugin: see puhastab failid üleslaadimisel ja avab eelvaate meediateegis.

Kas ma võin teie galerii eraldajaid oma saidil kasutada?

Jah, vabalt. Joonistasime need spetsiaalselt selle artikli jaoks: salvesta SVG-fail galeriist või kopeeri plugina abita lisamise jaotisest näidiskood ja muuda värvid oma paletiga sobivaks. Autorile viitamine pole nõutav, litsentsipiirangud puuduvad.

Pluginat pole mitu aastat uuendatud, kas seda tasub osta?

Kaalu riski. Arhitektuur on lihtne, puhas CSS pluss Elementori API, seega plugin jätkab tööd praegustel versioonidel. Kuid aktiivne tugi puudub ja kui järgmine Elementori uuendus midagi lõhub, pole kedagi, kes selle parandaks. Kontrolli demot enne ostmist ja hoia varuplaan enda SVG koodi näol olemas.

Mille poolest erineb Shape Divider Divideri vidinast?

Need on erinevad Elementori tööriistad. Shape Divider määrab terve sektsiooni kujundatud serva (laine, kalle, pilved) ja seda seadistatakse sektsiooni stiilis. Divideri vidin asetab horisontaalse joone sisuplokkide vahele, soovi korral koos ikooniga. Esimene puudutab paigutuse geomeetriat, teine pausi tekstiveerus.

💎 Järeldused ja võtmesõnumid

Kaunid eraldusjooned on odav visuaalne uuendus, mis on jõukohane iga eelarvega. Retsept stsenaariumide kaupa: lihtsa sektsioonigeomeetria jaoks piisab sisseehitatud Shape Dividerist või tasuta Shape Dividers Plusist. Käsitsi joonistatud kunsti jaoks koos paljastusanimatsiooniga on olemas SVG Divider Elementorile, kuid ostes arvesta, et uuendused võivad olla seiskunud. Ning maksimaalse paindlikkuse annab sinu enda SVG kood HTML-vidina kaudu: tasuta, sõltuvusteta ja täieliku kontrolliga iga joone üle.

Praktiline nõuanne: vali üks eraldusjoonte stiil ja kasuta seda kogu saidil. Kolm erinevat ornamenti ühel lehel näevad välja halvemad kui nende puudumine ning üks korduv stiil toimib brändi identiteedi elemendina.

Võta galeriist sulle meeldiv eraldusjoon, muuda värvid oma brändiga sobivaks ja kirjuta kommentaaridesse, millise kuuest stiilist sa paigaldaksid: laine, ornament või sädemed?