Ikona Szablony HTML

Gotowe do użycia szablony HTML z ikonami

Pakiety ikon można łatwo znaleźć, a wiele z nich jest darmowych. Czasochłonne jest natomiast tworzenie otaczających je bloków – karty po karcie, z nagłówkiem i linią tekstu pod każdym symbolem. Szablony HTML z ikonami przejmują to zadanie. Otrzymujesz gotowe do edycji sekcje HTML, w których ikony są już osadzone w gotowych układach.

Cztery sposoby łączenia symbolu z tekstem

Większość prezentowanych tu szablonów opiera się na kilku sprawdzonych układach, a każdy z nich pasuje do innego rodzaju treści:

• ikona nad nagłówkiem: klasyczna karta korzyści dla rzędu krótkich punktów informacyjnych;
• ikona obok akapitu: bardziej czytelna, gdy każdy element wymaga jednego lub dwóch zdań opisu;
• siatka komórek z ikonami do przeglądu usług: często z przyciskiem pod każdym opisem;
• wiersz danych kontaktowych, w którym mały symbol znajduje się obok każdego numeru lub adresu.

Niektóre usługi nie mają oczywistego symbolu. Dostawa otrzymuje ciężarówkę, a wsparcie słuchawki, lecz doradztwo podatkowe kończy się zwykle ogólną ikoną dokumentu, przez co to nagłówek musi wyjaśniać treść. Dane kontaktowe nadają ikonie bardziej praktyczne zastosowanie. Dzięki funkcji Ikona w tekście w Nicepage ikona znajduje się wewnątrz linii tekstu i może bezpośrednio linkować do numeru telefonu lub adresu e-mail.

Od treści demonstracyjnych do wyeksportowanego kodu

W edytorze Nicepage możesz zamienić ikony demonstracyjne na własne pliki lub elementy z wbudowanej biblioteki. Następnie zmieniasz nagłówki i ustawiasz docelowe adresy odnośników. Po wyeksportowaniu pliki HTML pozostają dostępne do bezpośredniej edycji, dzięki czemu programista może wymienić plik SVG, dopracować kod lub przenieść sekcję do istniejącego projektu.

Ten sam układ kart może prezentować usługi na jednej stronie, a kroki wdrożeniowe na innej. Zmianie ulega wyłącznie ikona, nagłówek i tekst wewnątrz każdej karty. Sekcje są responsywne, dlatego rząd kart z ikonami układa się odpowiednio na telefonie, a symbole pozostają czytelne.

Planowanie liczby elementów przed rozpoczęciem pracy

Zacznij od przygotowania rzeczywistych elementów i określenia, ile tekstu wymaga każdy z nich. Siatka zaplanowana z myślą o zwięzłych korzyściach wygląda niespójnie, gdy jedna karta zawiera cały akapit, a blok kontaktowy przygotowany na trzy pozycje pozostawia puste pole, jeśli podajesz tylko dwie. Zdecyduj wcześnie, czy elementy potrzebują linku lub przycisku, ponieważ wciskanie ich do zwartej karty na późniejszym etapie rzadko wygląda dobrze. W przypadku prostego zestawienia zalet w zupełności wystarczy lista z punktami w formacie SVG. Ponieważ wyeksportowaną sekcję można umieścić w istniejącym projekcie, możesz bez przeszkód wybrać szablon dla pojedynczego bloku kontaktu lub usług, pomijając pozostałe elementy.