Sześciokąt Szablony HTML

Kreatywne szablony HTML z heksagonami dla uporządkowanych stron geometrycznych

Szablon HTML z motywem heksagonu to gotowa strona z sekcjami w układzie plastra miodu wbudowanymi bezpośrednio w strukturę kodu, gotowa na wprowadzenie Twoich usług, projektów czy profili zespołu. Możesz dostosować go w Nicepage, wyeksportować pliki i dalej edytować kod źródłowy ręcznie. Geometryczne ramki przyciągają wzrok na podglądzie, jednak to zawarty w nich kod decyduje o tym, jak szybko dopasujesz szablon do własnych potrzeb.

Kod wewnątrz każdej komórki heksagonalnej

Dobry szablon traktuje heksagon wyłącznie jako oprawę dla treści, która zachowałaby sens również bez niej. Nagłówek wskazuje nazwę elementu, krótki opis go wyjaśnia, a link lub przycisk pozostaje osobnym elementem. Poziomy nagłówków powinny również ignorować rozmiar wizualny, tak aby sześć usług w jednej grupie dzieliło ten sam poziom hierarchii, nawet jeśli środkowa komórka wygląda na większą.

To, który szablon będzie odpowiedni, zależy od zawartości komórek:

• elementy portfolio, w których tytuł projektu i odnośnik pozostają oddzielone od obrazu posiadającego właściwy tekst alternatywny;
• pozycje usług lub wyróżnionych cech z nagłówkiem, zwięzłym opisem i opcjonalną ikoną;
• komórki zespołu, w których imię, nazwisko i stanowisko występują jako edytowalny tekst obok zdjęcia, a nie grafika z wtopionym napisem.

Klonowanie elementów bez pustych kontenerów

Po eksporcie większość prac polega na powielaniu gotowych struktur. W uporządkowanym szablonie każda usługa lub projekt powtarza ten sam zwarty blok z identycznymi klasami, dzięki czemu dodanie nowej pozycji wymaga jedynie skopiowania jednego fragmentu kodu i wpisania nowej treści. Usuwanie elementu powinno być równie bezproblemowe, bez pozostawiania pustych kontenerów wielokątów czy zbędnych zagnieżdżeń. Podpisy i przyciski powinny dać się modyfikować bez naruszania obramowań, a nowe zdjęcie powinno trafiać wprost do istniejącego bloku multimedialnego.

W edytorze narzędzie Shape Element w Nicepage oddziela warstwę dekoracyjną od treści, dbając o to, by tekst lub przycisk umieszczony wewnątrz kształtu pozostał odrębnym elementem.

Kolejność w kodzie źródłowym i wyeksportowane pliki

Kolejność w kodzie źródłowym nie jest widoczna na podglądzie, lecz decyduje o sposobie odczytu komórek na telefonie, gdzie układ plastra miodu zazwyczaj przekształca się w pojedynczą kolumnę. Zestaw elementów czytany na laptopie zgodnie z ruchem wskazówek zegara na ekranie telefonu może wyświetlać się w zaburzonej kolejności. Jeśli główna oferta pojawia się wizualnie jako pierwsza, lecz w kodzie znajduje się dopiero na czwartej pozycji, użytkownicy urządzeń mobilnych dotrą do niej dopiero po przewinięciu trzech innych elementów. Szybkim sprawdzianem jest wyobrażenie sobie strony bez ramek i weryfikacja, czy całość nadal układa się w logiczny ciąg.

Wyeksportowane pliki można wdrożyć na własnym serwerze lub przekazać programiście, który bez problemu powinien zidentyfikować bloki treści i ich hierarchię. Po każdej zmianie układu należy ponownie sprawdzić odnośniki, opisy alternatywne grafik oraz kolejność elementów. Jeśli Twoje rzeczywiste projekty, usługi lub profile idealnie wypełniają powtarzalną strukturę szablonu przy minimalnej edycji tekstu, oznacza to, że wybór heksagonalnego szablonu HTML był trafiony.