Strona logowania w domyślnym niebieskim kolorze może nie pasować do kolorów Twojego sklepu. Klienci to zauważają. Przycisk, który nie pasuje do Twojego logo, lub panel promocyjny, który gryzie się z Twoim nagłówkiem, sprawiają, że strona wydaje się niedokończona. Niestandardowe logowanie dla WooCommerce pozwala ustawić główne kolory strony logowania z jednego ekranu, bez kodu.
Ten artykuł pokazuje, jak ustawić kolory panelu, tekstu, przycisku, linku, pola wprowadzania i przycisku promocyjnego. Wybierzesz również, jak panel promocyjny zachowuje się na telefonach. Wybór szablonu, zmiana nazw etykiet formularza i edycja tekstu promocyjnego mają osobne artykuły.
Wymagania wstępne
| Wymaganie | Szczegóły |
|---|---|
| Wtyczka | Custom Login for WooCommerce zainstalowany i aktywny |
| WooCommerce | Zainstalowany i aktywny |
| Dostęp | Konto, które może zarządzać ustawieniami WooCommerce |
| Wartości kolorów | Kolory Twojej marki w postaci kodów szesnastkowych, np. #1e40af |
Krok 1: Otwórz zakładkę Wygląd
- Przejdź do WooCommerce → Custom Login w swoim panelu administracyjnym WordPress.
- Kliknij zakładkę Wygląd.
Ustawienia kolorów znajdują się w osobnych sekcjach: Kolory panelu, Kolory przycisków, Kolory przycisków promocyjnych, Kolory linków i Kolory pól wprowadzania. Wyświetlanie promocji na urządzeniach mobilnych znajduje się poniżej.
Każdy kolor ma próbnik i małe pole tekstowe. Kliknij próbnik, aby wizualnie wybrać kolor. Lub wpisz kod szesnastkowy bezpośrednio w pole tekstowe.
Krok 2: Ustaw kolory panelu
Sekcja Kolory panelu ustawia kolory tła i tekstu dla dwóch stron podzielonej strony logowania. Lewa strona zawiera formularz logowania. Prawa strona zawiera wiadomość promocyjną.
| Ustawienie | Co to zmienia | Domyślny |
|---|---|---|
| Tło lewego panelu | Tło za formularzem logowania | #ffffff |
| Tekst lewego panelu | Kolor tekstu po stronie formularza | #333333 |
| Tło prawego panelu | Tło za wiadomością promocyjną | #1e40af |
| Tekst prawego panelu | Kolor tekstu po stronie promocji | #ffffff |
Wybierz tło i kolor tekstu o silnym kontraście. Na przykład jasny tekst na ciemnym tle pozostaje czytelny, podczas gdy szary tekst na bladym szarym tle nie jest.
Krok 3: Ustaw kolory przycisków
Sekcja Kolory przycisków stylizuje Twój przycisk logowania. Najazd myszką oznacza moment, w którym klient najeżdża kursorem na przycisk. Inny kolor najazdu myszką informuje go, że przycisk jest gotowy do kliknięcia.
| Ustawienie | Co to zmienia | Domyślny |
|---|---|---|
| Tło przycisku | Kolor przycisku logowania | #3b82f6 |
| Tekst przycisku | Kolor tekstu na przycisku | #ffffff |
| Tło przycisku po najechaniu | Kolor przycisku, gdy mysz jest nad nim | #2563eb |
Kolor najazdu, który jest nieco ciemniejszy niż główny kolor, działa dobrze.
Krok 4: Ustaw kolory przycisku promocyjnego
Sekcja Kolory przycisku promocyjnego stylizuje przycisk w panelu promocyjnym, taki jak Dowiedz się więcej. Te kolory mają znaczenie tylko wtedy, gdy panel promocyjny jest widoczny. Jeśli wyłączyłeś Włącz sekcję promocyjną w zakładce Treść, możesz pominąć ten krok.
| Ustawienie | Co to zmienia | Domyślny |
|---|---|---|
| Tło przycisku promocyjnego | Kolor przycisku promocyjnego | #ffffff |
| Tekst przycisku promocyjnego | Kolor tekstu na przycisku | #1e40af |
| Tło przycisku promocyjnego po najechaniu | Kolor przycisku, gdy mysz jest nad nim | #f3f4f6 |
| Obramowanie przycisku promocyjnego | Obramowanie wokół przycisku | #ffffff |
Upewnij się, że przycisk wyróżnia się na tle Tła panelu prawego. Jeśli oba mają ten sam kolor, przycisk zlewa się z panelem.
Krok 5: Ustaw kolory linków
Sekcja Kolory linków stylizuje link Zapomniałeś hasła? pod formularzem logowania.
| Ustawienie | Co to zmienia | Domyślny |
|---|---|---|
| Kolor linku | Kolor linku | #3b82f6 |
| Kolor linku po najechaniu | Kolor linku, gdy mysz jest nad nim | #1d4ed8 |
Krok 6: Ustaw kolory pól wprowadzania
Sekcja Kolory pól wprowadzania stylizuje pola Adres e-mail i Hasło.
| Ustawienie | Co to zmienia | Domyślny |
|---|---|---|
| Obramowanie pola wprowadzania | Obramowanie wokół każdego pola | #d1d5db |
| Obramowanie pola wprowadzania w trybie fokusu | Obramowanie, gdy klient pisze w polu | #3b82f6 |
Fokus oznacza pole, na które kliknął klient. Grubszy kolor fokusu pokazuje mu, gdzie znajduje się na formularzu.
Krok 7: Wybierz, jak promocja wyświetla się na urządzeniach mobilnych
Na szerokim ekranie panel promocyjny znajduje się obok formularza logowania. Na telefonie nie ma miejsca na oba. Sekcja Wyświetlanie promocji na urządzeniach mobilnych pozwala zdecydować, co stanie się zamiast tego.
| Opcja | Co się dzieje na telefonie |
|---|---|
| Ukryj na urządzeniach mobilnych | Wyświetla się tylko formularz logowania. Jest to domyślne ustawienie. |
| Ułóż poniżej formularza logowania | Panel promocyjny wyświetla się pod formularzem logowania. |
Te opcje dotyczą ekranów o szerokości około 768 pikseli lub mniejszej. W przypadku Gradient Modern i Warm Organic przełączenie następuje przy 900 pikselach. Ułóż poniżej formularza logowania ma znaczenie tylko wtedy, gdy włączona jest opcja Włącz sekcję promocyjną.
Wybierz Ukryj na urządzeniach mobilnych, aby uzyskać najszybsze i najczystsze logowanie. Wybierz Ułóż poniżej formularza logowania, gdy Twoja promocja zawiera ofertę, którą chcesz pokazać kupującym na telefonach.
Krok 8: Zapisz i sprawdź swoją stronę logowania
- Kliknij Zapisz ustawienia.
- Wyloguj się lub otwórz prywatne okno przeglądarki.
- Odwiedź
yourstore.com/login, aby zobaczyć nowe kolory. - Najedź kursorem na przycisk logowania, aby sprawdzić jego kolor po najechaniu.
- Najedź kursorem na link Zagubiłeś hasło?, aby sprawdzić jego kolor po najechaniu.
- Otwórz stronę na swoim telefonie, aby sprawdzić układ mobilny.
Jakie kolory używa każdy szablon
Każdy szablon odczytuje Twoje ustawienia kolorów, ale niektóre szablony ustawiają również kilka własnych kolorów. Te kolory szablonu mają pierwszeństwo przed pasującym ustawieniem. Classic Split stosuje się do wszystkich Twoich kolorów. Pozostałe szablony zachowują część swojego wbudowanego wyglądu, więc niektóre ustawienia nie mają tam widocznego efektu.
| Ustawienie | Klasyczny Podział | Wyśrodkowana Karta | Gradientowy Nowoczesny | Ciemny Motyw | Ciepły Organiczny |
|---|---|---|---|---|---|
| Tła paneli | Tak | Nie | Nie | Nie | Nie |
| Tekst na panelu | Tak | Tak | Częściowo | Nie | Nie |
| Tło przycisku i Tło przycisku po najechaniu | Tak | Tak | Nie | Nie | Nie |
| Tekst przycisku | Tak | Tak | Tak | Nie | Nie |
| Kolory linków | Tak | Tak | Tak | Nie | Nie |
| Obramowanie pola wprowadzania | Tak | Nie | Nie | Nie | Nie |
| Obramowanie pola wprowadzania w trybie fokusu | Tak | Tak | Nie | Nie | Nie |
| Kolory przycisków promocyjnych | Tak | Tylko telefony, gdy są ułożone | Tak | Tak | Tak |
„Częściowo” oznacza, że etykiety formularza używają Twojego koloru tekstu, ale szablon ustawia własne kolory nagłówków i tekstu promocyjnego. Centered Card ukrywa panel promocyjny na szerokich ekranach, więc ustawienia promocji nie mają tam nic do pokolorowania.
Na każdym szablonie Tło przycisku koloruje również pole wyboru Zapamiętaj mnie, gdy jest zaznaczone.
Jeśli chcesz mieć pełną kontrolę nad każdym kolorem, wybierz Classic Split. Szczegółowe instrukcje znajdziesz w jak wybrać szablon strony logowania.
Rozwiązywanie problemów
#, i kliknij Zapisz ustawienia. Wtyczka akceptuje tylko kody szesnastkowe, takie jak #1e40af. Wszystko inne, w tym nazwa koloru, jak blue, lub kod bez znaku #, jest odrzucane i zamiast tego wyświetlany jest domyślny kolor.Często zadawane pytania
Potrzebujesz pomocy?
Custom Login for WooCommerce to wtyczka premium, więc jeśli napotkasz problemy, otwórz zgłoszenie wsparcia, a nasz zespół pomoże Ci w konfiguracji.
