---
url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/sekcja-hero'
title: 'Sekcja hero. | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:46:05+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Tu zbudujesz hero wypełniające ekran: zdjęcie tła, nagłówek,
  jedną linijkę wspierającą i przycisk, przy czym zdjęcie przesuwa się
  wolniej niż strona, gdy odwiedzający przewijają. Użyj go na górze
  każdej strony. Całą stronę wokół niego zbuduj potem według
  marketingowej strony docelowej.
  Film buduje hero produktu 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: 'Sekcja hero.'
      description: |-
        Tu zbudujesz hero wypełniające ekran: zdjęcie tła, nagłówek,
        jedną linijkę wspierającą i przycisk, przy czym zdjęcie przesuwa się
        wolniej niż strona, gdy odwiedzający przewijają. Użyj go na górze
        każdej strony. Całą stronę wokół niego zbuduj potem według
        marketingowej strony docelowej.
        Film buduje hero produktu 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:05+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/sekcja-hero'
      articleSection: Samouczek
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/sekcja-hero'
      description: |-
        Tu zbudujesz hero wypełniające ekran: zdjęcie tła, nagłówek,
        jedną linijkę wspierającą i przycisk, przy czym zdjęcie przesuwa się
        wolniej niż strona, gdy odwiedzający przewijają. Użyj go na górze
        każdej strony. Całą stronę wokół niego zbuduj potem według
        marketingowej strony docelowej.
        Film buduje hero produktu 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) # Sekcja hero..

 Poznaj DXPR BuilderBuduj stronySamouczek

   ## W tym przewodniku

 Powiązane przewodniki

- [Strona docelowa.](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa)
- [Dodawanie sekcji.](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/sekcje)
- [Zmień wygląd elementu w panelu Styl](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/panel-styl)

Tu zbudujesz hero wypełniające ekran: zdjęcie tła, nagłówek, jedną linijkę wspierającą i przycisk, przy czym zdjęcie przesuwa się wolniej niż strona, gdy odwiedzający przewijają. Użyj go na górze każdej strony. Całą stronę wokół niego zbuduj potem według [marketingowej strony docelowej](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa).

Film buduje hero produktu do raportowania.

  ## Zanim zaczniesz

- Twoja rola ma uprawnienie **Edit with DXPR Builder**.
- Biblioteka mediów trzyma szerokie zdjęcie, co najmniej 1920 pikseli szerokości.
- Strona jest otwarta w kreatorze. Nową utworzysz w **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) przyciskiem **Save**.

## Krok 1: dodaj sekcję

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**, aby nagłówek, tekst i przycisk wyśrodkowały się razem.
3. Włącz **100% height**, aby hero wypełniło ekran, oraz **Vertical centering**, aby treść siadła pośrodku.
4. Otwórz panel **Style**. W **Background image** kliknij **Select Image**, zaznacz szerokie zdjęcie i kliknij **Insert selected**.
5. Ustaw **Background style** na **Cover**, aby zdjęcie wypełniło sekcję.
6. Wybierz ciemny kolor **Background**, widoczny, gdy zdjęcie się ładuje. Ustaw **Font color** na biały, a potem kliknij **Save**.

**Wskazówka**

Skompresuj zdjęcie poniżej 500 KB, aby hero ładowało się szybko.

## Krok 2: dodaj przycisk

1. Kliknij **+** na sekcji i wybierz **Button** z karty **Content**.
2. Ustaw **Title** na „Start free trial”, **Link** na `/trial`, **Type** na **Light** dla kontrastu na zdjęciu, a **Size** na **Large**, a potem kliknij **Save**.

## Krok 3: dodaj nagłówek

1. Kliknij **+** na sekcji jeszcze raz i wybierz **Text** z karty **Content**. Ląduje nad przyciskiem, bo nowe elementy lądują na górze.
2. Wpisz swój nagłówek, „Reporting that keeps up with your team”, i wybierz **Heading 2** z listy nagłówków. 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/dokumentacja/nauka-dxpr-builder/poradniki/seo#step-1-start-the-content-at-heading-2).
3. Dodaj jedną linijkę wspierającą: „Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required.”
4. W panelu **Style** ustaw **Font color** na biały, a potem kliknij **Save**.

## Krok 4: dodaj paralaksę

1. Najedź na sekcję i otwórz **More** > **Settings** jeszcze raz.
2. Otwórz panel **Background effects** i ustaw **Background effect** na **Parallax image**. **Parallax speed** startuje od 20; przeciągnij do 35 dla mocniejszego efektu i kliknij **Save**.

## Krok 5: dodaj treść pod hero

1. Najedź na hero i kliknij **Add Section Below**, aby strona miała treść do przewijania.
2. Kliknij **+** na nowej sekcji i wybierz **Text** z karty **Content**. Wpisz nagłówek i krótki akapit, ustaw pierwszą linijkę na **Heading 2** i kliknij **Save**.

## Krok 6: zapisz i podejrzyj

1. Kliknij **Save** na pasku narzędzi DXPR Builder.
2. Otwórz menu widoku (**ikona oka**), wybierz **Preview** i przewiń w dół.

## Idź dalej

Niepokazane w filmie:

- **Nakładka**: ustaw **Background effect** na **Gradient** i wybierz ciemny **Start color** i **End color** przy kryciu około 50%. Tekst zostaje czytelny na każdym zdjęciu. Efekt trzyma jedną wartość, więc nakładka zastępuje paralaksę.
- **Krótsze hero**: wyłącz **100% height** i daj sekcji własne górne i dolne wypełnienie w panelu **Style**, na przykład 100 pikseli.
- **Szeroki przycisk**: włącz **Block button**, aby przycisk był szeroki jak kolumna.

## Warianty

Alternatywy dla budowy z filmu:

### Hero z tłem wideo

1. W panelu **Background effects** ustaw **Background effect** na **YouTube video**.
2. Wklej URL filmu w **YouTube video URL**.
3. W **Video options** zaznacz **Loop** i **Disable on mobile devices**; dźwięk zostaw wyłączony.

### Hero tylko z gradientem

Pomiń obraz tła i użyj efektu **Gradient** z dwoma jednolitymi kolorami marki, aby hero ładowało się szybko.

### Dzielone hero

1. Dodaj **Row** w sekcji; powstaje z dwiema równymi kolumnami.
2. Umieść tekst i przycisk w lewej kolumnie, a zdjęcie w prawej.

## Efekt

Zdjęcie wypełnia ekran, a twój nagłówek, linijka wspierająca i przycisk **Start free trial** stoją wyśrodkowane na biało na nim. Gdy przewijasz w dół do drugiej sekcji, zdjęcie przesuwa się wolniej niż strona.

## Jeśli nie widzisz hero jak na filmie

- **Hero jest wysokie tylko na swój tekst.** **100% height** jest wyłączone. Włącz je w ustawieniach sekcji i kliknij **Save**.
- **Zdjęcie stoi w miejscu, gdy przewijasz.** **Background effect** wciąż stoi na **Simple image**, **Parallax speed** to 0 albo pod hero nie ma nic do przewijania. Ustaw **Parallax image**, przeciągnij **Parallax speed** powyżej 0 i dodaj drugą sekcję z kroku 5.
- **Nagłówek zostaje ciemny na zdjęciu.** Element Text nie ma własnego **Font color**. Otwórz jego panel **Style** i ustaw **Font color** na biały.

## Co dalej?

- [Strona docelowa](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa) o budowaniu całej strony wokół hero
- [Sekcje](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/sekcje) o opcjach układu sekcji
- [Opis karty Style](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/panel-styl) o wszystkich opcjach stylowania