--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/tabela-cenowa' title: 'Tabela cenowa. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:46:49+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Tu zbudujesz tabelę cenową: trzy plany obok siebie, każdy w panelu z ceną, listą funkcji i przyciskiem na całą szerokość, przy czym środkowy plan jest wyróżniony. Użyj jej na stronie cenowej albo wewnątrz strony produktu. Pełną stronę produktu wokół niej zbuduj według strony produktu. Film buduje trzy plany dla narzędzia do raportowania. tags: - 'Follow a tutorial' 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: 'Tabela cenowa.' description: |- Tu zbudujesz tabelę cenową: trzy plany obok siebie, każdy w panelu z ceną, listą funkcji i przyciskiem na całą szerokość, przy czym środkowy plan jest wyróżniony. Użyj jej na stronie cenowej albo wewnątrz strony produktu. Pełną stronę produktu wokół niej zbuduj według strony produktu. Film buduje trzy plany dla narzędzia do raportowania. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:46:49+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/poradniki/tabela-cenowa' articleSection: Samouczek - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/tabela-cenowa' description: |- Tu zbudujesz tabelę cenową: trzy plany obok siebie, każdy w panelu z ceną, listą funkcji i przyciskiem na całą szerokość, przy czym środkowy plan jest wyróżniony. Użyj jej na stronie cenowej albo wewnątrz strony produktu. Pełną stronę produktu wokół niej zbuduj według strony produktu. Film buduje trzy plany dla narzędzia do raportowania. 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) /[Samouczek](/pl/hc/documentation/learn-dxpr-builder/tutorials/overview) # Tabela cenowa.. Poznaj DXPR BuilderBuduj stronySamouczek ## W tym przewodniku Powiązane przewodniki - [Strona produktu.](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-produktu) - [Dodawanie karty](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/karta) - [Dodawanie panelu](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/panel) Tu zbudujesz tabelę cenową: trzy plany obok siebie, każdy w panelu z ceną, listą funkcji i przyciskiem na całą szerokość, przy czym środkowy plan jest wyróżniony. Użyj jej na stronie cenowej albo wewnątrz strony produktu. Pełną stronę produktu wokół niej zbuduj według [strony produktu](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-produktu). Film buduje trzy plany dla narzędzia do raportowania. ## Zanim zaczniesz - Twoja rola ma uprawnienie **Edit with DXPR Builder**. - Strona jest otwarta w kreatorze. Nową utworzysz w **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) przyciskiem **Save**. - Nowe elementy lądują na górze kontenera, więc w każdym panelu przycisk wchodzi przed ceną. ## Krok 1: dodaj sekcję i kolumny 1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**. 2. Najedź na sekcję i otwórz **More** > **Settings**. W **HTML classes** wybierz **Align text center**. Otwórz panel **Style**, wybierz jasnoszary **Background** i kliknij **Save**. 3. Kliknij **+** na sekcji i wybierz **Row**; powstaje z dwiema równymi kolumnami. 4. Kliknij ikonę siatki wiersza (**Column layout**), wybierz preset **1/3 + 1/3 + 1/3** i kliknij **Save**. ## Krok 2: zbuduj pierwszy plan 1. Kliknij **+** w pierwszej kolumnie i wybierz **Panel** z karty **Content**. 2. Najedź na panel i otwórz **More** > **Settings**. Ustaw **Title** na „Starter”, zostaw **Type** na **DXPR** i kliknij **Save**. 3. Kliknij **+** na panelu i wybierz **Button**. Ustaw **Title** na „Choose plan”, **Link** na `/signup`, a **Type** na **Primary**. Włącz **Block button**, aby wypełnił kolumnę, a potem kliknij **Save**. 4. Kliknij **+** na panelu jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz cenę jako **Heading 2**, dodaj funkcje po jednej na linijkę i kliknij **Save**. ## Krok 3: zbuduj pozostałe plany 1. Powtórz krok 2 w drugiej kolumnie dla „Professional”. W panelu **Style** panelu wybierz fioletowy **Background**, a **Type** przycisku ustaw na **Success**, aby plan się wyróżnił. 2. Powtórz krok 2 w trzeciej kolumnie dla „Enterprise”, z „Custom pricing” jako ceną. **Wskazówka** Środkowa kolumna przyciąga wzrok. Umieść tam plan, który najbardziej chcesz sprzedać. ## Krok 4: dodaj nagłówek 1. Kliknij **+** na sekcji i wybierz **Text**; ląduje nad wierszem. 2. Wpisz „Choose your plan” jako **Heading 2**, dodaj jedną linijkę, na przykład „Simple monthly pricing. Cancel any time.”, i kliknij **Save**. ## Krok 5: zapisz i podejrzyj 1. Kliknij **Save** na pasku narzędzi DXPR Builder. 2. Otwórz menu widoku (**ikona oka**) i wybierz **Preview**. ## Idź dalej Niepokazane w filmie: - **Cztery plany**: wybierz zamiast tego preset **1/4 + 1/4 + 1/4 + 1/4** i zbuduj czwartą kolumnę. - **Odznaka najpopularniejszego**: dodaj element **Text** na górze wyróżnionego panelu z pogrubionym „Most popular”. - **Rocznie i miesięcznie**: dodaj linijkę **Text** nad wierszem, na przykład „Monthly \| Annual (save 20%)”. Linijka jest statyczna; żywy przełącznik potrzebuje elementu **HTML** z własnym skryptem. - **Znaczniki funkcji**: wklej znak wyboru przed każdą linijką funkcji albo dodaj nad listą element **Icon**. ## Efekt „Choose your plan” stoi wyśrodkowane nad trzema planami na szarym pasie. Każdy panel pokazuje nazwę na pasku tytułu, cenę, trzy funkcje i przycisk **Choose plan** na całą szerokość. Środkowy plan wyróżnia się fioletem z zielonym przyciskiem. ## Jeśli nie widzisz planów jak na filmie - **Panel otwiera się bez okna ustawień.** Panele otwierają się puste, bez okna. Najedź na panel i otwórz **More** > **Settings**, aby ustawić jego **Title**. - **Typ panelu taki jak Primary nie pokazuje koloru.** Twój motyw nie styluje tego rodzaju panelu. Zostaw **Type** na **DXPR** i wybierz **Background** w panelu **Style** panelu, jak w kroku 3. - **Przyciski są szerokie tylko jak tekst.** **Block button** jest wyłączony. Otwórz ustawienia każdego przycisku i włącz go. - **Twoje zmiany zniknęły po przeładowaniu.** Stronę opuszczono przed kliknięciem **Save** na pasku narzędzi kreatora. Jeśli Save pokazuje błąd, zobacz [Zmiany nie zapisują się](/pl/hc/dokumentacja/nauka-dxpr-builder/rozwiazywanie-problemow/zapisywanie-nie-dziala). ## Co dalej? - [Strona produktu](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-produktu) o pełnej stronie z funkcjami i cenami - [Element Karta](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/karta) o innym stylu karty - [Element Panel](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/panel) o każdym ustawieniu panelu