Wygląd: kolory, tło i czcionka

W zakładce „Motyw” kreatora ustawiasz wygląd całej strony: kolory, tło, kształt przycisków i czcionkę. Wszystkie zmiany poza własnym CSS zapisują się automatycznie w wersji roboczej po około 2 sekundach i są na żywo po następnym opublikowaniu.

Zakładka jest ułożona od góry do dołu: „Szablon”, „Gotowe zestawy”, „Kolory”, „Tło”, „Powierzchnia za treścią”, „Styl przycisku”, „Czcionka” i „Własny CSS”. Szablony mają osobny artykuł.

#Gotowe zestawy

Gotowe zestawy to przygotowane połączenia kolorów. Jedno kliknięcie ustawia naraz kolor tła, kolor tekstu, kolor przycisku i styl przycisku oraz resetuje Twój własny kolor tekstu przycisku. Jest 16 zestawów: Klasyczny, Północ, Port, Ocean, Las, Zachód słońca, Róża, Łupek, Mono, Szron, Lawenda, Bursztyn, Grafit, Mięta, Karmazyn i Piasek. Aktywny zestaw jest zaznaczony, dopóki nie zmienisz żadnej z czterech wartości.

#Kolory

Cztery kolory podstawowe, każdy z próbnikiem kolorów i wartością hex (bez przezroczystości):

„Tło”

Kolor tła strony; używany też wtedy, gdy typ tła to „Kolor”.

„Kolor tekstu”

Kolor nazwy, bio i tekstów.

„Kolor przycisku”

Kolor przycisków linków i domyślny kolor przycisków w blokach.

„Tekst przycisku”

Tekst na przyciskach. Bez własnego wyboru automatycznie dobierany jest kolor dobrze czytelny na kolorze przycisku.

Pokazywana wartość jest zawsze tą, która aktualnie obowiązuje, nawet jeśli pochodzi z szablonu. Wiele bloków ma własne pola kolorów w „Opcje wyświetlania”. Dopóki pokazują „Domyślny (z motywu)”, podążają za tymi kolorami.

#Tło

Przyciski „Kolor”, „Obraz”, „Gradient” i „Wideo” ustalają typ tła strony. Gdy je przełączasz, kreator pamięta wartości pozostałych typów, dopóki pozostajesz w kreatorze.

Kolor

Strona używa koloru „Tło” z sekcji „Kolory”.

Obraz

„Obraz na komputer”

Tło dla dużych ekranów, 1920 × 1080 px.

„Obraz na telefon”

Opcjonalny, w pionie 1080 × 1920 px. Gdy jest pusty, widać „jak na komputerze” i używany jest obraz na komputer.

„Wybierz” otwiera Twoje pliki, „Zarządzaj ↗” stronę plików, a „Usuń” usuwa obraz. Jeśli obraz nie ma dokładnie docelowego rozmiaru, otwiera się narzędzie kadrowania, a przycięty obraz jest zapisywany jako nowy plik. Więcej w artykule Obrazy w kreatorze strony.

Gradient

„Kolor początkowy” i „Kolor końcowy”

Dwa kolory gradientu.

„Kąt”

Kierunek od 0 do 355 stopni co 5.

„Gotowe zestawy”

Gotowe gradienty: Indygo, Zachód słońca, Ocean, Las, Jagoda i Północ.

Wideo

„Wideo na komputer”

Bezpośredni link do pliku wideo (.mp4 lub .webm) albo „Wybierz wideo” spośród Twoich plików wideo.

„Wideo na telefon”

Opcjonalne, np. mniejszy plik dla transmisji danych w telefonie. Gdy jest puste, używane jest wideo na komputer.

Wideo odtwarza się bez dźwięku i w pętli, bez elementów sterujących. Odwiedzającym, którzy w ustawieniach systemu włączyli ograniczenie ruchu, nie jest pokazywane. Zalecane są pliki do 8 MB w formacie MP4 lub WebM.

Przezroczystość nakładki

Przy obrazie, gradiencie i wideo suwak od 0 do 80% kładzie na tło przyciemniającą warstwę, dzięki której tekst jest łatwiejszy do odczytania.

Tło strony z obrazu, gradientu lub wideo zastępuje obrazy tła szablonu. Miejsca na obrazy szablonu pokazują wtedy o tym informację. Przy ustawieniu „Kolor” obrazy szablonu znów są widoczne.

#Powierzchnia za treścią

Sprawia, że tekst jest czytelny na obrazie, gradiencie lub wideo w tle:

„Wyłączona”

Bez powierzchni; treść leży bezpośrednio na tle.

„Cała treść”

Jedna karta za całą treścią.

„Każdy blok”

Osobna karta za profilem i za każdym blokiem.

„Pełna” lub „Półprzezroczysta”

Pojawia się, gdy tylko włączysz powierzchnię. Półprzezroczysta przepuszcza tło.

To ustawienie nie działa w szablonie Business Card.

#Styl przycisku

Styl przycisku jest ustawieniem domyślnym. Możesz go nadpisać w bloku „Linki” i dla każdego linku (w obu miejscach „Zaokrąglenie rogów”).

#Czcionka

Do wyboru są DM Sans, Figtree, Sora, Plus Jakarta Sans, Raleway, Inter, Poppins, Montserrat, Nunito, Outfit, Space Grotesk i „Domyślna systemowa” (własna czcionka urządzenia). Linijka „Aa — Zażółć gęślą jaźń.” pokazuje podgląd.

LinkHarbor sam udostępnia wszystkie czcionki. Przeglądarki Twoich odwiedzających nie pobierają ich z Google Fonts ani z innych zewnętrznych serwerów.

#Które ustawienie wygrywa

Kolory i kształty są doprecyzowywane od zewnątrz do środka:

1. Szablon: podstawowy styl i kolory domyślne
2. Zakładka „Motyw”: kolory, tło, styl przycisku i czcionka dla całej strony
3. Opcje wyświetlania bloku: kolory i kształty dla tego bloku
4. Stylizacja pojedynczego linku: ma pierwszeństwo przed wszystkimi innymi wartościami
5. Własny CSS: dla wszystkiego, czego nie obejmują ustawienia

Jak dopracować szczegóły własnym CSS, wyjaśnia artykuł Własny CSS.