---
url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
title: 'Strona docelowa. | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:46:09+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Tu zbudujesz stronę docelową jednej oferty: hero ze zdjęciem
  z przyciskiem Request a demo, trzy funkcje z ikonami, dwie
  opinie i zamykające wezwanie do działania. Użyj jej do strony
  kampanii albo produktu z jednym celem. Całą witrynę na jednej
  przewijanej stronie zbuduj zamiast tego według
  jednostronicowej witryny.
  Film buduje stronę produktu analitycznego o nazwie Insight.
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 docelowa.'
      description: |-
        Tu zbudujesz stronę docelową jednej oferty: hero ze zdjęciem
        z przyciskiem Request a demo, trzy funkcje z ikonami, dwie
        opinie i zamykające wezwanie do działania. Użyj jej do strony
        kampanii albo produktu z jednym celem. Całą witrynę na jednej
        przewijanej stronie zbuduj zamiast tego według
        jednostronicowej witryny.
        Film buduje stronę produktu analitycznego o nazwie Insight.
      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:09+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/marketing-landing'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
      description: |-
        Tu zbudujesz stronę docelową jednej oferty: hero ze zdjęciem
        z przyciskiem Request a demo, trzy funkcje z ikonami, dwie
        opinie i zamykające wezwanie do działania. Użyj jej do strony
        kampanii albo produktu z jednym celem. Całą witrynę na jednej
        przewijanej stronie zbuduj zamiast tego według
        jednostronicowej witryny.
        Film buduje stronę produktu analitycznego o nazwie Insight.
      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 docelowa..

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Sekcja hero.](/pl/hc/documentation/learn-dxpr-builder/tutorials/hero-section)
- [Dodaj formularze do stron.](/pl/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

Tu zbudujesz stronę docelową jednej oferty: hero ze zdjęciem z przyciskiem **Request a demo**, trzy funkcje z ikonami, dwie opinie i zamykające wezwanie do działania. Użyj jej do strony kampanii albo produktu z jednym celem. Całą witrynę na jednej przewijanej stronie zbuduj zamiast tego według [jednostronicowej witryny](/pl/hc/documentation/learn-dxpr-builder/tutorials/one-page-website).

Film buduje stronę produktu analitycznego o nazwie Insight.

  ## Zanim zaczniesz

- Twoja rola ma uprawnienie **Edit with DXPR Builder**.
- Biblioteka mediów trzyma szerokie zdjęcie do hero.
- 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 sekcji albo kolumny. Dodawaj elementy kolumny w odwrotnej kolejności albo przeciągnij je potem na miejsce.

## Krok 1: dodaj hero

1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**. Najedź na nią i otwórz **More** > **Settings**.
2. W **HTML classes** wybierz **Align text center**.
3. Otwórz panel **Style**. W **Background image** kliknij **Select Image**, zaznacz zdjęcie i kliknij **Insert selected**. Ustaw **Background style** na **Cover**.
4. Wybierz ciemny granatowy **Background** i biały **Font color**, a potem kliknij **Save**.
5. Kliknij **+** na sekcji i wybierz **Button**. Ustaw **Title** na „Request a demo”, **Link** na `/demo`, **Type** na **Light**, a **Size** na **Large**, a potem kliknij **Save**.
6. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz nagłówek jako **Heading 2**, a podtytuł pod nim. Ustaw **Font color** na biały w panelu **Style** 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 hero 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 `bolt` 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 `chart-line`, a w trzeciej z `shield`.

## Krok 3: dodaj opinie

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 **Row**; powstaje z dwiema równymi kolumnami.
3. Kliknij **+** w każdej kolumnie i wybierz **Block quote**. Wpisz cytat, wypełnij **Cite** imieniem osoby i rolą, a potem 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 „Book a walkthrough”, **Link** na `/demo`, **Type** na **Light**, a **Size** na **Large**, a potem kliknij **Save**.
3. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz „See Insight on your own data” 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:

- **Formularz leadów**: wstaw blok webform z karty **Drupal Blocks** zamiast ostatniego przycisku; zobacz [dodawanie formularzy do stron](/pl/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **Ciemniejsze zdjęcie**: w panelu **Background effects** hero ustaw **Background effect** na **Gradient**. Wybierz ten sam ciemny kolor przy kryciu około 60% jako **Start color** i **End color**
- **Wyższe hero**: daj sekcji hero 100 pikseli górnego i dolnego wypełnienia w panelu **Style**.
- **Zacznij od szablonu**: na pustej stronie kliknij **Choose a template** i wybierz układ strony docelowej; zobacz [szablony stron](/pl/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## Efekt

Nagłówek, podtytuł i przycisk **Request a demo** stoją wyśrodkowane na biało na zdjęciu. Za nimi następują trzy funkcje, każda z ikoną w okręgu nad krótkim nagłówkiem i linijką. Dwa cytaty stoją obok siebie na szarym pasie, a fioletowy pas zamyka stronę przyciskiem **Book a walkthrough**.

## Jeśli nie widzisz strony jak na filmie

- **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**.
- **Zdjęcie hero nie wypełnia sekcji.** **Background style** wciąż stoi na **Theme defaults**. Otwórz panel **Style** sekcji i ustaw na **Cover**.
- **Ikona siada pod tekstem funkcji.** Ikona weszła przed tekstem, a nowe elementy lądują na górze kolumny. Przeciągnij ikonę nad tekst za uchwyt na jej pasku sterowania.
- **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?

- [Sekcja hero](/pl/hc/documentation/learn-dxpr-builder/tutorials/hero-section) o opcjach hero na pełną wysokość i z paralaksą
- [Dodawanie formularzy do stron](/pl/hc/documentation/learn-dxpr-builder/tutorials/add-forms) o dodaniu formularza zapisu
- [Testy A/B](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview) o testowaniu dwóch wersji strony