SVG használata a Diviben

Szerző: | 2018. 11. 15. | Egy kis tanulnivaló

Miről is lesz ma szó

Az egyéni ikonfontok használata egy nagyszerű lehetőség arra, hogy szimbólumokat és logókat apróbb grafikai elemeket jeleníts meg a Divis weboldaladon bármely szövegen belül. A képektől eltérően az ikonfontok pixelesedés mentesen méretezhetőek, és könnyen célozhatóak a CSS és a HTML használatával. Leggyakrabban a menüben, a fejlécen használhatjuk, de tökéletes megoldás lehet fülszövegekhez, felsorolásokhoz. Na és innentől el is szabadulhat a fantáziánk.

Rengeteg ikonfont készlet áll rendelkezésünkre, például az Elegantthemes-nek is van sajátja, ezeket megtalálod beépítve. A legismertebb talán a Font Awesome. Mégsem arról fogok most írni, hogy ezeket hogyan kell használni, hanem arról, hogy hogyan kell tök egyedi ikonokat előállítani és használni a Divi-ben.

Előzetesen

Ez a rövid összefoglaló kezdő vagy új felhasználók számára is készült, nem igényel semmilyen professzionális eszközt, nem kell az Adobe Illustratorban szerkeszteni vektoros grafikákat. Általában a webdizájnban is mindenre több megoldás van, most egy olyant csinálunk végig, amit már használtam és szépen, egyszerűen működik.

Figyelmeztetés a Divivel kapcsolatban

Egyetlen dologra kell figyelni a Divi használatakor. Ez pedig az az eset, ha megváltozik a webhely URL-je. Ebbe az is beleszámít, ha mondjuk http://-ről https://-re állunk át. A Divi a teljes URL-t tárolja a betöltéshez és ha SSL nélküli oldalra töltöttük még fel az ikonfontot, akkor ott fogja keresni és nem találni. Valószínűleg vakarja majd a fejét a Divi, hogy hol is van. Ebben az esetben az adatbázisban kell lecserélni a régi URL-eket az újakra. Erre nagyon sok ingyenes bővítmény van. Én a Better Search Replace bővítményt szoktam használni. Nem valószínű, hogy az Elegantthemes házon belül megoldást csinálna erre. Ha URL váltás volt, és nem jelennek meg az ikonfontok, akkor gyanakodj erre.

Mire lesz szükségünk?

  • egy-egy SVG fájl minden egyes ikonhoz,
  • na meg kb. 15-25 percre

Mi a fene az az SVG?

Az SVG (Scalable Vector Graphic) egy grafikus fájlformátum, ami úgy viselkedik, mint egy vector grafika, azaz a méret változtatásával tökéletesen megőrzi a minőségét (persze a pixeles grafika is megőrzi, ha kisebbre veszed a méretét :-), ez viszont növelésre is). Nagyon jól lehet hasunálni illusztrációkhoz, ahol nem szükséges egy jpg részletgazdagsága. További infókat találsz erről a csodabogárról itt.

Hogyan csinálhatunk SVG-t?

Ha szeretnél SVG-t készíteni egy meglévő képfájlból, például egy PNG-ből, akkor erre ingyenes eszközök állnak rendelkezésedre az interneten, amelyek segítenek ebben. Az én tippem: http://pngtosvg.com/. Itt egy halom lehetőséged lesz a kép beállításához, és nem kell semmi extrát (regisztráció, fizetés) csinálnod. Pár perc alatt elkészítheted az SVG konverzióval a kívánt képet. Általában az SVG formátumot a böngészőkhöz érdemes hozzárendelni a Windowsban, hogy lásd, hogyan jelennek meg.

Ha gyakorta csinálsz SVG fájlokat vagy több beállításra van szükséged, akkor a Vector Magic lehet a barátod. Ez egy letölthető szoftver, van egy online eszköze is (én nem használom) ez egy 8$-os havi előfizetéssel érhető el.

Kereshetünk is egy SVG fájlt

Ha nincsenek saját ikonjaid, akkor kereshetsz is magadnak. Az SVG ikonokat olyan helyeken leled meg, mint például a Noun Project, FlatIcon és így tovább. Az oldal alján találsz egy gyűjteményt. Néhányuk ingyenes ikonokat kínál, mások pedig egy apróbb támogatást kér a munkájáért. Én leggyakrabban a Flaticont használom, de a Noun Project oldalon is gyönyörű ikonokat fogsz találni. Itt a Pro előfizetés (évi 39,99$ vagy havi 9,99$) is van, ami feljogosít a letöltött anyagok korlátozásmentes használatára is.

Meg kell magyarázni a WordPressnek, hogy ismerje az SVG-t

Erre két lehetőségünk van, egy részről feldobhatunk egy ingyenes bővítményt vagy (javasolt megoldás) a korábban elkészített gyerektémánk functions.php fájlját egészíthetjük ki pár sor kóddal.

Pluginnal:

Állj!

Amennyiben nem akarsz SVG fontokat használni az oldaladon csak kiváltanád például az oldal logóját egy SVG-vel, akkor ez után a lépés után készen is állsz. Ha viszont további helyeken is használni fogsz SVG-ket, akkor olvass tovább is.

 

Ikonfont használók előre

