---
url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
title: 'Wielokolumnowe treści. | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:47:00+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Tu zbudujesz jedną stronę z czterema układami kolumn, których
  użyjesz najczęściej: treść z paskiem bocznym, dwie równe połowy,
  trzy trzecie i cztery ćwiartki. Każdy dostaje nagłówek nad sobą.
  Użyj jej, aby nauczyć się, który preset pasuje do której treści.
  Każde ustawienie wiersza znajdziesz w wierszach i kolumnach.
  Film buduje stronę wywozu odpadów urzędu.
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: 'Wielokolumnowe treści.'
      description: |-
        Tu zbudujesz jedną stronę z czterema układami kolumn, których
        użyjesz najczęściej: treść z paskiem bocznym, dwie równe połowy,
        trzy trzecie i cztery ćwiartki. Każdy dostaje nagłówek nad sobą.
        Użyj jej, aby nauczyć się, który preset pasuje do której treści.
        Każde ustawienie wiersza znajdziesz w wierszach i kolumnach.
        Film buduje stronę wywozu odpadów urzędu.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T02:47:00+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/multi-column-content'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      description: |-
        Tu zbudujesz jedną stronę z czterema układami kolumn, których
        użyjesz najczęściej: treść z paskiem bocznym, dwie równe połowy,
        trzy trzecie i cztery ćwiartki. Każdy dostaje nagłówek nad sobą.
        Użyj jej, aby nauczyć się, który preset pasuje do której treści.
        Każde ustawienie wiersza znajdziesz w wierszach i kolumnach.
        Film buduje stronę wywozu odpadów urzędu.
      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) # Wielokolumnowe treści..

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Dodawanie wiersza.](/pl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Dodawanie sekcji.](/pl/hc/documentation/learn-dxpr-builder/layout/sections)

Tu zbudujesz jedną stronę z czterema układami kolumn, których użyjesz najczęściej: treść z paskiem bocznym, dwie równe połowy, trzy trzecie i cztery ćwiartki. Każdy dostaje nagłówek nad sobą. Użyj jej, aby nauczyć się, który preset pasuje do której treści. Każde ustawienie wiersza znajdziesz w [wierszach i kolumnach](/pl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

Film buduje stronę wywozu odpadów urzędu.

  ## 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 sekcji. Dlatego każdy nagłówek wchodzi po swoim wierszu: ląduje nad nim.

## Wybierz układ

| Układ | Najlepszy do | Preset |
|---|---|---|
| Treść z paskiem bocznym | artykuły z linkami pokrewnymi | **2/3 + 1/3** |
| Dwie równe połowy | porównania, przed i po | domyślny wiersz |
| Trzy równe trzecie | wyróżnienia funkcji, usługi | **1/3 + 1/3 + 1/3** |
| Cztery równe ćwiartki | statystyki, małe karty | **1/4 + 1/4 + 1/4 + 1/4** |

Nowy **Row** powstaje z dwiema równymi kolumnami. Każdy inny układ pochodzi z ikony siatki wiersza (**Column layout**).

## Krok 1: treść z paskiem bocznym

1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**.
2. Kliknij **+** na sekcji i wybierz **Row**. Kliknij jej ikonę siatki (**Column layout**), wybierz preset **2/3 + 1/3** i kliknij **Save**.
3. Kliknij **+** w szerokiej kolumnie i wybierz **Text** z karty **Content**. Wpisz artykuł, ustaw pierwszą linijkę na **Heading 3** i kliknij **Save**.
4. Kliknij **+** w wąskiej kolumnie i wybierz **Text**. Wpisz „Related” jako **Heading 4**, dodaj po jednej linijce na pokrewną stronę i kliknij **Save**.
5. Kliknij **+** na sekcji i wybierz **Text**; ląduje nad wierszem. Wpisz „Content with a sidebar” jako **Heading 2** i kliknij **Save**.

## Krok 2: dwie równe połowy

1. Najedź na sekcję i kliknij **Add Section Below**. Otwórz **More** > **Settings** nowej sekcji, wybierz jasnoszary **Background** w panelu **Style** i kliknij **Save**.
2. Kliknij **+** na sekcji i wybierz **Row**. Dwie równe kolumny to domyślne, więc nie ma nic do zmiany.
3. Dodaj element **Text** w każdej kolumnie: „Before” i „After” jako **Heading 4** z jedną linijką każde.
4. Dodaj nagłówek „Two equal halves” tak samo jak w kroku 1.

## Krok 3: trzy równe trzecie

1. Dodaj trzecią sekcję opcją **Add Section Below** i nadaj jej klasę **Align text center**.
2. Dodaj **Row**, kliknij jej ikonę siatki (**Column layout**), wybierz preset **1/3 + 1/3 + 1/3** i kliknij **Save**.
3. Dodaj element **Text** w każdej kolumnie: „Paper”, „Glass” i „Organic” jako **Heading 4** z jedną linijką każde.
4. Dodaj nagłówek „Three equal thirds”.

## Krok 4: cztery równe ćwiartki

1. Dodaj czwartą sekcję z jasnoszarym **Background** i klasą **Align text center**.
2. Dodaj **Row**, kliknij jej ikonę siatki (**Column layout**), wybierz preset **1/4 + 1/4 + 1/4 + 1/4** i kliknij **Save**.
3. Dodaj element **Text** w każdej kolumnie: dzień jako **Heading 4** i to, co odbierane.
4. Dodaj nagłówek „Four equal quarters”.

## Krok 5: zapisz i podejrzyj

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

## Na mniejszych ekranach

Kolumny stoją obok siebie od 768 pikseli szerokości, więc tablety pokazują ten sam układ co komputery. Na telefonach każda kolumna bierze pełną szerokość, a kolumny układają się w stos w swojej kolejności. Inny układ na tablety wybierzesz ikoną siatki wiersza (**Column layout**) opcją **Add screen size**.

## Idź dalej

Niepokazane w filmie:

- **Narrow, wide, narrow**: preset **1/4 + 1/2 + 1/4** trzyma długi tekst czytelny dzięki pustym marginesom.
- **Mirror row**: włącz w ustawieniach wiersza, aby zamienić kolumny na tabletach i komputerach. Telefony trzymają pierwotną kolejność, więc pierwsza kolumna wciąż wchodzi pierwsza.

## Efekt

Cztery pasy następują po sobie, każdy z nagłówkiem na górze. Artykuł i jego pokrewne linki dzielą pierwszy, dwie połowy stoją na szarości, a za nimi trzy wyśrodkowane trzecie. Stronę zamykają cztery wyśrodkowane ćwiartki na szarości.

## Jeśli nie widzisz kolumn jak na filmie

- **Wiersz ma złą liczbę kolumn.** Preset stosuje się dopiero po kliknięciu **Save** w oknie układu. Kliknij ikonę siatki wiersza (**Column layout**) ponownie, wybierz preset i kliknij **Save**.
- **Nagłówek siada pod wierszem.** Nagłówek wszedł przed wierszem, a nowe elementy lądują na górze sekcji. Przeciągnij nagłówek nad wiersz za uchwyt na jego pasku sterowania.
- **Kolumny układają się w stos na tablecie.** Tablet jest węższy niż 768 pikseli, na przykład mały tablet w pionie. Dodaj układ na tę szerokość opcją **Add screen size** w oknie układu wiersza.
- **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?

- [Wiersze i kolumny](/pl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) o każdym ustawieniu wiersza
- [Sekcje](/pl/hc/documentation/learn-dxpr-builder/layout/sections) o tłach i szerokościach sekcji