Zmiana kolorów banneru w darmowym CookieYes w 5 minut

Jeśli korzystasz z darmowej wersji CookieYes w swoim WordPressie, prawdopodobnie zauważyłaś, że od jakiegoś czasu panel konfiguracyjny nakłada na użytkownika pewne ograniczenia. Zmiana treści komunikatu jest prosta (na szczęście, bo to podstawowa funkcja tego narzędzia). Jednak edycja kolorystyki banneru to funkcja dostępna w planie płatnym. Jeśli nie wiesz, jak zmiana kolorów banneru w darmowym CookieYes na swojej stronie internetowej to jesteś we właściwym miejscu!

Zmiana wyglądu strony to nie tylko kwestia ładnego wyglądu. To ważne dla budowania marki i przyciągania uwagi ludzi, którzy odwiedzają stronę. Pomyśl o banerze, który idealnie pasuje do reszty strony – pokazuje profesjonalizm Twojej firmy, a nie wygląda jak doklejony na siłę. Zaraz pokażę Ci jak krok po kroku jak zmienić kolorystykę baneru w CookieYes. I tutaj mam dla Ciebie dobrą wiadomość: nie musisz przechodzić na płatny plan, aby przyciski pasowały do Twojej marki. Możesz to zrobić za pomocą prostego kodu CSS tzw. custom CSS code.

Dlaczego warto zmienić kolory?

Spójność wizualna (Branding)

Twoja strona ma swoją paletę barw, nad którą prawdopodobnie długo pracowałaś. Domyślny błękit CookieYes jest rozpoznawalny na tysiącach stron. Jeśli go zostawisz, cookie consent banner wygląda jak doklejony na siłę. Dopasowanie kolorów sprawia, że komunikat o ciasteczkach staje się integralną częścią Twojego projektu. Gdy zmieniasz standardowy błękit CookieYes na kolory zgodne z identyfikacją wizualną strony, tworzysz spójność projektu. Ta harmonia między elementami graficznymi sprawia, że odwiedzający czują się bardziej komfortowo i pewnie podczas korzystania z witryny.

Budowanie zaufania i autentyczności

W dobie cyberzagrożeń użytkownicy są wyczuleni na dziwnie wyglądające okienka. Banner, który różni się stylem od reszty strony, może budzić niepokój („Czy na pewno jestem na oficjalnej stronie marki X?”). Gdy przyciski pasują do Twoich nagłówków i logotypu, użytkownik podświadomie czuje, że to Twój oficjalny komunikat, a nie podejrzany zewnętrzny skrypt. Taka synchronizacja może wzmocnić przekaz marki i tworzy pozytywne doświadczenie dla odwiedzających.

Jeśli chcesz wiedzieć, co składa się na profesjonalną stronę internetową, przygotowałam na ten temat aktualny i kompletny przewodnik dla właścicieli firm.

Profesjonalizm w detalach

Dbałość o detale odróżnia amatorskie strony od profesjonalnych serwisów. Pokazujesz w ten sposób, że panujesz nad każdym elementem swojej witryny – nawet nad tak technicznym (i dla wielu nudnym) aspektem, jakim jest zgoda na przechowywanie ciasteczek i polityka prywatności. To buduje wizerunek marki, która dba o jakość.

Psychologia UX i czytelność

Domyślne ustawienia nie zawsze zapewniają najlepszy kontrast. Zmieniając kolory, możesz zwiększyć czytelność oraz wyróżnić najważniejszą akcję. Upewnij się, że tekst na przycisku jest dobrze widoczny dla osób ze słabszym wzrokiem, a przyciskowi „Akceptuję” nadaj kolor najbardziej zachęcający. Przycisk „Odrzuć” możesz utrzymać w stonowanej, mniej kontrastowej barwie (tzw. visual hierarchy). Choć nie wolno manipulować użytkownikiem (tzw. dark patterns), to estetyczny i przyjemny dla oka banner jest po prostu mniej irytujący. Użytkownik, który widzi ładnie zaprojektowany element, chętniej go przeczyta i kliknie, zamiast szukać przycisku „zamknij” w popłochu.

Podsumowując: zmiana kolorów banneru w darmowym CookieYes to inwestycja w lepsze doświadczenie użytkownika oraz silniejsze więzi z odbiorcami Twojej marki online!

Problem i rozwiązanie

Dla wielu właścicieli stron internetowych czy blogerów, dopasowanie wizualnych aspektów strony do tożsamości marki jest kluczowe. Kiedy korzystasz z darmowej wersji aplikacji do zarządzania zgodami na pliki cookie, niestety nie możesz tego zrobić, korzystając z opcji dostępnych w tym narzędziu. Są one zablokowane.