Tehát most ott tartunk, hogy vannak SVG képeid, már csak meg kell csinálnunk egy betűtípust. Ezt a Fontastic (http://fontastic.me) használatával fogjuk megtenni. A Fontastic ingyen használható, de fiókot kell csinálnod a használatához. A fiók létrehozása után itt léphetsz be a Fontastic webhelyre: https://app.fontastic.me/accounts/login/.

Ehhez a cikkhez csináltam egy 25 ikonból álló betűkészletet, amit letölthetsz a cikk végén és nyugodtan használhatsz is.

1. lépés – Adj egy beszédes nevet a betűkészletednek

Kattints a felső menüben a Modify Font elemre. Amikor megjelenik a betűtípus-beállítási popup ablak, írd be a betűtípus nevét, majd kattints a Mentés gombra. Hurrá van egy igazi saját betűtípusod.

2. Lépés Importáld be az SVG-idet

Kattints az Add More Icons gombra a Fontastic alkalmazás képernyő tetején, majd az IMPORT ICONS-ra. Itt fogod majd az SVG-ket hozzáadni a saját gyűjteményedhez.

Miután feltöltötted az SVG-ket, kattints az OK gombra a popup ablakban, majd kattints a Kezdőlap gombra a képernyő tetején (nem fog automatikusan átirányítani oda).

 

3. lépés Nevezd el a saját betűszettedet

Kattints a jobb felső sarokban található Menü opcióra, ahol az ikon található, és válaszd a Change set name részt és adj egy nevet ennek az ikonkészletnek, hogy később is megtaláld.

4. lépés- Szabd testre a betűkészletet

Kattints a feltöltött ikonra. Láthatod, hogy ezzel kiemeli, megjelöli. A kiemelt ikonra kattintva kattints a menüben található CUSTOMIZE lehetőségre. Ezzel tudod beállítani az egyes betűknek a CSS osztályát és karakterhez való hozzárendelését. Alapértelmezés szerint az ikon az “a” betűtől kezdve vannak egyesével hozzárendelve. Választhatsz bármilyen más karaktert is, ahogyan neked a kezedre áll.

5. lépés – Töltsd le a betűkészletedet

Miután elkészültünk a karaktertérképpel és tudjuk, hogy milyen ikonhoz milyen karakter van hozzárendelve, kattints PUBLISH lehetőségre. Most a manuális installálási lehetőséget fogjuk használni, de ha üzleti célra is akarod használni, akkor fizetős verzióban automatikusként is használhatod a betűkészletet. Erre a példára én most nem akartam költeni, szóval manuálisan oldjuk meg. 

Kattints a LETÖLTÉS gombra, és mentsd el a betűtípusodat.

Új betűtípust .zip archív fájlként fogod megkapni. A kicsomagolt mappában találod meg a saját neveddel ellátott .ttf fájlt

6. lépés – Már csak hozzá kell adni a Divihez

Nyiss meg egy szövegmodult bármelyik oldalon, majd kattints a Tervezés lapra – nem kell semmilyen szöveget beírnod. A szöveg betűtípusok mellett kattints a legördülő menüre (mintha egy másik betűtípust választanál), majd kattints a Feltöltés gombra.
Ezután nevezd el és töltsd fel a kibontott betűtípus fájlt a letöltött zip fájlból. Legyen egyszerűen megjegyezhető például az oldal neve, ahol azt használod vagy amivel könnyen megtalálod majd. Töltsd fel!

A feltöltés után bezárhatod és eltávolíthatod a szövegmodult. Remélhetőleg a jövőben könnyebb lesz a betűtípusok hozzáadása, ha ezt az ET is fontosnak találja.

Használat

Ha emlékszel még a Fontastic oldalon elérhető egy Font reference rész, ami két táblázatban mutatja meg a saját betűkészletedet.

A táblázat első része a CSS MAPPING, azaz pontosan az a CSS osztály, ami a hozzárendelt karakter osztályaként megjeleníti az adott ikont.

A táblázat második része a CHARACTER MAPPING pedig azt mutatja meg, hogy ha például szöveg modulban kiválasztjuk az adott betűtípust, akkor melyik karaktert kell beírni az adott ikon megjelenítéséhez.

Hogyan használd a menüben?

Mostantól használhatod a betűtípust bárhol a webhelyen, beleértve a menüt is. Hozz létre egy egyéni link menüpontot és írd bele azt a karaktert, amit a CHARACTER MAPPING-nál az ikonnál látsz.

Ahhoz, hogy a saját ikonjaidat meg tudd jeleníteni az oldaladon úgy, ahogyan azt látni szeretnéd, csak a CSS formázásokat kell megcsinálnod a gyerek sablonod style.css-ében (esetleg, de nem javasoltan a Sablon beállítások -> Egyedi CSS részen)

 

Valószínűleg módosítania kell az ikon betűméretét vagy a pozícióját, de ez jó kiindulópont már. Innentől a Te kezedben van a változtatás lehetősége.

A szövegmodulban is használhatod

Ha már van, akkor miért ne is használnánk a betűtípus ikonját bármely HTML szöveghez, vagy ha a WYSIWYG szerkesztő vizuális fülét használod, egyszerűen jelöld ki a karakterét és válaszd ki a betűtípust.

A HTML-ben való szerkesztés kicsit több lehetőséget ad a megjelenés testreszabására, de bármelyik utat is választod egyszerűen lesz egy szép, nem pixeles ikon fontod.

Itt a vége fuss el véle 🙂

Jaaaa, remélem emlékszel, hogy ígértem egy gyűjteményt:

 

https://icons8.com/

https://www.iconfinder.com/

https://www.freepik.com/free-icons

https://icomoon.io/app/#/select

https://fontawesome.com/

https://material.io/tools/icons/?style=baseline

https://iconmonstr.com/

https://linearicons.com/free

http://www.endlessicons.com/

ELAKADTÁL? ÉSZREVÉTELED VAN? ÍRJ NEKÜNK!

11 + 3 =

NÉZD MEG!

TÖLTSD LE!

BESZÉLD MEG!