--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia' title: 'Zmień rozmiar i kolor tekstu | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:58:07+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Zmień rozmiar i kolor tekstu' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:58:07+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia' articleSection: 'Stylizuj elementy' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) # Zmień rozmiar i kolor tekstu. Poznaj DXPR BuilderBuduj stronyStylizuj elementy ## W tym przewodniku Powiązane przewodniki - [Link do sekcji i używaj klas do stylów](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css) 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](/pl/hc/dokumentacja/nauka-dxpr-builder/pierwsze-kroki/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: | Tekst | Kontrast z tłem | |---|---| | Zwykły tekst | co najmniej 4,5 do 1 | | Duży tekst: 24 px (18 pt) i więcej albo 19 px (14 pt) i więcej pogrubione | co najmniej 3 do 1 | Na zdjęciu mierz na najjaśniejszym fragmencie za tekstem. Przetestuj swoją parę kolorów testerem kontrastu, na przykład [testerem kontrastu WebAIM](https://webaim.org/resources/contrastchecker/). ## 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](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/tlo). - **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](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css): używaj stylu tekstu przez klasę zamiast ustawiać go na każdym elemencie.