Dolny Szablony CSS

Kreatywne dolne szablony CSS dla wierszy siatki, pasów kontaktowych i stopek

Dolne szablony CSS zawierają reguły wizualne dla ostatniej sekcji strony, w tym dopełnienia i kolorystykę. W tej kolekcji sekcja ta przybiera różne formy – od wiersza komórek siatki z tekstem i przyciskami, przez podzielony blok tekstu, aż po pasek kontaktowy. Im bliższe Twojej zawartości są wartości domyślne szablonu, tym mniej reguł musisz później modyfikować.

Kolumny układające się pionowo na telefonach

Szersze ekrany mogą pomieścić kilka równoległych grup, podczas gdy węższe układy układają je w czytelną, pionową sekwencję. Reguły Grid lub Flexbox wprowadzają tę zmianę w zdefiniowanych punktach przerwania, dzięki czemu cztery kolumny odnośników na laptopie zamieniają się w jedną kolumnę na telefonie.

Dokumentacja Nicepage dotycząca Grid Element opisuje opcje sterowania kolumnami, wierszami i odstępami wewnątrz bloku. W szablonach opartych na elemencie Grid Repeater ostylowanie jednej komórki zmienia wygląd pozostałych, a liczba kolumn może się różnić w zależności od trybu responsywnego.

Każdy układ początkowy sprawdza się przy innym typie treści w dolnej części strony:

• Kilka kolumn obok siebie pasuje do stopki z dużą liczbą odnośników, o ile odstępy wyraźnie rozdzielają grupy.
• Układ jednokolumnowy sprawdza się przy krótkim komunikacie końcowym wyśrodkowanym nad jednym przyciskiem i prawie nie zmienia się na telefonie.
• Zwarty pojedynczy wiersz pasuje do wąskiego paska z notą o prawach autorskich i kilkoma ikonami, pod warunkiem że tekst pozostaje zwięzły.

Dopełnienie i kontrast na zakończeniu treści

Dolne szablony CSS różnią się również stopniem zagęszczenia elementów – od przestronnych po zwarte. Obszerne dopełnienie wokół minimalistycznego dolnego obszaru sprawia, że kilka wierszy tekstu kontaktowego wygląda estetycznie i celowo. Przy gęstych kolumnach linków mniejsze odstępy zapobiegają nadmiernemu wydłużaniu paska w dół ekranu.

Kontrast względem powyższej treści również bywa zróżnicowany. Ciemny pasek wyraźnie odcina dolną krawędź, podczas gdy cienka ramka na tle strony tworzy łagodniejsze przejście. Takie subtelne obramowanie jest bezpieczniejszym wyborem po ciemnej sekcji treści, ponieważ kolejny ciemny pasek bezpośrednio pod nią zlałby się w jeden ciężki blok wizualny.

Wyrazista typografia, drobny druk

Jeden szablon eksponuje nazwę marki lub nagłówek kontaktowy za pomocą większego rozmiaru i mocniejszego kontrastu, pozostawiając odnośniki do regulaminów mniejsze i jaśniejsze. Inny zachowuje jednakowy rozmiar każdego wiersza, bazując wyłącznie na rozmieszczeniu. Jeśli w dolnym obszarze znajduje się kluczowy element, którego szukają użytkownicy, na przykład numer telefonu, pierwszy wariant pozwoli szybciej uzyskać gotowy efekt.

Nicepage Theme Colors stosują spójną paletę kolorów w całym projekcie, a zmiana zestawu automatycznie aktualizuje wszystkie elementy, które z nich korzystają. Pasek wypełniony kolorem niestandardowym zachowa go po zmianie motywu, co może sprawiać wrażenie niedopasowania do reszty strony. Szablon, którego dolna sekcja bazuje już na Theme Colors, natychmiast przejmuje wybraną paletę bez dodatkowej pracy.