Zmień rozmiar i kolor tekstu.

Powiększ zdanie wprowadzające, osadź cytat w kolorze marki albo zmień nagłówek na biały na ciemnym zdjęciu. Polami Rozmiar czcionki i Kolor czcionki w panelu Styl zmienisz cały tekst w jednym elemencie. Dla fragmentu tekstu użyj zamiast tego paska narzędzi edytora tekstu. Dla rozmiarów i kolorów wspólnych dla każdej strony użyj motywu.

Film podąża za recepturą poniżej: zamienia jedno zdanie w lead o większym rozmiarze i w kolorze marki.

Zanim zaczniesz

• Otwórz stronę w DXPR Builder; wskazanie elementu pokazuje jego pasek sterowania z opcją More. Nowy w kreatorze? Zobacz Twoja pierwsza strona.
• Zapisz w oknie zachowuje zmianę w edytorze. Zapisz na pasku narzędzi kreatora nad treścią zapisuje stronę i pokazuje „Saved field”.
• Użyj panelu Styl dla jednego elementu: akapit wprowadzający, cytat, nagłówek na zdjęciu.
• Użyj edytora tekstu dla fragmentu tekstu i dla struktury. Zrób z nagłówka prawdziwy nagłówek opcją Nagłówek 2 albo Nagłówek 3, nie większym wierszem Normal. Czytniki ekranu i wyszukiwarki czytają poziom, nie rozmiar.
• Użyj listy Style edytora dla markowych stylów tekstu. Twój webmaster ustawia je w General Settings > Text Editor > Custom styles (/admin/dxpr_studio/dxpr_builder/settings).
• Użyj motywu dla kroju podstawowego, rozmiarów nagłówków i kolorów linków.

Przepis: zdanie wprowadzające w kolorze marki

1. Dodaj element tekstowy i wpisz jedno albo dwa zdania jako tekst Normal.
2. Najedź na niego, kliknij More, a potem Settings.
3. Otwórz panel Styl i przeciągnij Rozmiar czcionki do 20. Tekst rośnie podczas przeciągania.
4. Otwórz Kolor czcionki i wybierz kolor marki z próbek albo wpisz jego kod, na przykład #1a4d8f, w polu koloru.
5. Kliknij Zapisz w oknie. Przy 20 px zdanie liczy się jako zwykły tekst, więc potrzebuje kontrastu 4,5 do 1. Wpisz swój kod koloru i kolor tła do testera kontrastu; biała strona to #ffffff.
6. Kliknij Zapisz na pasku narzędzi.

Co widzisz

Zdanie rośnie do 20 px i przybiera kolor twojej marki. Nagłówki i linki wewnątrz tego samego elementu tekstowego też przyjmują ten kolor, ale nagłówki zachowują własny rozmiar.

Jak działają ustawienia

Rozmiar czcionki

Rozmiar czcionki biegnie od 0 do 100 px, a 0 zachowuje rozmiar motywu. Wartość jest taka sama na każdym rozmiarze ekranu: wiersz 48 px na desktopie to 48 px także na telefonie.

Rozmiar kładzie się na elemencie, a tekst z własnym rozmiarem zachowuje go. Nagłówki zwykle tak, ponieważ Bootstrap dobiera im rozmiary z bazowego rozmiaru strony. Tekst, któremu rozmiar nadało narzędzie rozmiaru czcionki w edytorze, też zachowuje swój rozmiar.

Kolor czcionki

Selektor pokazuje paletę twojego motywu jako próbki, gdy witryna ją ma. Ma też suwak krycia i pole, w którym wpiszesz kod koloru, na przykład #1a4d8f. Clear w selektorze zwraca tekst do koloru motywu.

Na elemencie treściowym, na przykład tekstowym, karcie albo alercie, kolor sięga do wszystkiego w środku, łącznie z nagłówkami i linkami. Na sekcji sięga tylko tekstu bez własnego koloru. Nagłówki i linki pokolorowane przez motyw zachowują tam swój kolor.

Bootstrapowe klasy kolorów są oznaczone !important, więc biją Kolor czcionki. Przykładem chip Primary text color w polu HTML classes. Innym jest styl edytora, na przykład Primary Brand Text, na fragmencie tekstu.

Na przycisku kolor kładzie się na przycisk i zastępuje kolor najechania motywu. Ustaw Kolor czcionki także w Stylu najechania.

Najechanie

Panel Styl najechania ma własny Kolor czcionki i Rozmiar czcionki. Większy rozmiar po najechaniu rozpycha treść wokół, więc zmiana koloru jest zwykle spokojniejszym wyborem.

Kontrast

Aby tekst mogła odczytać większość ludzi, reguły WCAG 2 na poziomie AA wymagają takiego kontrastu:

Na zdjęciu mierz na najjaśniejszym fragmencie za tekstem. Przetestuj swoją parę kolorów testerem kontrastu, na przykład testerem kontrastu WebAIM.

Jeśli go nie widać

• Nagłówek wewnątrz tekstu nie urósł. Nagłówek ma własny rozmiar z motywu. Wybierz inny poziom nagłówka w edytorze tekstu albo użyj jego narzędzia rozmiaru czcionki.
• Linki i nagłówki zachowują kolor. Na sekcji tekst z własnym kolorem motywu zachowuje go. Ustaw Kolor czcionki na elemencie tekstowym zamiast tego.
• Kolor czcionki w ogóle nic nie daje. Klasa koloru, na przykład Primary text color albo White text, w polu HTML classes wygrywa. Usuń jej chip.
• Fragment tekstu zachowuje inny kolor. Styl edytora na tym fragmencie, na przykład Primary Brand Text, wygrywa. Usuń styl w edytorze tekstu.
• Rozmiar czcionki nic nie daje na liczniku. Licznik kołowy i licznik liczbowy mają własny rozmiar czcionki. Użyj tamtego.
• Próbka koloru już nie pasuje do marki. Próbka kopiuje kolor w chwili wyboru. Po zmianie palety wybierz próbkę ponownie.
• Kolor marki nie przechodzi testu kontrastu. Wybierz jego ciemniejszy odcień. Albo powiększ tekst do co najmniej 24 px, aby obowiązywał cel 3 do 1.
• Tekst trudno odczytać na zdjęciu. Kontrast jest za niski. Przyciemnij zdjęcie gradientem, jak pokazuje strona Tła.
• Przycisk stracił kolor tekstu po najechaniu. Twój Kolor czcionki zastępuje kolor najechania motywu. Ustaw Kolor czcionki także w Stylu najechania.

Co dalej?

• HTML ID i klasy: używaj stylu tekstu przez klasę zamiast ustawiać go na każdym elemencie.