--- url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/layout/tabs-element' title: 'Dodawanie panelu kart. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:45:39+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Użyj kart, gdy kilka bloków pokrewnej treści ma stać w jednym miejscu, a widoczny ma być tylko jeden naraz. Powstaje rząd etykiet kart; odwiedzający klika etykietę, aby zobaczyć jej treść. Przykład buduje stronę agencji z jedną kartą na usługę. Do pytań i odpowiedzi panel zwijany zwykle czyta się lepiej. tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dodawanie panelu kart.' description: |- Użyj kart, gdy kilka bloków pokrewnej treści ma stać w jednym miejscu, a widoczny ma być tylko jeden naraz. Powstaje rząd etykiet kart; odwiedzający klika etykietę, aby zobaczyć jej treść. Przykład buduje stronę agencji z jedną kartą na usługę. Do pytań i odpowiedzi panel zwijany zwykle czyta się lepiej. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:45:39+0000' dateModified: '2026-10-24T09:09:48+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/layout/tabs-element' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/layout/tabs-element' description: |- Użyj kart, gdy kilka bloków pokrewnej treści ma stać w jednym miejscu, a widoczny ma być tylko jeden naraz. Powstaje rząd etykiet kart; odwiedzający klika etykietę, aby zobaczyć jej treść. Przykład buduje stronę agencji z jedną kartą na usługę. Do pytań i odpowiedzi panel zwijany zwykle czyta się lepiej. 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) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Dodawanie panelu kart.. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Dodawanie panelu zwijanego.](/pl/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) - [Dodawanie układu karuzeli.](/pl/hc/documentation/learn-dxpr-builder/layout/carousel-layout) - [Dodawanie układu zagnieżdżonego.](/pl/hc/documentation/learn-dxpr-builder/layout/nesting) Użyj kart, gdy kilka bloków pokrewnej treści ma stać w jednym miejscu, a widoczny ma być tylko jeden naraz. Powstaje rząd etykiet kart; odwiedzający klika etykietę, aby zobaczyć jej treść. Przykład buduje stronę agencji z jedną kartą na usługę. Do pytań i odpowiedzi [panel zwijany](/pl/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) zwykle czyta się lepiej. ## Dodawanie panelu kart 1. Najedź na kolumnę i kliknij **+** na jej pasku sterowania albo **+** na środku pustej kolumny, aby otworzyć selektor elementów. 2. Na karcie **Layout** kliknij **Tabs**. Element pojawia się z jedną kartą o etykiecie **Title**. 3. Najedź na panel karty i otwórz **More > Settings**. Wpisz nazwę w **Tab title** i kliknij **Save**. 4. Kliknij **+** w panelu, aby dodać treść, na przykład element **Text**. 5. Aby dodać kartę, najedź na etykiety kart i kliknij **Add tab** na pasku sterowania **Tabs**. Nowa karta ląduje na początku, przed pozostałymi. Nazwij ją i wypełnij tak samo. ## Efekt Rząd etykiet kart stoi nad treścią otwartej karty. W podglądzie i na opublikowanej stronie kliknięcie etykiety pokazuje treść tej karty i chowa resztę. Każda karta trzyma własne elementy, więc jedna karta może nieść tekst, a inna zestaw kart. Na ekranach węższych niż 768 pikseli karty zamieniają się w ułożone w stos nagłówki, które otwierają się jak panel zwijany. ## Konfiguracja kart Element **Tabs** ma trzy ustawienia. Otworzysz je z **More > Settings** na pasku sterowania **Tabs**, który pokazuje się po najechaniu na etykiety kart. | Ustawienie | Do czego służy | Domyślnie | |---|---|---| | **Tab direction** | Gdzie stoją etykiety: **Default** (nad treścią), **Left** albo **Right** | Default | | **Style** | Wygląd etykiet: **Default** (linia pod etykietami), **Modern** (zaokrąglone karty) albo **Accordion** (nagłówki z liniami oddzielającymi) | Default | | **Mobile friendly** | Pokazuje karty jako zwijane nagłówki na ekranach węższych niż 768 pikseli | On | Każda karta ma własne ustawienia w **More > Settings** na swoim panelu. **Tab title** to tekst etykiety. **Tab description** to opcjonalna krótka linijka pod etykietą otwartej karty. ## Zarządzanie kartami - **Reorder**: przeciągnij etykietę karty w nowe miejsce między etykietami. Jej treść wędruje razem z nią. - **Rename**: najedź na panel karty, otwórz **More > Settings**, zmień **Tab title** i kliknij **Save**. - **Remove**: najedź na panel karty, otwórz **More** i wybierz **Delete**. Wszystko w karcie usuwa się razem z nią. Etykiety pisz w jednym do trzech słów i poprzestań na około pięciu kartach, aby zmieściły się w jednej linii. ## Jeśli ich nie widzisz - **Nowa karta jest na początku zamiast na końcu.** **Add tab** zawsze stawia nową kartę z przodu. Przeciągnij jej etykietę w wybrane miejsce. - **Ustawienia pokazują tylko Tab title i Tab description.** Otwarto ustawienia jednej karty. Najedź na etykiety kart, aby pokazał się pasek sterowania **Tabs**, a potem otwórz tam **More > Settings**. - **Telefony pokazują ułożone w stos nagłówki zamiast kart.** **Mobile friendly** jest włączone, co jest domyślne. Wyłącz je w ustawieniach **Tabs**, aby zachować karty na każdej szerokości ekranu. - **Kart nie ma na karcie Layout selektora.** Twój profil użytkownika DXPR Builder je pomija. Administrator zaznacza **Tabs** w **Elements** w twoim profilu pod adresem `/admin/dxpr_studio/dxpr_builder/profile`. ## Co dalej? - [Dodawanie panelu zwijanego](/pl/hc/documentation/learn-dxpr-builder/layout/collapsibles-element): ułóż pytania i odpowiedzi otwierane pojedynczo. - [Dodawanie układu karuzeli](/pl/hc/documentation/learn-dxpr-builder/layout/carousel-layout): pokazuj treści tego samego rodzaju po kolei. - [Zagnieżdżanie](/pl/hc/documentation/learn-dxpr-builder/layout/nesting): umieść wiersze i kolumny w karcie dla bogatszych układów.