--- url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/colour-and-branding' title: 'Używaj kolorów marki | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:59+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Nadaj sekcjom, tekstowi i przyciskom kolory marki, aby każda strona wyglądała jak część tej samej witryny. Każde pole koloru w kreatorze DXPR pokazuje paletę motywu jako próbki, więc wybierasz kolory marki zamiast zgadywać kody. Przykład nadaje sekcji podstawowy kolor marki z białym tekstem. Film podąża za poniższymi krokami: koloruje sekcję próbką marki i sprawia, że jej tekst jest biały. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:37:59+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Używaj kolorów marki' description: |- Nadaj sekcjom, tekstowi i przyciskom kolory marki, aby każda strona wyglądała jak część tej samej witryny. Każde pole koloru w kreatorze DXPR pokazuje paletę motywu jako próbki, więc wybierasz kolory marki zamiast zgadywać kody. Przykład nadaje sekcji podstawowy kolor marki z białym tekstem. Film podąża za poniższymi krokami: koloruje sekcję próbką marki i sprawia, że jej tekst jest biały. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:37:59+0000' dateModified: '2026-10-24T11:37:59+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/documentation/learn-dxpr-builder/design/colour-and-branding' articleSection: 'Przewodniki projektowe' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/colour-and-branding' description: |- Nadaj sekcjom, tekstowi i przyciskom kolory marki, aby każda strona wyglądała jak część tej samej witryny. Każde pole koloru w kreatorze DXPR pokazuje paletę motywu jako próbki, więc wybierasz kolory marki zamiast zgadywać kody. Przykład nadaje sekcji podstawowy kolor marki z białym tekstem. Film podąża za poniższymi krokami: koloruje sekcję próbką marki i sprawia, że jej tekst jest biały. 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/documentation) /[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) /[Przewodniki projektowe](/pl/hc/documentation/learn-dxpr-builder/design/overview) # Używaj kolorów marki. Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe ## W tym przewodniku Powiązane przewodniki - [Spraw, aby elementy reagowały na najechanie](/pl/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Styluj swoje karty](/pl/hc/documentation/learn-dxpr-builder/design/card-styles) - [Styluj treści kreatora CSS motywu](/pl/hc/documentation/learn-dxpr-builder/customization/custom-css) Nadaj sekcjom, tekstowi i przyciskom kolory marki, aby każda strona wyglądała jak część tej samej witryny. Każde pole koloru w kreatorze DXPR pokazuje paletę motywu jako próbki, więc wybierasz kolory marki zamiast zgadywać kody. Przykład nadaje sekcji podstawowy kolor marki z białym tekstem. Film podąża za poniższymi krokami: koloruje sekcję próbką marki i sprawia, że jej tekst jest biały. ## Zanim zaczniesz - Twoje kolory marki znajdują się w motywie. W motywie DXPR ustaw je w **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), w panelu **Colors**. - Kreator DXPR pokazuje pierwsze dziesięć różnych kolorów tej palety jako próbki. ## Kolorowanie sekcji 1. Najedź na sekcję, otwórz **More** i wybierz **Settings**. 2. Otwórz panel **Style**. 3. Kliknij przycisk koloru **Background**. Próbnik kolorów otworzy się z twoimi próbkami. 4. Kliknij podstawową próbkę marki. 5. Kliknij przycisk koloru **Font color** i wybierz biel. 6. Kliknij **Save**. Tekst akapitu staje się biały; nagłówki zachowują kolor nagłówków motywu. 7. Aby nagłówek też był biały, otwórz **Settings** jego elementu **Text**, wybierz biel dla **Font color** w jego panelu **Style** i kliknij **Save**. ## Co widzisz Sekcja wypełnia się kolorem marki, a jej tekst akapitu i nagłówek stają się białe. Te same próbki pojawiają się w każdym polu koloru. Dotyczy to paneli **Style** i **Hover style** oraz **Start color** i **End color** tła **Gradient** sekcji. Aby użyć koloru spoza palety, wpisz jego kod w polu tekstowym próbnika, na przykład `#2196F3`. Przesuń suwak krycia dla koloru przejrzystego. **Clear** usuwa kolor. ## Trzymaj kolory powiązane z motywem Próbka kopiuje kod koloru do elementu. Jeśli później zmienisz paletę motywu, element zachowa stary kolor. Aby element podążał za paletą, użyj zamiast tego klasy koloru. Otwórz **Settings** elementu i wybierz chip w **HTML classes**: | Chip | Do czego służy | |---|---| | **Primary background**, **Secondary background** i inne | Kolory Bootstrapa z twojego motywu | | **Primary text color**, **Secondary text color** i inne | Kolory tekstu Bootstrapa z twojego motywu | | **Background color: DXPR Theme primary** | Kolor **Primary** motywu DXPR, z pasującym kolorem tekstu | | **Text color: DXPR Theme accent1** | Kolor **Secondary** motywu DXPR dla tekstu | Chipy **DXPR Theme** pojawiają się tylko, gdy motyw DXPR jest włączony. ## Pola koloru dla elementu | Gdzie | Co koloruje | |---|---| | **Style**: **Font color**, **Border color**, **Background** | Sam element | | **Hover style**: te same pola | Element, gdy wskaźnik na nim jest | | **Button**: **Type** | Gotowy schemat kolorów przycisku | | **Card**: **Type** | Tło i tekst całej karty | | **Alert**: **Type** | **Success**, **Info**, **Warning** albo **Danger** | | **Section**: **Background effects** > **Gradient** | Mieszankę dwóch kolorów | ## Czytelny kolor - Zachowaj wystarczający kontrast tekstu i tła. WCAG 2.1 poziom AA wymaga co najmniej 4,5 do 1 dla zwykłego tekstu. - Nie używaj samego koloru do niesienia znaczenia; połącz go z etykietą albo ikoną. - Naprzemiennie stosuj tła sekcji, na przykład biel, jasną szarość i kolor marki, aby nadać długim stronom rytm. ## Jeśli nie widzisz swoich kolorów - **Próbnik kolorów nie pokazuje próbek.** Domyślny motyw witryny nie dostarcza palety kolorów. Wpisuj kody kolorów albo użyj motywu z paletą, na przykład motywu DXPR. - **Element zachowuje stary kolor po zmianie palety motywu.** Próbka przechowuje stały kod koloru. Wybierz nową próbkę albo przełącz się na chip koloru w **HTML classes**, który podąża za paletą. - **Background albo Font color nie działa na karcie.** **Type** karty inny niż **Default** ustawia jej kolory klasami motywu, które wygrywają. Najpierw ustaw **Type** na **Default**. ## Co dalej? - [Reagowanie elementów na najechanie](/hc/documentation/learn-dxpr-builder/design/hover-effects): zmieniaj kolory, gdy odwiedzający wskazują element. - [Stylowanie kart](/hc/documentation/learn-dxpr-builder/design/card-styles): zastosuj kolory do kart. - [Własny CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css): ustaw reguły marki, których panele nie obejmują.