--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-uslug' title: 'Strona usług. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:46:20+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Tu zbudujesz stronę z listą oferowanych usług. Ma nagłówek, trzy usługi z ikonami, jedną usługę w detalach obok zdjęcia, logo klientów i wezwanie do działania. Użyj jej, gdy sprzedajesz kilka usług. Stronę o jednej ofercie zbuduj zamiast tego według marketingowej strony docelowej. Film buduje stronę usług agencji cyfrowej. 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: 'Strona usług.' description: |- Tu zbudujesz stronę z listą oferowanych usług. Ma nagłówek, trzy usługi z ikonami, jedną usługę w detalach obok zdjęcia, logo klientów i wezwanie do działania. Użyj jej, gdy sprzedajesz kilka usług. Stronę o jednej ofercie zbuduj zamiast tego według marketingowej strony docelowej. Film buduje stronę usług agencji cyfrowej. 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:20+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/strona-uslug' articleSection: Samouczek - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-uslug' description: |- Tu zbudujesz stronę z listą oferowanych usług. Ma nagłówek, trzy usługi z ikonami, jedną usługę w detalach obok zdjęcia, logo klientów i wezwanie do działania. Użyj jej, gdy sprzedajesz kilka usług. Stronę o jednej ofercie zbuduj zamiast tego według marketingowej strony docelowej. Film buduje stronę usług agencji cyfrowej. 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) # Strona usług.. Poznaj DXPR BuilderBuduj stronySamouczek ## W tym przewodniku Powiązane przewodniki - [Strona docelowa.](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa) - [Dodawanie ikony](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/ikona) - [Dodawanie marquee](/pl/hc/documentation/learn-dxpr-builder/elements/marquee) Tu zbudujesz stronę z listą oferowanych usług. Ma nagłówek, trzy usługi z ikonami, jedną usługę w detalach obok zdjęcia, logo klientów i wezwanie do działania. Użyj jej, gdy sprzedajesz kilka usług. Stronę o jednej ofercie zbuduj zamiast tego według [marketingowej strony docelowej](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa). Film buduje stronę usług agencji cyfrowej. ## Zanim zaczniesz - Twoja rola ma uprawnienie **Edit with DXPR Builder**. - Biblioteka mediów trzyma zdjęcie do usługi w detalach i cztery logo klientów. - Strona jest otwarta w kreatorze. Nową utworzysz w **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) przyciskiem **Save**. - Na DXPR CMS ukryj tytuł strony motywu na tej stronie: w jej formularzu edycji otwórz **DXPR Theme Settings** i zaznacz **Page Title** w **DXPR Hide Regions**. **Title** elementu Jumbotron jest wtedy jedynym nagłówkiem Heading 1 strony, jak wyjaśnia [projektowanie stron przyjaznych SEO](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/seo#step-1-start-the-content-at-heading-2). - 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 nagłówek 1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**. Najedź na nią, otwórz **More** > **Settings**, wybierz granatowy **Background** w panelu **Style** i kliknij **Save**. 2. Kliknij **+** na sekcji i wybierz **Jumbotron** z karty **Content**. 3. Ustaw **Title** na „Our services”, **Lead** na jedną linijkę o tym, co oferujesz, a **Type** na **Primary**, a potem kliknij **Save**. ## Krok 2: dodaj przegląd usług 1. Najedź na sekcję 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 „Design” 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 `palette` i kliknij ikonę. Ustaw **Size** na **Very Large (3x)**, otwórz **Icon utilities**, ustaw **Style** na **Circle** i kliknij **Save**. 5. Powtórz dla „Development” z `code` i „Marketing” z `bullhorn`. ## Krok 3: dodaj jedną usługę w detalach 1. Dodaj trzecią sekcję opcją **Add Section Below**, potem **Row**; powstaje z dwiema równymi kolumnami. 2. 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**. 3. Kliknij **+** w prawej kolumnie i wybierz **Button**. Ustaw **Title** na „Get a quote”, **Link** na `/contact`, a **Type** na **Primary**, a potem kliknij **Save**. 4. Kliknij **+** w prawej kolumnie jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz „Design” jako **Heading 2**, dodaj opis i to, co zawiera, a potem kliknij **Save**. ## Krok 4: dodaj logo klientów 1. Dodaj czwartą sekcję i otwórz jej **More** > **Settings**. Wybierz **Align text center** w **HTML classes** i jasnoszary **Background** w panelu **Style**. Kliknij **Save**. 2. Kliknij **+** na sekcji i wybierz **Marquee**. Usuń trzy przykładowe obrazy krzyżykiem **×** na każdym. Kliknij **Select Image**, wyszukaj swoje logo, zaznacz cztery z nich i kliknij **Insert selected**. Włącz **Gray scale** i kliknij **Save**. 3. Kliknij **+** na sekcji jeszcze raz i wybierz **Text**; ląduje nad pasem. Wpisz „Trusted by leading brands” jako **Heading 2** i kliknij **Save**. ## Krok 5: dodaj wezwanie do działania 1. Dodaj piątą 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 „Schedule a consultation”, **Link** na `/contact`, **Type** na **Light**, a **Size** na **Large**, a potem kliknij **Save**. 3. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz „Ready to get started?” jako **Heading 2** i dodaj jedną linijkę. Ustaw **Font color** na biały i kliknij **Save**. ## Krok 6: 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: - **Jedna sekcja detali na usługę**: powtórz krok 3 dla Development i Marketing. Włącz **Mirror row** w ustawieniach co drugiego wiersza, aby zdjęcia naprzemiennie zmieniały strony na tabletach i komputerach. - **Linki skoku**: ustaw **HTML ID** każdej sekcji detali (`design`, `development`, `marketing`). Dodaj **Button** pod każdym tekstem przeglądu z **Link** `#design` i tak dalej. - **Opinie**: dodaj **Block quote** na klienta nad logo. ## Efekt Granatowy pas otwiera stronę, z „Our services” dużą białą czcionką nad jednolinijkowym podsumowaniem. Za nim trzy wyśrodkowane usługi, każda z ikoną w okręgu nad nazwą i linijką. Usługa Design dostaje własny pas ze zdjęciem, opisem i **Get a quote**. Szare logo klientów przewijają się na jasnym pasie, a fioletowy pas zamyka stronę. ## Jeśli nie widzisz strony jak na filmie - **Pas wciąż pokazuje przykładowe logo.** Trzy przykładowe obrazy zostają, dopóki ich nie usuniesz. Otwórz ustawienia pasa, kliknij **×** na każdym przykładowym obrazie i zapisz. - **Logo są kolorowe.** **Gray scale** jest wyłączone. Otwórz ustawienia pasa, włącz je i kliknij **Save**. - **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**. - **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? - [Strona docelowa](/pl/hc/dokumentacja/nauka-dxpr-builder/poradniki/strona-docelowa) o osobnej stronie na usługę - [Element Ikona](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/ikona) o rozmiarach i stylach - [Element Marquee](/pl/hc/documentation/learn-dxpr-builder/elements/marquee) o ustawieniach pasa logo