Icoon HTML-sjablonen

Direct te gebruiken icon-HTML-templates

Iconpakketten zijn overal te vinden en vaak gratis. Wat tijd kost, is het bouwen van de omliggende blokken: kaart na kaart met een kop en een regel tekst onder elk symbool. Icon-HTML-templates nemen dat werk uit handen. U krijgt direct bewerkbare HTML-secties waarin de iconen al in voltooide lay-outs zijn geplaatst.

Vier manieren waarop een symbool en tekst samenkomen

De meeste sjablonen hier gebruiken een handvol indelingen, die elk geschikt zijn voor een ander type inhoud:

• een icoon boven een kop: de vertrouwde kaart voor een rij korte pluspunten;
• een icoon naast een alinea: leest prettiger wanneer elk item één of twee zinnen nodig heeft;
• een raster van icooncellen voor een dienstenoverzicht: vaak met een knop onder elke beschrijving;
• een contactrij waarin een klein symbool naast elk nummer of adres staat.

Sommige diensten hebben geen voor de hand liggend symbool. Bezorging krijgt een vrachtwagen en support een headset, maar belastingadvies eindigt meestal met een algemeen documenticoon, waardoor de kop het werk moet doen. Contactgegevens geven een icoon een praktischere functie. Met Icoon in tekst van Nicepage staat een icoon binnen een regel tekst en kan het direct linken naar een telefoonnummer of e-mailadres.

Van demo-inhoud naar geëxporteerde code

In de Nicepage-editor vervangt u de demo-iconen door eigen uploads of ingebouwde iconen. Vervolgens herschrijft u de koppen en laat u elke link naar de juiste plek verwijzen. Na de export blijven de HTML-bestanden beschikbaar voor directe bewerking, zodat een ontwikkelaar een SVG kan vervangen, de markup kan aanpassen of een sectie in een bestaand project kan integreren.

Eenzelfde kaartlay-out kan op de ene pagina diensten tonen en op een andere stappen voor onboarding. Alleen het icoon, de kop en de tekst binnen elke kaart veranderen. De secties zijn responsief, waardoor een rij icoonkaarten op een mobiele telefoon netjes verspringt en de symbolen herkenbaar blijven.

Items tellen vóór u keuzes vastlegt

Begin met uw werkelijke inhoud en hoeveel tekst elk item nodig heeft. Een raster dat bedoeld is voor korte voordelen oogt vreemd als één kaart een hele alinea bevat, en een contactblok voor drie kanalen laat een leegte achter als u er maar twee toont. Bepaal vooraf of items een link of knop vereisen; dit achteraf inpassen in een compacte kaart pakt zelden goed uit. Voor een eenvoudige opsomming van voordelen kan een iconenlijst met SVG-opsommingstekens al voldoende zijn. Omdat een geëxporteerde sectie in een bestaand project kan worden gebruikt, kunt u gerust een sjabloon kiezen voor één sterk contact- of dienstenblok en de rest buiten beschouwing laten.