--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/edytor-tekstu' title: 'Dodaj style marki i przyciski do edytora tekstu | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:33+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Gdy redaktorzy klikną w tekst w kreatorze DXPR, pojawia się pasek narzędzi. Jego listę Styles możesz wypełnić stylami marki, na przykład akapitem lead albo wyróżnioną frazą. Możesz też wybrać przyciski widziane przez każdą rolę. Redaktorzy nadają wtedy wygląd marki jednym kliknięciem zamiast ustawiać rozmiary i kolory ręcznie. Czcionki pochodzą z motywu; zobacz własne czcionki.' tags: - 'Match your brand' 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: 'Dodaj style marki i przyciski do edytora tekstu' description: 'Gdy redaktorzy klikną w tekst w kreatorze DXPR, pojawia się pasek narzędzi. Jego listę Styles możesz wypełnić stylami marki, na przykład akapitem lead albo wyróżnioną frazą. Możesz też wybrać przyciski widziane przez każdą rolę. Redaktorzy nadają wtedy wygląd marki jednym kliknięciem zamiast ustawiać rozmiary i kolory ręcznie. Czcionki pochodzą z motywu; zobacz własne czcionki.' 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:33+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/dostosowanie/edytor-tekstu' articleSection: 'Dopasuj do marki' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/edytor-tekstu' description: 'Gdy redaktorzy klikną w tekst w kreatorze DXPR, pojawia się pasek narzędzi. Jego listę Styles możesz wypełnić stylami marki, na przykład akapitem lead albo wyróżnioną frazą. Możesz też wybrać przyciski widziane przez każdą rolę. Redaktorzy nadają wtedy wygląd marki jednym kliknięciem zamiast ustawiać rozmiary i kolory ręcznie. Czcionki pochodzą z motywu; zobacz własne czcionki.' 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) /[Zarządzaj witryną](/pl/hc/documentation/learn-dxpr-builder/manage) /[Dopasuj do marki](/pl/hc/documentation/learn-dxpr-builder/customization) # Dodaj style marki i przyciski do edytora tekstu. Poznaj DXPR BuilderZarządzaj witrynąDopasuj do marki ## W tym przewodniku Powiązane przewodniki - [Styluj treści kreatora CSS motywu](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasny-css) - [Klasy narzędziowe](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/klasy-narzedziowe) - [Wybierz, co każda rola widzi w kreatorze](/pl/hc/dokumentacja/nauka-dxpr-builder/administracja/profile-uzytkownikow) Gdy redaktorzy klikną w tekst w kreatorze DXPR, pojawia się pasek narzędzi. Jego listę **Styles** możesz wypełnić stylami marki, na przykład akapitem lead albo wyróżnioną frazą. Możesz też wybrać przyciski widziane przez każdą rolę. Redaktorzy nadają wtedy wygląd marki jednym kliknięciem zamiast ustawiać rozmiary i kolory ręcznie. Czcionki pochodzą z motywu; zobacz [własne czcionki](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasne-czcionki). ## Zanim zaczniesz - Do edycji stylów potrzebujesz **Administer DXPR Builder configuration**. - Do edycji przycisków paska narzędzi potrzebujesz **Administer dxpr builder profile**. - Każdy styl wymaga CSS za sobą. Klasy Bootstrap 5, takie jak `lead`, działają, gdy strona wczytuje Bootstrap 5. Własne klasy wymagają reguły w motywie; zobacz [własny CSS](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasny-css). ## Konfiguracja 1. Przejdź do **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`). 2. Rozwiń **Text Editor**. Pole **Custom styles** już wymienia style dostarczane z kreatorem DXPR, po jednym w wierszu. 3. Dodaj jeden wiersz na styl w formacie `Label=element.class` i usuń wiersze, których nie chcesz. 4. Kliknij **Save settings**. 5. Otwórz stronę w kreatorze albo przeładuj ją, jeśli jest otwarta, i kliknij w tekst. 6. Kliknij **Styles** na pasku narzędzi i wybierz swój styl. Te wiersze dodają cztery style: ```text Lead=p.lead Event date=span.text-primary.fw-semibold Callout=p.border-start.border-primary.border-4.ps-3 Sassy Title=h1.sassy-title ``` Każdy wiersz ma trzy części: - Słowo **label** przed `=` to nazwa widziana przez redaktorów na liście. - Słowo **element** po `=` decyduje, co styl obejmuje. Element blokowy, na przykład `p`, `h2` albo `blockquote`, styluje cały akapit albo nagłówek. Element osadzony, na przykład `span`, `mark` albo `code`, otacza tylko zaznaczone słowa. - Każda **klasa** następuje po kropce. Dodaj więcej klas kolejnymi kropkami, jak w `Callout` powyżej. Nazwy elementów używają tylko liter i cyfr. Nazwy klas używają liter, cyfr, myślników i podkreśleń. Aby odzyskać wbudowaną listę, opróżnij pole i zapisz. ## Przyciski paska narzędzi dla roli 1. Przejdź do **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) i kliknij **Edit** obok profilu dla roli. 2. Rozwiń **Text editor buttons (inline editing)**. Zaznacz przyciski dla tekstu edytowanego na stronie. 3. Rozwiń **Text editor buttons (modal editing)**. Zaznacz przyciski dla pól tekstowych w oknie ustawień. 4. Kliknij **Save**. Edycja osadzona obejmuje elementy Text, Alert i Blockquote. Trzymaj zaznaczone **Font style** w obu grupach, aby pokazać własne style; to nazwa profilu dla listy **Styles**. Jeśli odznaczysz każdy przycisk grupy, pasek wraca do wbudowanego zestawu. [Profile użytkowników](/pl/hc/dokumentacja/nauka-dxpr-builder/administracja/profile-uzytkownikow) wyjaśniają, który profil dotyczy kogo. ## Co widzisz **Styles** na pasku narzędzi otwiera panel z dwiema grupami. **Block styles** zawiera style dla całych akapitów i nagłówków, **Text styles** dla zaznaczonych słów. Po wybraniu stylu przycisk pokazuje jego nazwę albo **Multiple styles**, gdy stosuje się kilka. Edytor zapisuje element i jego klasy w HTML strony, więc odwiedzający widzą identyczny wygląd. Styl blokowy jest aktywny tylko we własnym elemencie: `Sassy Title` wymaga kursora w **Heading 1**. ## Ustawienia Wszystkie 36 przycisków pojawiają się w obu grupach. Nowy profil zaczyna z zaznaczonymi: | Przycisk | Nazwa maszynowa | Domyślnie osadzony | Domyślnie modalny | |---|---|:-:|:-:| | **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | tak | tak | | **Bold**, **Italic** | `bold`, `italic` | tak | tak | | **Underline**, **Strike through** | `underline`, `strikethrough` | | tak | | **Superscript**, **Subscript** | `superscript`, `subscript` | | tak | | **Remove format** | `removeFormat` | tak | tak | | **Text color** | `fontColor` | tak | tak | | **Background color** | `fontBackgroundColor` | | | | **Font size** | `fontSize` | tak | tak | | **Font family** | `fontFamily` | | | | **HTML block format** | `heading` | tak | tak | | **Font style** (lista **Styles**) | `style` | tak | tak | | **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | tak | tak | | **Insert/Remove Bullet list** | `bulletedList` | tak | tak | | **Insert/Remove Numbered list** | `numberedList` | | tak | | **Outdent**, **Indent** | `outdent`, `indent` | | tak | | **Block quote** | `blockQuote` | | tak | | **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | tak | tak | | **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` | | tak | | **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` | | tak | | **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` | | | | **Undo**, **Redo** | `undo`, `redo` | tak | tak | Użytkownicy, których role nie pasują do żadnego włączonego profilu, dostają wbudowane paski narzędzi. Osadzony to **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, obie listy, **Link**, **Image**, **Table**, **Undo** i **Redo**. Modalny pasek dodaje przyciski podkreślenia, przekreślenia, skryptów, wyrównania, wcięć, kolorów i rozmiaru. Dodaje też **Block quote**, **Horizontal rule**, **Character map**, **Source code** i **Show blocks**. Gdy AI jest włączone, oba dostają dwa przyciski AI. **Font family** oferuje standardowe bezpieczne czcionki CKEditor, nie czcionki twojego motywu. ## Jeśli nie widzisz swojego stylu - **Lista Styles pokazuje tylko wbudowane style.** Jeden wiersz łamie format albo pusty wiersz znajduje się między dwoma stylami, więc kreator DXPR ignoruje całą listę. Popraw ją w **Text Editor** w `/admin/dxpr_studio/dxpr_builder/settings` i zapisz. - **Twój styl jest wyszarzony.** Styl blokowy działa tylko we własnym elemencie: `h1.sassy-title` wymaga **Heading 1**. Najpierw zmień blok listą nagłówków albo zdefiniuj styl dla `p`. - **Brak przycisku Styles na pasku narzędzi.** Profil edytora ma odznaczone **Font style**. Zaznacz je w obu grupach przycisków w `/admin/dxpr_studio/dxpr_builder/profile`. - **Styl się stosuje, ale tekst wygląda tak samo.** Motyw nie ma CSS dla klasy albo Bootstrap 5 nie jest wczytany. Dodaj regułę do motywu albo ustaw **Sideload Bootstrap files** na **Bootstrap 5** w **Bootstrap** na stronie General Settings. - **Redaktorzy widzą styl, odwiedzający nie.** **Apply text format filters to frontend content** jest włączone w **Text Filters**, a format tekstu pola usuwa atrybuty `class`. Wyłącz opcję albo nadaj polu format zachowujący klasy; zobacz [Odwiedzający widzą coś innego](/pl/hc/dokumentacja/nauka-dxpr-builder/rozwiazywanie-problemow/odwiedzajacy-widza-cos-innego). ## Co dalej? - [Własny CSS](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasny-css): napisz reguły motywu stojące za twoimi klasami stylów. - [Klasy narzędziowe](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/klasy-narzedziowe): oferuj klasy dla całych elementów na liście **HTML classes**. - [Profile użytkowników](/pl/hc/dokumentacja/nauka-dxpr-builder/administracja/profile-uzytkownikow): wszystko pozostałe kontrolowane przez profil.