Ikon HTML Sablonok

Használatra kész ikonos HTML-sablonok

Ikoncsomagokat könnyű találni, és sok közülük ingyenes. Ami valóban időt igényel, az a köréjük épülő blokkok kialakítása: kártyáról kártyára, címsorral és egy-egy sor szöveggel minden szimbólum alatt. Az ikonos HTML-sablonok ezt a munkát veszik le a válláról. Közvetlenül szerkeszthető HTML-blokkokat kap, amelyekben az ikonok már eleve kész elrendezésekben szerepelnek.

A szimbólum és a szöveg találkozásának négy módja

Az itt található sablonok többsége néhány bevált elrendezésre épül, amelyek mind más típusú tartalomhoz illeszkednek:

• ikon a címsor felett: a megszokott funkciókártya rövid előnyök bemutatására;
• ikon a bekezdés mellett: könnyebben olvasható, ha minden egyes elemhez egy-két mondatra van szükség;
• ikonos cellák rácsa a szolgáltatások áttekintésére: gyakran egy gombbal az egyes leírások alatt;
• kapcsolati sáv, ahol minden telefonszám vagy cím mellett egy apró szimbólum található.

Egyes szolgáltatásokhoz nincs kézenfekvő szimbólum. A kiszállításhoz teherautó, az ügyfélszolgálathoz fejhallgató társul, az adótervezés viszont többnyire általános dokumentumikont kap, így a megértést a címsor biztosítja. Az elérhetőségi adatok praktikusabb feladatot adnak az ikonoknak. A Nicepage Ikon a szövegben funkciójával az ikon közvetlenül egy szövegsorba kerül, és hivatkozhat közvetlenül telefonszámra vagy e-mail-címre is.

A bemutató tartalomtól az exportált kódig

A Nicepage szerkesztőjében a demóikonokat saját feltöltésekre vagy beépített ikonokra cserélheti. Ezután átírhatja a címsorokat, és beállíthatja a hivatkozások célját. Az exportálás után a HTML-fájlok közvetlenül szerkeszthetők maradnak, így a fejlesztő kicserélheti az SVG-fájlokat, módosíthatja a jelölőkódot, vagy beillesztheti a szakaszt egy meglévő projektbe.

Ugyanaz a kártyaelrendezés az egyik oldalon szolgáltatásokat mutathat be, a másikon pedig a regisztráció lépéseit. Csupán az ikon, a címsor és a kártyán belüli szöveg változik. A szakaszok reszponzívak, így az ikonos kártyák sora mobiltelefonon rendezetten átrendeződik, a szimbólumok pedig jól felismerhetők maradnak.

Tervezze meg az elemek számát a kezdés előtt

Mindig a valós tartalomra és a szükséges szövegmennyiségre alapozzon. A rövid előnyökhöz tervezett rács aránytalanná válik, ha az egyik kártyához teljes bekezdés szükséges, a három csatornára méretezett kapcsolatblokkban pedig hézag keletkezik, ha csak kettőt jelenít meg. Döntse el időben, hogy az elemekhez szükséges-e link vagy gomb, mert utólag bepréselni őket egy kompakt kártyába ritkán ad esztétikus eredményt. Egyszerű felsorolás esetén az SVG-pontokkal ellátott ikonlista önmagában is elegendő lehet. Mivel az exportált szakasz meglévő projektbe is beépíthető, bátran választhat sablont csupán egyetlen jól sikerült kapcsolat- vagy szolgáltatásblokk kedvéért is.