--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/jednostronicowa-witryna' title: 'Jednostronicowa witryna. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:46:57+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Tu zbudujesz całą witrynę na jednej stronie: hero na pełną wysokość, którego przyciski skaczą do sekcji About, Services i Contact poniżej. Każda sekcja niesie HTML ID, cel swojego przycisku. Użyj jej do małej firmy, kampanii albo portfolio. Stronę wokół jednej oferty zbuduj zamiast tego według marketingowej strony docelowej. Film buduje witrynę studia projektowego o nazwie Studio Nord. 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: 'Jednostronicowa witryna.' description: |- Tu zbudujesz całą witrynę na jednej stronie: hero na pełną wysokość, którego przyciski skaczą do sekcji About, Services i Contact poniżej. Każda sekcja niesie HTML ID, cel swojego przycisku. Użyj jej do małej firmy, kampanii albo portfolio. Stronę wokół jednej oferty zbuduj zamiast tego według marketingowej strony docelowej. Film buduje witrynę studia projektowego o nazwie Studio Nord. 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:57+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/jednostronicowa-witryna' articleSection: Samouczek - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/jednostronicowa-witryna' description: |- Tu zbudujesz całą witrynę na jednej stronie: hero na pełną wysokość, którego przyciski skaczą do sekcji About, Services i Contact poniżej. Każda sekcja niesie HTML ID, cel swojego przycisku. Użyj jej do małej firmy, kampanii albo portfolio. Stronę wokół jednej oferty zbuduj zamiast tego według marketingowej strony docelowej. Film buduje witrynę studia projektowego o nazwie Studio Nord. 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) # Jednostronicowa witryna.. Poznaj DXPR BuilderBuduj stronySamouczek ## W tym przewodniku Powiązane przewodniki - [Sekcja hero.](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/sekcja-hero) - [Strona docelowa.](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa) - [Link do sekcji i używaj klas do stylów](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css) Tu zbudujesz całą witrynę na jednej stronie: hero na pełną wysokość, którego przyciski skaczą do sekcji About, Services i Contact poniżej. Każda sekcja niesie **HTML ID**, cel swojego przycisku. Użyj jej do małej firmy, kampanii albo portfolio. Stronę wokół jednej oferty zbuduj zamiast tego według [marketingowej strony docelowej](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa). Film buduje witrynę studia projektowego o nazwie Studio Nord. ## Zanim zaczniesz - Twoja rola ma uprawnienie **Edit with DXPR Builder**. - Biblioteka mediów trzyma szerokie zdjęcie do hero i zdjęcie zespołu. - 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, więc przyciski hero wchodzą od ostatniego do pierwszego. ## Krok 1: zbuduj hero 1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**. 2. Najedź na sekcję i otwórz **More** > **Settings**. Ustaw **HTML ID** na `hero`, a w **HTML classes** wybierz **Align text center**. 3. Włącz **100% height**, aby sekcja wypełniła ekran, oraz **Vertical centering**, aby treść siadła pośrodku. 4. Otwórz panel **Style**. W **Background image** kliknij **Select Image**, zaznacz zdjęcie i kliknij **Insert selected**. Ustaw **Background style** na **Cover**, wybierz granatowy **Background** i biały **Font color**, a potem kliknij **Save**. 5. Kliknij **+** na sekcji i wybierz **Button**. Ustaw **Title** na „Contact”, **Link** na `#contact`, a **Type** na **Light**, a potem kliknij **Save**. Dodaj tak samo dwa kolejne przyciski: „Services” z `#services`, potem „About” z `#about`. Każdy ląduje nad poprzednim. 6. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje nad przyciskami. Wpisz „Studio Nord” jako **Heading 2** i dodaj hasło. 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/dokumentacja/nauka-dxpr-builder/poradniki/seo#step-1-start-the-content-at-heading-2). ## Krok 2: dodaj sekcję About 1. Najedź na hero i kliknij **Add Section Below**. Otwórz **More** > **Settings** nowej sekcji, ustaw **HTML ID** na `about` i kliknij **Save**. 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 i kliknij **Insert selected**. Wpisz **Alt attribute** w panelu **SEO** i kliknij **Save**. 4. Kliknij **+** w prawej kolumnie i wybierz **Text**. Wpisz „About” jako **Heading 2**, dodaj swoją historię i kliknij **Save**. ## Krok 3: dodaj sekcję Services 1. Dodaj trzecią sekcję opcją **Add Section Below** i otwórz jej **More** > **Settings**. Ustaw **HTML ID** na `services`, wybierz **Align text center** w **HTML classes** i jasnoszary **Background** w panelu **Style**. Kliknij **Save**. 2. Dodaj **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 „Branding” 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 `pen-nib` i kliknij ikonę. Ustaw **Size** na **Very Large (3x)**, otwórz **Icon utilities**, ustaw **Style** na **Circle** i kliknij **Save**. 5. Powtórz dla „Websites” z `laptop-code` i „Analytics” z `chart-pie`. ## Krok 4: dodaj sekcję Contact 1. Dodaj czwartą sekcję i otwórz jej **More** > **Settings**. Ustaw **HTML ID** na `contact`, wybierz **Align text center** w **HTML classes** i kliknij **Save**. 2. Kliknij **+** na sekcji i wybierz **Social links**. Wpisz `linkedin` jako markę pierwszego wiersza i wklej URL profilu, potem `instagram` i jego URL w drugim. Ustaw **Style** na **Circle**, a **Size** na **2x**, a potem kliknij **Save**. 3. Kliknij **+** jeszcze raz i wybierz **Button**; ląduje nad linkami. Ustaw **Title** na „Email us”, **Link** na `mailto:hello@studionord.example` i zostaw **Type** na **Primary**, a potem kliknij **Save**. 4. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz „Get in touch” jako **Heading 2**, a pod nim swój adres e-mail i numer telefonu, a potem kliknij **Save**. ## Krok 5: zapisz i podejrzyj 1. Kliknij **Save** na pasku narzędzi DXPR Builder. 2. Otwórz menu widoku (**ikona oka**), wybierz **Preview** i kliknij przycisk hero, na przykład **Contact**. ## Idź dalej Niepokazane w filmie: - **Przyklejone menu**: utwórz menu w **Structure** > **Menus** > **Add menu** z jednym linkiem na sekcję, na przykład `/studio-nord#about` albo `#about` na stronie głównej. Umieść je w regionie nagłówka w **Structure** > **Block layout**. W DXPR Theme włącz **Sticky Header** w **Appearance** > **Settings** > **DXPR Theme**. - **Strona główna**: ustaw stronę jako główną w **Configuration** > **System** > **Basic site settings**. - **Formularz kontaktowy**: wstaw formularz z karty **Drupal Blocks** zamiast tekstu wprowadzającego; zobacz [dodawanie formularzy do stron](/pl/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## Efekt Zdjęcie wypełnia ekran z „Studio Nord”, hasłem i trzema jasnymi przyciskami. Kliknięcie przycisku przewija stronę płynnie w dół do jego sekcji. Sekcja About pokazuje zdjęcie zespołu obok historii, Services trzy ikony w okręgach na szarości, a Contact nagłówek „Get in touch” i przycisk **Email us** nad dwiema okrągłymi ikonami społecznościowymi. ## Jeśli nie widzisz strony jak na filmie - **Przycisk nie skacze do swojej sekcji.** Jego **Link** nie pasuje do **HTML ID** sekcji. Link to `#` i dokładnie to samo ID, na przykład `#about` dla ID `about`. - **Sekcja ląduje pod przyklejonym nagłówkiem.** Kreator nie zna wysokości nagłówka. W **Advanced Settings** w **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) ustaw **Scroll offset selector** na selektor CSS twojego nagłówka. - **Link społecznościowy pokazuje „No matching brand icon found”.** Marka nie jest znaną nazwą ikony. Wpisz ją małymi literami, na przykład `linkedin` albo `instagram`. - **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/dokumentacja/nauka-dxpr-builder/rozwiazywanie-problemow/zapisywanie-nie-dziala). ## Co dalej? - [Sekcja hero](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/sekcja-hero) o opcjach nakładki i paralaksy - [Strona docelowa](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa) o stronie kampanii - [Linkowanie do sekcji i ponowne użycie stylów klasami](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css) o ID HTML