Ustawianie kolorów, czcionek i układu

Wygląd witryny zawiera ustawienia, dzięki którym cały sklep wygląda jak jedna marka: jego kolory, kroje pisma, rozmiary tekstu i zaokrąglenie rogów. Każde ustawienie wybierasz raz, a wszystkie strony się do niego dostosowują. Poszczególne bloki nadal mogą zastąpić te ustawienia własnymi, gdy tego chcesz.

Otwieranie ustawień Wygląd witryny

1. Otwórz edytor. Zobacz Edytor w skrócie.
2. W panelu ustawień po prawej stronie kliknij kartę Wygląd witryny.
3. Kliknij nagłówek, aby go otworzyć: Tożsamość, Kolory, Typografia lub Układ.

Zmiany są widoczne na stronie od razu i zapisują się automatycznie. Twój działający sklep zmieni się po opublikowaniu.

Kolory

Otwórz Kolory, aby zobaczyć siedem kolorów, z których zbudowana jest każda strona.

• Akcent: główny kolor Twojego sklepu. Używają go przyciski i linki.
• Tekst na akcencie: kolor słów na tle akcentu, na przykład napisu na przycisku.
• Tło strony: kolor tła Twoich stron.
• Powierzchnia: kolor kart i paneli, takich jak karty produktów i pola formularzy.
• Tekst: kolor nagłówków i innego głównego tekstu.
• Tekst pomocniczy: spokojniejszy kolor używany dla tekstu akapitów, opisów i drobnego druku.
• Obramowania: kolor cienkich linii i konturów.

Wybieranie koloru

1. Kliknij pole koloru.
2. W otwartym próbniku zrób dowolną z tych rzeczy:
   • Kliknij lub przeciągnij w dużym kwadracie, aby ustawić jasność i nasycenie koloru, a pasek pod nim przeciągnij, aby zmienić sam kolor.
   • Wpisz lub wklej w polu kod hex, na przykład #2B2622.
   • Kliknij próbkę w sekcji Kolory motywu, aby użyć ponownie koloru, który już masz, albo w sekcji Ostatnie, aby użyć koloru wybranego niedawno.

   

3. Kliknij w dowolnym miejscu poza próbnikiem lub naciśnij Esc, aby go zamknąć.

Sprawdzanie, czy tekst jest czytelny

Pod siedmioma kolorami Payly sprawdza, czy każdy kolor tekstu jest łatwy do odczytania na kolorze, który jest pod nim. Jeśli wszystko jest w porządku, widzisz komunikat Każda para kolorów jest łatwa do odczytania. Jeśli jakaś para jest zbyt blada, lista wskazuje ją, pokazuje jej współczynnik kontrastu i wymagany poziom oraz oferuje przycisk Napraw, który dopasowuje kolor tekstu za Ciebie.

Payly nie uniemożliwia wyboru pary o niskim kontraście, ale jasnoszary tekst na jasnym tle jest trudny do odczytania, zwłaszcza na telefonie w słońcu.

Typografia

Otwórz Typografia, aby wybrać czcionki i rozmiary tekstu.

• Czcionka tekstu: czcionka akapitów, menu i przycisków.
• Bazowy rozmiar czcionki: rozmiar zwykłego tekstu.
• Wysokość linii tekstu: odstęp między wierszami tekstu. Większa liczba daje więcej miejsca.
• Czcionka nagłówków: czcionka nagłówków. Wybierz Użyj czcionki witryny, aby dla nagłówków używać też czcionki tekstu.
• Rozmiar nagłówków: powiększa lub zmniejsza wszystkie nagłówki, w procentach.
• Grubość nagłówków: jak pogrubione są nagłówki.
• Odstępy między literami w nagłówkach: zmniejsza lub zwiększa odstępy między literami nagłówków.

Wybieranie czcionki

1. Kliknij pole Czcionka tekstu lub Czcionka nagłówków.
2. Przewiń listę, na której każda nazwa jest wyświetlona własną czcionką. Grupa Polecane na górze zawiera czcionki, które pasują do większości sklepów.

   

3. Aby znaleźć czcionkę po nazwie, wpisz tekst w polu Szukaj czcionek….
4. Kliknij czcionkę, aby jej użyć.

Lista obejmuje całą bibliotekę Google Fonts. Czcionki, których używasz, są dołączane do Twojego sklepu podczas publikowania. Jeśli czcionki brakuje na liście, wpisz jej dokładną nazwę z Google Fonts w polu wyszukiwania i wybierz ją w sekcji Użyj mimo to.

Układ

Otwórz Układ, aby zobaczyć dwa ustawienia:

• Zaokrąglenie rogów określa, jak okrągłe są rogi przycisków, kart i obrazów. Przesuń suwak na 0, aby uzyskać ostre rogi, a w prawo, aby były miękkie. Bloki, których własne zaokrąglenie rogów ma wartość Automatycznie, stosują to ustawienie.
• Kierunek tekstu to Od lewej do prawej dla większości języków. Od prawej do lewej odwraca cały układ dla arabskiego, hebrajskiego, perskiego i urdu.

Tożsamość

Otwórz Tożsamość, aby ustawić Ikona przeglądarki, czyli mały obrazek wyświetlany na karcie przeglądarki. Użyj prostego znaku zamiast całego logo, ponieważ jest wyświetlany w rozmiarze około 16 pikseli. Kliknij Wgraj obraz lub Przeglądaj wgrane pliki, tak jak opisano w artykule Dodawanie obrazów i korzystanie z biblioteki multimediów. Jeśli zostawisz pole puste, zostanie użyte Twoje logo.

Twojego logo tu nie ma. Znajduje się w nagłówku, tam gdzie się pojawia. Zobacz Dostosowywanie nagłówka i stopki.

Zmiana tylko jednego bloku

Każdy blok tekstu, nagłówek i przycisk może zastąpić czcionkę, rozmiar i kolory witryny własnymi. Zaznacz blok i otwórz jego grupę Typografia lub Wygląd. Zobacz Edytowanie tekstu, nagłówków i przycisków.

Wskazówka: Jeśli chcesz zupełnie innego wyglądu, możesz zacząć od nowa od jednego z gotowych projektów. Zobacz Przełączanie na inny wygląd witryny.

Powiązane artykuły

• Przełączanie na inny wygląd witryny
• Edytowanie tekstu, nagłówków i przycisków
• Dostosowywanie nagłówka i stopki
• Edytor w skrócie