--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/panel-styl' title: 'Zmień wygląd elementu w panelu Styl | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:35:41+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Użyj panelu Styl, gdy jeden element na jednej stronie potrzebuje własnego wyglądu: kolorowa karta, wyblakłe logo, przycisk w kolorach kampanii. Każdą zmianę widzisz na stronie na bieżąco. Dla wyglądu, który ma dzielić każda strona, na przykład koloru wszystkich przycisków, zmień zamiast tego motyw. Jedna edycja tam aktualizuje całą witrynę. Film podąża za pierwszą recepturą poniżej: wycisza logo partnera, aż dotrze do niego wskaźnik. 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ń wygląd elementu w panelu Styl' description: |- Użyj panelu Styl, gdy jeden element na jednej stronie potrzebuje własnego wyglądu: kolorowa karta, wyblakłe logo, przycisk w kolorach kampanii. Każdą zmianę widzisz na stronie na bieżąco. Dla wyglądu, który ma dzielić każda strona, na przykład koloru wszystkich przycisków, zmień zamiast tego motyw. Jedna edycja tam aktualizuje całą witrynę. Film podąża za pierwszą recepturą poniżej: wycisza logo partnera, aż dotrze do niego wskaźnik. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:35:41+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/panel-styl' articleSection: 'Stylizuj elementy' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/panel-styl' description: |- Użyj panelu Styl, gdy jeden element na jednej stronie potrzebuje własnego wyglądu: kolorowa karta, wyblakłe logo, przycisk w kolorach kampanii. Każdą zmianę widzisz na stronie na bieżąco. Dla wyglądu, który ma dzielić każda strona, na przykład koloru wszystkich przycisków, zmień zamiast tego motyw. Jedna edycja tam aktualizuje całą witrynę. Film podąża za pierwszą recepturą poniżej: wycisza logo partnera, aż dotrze do niego wskaźnik. 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ń wygląd elementu w panelu Styl. Poznaj DXPR BuilderBuduj stronyStylizuj elementy ## W tym przewodniku Powiązane przewodniki - [Umieść kolor albo zdjęcie za treścią](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/tlo) Użyj panelu **Styl**, gdy jeden element na jednej stronie potrzebuje własnego wyglądu: kolorowa karta, wyblakłe logo, przycisk w kolorach kampanii. Każdą zmianę widzisz na stronie na bieżąco. Dla wyglądu, który ma dzielić każda strona, na przykład koloru wszystkich przycisków, zmień zamiast tego motyw. Jedna edycja tam aktualizuje całą witrynę. Film podąża za pierwszą recepturą poniżej: wycisza logo partnera, aż dotrze do niego wskaźnik. ## 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”. Ustawienia w panelu **Styl** należą do jednego elementu. Zapisują się w treści tej strony, nie w twoim motywie. Jeśli kolor marki zmieni się w przyszłym roku, każdy element pokolorowany ręcznie zachowa stary kolor, dopóki go nie wyedytujesz. - **Użyj wyglądu ponownie**, zapisując ostylowany element opcją **More** > **Save as template** albo nadając elementom wspólną klasę w polu **HTML classes**. Zobacz [szablony użytkownika](/pl/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) i [HTML ID i klasy](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css). - **Wybieraj kolory z próbek**, gdy witryna je pokazuje. Pochodzą z palety kolorów twojego motywu. Próbka kopiuje kolor, więc późniejsza zmiana palety go nie zaktualizuje. ## Przepis: przygaszanie logo, aż dotrze do nich wskaźnik Rząd logo partnerów wygląda spokojniej, gdy logo są wyciszone. Ta receptura przygasza jedno logo i przywraca je po najechaniu. 1. Najedź na element **obrazu**, który pokazuje logo, kliknij **More**, a potem **Settings**. 2. Otwórz panel **Styl** i przeciągnij **Krycie** do 0,5. Logo blednie podczas przeciągania. 3. Otwórz panel **Styl najechania** poniżej i przeciągnij **Krycie** do 1. 4. Kliknij **Zapisz** w oknie, a potem **Zapisz** na pasku narzędzi. 5. Otwórz menu widoku (ikona oka) na pasku narzędzi kreatora, wybierz **Podgląd** i wskaż logo. Przełącza się na pełną moc i gaśnie ponownie, gdy wskaźnik zejdzie. Powtórz kroki dla każdego logo w rzędzie. ## Przepis: przycisk w kolorach kampanii Twój motyw nadaje przyciskom kolor najechania. **Tło** ustawione przez ciebie też zastępuje ten kolor najechania, więc ustaw oba. 1. Najedź na element **przycisku**, kliknij **More**, a potem **Settings**. 2. W panelu **Styl** wybierz **Tło** i **Kolor czcionki**. Kliknij próbkę albo wpisz swój kod koloru, na przykład #e4002b, w polu koloru. 3. W panelu **Styl najechania** wybierz ciemniejsze **Tło**. 4. Kliknij **Zapisz** w oknie, a potem **Zapisz** na pasku narzędzi. 5. Wybierz **Podgląd** w menu widoku i wskaż przycisk. Przyjmuje ciemniejszy kolor. ## Co widzisz Gdy okno jest otwarte, element pokazuje każdą zmianę. W **Podglądzie** przygaszone logo wraca do pełnej mocy pod wskaźnikiem, a przycisk kampanii przyjmuje swój ciemniejszy kolor. Oba wyglądy zostają po przeładowaniu strony, ponieważ **Zapisz** na pasku narzędzi je zapisał. ## Jakie wartości przyjmują ustawienia | Ustawienie | Zakres | Jednostka | |---|---|---| | **Kolor czcionki**, **Kolor ramki**, **Tło** | dowolny kolor, z przezroczystością | kolor | | **Obraz tła** | zdjęcie z biblioteki mediów albo URL | | | **Styl tła**, **Pozycja tła**, **Styl ramki** | lista zaczynająca się od **Theme defaults** | | | **Rozmiar czcionki** | 0 do 100 | px | | **Promień rogów** | 0 do 100 | px | | **Krycie** | 0 do 1, co 0,01 | | | **Cień** | poziomy 0 do 5 | | | Model pudełkowy **Margines** | -200 do 200 | **PX** albo **%** | | Model pudełkowy **Padding** | 0 do 200 | **PX** albo **%** | | Model pudełkowy **Ramka** | 0 do 50 | px | | szerokość × wysokość w modelu pudełkowym | 0 do 2000 | **PX** albo **%** | Wpisana wartość spoza zakresu jest obcinana do najbliższego limitu. Model pudełkowy i jego kłódki wyjaśnia strona [odstępów](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/odstepy). ## Jak zachowują się ustawienia ### Domyślne motywu Pusty kolor, suwak na 0, lista na **Theme defaults** i bok modelu pudełkowego z „-” znaczą to samo. DXPR Builder nic nie zapisuje i decyduje twój motyw. Zatem **Krycie** 0 nie ukrywa elementu, a **Rozmiar czcionki** 0 zachowuje rozmiar motywu. Aby wrócić do wyglądu motywu, kliknij **Clear** w selektorze koloru, przesuń suwak na 0 albo wybierz ponownie **Theme defaults**. ### Gdzie lądują ustawienia Każde ustawienie **Styl** oprócz **Drop shadow** zapisuje się jako styl wstawiony w elemencie. Style wstawione biją zwykły CSS motywu. Dwie rzeczy wciąż wygrywają: reguły motywu oznaczone `!important` i bootstrapowe klasy narzędziowe w polu **HTML classes**, które też niosą `!important`. Na niektórych elementach ustawienia kładą się na wewnętrzną część. Na **przycisku** stylują przycisk, na **obrazie** zdjęcie, na **linku** link, a na **mapie** ramkę mapy. ### Każdy rozmiar ekranu Ustawienia panelu Styl nie mają punktów przerwania. 64 px paddingu to 64 px także na telefonie. Wartości procentowe rosną i maleją z szerokością strony. Dla różnych wartości na rozmiar ekranu użyj klas responsywnych, jak pokazuje strona [HTML ID i klasy](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css). ### Krycie wygasza wszystko w środku **Krycie** działa na cały element. Wygasza blok, ramkę, tekst i każdy element w środku. Dla przejrzystego bloku za jednolitym tekstem pozostaw **Krycie** na 0. Wybierz zamiast tego kolor **Tła** z pewną przezroczystością: selektor koloru ma do tego własny suwak krycia. ### Styl najechania **Styl najechania** to osobny panel pod **Stylem**. Ma te same ustawienia, z własnym modelem pudełkowym. Jego wartości obowiązują, gdy wskaźnik stoi nad elementem. W przeciwieństwie do wartości **Styl** są same oznaczone `!important`, więc biją twoje wartości **Styl**, klasy narzędziowe w polu **HTML classes** i większość reguł motywu. Tylko **Drop shadow** pojawia się płynnie, w 0,15 sekundy. Pozostałe zmiany najechania przełączają się od razu, chyba że motyw je animuje. Przyciski bootstrapowe łagodzą kolory w 0,15 sekundy. Telefony i tablety nie mają wskaźnika. Odwiedzający zobaczą tam wygląd najechania dopiero po stuknięciu, więc nigdy nie umieszczaj w nim informacji, których potrzebują. ### Elementy z własnymi ustawieniami Niektóre elementy mają własne ustawienie do tej samej roboty. Ich własne ustawienie wygrywa, a ustawienie **Styl** nic nie robi. | Element | Ignoruje w Styl | Użyj zamiast tego | |---|---|---| | Licznik kołowy | **Tło**, **Rozmiar czcionki**, szerokość × wysokość | **Background color** i **Dimension** w **General**, **Rozmiar czcionki** w **Circle content** | | Pasek postępu | **Tło**, szerokość × wysokość | **Back color**, **Front color** i **Bar height** w **General** | | Separator | **Tło**, szerokość | **Color** i **Length** w **General** | | Licznik liczbowy | **Rozmiar czcionki** | **Font size** w **General** | | Obraz | szerokość × wysokość | **Image width** i **Image height** w **General** | | Mapa | szerokość × wysokość | **Map width** i **Map height** w **General** | | Marquee | szerokość × wysokość | **Image width** i **Height** w **General** | | Wideo, Lokalne wideo | szerokość | **Video width** w **General** | | Warstwy pozycjonowane | szerokość × wysokość | **Width** i **Height** w **General** | ## Jeśli nie widać twojej zmiany - **Zmiana zniknęła po zamknięciu okna.** Zamknięto je opcją **Cancel**, ikoną zamknięcia albo klawiszem Escape, co przywróciło stare ustawienia. Wprowadź zmianę ponownie i kliknij **Zapisz** w oknie. - **Zmiany nie ma po przeładowaniu strony.** **Zapisz** w oknie zachowuje zmianę tylko w edytorze. Kliknij **Zapisz** na pasku narzędzi, zanim opuścisz stronę. - **Wygląd motywu zostaje.** Bootstrapowa klasa narzędziowa w polu **HTML classes** albo reguła motywu z `!important` wygrywa. Otwórz panel **Ogólne** i usuń chip klasy, na przykład **Primary background**, albo zapytaj webmastera o regułę motywu. - **Ustawienie w ogóle nic nie daje.** Niektóre elementy mają własne ustawienie do tej samej roboty. Zobacz [Elementy z własnymi ustawieniami](#elements-with-their-own-settings). - **Przycisk już nie zmienia koloru po najechaniu.** Twoje **Tło** zastępuje kolor najechania motywu. Ustaw **Tło** także w panelu **Styl najechania**. - **Tekst zbladł razem z blokiem.** **Krycie** wygasza cały element. Ustaw je z powrotem na 0 i użyj koloru **Tła** z przezroczystością. - **Krycie 0 nie ukrywa elementu.** 0 znaczy **Domyślne motywu**. Dodaj zamiast tego klasę **Hide element (d-none)** w polu **HTML classes**. ## Co dalej? - [Tła](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/tlo): umieść zdjęcie za nagłówkiem i utrzymaj czytelność nagłówka.