---
url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/product-page'
title: 'Strona produktu. | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:46:46+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Tu zbudujesz stronę jednego produktu. Zdjęcie stoi obok nazwy,
  ceny i przycisku Buy now, a za nimi trzy funkcje, lista
  specyfikacji i wezwanie sprzedażowe. Użyj jej do wszystkiego, co
  sprzedajesz. Aby porównać kilka planów, dodaj do niej
  tabelę cenową.
  Film buduje stronę produktu sprzętowego o nazwie Insight Hub.
tags:
  - 'Volg een tutorial'
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: 'Strona produktu.'
      description: |-
        Tu zbudujesz stronę jednego produktu. Zdjęcie stoi obok nazwy,
        ceny i przycisku Buy now, a za nimi trzy funkcje, lista
        specyfikacji i wezwanie sprzedażowe. Użyj jej do wszystkiego, co
        sprzedajesz. Aby porównać kilka planów, dodaj do niej
        tabelę cenową.
        Film buduje stronę produktu sprzętowego o nazwie Insight Hub.
      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:46+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/tutorials/product-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/product-page'
      description: |-
        Tu zbudujesz stronę jednego produktu. Zdjęcie stoi obok nazwy,
        ceny i przycisku Buy now, a za nimi trzy funkcje, lista
        specyfikacji i wezwanie sprzedażowe. Użyj jej do wszystkiego, co
        sprzedajesz. Aby porównać kilka planów, dodaj do niej
        tabelę cenową.
        Film buduje stronę produktu sprzętowego o nazwie Insight Hub.
      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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Strona produktu..

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Tabela cenowa.](/pl/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)
- [Dodawanie ikony](/pl/hc/documentation/learn-dxpr-builder/elements/icon)
- [Strona docelowa.](/pl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)

Tu zbudujesz stronę jednego produktu. Zdjęcie stoi obok nazwy, ceny i przycisku **Buy now**, a za nimi trzy funkcje, lista specyfikacji i wezwanie sprzedażowe. Użyj jej do wszystkiego, co sprzedajesz. Aby porównać kilka planów, dodaj do niej [tabelę cenową](/pl/hc/documentation/learn-dxpr-builder/tutorials/pricing-table).

Film buduje stronę produktu sprzętowego o nazwie Insight Hub.

  ## Zanim zaczniesz

- Twoja rola ma uprawnienie **Edit with DXPR Builder**.
- Biblioteka mediów trzyma zdjęcie produktu.
- 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 kolumny. Dlatego prawą kolumnę budujesz od przycisku w górę.

## Krok 1: dodaj produkt

1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**.
2. Kliknij **+** na sekcji i wybierz **Row**; powstaje z dwiema równymi kolumnami.
3. Kliknij **+** w lewej kolumnie i wybierz **Image**. Kliknij **Select Image**, zaznacz zdjęcie produktu i kliknij **Insert selected**. Wpisz **Alt attribute** w panelu **SEO** i kliknij **Save**.
4. Kliknij **+** w prawej kolumnie i wybierz **Button**. Ustaw **Title** na „Buy now”, **Link** na swój sklep, **Type** na **Primary**, a **Size** na **Large**, a potem kliknij **Save**.
5. Kliknij **+** w prawej kolumnie jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz cenę jako **Heading 2** i kliknij **Save**.
6. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje na górze. Wpisz nazwę produktu jako **Heading 2**, dodaj jedną linijkę opisu i kliknij **Save**. Motyw drukuje tytuł strony jako jej nagłówek Heading 1. Aby ten nagłówek stał się nagłówkiem Heading 1, zobacz [projektowanie stron przyjaznych SEO](/pl/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Krok 2: dodaj funkcje

1. Najedź na sekcję i kliknij **Add Section Below**. Nadaj nowej sekcji klasę **Align text center**.
2. Kliknij **+** na sekcji i wybierz **Row**. Kliknij jej ikonę siatki (**Column layout**), wybierz preset **1/3 + 1/3 + 1/3** i kliknij **Save**.
3. Kliknij **+** w pierwszej kolumnie i wybierz **Text**. Wpisz nazwę funkcji jako **Heading 3**, dodaj jedną linijkę i kliknij **Save**.
4. Kliknij **+** w tej samej kolumnie i wybierz **Icon**; ląduje nad tekstem. Wybierz zestaw **Font Awesome Free Solid**, wyszukaj `plug` i kliknij ikonę. Ustaw **Size** na **Very Large (3x)**, otwórz **Icon utilities**, ustaw **Style** na **Circle** i kliknij **Save**.
5. Powtórz w drugiej kolumnie z `cloud`, a w trzeciej z `battery-full`.

## Krok 3: dodaj specyfikację

1. Dodaj trzecią sekcję opcją **Add Section Below**. Otwórz jej **More** > **Settings**, wybierz jasnoszary **Background** w panelu **Style** i kliknij **Save**.
2. Kliknij **+** na sekcji i wybierz **Text**. Wpisz „Specifications” jako **Heading 2**, potem po jednej specyfikacji na linijkę, i kliknij **Save**.

## Krok 4: dodaj wezwanie do działania

1. Dodaj czwartą sekcję i otwórz jej **More** > **Settings**. Wybierz **Align text center** w **HTML classes**, potem fioletowy **Background** i biały **Font color** w panelu **Style**. Kliknij **Save**.
2. Kliknij **+** na sekcji i wybierz **Button**. Ustaw **Title** na „Talk to sales”, **Link** na `/contact`, **Type** na **Light**, a **Size** na **Large**, a potem kliknij **Save**.
3. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz „Insight Hub from 249 euro” jako **Heading 2** i dodaj jedną linijkę. Ustaw **Font color** na biały 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:

- **Tabela specyfikacji**: wstaw tabelę przyciskiem **Table** na pasku narzędzi tekstu zamiast jednej linijki na specyfikację.
- **Galeria**: zamień pojedyncze zdjęcie na karuzelę **Image carousel** ze zdjęciami produktu.
- **Plany**: podlinkuj cenę do [tabeli cenowej](/pl/hc/documentation/learn-dxpr-builder/tutorials/pricing-table).

## Efekt

Zdjęcie produktu wypełnia lewą połowę, a nazwa, cena i przycisk **Buy now** stoją po prawej. Za nimi trzy wyśrodkowane funkcje, każda z ikoną w okręgu nad nazwą i linijką. Specyfikacje stoją na szarym pasie, a fioletowy pas zamyka stronę przyciskiem **Talk to sales**.

## Jeśli nie widzisz strony jak na filmie

- **Nazwa, cena i przycisk są w złej kolejności.** Weszły z góry w dół, a nowe elementy lądują na górze kolumny. Przeciągnij je na miejsce za uchwyt na ich pasku sterowania.
- **Ikony nie mają okręgu.** **Style** stoi w panelu **Icon utilities**, nie w **General**. Otwórz ustawienia ikony, otwórz **Icon utilities** i ustaw **Style** na **Circle**.
- **Nagłówek zostaje ciemny na fiolecie.** Element Text nie ma własnego **Font color**. Otwórz jego panel **Style** i ustaw **Font color** na biały.
- **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/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## Co dalej?

- [Tabela cenowa](/pl/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) o sekcji cenowej z wieloma poziomami
- [Element Ikona](/pl/hc/documentation/learn-dxpr-builder/elements/icon) o rozmiarach i stylach ikon
- [Marketingowa strona docelowa](/pl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) o stronie kampanii wokół produktu