Na szczęście istnieje sposób na obejście tego problemu bez konieczności przechodzenia na płatny plan. Rozwiązaniem jest zastosowanie niestandardowego kodu CSS, który pozwala dostosować wygląd baneru zgody na pliki cookie do indywidualnych potrzeb Twojej witryny. Dzięki temu możesz zachować spójność wizualną swojej strony czy bloga, jednocześnie korzystając z funkcjonalności oferowanej przez CookieYes.

Aby dokonać modyfikacji, najpierw musisz zidentyfikować klasy CSS elementów HTML odpowiedzialnych za wyświetlanie banera zgód. Następnie musisz dodać niestandardowy kod CSS w sekcji stylów swojej strony lub poprzez opcje personalizacji dostępne w WordPressie. (Kokpit WordPress > Wygląd > Dostosuj > Niestandardowy kod CSS).

Dzięki prostym trikom masz możliwość pełniejszej kontroli nad estetyką swojego serwisu bez dodatkowych kosztów związanych z płatnymi subskrypcjami narzędzi takich jak CookieYes. To świetna okazja dla każdego administratora strony internetowej do zwiększenia atrakcyjności wizualnej swojego projektu przy minimalnym nakładzie pracy!

Kluczowe elementy kodu

Już wiesz, że zmiana kolorów banneru w darmowym CookieYes to świetny sposób na personalizację Twojej strony. Teraz skupimy się na kluczowych elementach CSS, które pozwolą Ci dostosować wizualne aspekty baneru zgody, aby lepiej pasował do reszty witryny. Wyobraź sobie, jak zmieniają się kolory przycisków i tła, tworząc harmonijną całość.

Zacznijmy od najważniejszego – zmiany koloru tła samego banneru. Możesz użyć następującego kodu:

.cky-consent-bar,
.cky-preference {
    background-color: #f8f8f8 !important;
}

Ta linia kodu zmieni podstawowy kolor tła banera na jasny popiel #f8f8f8. Wybierz odpowiedni kolor, który najlepiej pasuje do Twojej marki i stylu witryny.

Następnie zajmijmy się przyciskami akceptacji i odmowy zgody na pliki cookie. Te elementy są kluczowe dla funkcjonalności zgód na pliki cookie i mogą być dostosowane za pomocą CSS

/* Base color button*/
.cky-btn-accept, 
.cky-btn-preferences, 
.cky-btn-revisit-wrapper,
.cky-btn-save, 
.cky-btn {
    background-color: #E2C9CA !important;
    border-color: #D8A996 !important;
    color: #000000 !important;
}
/* Color reject button*/
.cky-btn-reject {
    background-color: white !important;
    border-color: #E2C9CA !important;
    color: #000000 !important;
}

/* Hover button */
.cky-btn-accept:hover, 
.cky-btn-preferences:hover, 
.cky-btn-save:hover, 
.cky-btn-reject:hover,
.cky-btn:hover {
    background-color: #D8A996 !important;
    border-color: #B47C50 !important;
    color: #000000 !important;
}

Dzięki temu możesz nadać przyciskom unikalny wygląd, który będzie współgrał z resztą strony. Dodanie delikatnych cieni sprawia, że wyglądają bardziej nowocześnie i profesjonalnie:

.cky-footer-shadow { 
    background-color: #f9f9f9 !important;
}

Dodatkowo możesz zmienić również kolor przełączników w miejscach, gdzie użytkownik może wybrać kategorie ciasteczek, na które wyraża zgodę:

/* switch color */
#ckyCategoryDirectnecessary
{
    background-color: #E2C9CA !important;
}

#ckySwitchfunctional, 
#ckySwitchanalytics,
#ckySwitchPerformance,
#ckySwitchadvertisement,
#ckySwitchother
{
    background-color: grey !important;
}

Upewnij się, że wszystkie modyfikacje działają poprawnie zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. To ważne dla dobrego doświadczenia użytkownika odwiedzającego Twoją stronę z różnych urządzeń. Jeśli po publikacji zmian nie widzisz by cokolwiek zmieniło się na stronie, być może korzystasz z wtyczki do pamięci podręcznej WordPressa, np. Litespeed Cache, WP SuperCache itp. Aby zobaczyć wprowadzone zmiany, wejdź do ustawień tej wtyczki i klinij opcję, która pozwoli na wyszczyszczenie cache. 

Pełny CSS custom code

Ponieważ CookieYes renderuje banner bezpośrednio w kodzie Twojej strony, możemy „wymusić” na nim nowe kolory, dodając odpowiednie reguły w arkuszu stylów Twojego motywu (np. w WordPressie w zakładce Wygląd > Dostosuj > Dodatkowy CSS).

Kod który musisz wkleić w tym miejscu, to:

/* Base color button*/
.cky-btn-accept, 
.cky-btn-preferences, 
.cky-btn-revisit-wrapper,
.cky-btn-save, 
.cky-btn {
    background-color: #E2C9CA !important;
    border-color: #D8A996 !important;
    color: #000000 !important;
}

