--- url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/customization/utility-classes' title: 'Klasy narzędziowe | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:37+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Każdy element ma pole HTML classes z listą nazwanych klas. Narzędzia Bootstrap 5 i cienie rozwijane są wbudowane. Twój motyw może dodać własną grupę przez swój .info.yml, a moduł przez hook alter. Ta strona wyjaśnia zawartość listy i rejestrację własnych klas, aby redaktorzy wybierali wygląd marki po nazwie zamiast wpisywać nazwy klas.' tags: - 'Je huisstijl toepassen' 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:37+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Klasy narzędziowe' description: 'Każdy element ma pole HTML classes z listą nazwanych klas. Narzędzia Bootstrap 5 i cienie rozwijane są wbudowane. Twój motyw może dodać własną grupę przez swój .info.yml, a moduł przez hook alter. Ta strona wyjaśnia zawartość listy i rejestrację własnych klas, aby redaktorzy wybierali wygląd marki po nazwie zamiast wpisywać nazwy klas.' 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:37+0000' dateModified: '2026-10-24T11:37:37+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/customization/utility-classes' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/customization/utility-classes' description: 'Każdy element ma pole HTML classes z listą nazwanych klas. Narzędzia Bootstrap 5 i cienie rozwijane są wbudowane. Twój motyw może dodać własną grupę przez swój .info.yml, a moduł przez hook alter. Ta strona wyjaśnia zawartość listy i rejestrację własnych klas, aby redaktorzy wybierali wygląd marki po nazwie zamiast wpisywać nazwy klas.' 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 --- [Help Center](/pl/hc)/[Documentation](/pl/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Klasy narzędziowe. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Styluj treści kreatora CSS motywu](/pl/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Dodaj style marki i przyciski do edytora tekstu](/pl/hc/documentation/learn-dxpr-builder/customization/text-editor) - [Dokumentacja hooków API](/pl/hc/documentation/learn-dxpr-builder/development/hooks-api) Każdy element ma pole **HTML classes** z listą nazwanych klas. Narzędzia Bootstrap 5 i cienie rozwijane są wbudowane. Twój motyw może dodać własną grupę przez swój `.info.yml`, a moduł przez hook alter. Ta strona wyjaśnia zawartość listy i rejestrację własnych klas, aby redaktorzy wybierali wygląd marki po nazwie zamiast wpisywać nazwy klas. ## Zastosowanie klasy 1. Otwórz ustawienia elementu i znajdź **HTML classes** na dole panelu **General**. 2. Kliknij pole i wybierz klasę z listy. Pisanie w polu filtruje listę. 3. Aby wpisać klasę spoza listy, kliknij **Edit as text** i ją wpisz. 4. Kliknij **Save** w oknie, potem **Save** na pasku narzędzi kreatora. Klasy trafiają do atrybutu `class` elementu w zapisanym HTML. [HTML ID i klasy](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) prowadzą redaktorów przez typowe zastosowania. ## Zawartość listy Edytor buduje listę przy starcie. Łączy trzy źródła w tej kolejności: 1. Listę wbudowaną. Zawiera grupę **Drop shadows**, krótką grupę **Bootstrap classes** i narzędzia Bootstrap 5, pogrupowane według zadania: **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** i inne. 2. Grupę dla każdego zainstalowanego motywu, którego `.info.yml` ma klucz `dxpr_builder_classes`. Grupa jest oznaczona nazwą motywu. 3. Zmiany z modułów, zobacz [rejestrację klas z modułu](#register-classes-from-a-module). Każda witryna ma więc klasy odstępów, takie jak `mt-3` i `px-4`, wyświetlania, takie jak `d-none`, i tekstu, takie jak `text-center` i `fw-bold`. Niczego dla nich nie konfigurujesz. ## Rejestracja klas w motywie Dodaj mapowanie `dxpr_builder_classes` do `.info.yml` motywu. Każdy klucz to nazwa klasy albo kilka oddzielonych spacjami; każda wartość to etykieta widziana przez redaktorów. Motyw DXPR rejestruje swoje klasy tak: ```yaml dxpr_builder_classes: dxpr-theme-form-inline: 'Inline Form' dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1' dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1' ``` 1. Dodaj mapowanie do `themes/custom/mytheme/mytheme.info.yml`: ```yaml dxpr_builder_classes: brand-card: 'Brand card' brand-card shadow-lg: 'Brand card with shadow' ``` 2. Napisz CSS dla klas w bibliotece wczytywanej przez motyw na każdej stronie; zobacz [własny CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css). 3. Wyczyść pamięci podręczne poleceniem `drush cr`, aby Drupal ponownie odczytał plik info. 4. Otwórz ustawienia elementu i sprawdź, czy **HTML classes** pokazuje grupę z nazwą twojego motywu i dwoma pozycjami. Każdy zainstalowany motyw z kluczem dodaje swoją grupę, nie tylko motyw domyślny. Grupa zawsze nosi nazwę motywu; plik info nie może jej zmienić. ## Rejestracja klas z modułu Własny moduł może dodać klasy albo usunąć klasy zarejestrowane przez motyw hookiem alter. Nie może usunąć wbudowanych wpisów Bootstrapa, ponieważ edytor dodaje je w przeglądarce. Kod znajduje się w [dokumentacji hooków API](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter). ## Wersja Bootstrapa Lista wbudowana to Bootstrap 5. Jeśli twój motyw nie wczytuje Bootstrap 5, ustaw **Sideload Bootstrap files** na **Bootstrap 5** w **Bootstrap** w **DXPR Studio** > **DXPR Builder** > **General Settings**, aby klasy miały CSS za sobą. Zobacz [wydajność](/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading), aby poznać ładowane pliki. ## Jeśli nie widzisz swoich klas - **Grupy twojego motywu brakuje w HTML classes.** Drupal nadal używa starej kopii pliku info motywu. Kliknij **Clear all caches** w **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) albo uruchom `drush cr`. - **Motyw z kluczem nie dodaje grupy.** Liczą się tylko zainstalowane motywy. Zainstaluj motyw w **Appearance** (`/admin/appearance`); nie musi być motywem domyślnym. - **Element wygląda tak samo po wybraniu klasy.** Żaden CSS dla tej klasy nie ładuje się na stronie. Dodaj reguły do biblioteki wczytywanej przez motyw, zobacz [własny CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css). Dla klas Bootstrapa zobacz [wersję Bootstrapa](#bootstrap-version). ## Co dalej? - [Własny CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css): napisz reguły stojące za twoimi klasami. - [Edytor tekstu](/hc/documentation/learn-dxpr-builder/customization/text-editor): oferuj klasy dla akapitów i słów na liście **Styles**. - [Dokumentacja hooków API](/hc/documentation/learn-dxpr-builder/development/hooks-api): pozostałe hooki dostarczane przez kreator DXPR.