Jedna treść, kilka wyglądów: palety kolorów i drugi szablon wizytówki

Najczęstsze pytanie po wygenerowaniu strony brzmi: „da się zmienić te kolory?". Da się, i to bez ruszania treści. Kolorystyka jest w KOMPASFIRM osobną warstwą: wybierasz paletę, a nagłówki, przyciski, tła sekcji, stopka i akcenty przeliczają się same, zachowując kontrast i czytelność.

Poniższe zrzuty to jedna strona demonstracyjna (fikcyjna pracownia ceramiki, zbudowana na potrzeby tego wpisu) w kilku wariantach. Zmieniało się wyłącznie jedno pole w ustawieniach.

Paleta to jedno pole, nie sesja z grafikiem

W ustawieniach strony jest lista palet i podgląd wszystkich dostępnych zestawów. Klikasz, zapisujesz, odświeżasz stronę. Nie ma osobnego pliku ze stylami, nie ma „poproszę o wycenę zmiany kolorów". Zmiana obowiązuje na wszystkich podstronach naraz, w każdej wersji językowej i w katalogu produktów, jeśli go masz.

Każda paleta to komplet kolorów, a nie jeden odcień: kolor główny do ciemnych sekcji, kolor akcji na przyciski, wersja przyciemniona pod najechanie kursorem, delikatne tło pod bloki, kolor stopki i kolor gwiazdek w opiniach. Dlatego zmiana palety nie psuje kontrastu i nie zostawia białego tekstu na jasnym tle: każde zestawienie tekstu z tłem w palecie zostało policzone pod normę czytelności WCAG AA, o czym pisaliśmy we wpisie o dostępności. Dlatego też nie da się wybrać kombinacji, która będzie nieczytelna: palety są gotowymi zestawami, nie dowolnymi kolorami.

Ta sama strona, sześć wariantów

Treść, zdjęcia i układ sekcji są w każdym z tych zrzutów identyczne. Różni się tylko warstwa kolorów, a mimo to strona czyta się zupełnie inaczej: ciepło i rzemieślniczo przy terakocie, chłodno i technicznie przy szafirze, elegancko przy burgundzie.

Palety podstawowe i pełny katalog

Pięć palet podstawowych jest dostępnych od razu, także w darmowym planie Start. Pełny katalog, kilkadziesiąt zestawów, w tym odcienie branżowe i palety drugiego szablonu, odblokowuje się w planach płatnych od Standard. To jedno z tych ustawień, które zwykle zmienia się raz, na początku, a potem wraca do niego przy okazji odświeżenia marki.

Jeśli masz już kolor firmowy z logo, w ustawieniach wpisujesz go jako kolor wiodący marki: nadpisuje kolor akcji z palety (przyciski, akcenty), a reszta zestawu zostaje spójna. To najprostszy sposób, żeby strona z gotowej palety wyglądała jak Twoja, bez projektowania całej kolorystyki.

Osobno ustawiasz kolor ikony strony (favikonu), jeśli znak marki ma być w innym odcieniu niż przyciski. Własne logo wgrywasz w danych firmy; jeśli go nie masz, strona pokazuje monogram z nazwy w kolorze palety.

Jak dobrać paletę do branży

Kreator podpowiada paletę pasującą do branży, ale decyzja jest Twoja. Kilka wskazówek z praktyki:

• Zdrowie, prawo, finanse, technika: chłodne palety (szafir, grafit, szmaragd) budują poczucie porządku i kompetencji.
• Rzemiosło, wnętrza, gastronomia, uroda: ciepłe (terakota, piasek, burgund) pasują do zdjęć produktów i ludzi.
• Awarie, serwis, transport: wysoki kontrast i wyraźny kolor akcji, bo liczy się szybkie znalezienie telefonu, nie nastrój.
• Kolor konkurencji: sprawdź trzy firmy z okolicy; jeśli wszystkie są granatowe, terakota wyróżni Cię w wynikach i w pamięci klienta.

Drugi szablon wizytówki: Business Growth

Paleta zmienia kolory. „Business Growth" zmienia charakter całej strony: inny układ nagłówka, inne proporcje sekcji, szeryfowy krój pisma w nagłówkach i ciemna sekcja powitalna z akcentem w złocie.

To nadal ta sama strona: te same teksty, te same zdjęcia, ten sam formularz i te same podstrony. Przełączasz go wyborem jednej z czterech palet oznaczonych jako „Business Growth" (dostępnych w pełnym katalogu), więc powrót do klasycznego wyglądu zajmuje tyle samo, co przejście na nowy. Wybierasz go w ustawieniach strony, nie w kreatorze; kreator zawsze zaczyna od klasycznego układu.

Kiedy warto po niego sięgnąć? Najczęściej wtedy, gdy sprzedajesz usługę premium i chcesz, żeby strona wyglądała drożej niż konkurencja z szablonu, który wszyscy w okolicy już widzieli: kancelarie, doradztwo, wnętrza, inwestycje. Firmom usługowym z segmentu „szybko i tanio" lepiej służy klasyczny układ, bo prowadzi do telefonu krótszą drogą.

Czego paleta nie zmieni

Paleta i szablon nie ruszają układu sekcji, treści ani zdjęć; to robisz w edytorze. Nie zmienią też krojów pisma poza tym, co przewiduje szablon (klasyczny ma bezszeryfowe nagłówki, Business Growth szeryfowe), ani nie pozwolą wpisać dowolnego koloru tła pod dowolną sekcję. To celowe: swoboda w kolorach jest najczęstszym źródłem nieczytelnych stron, a palety gwarantują, że każda kombinacja przejdzie test kontrastu. Jeśli potrzebujesz czegoś poza paletą, w ustawieniach zaawansowanych są własne reguły CSS, ale to już praca dla osoby, która wie, co robi.

Trzy praktyczne wskazówki

1. Dobierz paletę do zdjęć, nie do logo. Jeśli Twoje zdjęcia są ciepłe i drewniane, chłodny granat będzie z nimi walczył. Logo wpiszesz kolorem wiodącym.
2. Nie zmieniaj kolorów co miesiąc. Rozpoznawalność bierze się z powtarzalności, także w mediach społecznościowych.
3. Sprawdź stronę na telefonie po zmianie. Zajmuje minutę, a wyłapuje sytuacje, w których zdjęcie nagłówka przestaje pasować do nowego tła.