Ikon HTML-mallar

Färdiga ikon-HTML-mallar

Ikonpaket är enkla att hitta och många är gratis. Det som tar tid är att bygga blocken runtomkring: kort efter kort med en rubrik och en rad text under varje symbol. Ikon-HTML-mallar gör detta arbete åt dig. Du får färdiga HTML-sektioner där ikonerna redan är integrerade i genomtänkta layouter.

Fyra sätt där symbol möter text

De flesta mallar här bygger på några välbeprövade layouter som passar olika typer av innehåll:

• en ikon ovanför en rubrik: det klassiska funktionskortet för en rad korta fördelar;
• en ikon bredvid ett stycke: mer lättläst när varje punkt kräver en eller två meningar;
• ett rutnät av ikonceller för en tjänsteöversikt: ofta med en knapp under varje beskrivning;
• en kontaktrad där en liten symbol placeras bredvid varje nummer eller adress.

Vissa tjänster saknar en självklar symbol. Leverans representeras ofta av en lastbil och support av ett headset, men skatterådgivning slutar oftast med en generell dokumentikon, vilket gör att rubriken får stå för förklaringen. Kontaktuppgifter ger ikonen en mer praktisk uppgift. Med Nicepages funktion Ikon i text placeras en ikon direkt inuti en textrad och kan länka direkt till ett telefonnummer eller en e-postadress.

Från demolayout till exporterad kod

I Nicepage-redigeraren byter du ut demoikonerna mot egna uppladdningar eller inbyggda symboler. Därefter uppdaterar du rubrikerna och anger vart länkarna ska leda. Efter exporten förblir HTML-filerna tillgängliga för direkt redigering, så att en utvecklare kan byta ut en SVG-fil, justera strukturen eller flytta in en sektion i ett befintligt projekt.

Samma kortlayout kan visa tjänster på en sida och introduktionssteg på en annan. Det är bara ikonen, rubriken och texten i varje kort som ändras. Sektionerna är responsiva, vilket gör att en rad med ikonkort anpassar sig snyggt på mobiler medan symbolerna förblir tydliga.

Räkna innehållspunkterna i förväg

Utgå från ditt faktiska innehåll och hur mycket text varje punkt kräver. Ett rutnät som är avsett för korta fördelar ser obalanserat ut om ett kort behöver ett helt stycke, och ett kontaktblock för tre kanaler lämnar ett tomt utrymme om du bara anger två. Bestäm tidigt om punkterna behöver en länk eller knapp, eftersom det sällan ser bra ut att klämma in sådant i ett kompakt kort i efterhand. För en enkel lista med fördelar kan en ikonlista med SVG-punkter räcka långt. Eftersom en exporterad sektion kan användas i ett befintligt projekt går det utmärkt att välja en mall bara för ett bra kontakt- eller tjänsteblock och bortse från resten.