/* Color reject button*/
.cky-btn-reject {
    background-color: white !important;
    border-color: #E2C9CA !important;
    color: #000000 !important;
}

/* Hover button */
.cky-btn-accept:hover, 
.cky-btn-preferences:hover, 
.cky-btn-save:hover, 
.cky-btn-reject:hover,
.cky-btn:hover {
    background-color: #D8A996 !important;
    border-color: #B47C50 !important;
    color: #000000 !important;
}

.cky-footer-shadow,
.cky-consent-bar,
.cky-preference { 
    background-color: #f9f9f9 !important;
}

/* switch color */
#ckyCategoryDirectnecessary
{
    background-color: #E2C9CA !important;
}

#ckySwitchfunctional, 
#ckySwitchanalytics,
#ckySwitchPerformance,
#ckySwitchadvertisement,
#ckySwitchother
{
    background-color: grey !important;
}

Ten kod spowoduje, że banner cookie będzie wyglądał tak:

Twoim zadaniem jest podmiana wszystkich kolorów w formacie „#f8f8f8” na własne.

Wyjaśnienie kodu CSS

Techniczne wskazówki

Deklaracja !important

Podczas gdy zmiana kolorów banneru w darmowym CookieYes może wydawać się skomplikowana, kilka technicznych trików ułatwi ci to zadanie. Po pierwsze, warto rozważyć użycie dopisku !important przy regułach stylowania CSS. W niektórych przypadkach twoje nowe style mogą być nadpisywane przez istniejące reguły wtyczki lub innego kodu na stronie. Dodając !important, dajesz priorytet swoim ustawieniom, co zapewnia, że będą one stosowane, bez względu na inne konflikty stylowe. Dzięki temu masz pewność, że wybrany przez ciebie kolor zostanie zastosowany do baneru zgody, niezależnie od innych stylów, które wymusza CookieYes.

Skąd wziąć kolory HEX

Możesz oczywiście skorzystać ze swoich kolorów marki. Jednak, jeżli ich nie masz to z pomocą przychodzą narzędzia typu Color Picker. Te proste aplikacje pozwalają ci zidentyfikować dokładny kod koloru używanego już gdzieś indziej na twojej witrynie lub dobrać nowy odcień idealnie pasujący do reszty projektu. Wystarczy kliknąć obszar strony o pożądanym kolorze, a narzędzie poda ci jego kod HEX lub RGB. Następnie możesz ten kod wykorzystać w swoich regułach CSS do personalizacji wyglądu baneru CookieYes. 

Odpowiednie kontrasty dla czytelności

Pamiętaj też o zachowaniu spójności wizualnej pomiędzy różnymi elementami strony. Jeśli zmieniasz kolory tekstu komunikatu o ochronie prywatności albo przycisków, upewnij się, że są one czytelne i dobrze kontrastują z tłem. To nie tylko kwestia estetyki – poprawia również dostępność witryny dla wszystkich użytkowników. Aby sprawdzić, czy masz odpowiedni dla czytelności kontrast, możesz skorzystać z narzędzia online Contrast Finder.

Podsumowanie i dalsze kroki

Po wdrożeniu zmian w wyglądzie banneru CookieYes pamiętaj też o regularnym aktualizowaniu ustawień związanych ze zgodami na pliki cookie. Jeśli instalujesz na stronie jakąś wtyczkę – musisz zaktualizować też listę plików cookie w bannerze. Istnieje szansa, że nowa funkcjonalność, którą chcesz wprowadzić korzystając z takiego narzędzia ma własne pliki cookies. Oprócz tego przepisy prawne dotyczące ochrony danych osobowych mogą ulegać zmianom, a Ty musisz być pewien, że Twoja strona zawsze spełnia obowiązujące wymagania prawne. Śledzenie nowinek technologicznych oraz legislacyjnych pomoże Ci utrzymać wysokie standardy bezpieczeństwa danych użytkownika.

Zmiana kolorów może wydawać się drobnym szczegółem, ale jak widzisz, ma ogromny wpływ na odbiór Twojej strony przez użytkowników. To mały krok w stronę profesjonalizmu i spójności wizualnej Twojego projektu online. Nie bój się eksperymentować z różnymi kolorami i stylami, aby znaleźć idealne dopasowanie dla swojej witryny.

Na koniec tej podróży przez zmianę kolorów banneru w darmowym CookieYes, mam nadzieję, że czujesz się pewniej i bardziej kompetentnie. Dzięki prostym modyfikacjom CSS możesz teraz tworzyć banery zgody na pliki cookie, które nie tylko spełniają swoją funkcję informacyjną, ale również harmonizują z estetyką Twojej strony. Pamiętaj, że personalizacja to klucz do budowania marki online – każdy detal ma znaczenie.