--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css' title: 'Link do sekcji i używaj klas do stylów | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:58:11+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Nadaj sekcji HTML ID, aby przycisk mógł do niej przeskoczyć. Dodaj klasy HTML, aby ukryć element na telefonach, ustawić odstępy na rozmiar ekranu albo użyć ponownie wyglądu zdefiniowanego przez motyw. Oba pola znajdziesz u dołu panelu Ogólne każdego elementu. Klasa utrzymuje wygląd spójny: gdy jej reguła CSS się zmieni, każdy element z tą klasą podąży. Film podąża za pierwszą recepturą poniżej: sprawia, że przycisk przeskakuje do sekcji niżej na stronie. 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: 'Link do sekcji i używaj klas do stylów' description: |- Nadaj sekcji HTML ID, aby przycisk mógł do niej przeskoczyć. Dodaj klasy HTML, aby ukryć element na telefonach, ustawić odstępy na rozmiar ekranu albo użyć ponownie wyglądu zdefiniowanego przez motyw. Oba pola znajdziesz u dołu panelu Ogólne każdego elementu. Klasa utrzymuje wygląd spójny: gdy jej reguła CSS się zmieni, każdy element z tą klasą podąży. Film podąża za pierwszą recepturą poniżej: sprawia, że przycisk przeskakuje do sekcji niżej na stronie. 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:11+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/wlasny-css' articleSection: 'Stylizuj elementy' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css' description: |- Nadaj sekcji HTML ID, aby przycisk mógł do niej przeskoczyć. Dodaj klasy HTML, aby ukryć element na telefonach, ustawić odstępy na rozmiar ekranu albo użyć ponownie wyglądu zdefiniowanego przez motyw. Oba pola znajdziesz u dołu panelu Ogólne każdego elementu. Klasa utrzymuje wygląd spójny: gdy jej reguła CSS się zmieni, każdy element z tą klasą podąży. Film podąża za pierwszą recepturą poniżej: sprawia, że przycisk przeskakuje do sekcji niżej na stronie. 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) # Link do sekcji i używaj klas do stylów. Poznaj DXPR BuilderBuduj stronyStylizuj elementy ## W tym przewodniku Powiązane przewodniki - [Działanie układu na telefonach](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/projekt-responsywny) Nadaj sekcji **HTML ID**, aby przycisk mógł do niej przeskoczyć. Dodaj **klasy HTML**, aby ukryć element na telefonach, ustawić odstępy na rozmiar ekranu albo użyć ponownie wyglądu zdefiniowanego przez motyw. Oba pola znajdziesz u dołu panelu **Ogólne** każdego elementu. Klasa utrzymuje wygląd spójny: gdy jej reguła CSS się zmieni, każdy element z tą klasą podąży. Film podąża za pierwszą recepturą poniżej: sprawia, że przycisk przeskakuje do sekcji niżej na stronie. ## 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 HTML ID** jako celu skoku. Przycisk „Book a tour” może przewinąć do formularza rezerwacji. Lista linków u góry długiej strony może prowadzić do każdej części. - **Użyj klasy dla wyglądu, który się powtarza.** Twój webmaster pisze CSS raz, a ty dodajesz klasę tam, gdzie potrzeba. Panel **Styl** kopiuje zamiast tego wartości do każdego elementu, co z czasem się rozjeżdża. - **Użyj klasy do tego, czego panel Styl nie potrafi**, na przykład ukrywania elementu na telefonach albo zmiany odstępów na rozmiar ekranu. ## Przepis: przycisk, który przeskakuje do sekcji 1. Najedź na docelową **sekcję**, kliknij **More**, a potem **Settings**. 2. W panelu **Ogólne** wpisz krótką nazwę, na przykład `programmes`, w polu **HTML ID**. Kliknij **Zapisz**. 3. Otwórz ustawienia **przycisku**. W polu **Link** wpisz `#` i dokładnie tę samą nazwę: `#programmes`. Kliknij **Zapisz**. 4. Kliknij **Zapisz** na pasku narzędzi kreatora. 5. Wybierz **Podgląd** w menu widoku (ikona oka) i kliknij przycisk. Testuj z sekcją niżej na stronie niż przycisk, aby zobaczyć przewijanie. Jeśli cel siedzi w zwijanym panelu, zakładce albo slajdzie karuzeli, link najpierw go otworzy. ## Przepis: ukryj element na telefonach 1. Najedź na element, kliknij **More**, a potem **Settings**. 2. W panelu **Ogólne** kliknij pole **HTML classes**. 3. Wybierz **Hidden on extra small devices, phones (<576px)**. Znajduje się w grupie **Responsive Visibility**. 4. Kliknij **Zapisz** w oknie, a potem **Zapisz** na pasku narzędzi. Element znika teraz na ekranach węższych niż 576 px, także w edytorze. Aby to sprawdzić, otwórz stronę na telefonie. ## Przepis: wpisz własne klasy Pole **HTML classes** pozwala tylko wybierać z listy. Aby wpisać nazwę klasy, najpierw przełącz je na tekst. 1. Najedź na element, kliknij **More**, a potem **Settings**. 2. W polu **HTML classes** kliknij **Edit as text**. Pole zamienia się w zwykłe pole tekstowe z listą klas, które element już ma. 3. Dopisz swoje nazwy klas po nich, oddzielone spacjami, na przykład `brand-card py-3 py-lg-5`. Pomiń kropkę: `.brand-card` w CSS twojego zespołu to tutaj `brand-card`. 4. Kliknij **Zapisz** w oknie, a potem **Zapisz** na pasku narzędzi. Element przyjmuje wygląd zdefiniowany przez twój zespół webowy. ## Co widzisz W **Podglądzie** przycisk płynnie przewija stronę do sekcji i zostawia miejsce na przyklejony nagłówek; pasek adresu kończy się na `#programmes`. Poniżej 576 px szerokości ukryty element znika. Wpisane klasy pokazują się jako chipy przy kolejnym otwarciu okna, w cudzysłowie, gdy nie ma ich na liście, na przykład „brand-card”. ## Jak działają pola ### HTML ID ID musi zaczynać się od litery. Potem może zawierać litery, cyfry, myślniki i podkreślenia, ale bez spacji. Błędne ID pokazuje błąd pod polem, a **Zapisz** nic nie robi, dopóki go nie poprawisz. Jeśli zostawisz pole puste, element zachowa ID utworzone przez DXPR Builder. Puste pole pokazuje je na szaro. Używaj każdego ID raz na stronie: gdy dwa elementy dzielą jedno, linki skaczą do pierwszego. ### HTML classes Lista zawiera klasy cieni i klasy Bootstrap 5, pogrupowane według zadań, na przykład **Margins**, **Padding**, **Responsive Visibility** i **Rounded Corners**. Twój motyw może dodać własną grupę na końcu. Przewiń otwartą listę albo wpisz fragment nazwy, na przykład padding, py-5 albo circular, aby ją zawęzić. Wpisywanie tylko filtruje listę; dla klasy, której na niej nie ma, użyj **Edit as text**. Klasy Bootstrapa działają tylko, gdy strona wczytuje Bootstrap 5. Pochodzi z twojego motywu albo z **General Settings** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), gdzie **Sideload Bootstrap files** jest ustawione na **Bootstrap 5**. Klasy narzędziowe Bootstrapa, na przykład klasy kolorów i odstępów, są oznaczone `!important`. Biją panel **Styl** w tej samej właściwości. **Primary background** bije **Tło**, a **Top margin size 3 (mt-3)** bije górny **margines**. Klasa z rozmiarem ekranu w nazwie obowiązuje od tej szerokości w górę: | W nazwie klasy | Obowiązuje od | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | Zatem `py-3 py-lg-5` daje 16 px paddingu u góry i u dołu na mniejszych ekranach oraz 48 px od 992 px szerokości. ### Dla programisty twojego motywu Klasa potrzebuje reguły CSS w motywie, na przykład: ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` Aby pokazać klasę na liście **HTML classes** dla redaktorów, zarejestruj ją w pliku `.info.yml` motywu; zobacz [Klasy narzędziowe](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/klasy-narzedziowe). Aby ostylować całą witrynę, zobacz [Własny CSS](/pl/hc/dokumentacja/nauka-dxpr-builder/dostosowanie/wlasny-css). ## Jeśli go nie widać - **Zapisz nic nie robi, a HTML ID mówi „ID must start with a letter”.** ID łamie powyższe zasady. Zacznij je od litery i używaj tylko liter, cyfr, myślników i podkreśleń. - **Nie możesz wpisać nowej klasy.** Pole tylko filtruje listę. Najpierw kliknij **Edit as text**. - **Klasy, której oczekujesz, nie ma na liście.** Lista zawiera tylko klasy zdefiniowane przez DXPR Builder i twój motyw. Kliknij **Edit as text** i ją wpisz. - **Przycisk wcale nie przewija.** **Link** musi być `#` z dokładnie tym ID HTML, z tymi samymi wielkimi literami. Sprawdź oba pola i przetestuj w **Podglądzie**. - **Klasa nie działa.** Nazwa jest źle napisana, motyw nie ma dla niej reguły albo Bootstrap 5 się nie wczytuje. Sprawdź pisownię, a potem zapytaj webmastera o regułę albo **Sideload Bootstrap files**. - **Klasa twojego zespołu zmienia tylko niektóre rzeczy.** Wartość panelu **Styl** w tej samej właściwości bije klasę motywu. Wyczyść tę wartość w panelu **Styl**. - **Przycisk skacze w złe miejsce.** Dwa elementy dzielą ID i wygrywa pierwszy. Nadaj każdemu elementowi własne ID. - **Nagłówek sekcji chowa się pod przyklejonym nagłówkiem.** DXPR Builder nie rozpoznaje twojego nagłówka. Webmaster ustawia **Scroll offset selector** w **General Settings** > **Advanced Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) na selektor CSS nagłówka. ## Co dalej? - [Responsywny design](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/projekt-responsywny): zaplanuj, które elementy pokazywać na każdym rozmiarze ekranu.