--- url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/layout/sections' title: 'Dodawanie sekcji. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:45:36+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Sekcja to jeden pas twojej strony, na przykład hero na górze albo szary pas funkcji pod nim. Każdej sekcji dajesz własne tło, kolor tekstu, odstępy i wysokość, a potem wypełniasz ją wierszami albo treścią. Ta strona opisuje dodawanie i konfigurowanie sekcji; podział na kolumny znajdziesz w wierszach i kolumnach. tags: - Lay-out 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: 'Dodawanie sekcji.' description: |- Sekcja to jeden pas twojej strony, na przykład hero na górze albo szary pas funkcji pod nim. Każdej sekcji dajesz własne tło, kolor tekstu, odstępy i wysokość, a potem wypełniasz ją wierszami albo treścią. Ta strona opisuje dodawanie i konfigurowanie sekcji; podział na kolumny znajdziesz w wierszach i kolumnach. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:45:36+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/layout/sections' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/layout/sections' description: |- Sekcja to jeden pas twojej strony, na przykład hero na górze albo szary pas funkcji pod nim. Każdej sekcji dajesz własne tło, kolor tekstu, odstępy i wysokość, a potem wypełniasz ją wierszami albo treścią. Ta strona opisuje dodawanie i konfigurowanie sekcji; podział na kolumny znajdziesz w wierszach i kolumnach. 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) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Dodawanie sekcji.. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Dodawanie wiersza.](/pl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Backgrounds](/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Full-width layouts](/hc/documentation/learn-dxpr-builder/design/full-width-layouts) Sekcja to jeden pas twojej strony, na przykład hero na górze albo szary pas funkcji pod nim. Każdej sekcji dajesz własne tło, kolor tekstu, odstępy i wysokość, a potem wypełniasz ją wierszami albo treścią. Ta strona opisuje dodawanie i konfigurowanie sekcji; podział na kolumny znajdziesz w [wierszach i kolumnach](/pl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). ## Dodawanie sekcji Przykład buduje granatową sekcję hero dla kliniki. Pod nią następuje jasnoszara sekcja z trzema kolumnami. 1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** na karcie **Layout**. Pod istniejącą sekcją kliknij **Add Section Below**, okrągły plus pod nią. 2. Najedź na sekcję, otwórz **More** i wybierz **Settings**. 3. Skonfiguruj całą sekcję: tutaj **Align text center** w **HTML classes**, granatowy **Background** i biały **Font color**. Kliknij **Save**. 4. Kliknij **+** na sekcji, aby dodać treść wprost do niej, albo dodaj **Row**, aby podzielić ją na kolumny. 5. Kliknij **Save** na pasku narzędzi, aby zapisać stronę. **Background** i **Font color** są w panelu **Style** okna. Nowe elementy lądują na górze sekcji, więc najpierw dodaj najniższy: w filmie przycisk wchodzi przed nagłówkiem. ## Efekt Granatowy pas wypełnia okno od krawędzi do krawędzi. Nagłówek i przycisk zostają w wyśrodkowanym pudełku, wewnętrznym kontenerze sekcji. Szara sekcja zaczyna się tuż pod spodem, z trzema kolumnami funkcji w tym samym wyśrodkowanym pudełku. Każda nowa sekcja niesie już klasę **Vertical padding size 5 (py-5)**w **HTML classes**. Ta klasa daje jej przestrzeń nad treścią i pod nią. ## Konfiguracja sekcji Okno ustawień ma pięć paneli: **General**, **Background effects**, **Animation**, **Style** i **Hover style**. Tylko sekcje mają **Background effects**. | Ustawienie | Panel | Do czego służy | Domyślnie | |---|---|---|---| | **Full width** | General | Wiersze biegną od krawędzi do krawędzi zamiast w wyśrodkowanym kontenerze | Off | | **100% height** | General | Sekcja jest wysoka co najmniej na okno przeglądarki | Off | | **Vertical centering** | General | Treść siada w pionowym środku sekcji wyższej od niej | Off | | **HTML ID** | General | Nazwa kotwicy, dzięki której link do `#name` skacze do tej sekcji | Empty | | **HTML classes** | General | Klasy narzędziowe, takie jak **Align text center** albo rozmiar odstępu | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** albo **YouTube video** | **Simple image** | | **Background**, **Font color** | Style | Kolor za sekcją i kolor jej tekstu | None: decyduje motyw | Tło zawsze rozciąga się na całą sekcję, niezależnie od **Full width**. Efekty obrazu przesuwają **Background image** wybrane w panelu **Style**; [tła](/hc/documentation/learn-dxpr-builder/design/backgrounds) pokazują każdy efekt. Przy mniejszej lub większej przestrzeni zamień **Vertical padding size 5 (py-5)** na mniejszy rozmiar albo **No vertical padding (py-0)**. Dokładne piksele ustawisz modelem pudełkowym w panelu **Style**, jak wyjaśniają [odstępy](/hc/documentation/learn-dxpr-builder/element-settings/spacing). ## Przepisy na sekcje | Sekcja | Ustawienia, które ją tworzą | |---|---| | Hero | **100% height** i **Vertical centering** włączone, efekt **Parallax image**, nagłówek i przycisk | | Funkcje | Jasny **Background**, nagłówek, a potem wiersz trzech kolumn | | Wezwanie do działania | Mocny **Background**, **Align text center**, jedna krótka linijka i przycisk | | Opinie | Jasny **Background** i wiersz trzech kolumn, każda z **Block quote** | [Projektowanie sekcji hero](/pl/hc/documentation/learn-dxpr-builder/tutorials/hero-section) buduje pierwszą krok po kroku. ## Jeśli jej nie widzisz - **Pusta strona nie ma przycisku Add Elements.** Asystent tworzenia stron jest wyłączony, więc pusta strona oferuje tylko **Choose a template**. Kliknij pusty obszar, aby otworzyć selektor elementów, albo włącz **Enable page creation assistant** pod adresem `/admin/dxpr_studio/dxpr_builder/ai_settings`. - **Nie ma przycisku Add Section Below.** Mają go tylko sekcje położone wprost na stronie, nie sekcja w kolumnie ani w karcie. Kliknij **+**na kolumnie. - **Wyśrodkowanie pionowe nic nie zmienia.** Sekcja jest wysoka tylko na swoją treść, więc nie ma w czym środkować. Włącz też **100% height**. - **Full width zdaje się nic nie robić.** Tło i tak rozciąga się na całą sekcję; **Full width** tylko wysuwa wiersze do jej krawędzi. Przy krótkim tekście w jednej kolumnie zmianę trudno dostrzec. - **Pojawiła się sekcja, której nie dodano.** Wybrano **Row** albo element treści na pustej stronie, a każdy element potrzebuje sekcji wokół siebie. DXPR Builder dodał ją za ciebie; otwórz jej ustawienia jak każde inne. ## Co dalej? - [Wiersze i kolumny](/pl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): podziel sekcję na kolumny. - [Tła](/hc/documentation/learn-dxpr-builder/design/backgrounds): efekty paralaksy, gradientu i wideo dla sekcji. - [Układy na całą szerokość](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): kiedy pozwolić wierszom biec od krawędzi do krawędzi.