--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BE%D0%B4%D0%BD%D0%BE%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%BE%D0%B2%D0%B8%D0%B9-%D1%81%D0%B0%D0%B9%D1%82' title: 'Створення односторінкового сайту з гортанням | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T20:07:49+00:00' updated: '2026-10-24T20:15:47+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Тут ви створюєте цілий сайт на одній сторінці: hero-розділ на повну висоту, чиї кнопки стрибають до розділів About, Services і Contact нижче. Кожен розділ має HTML ID, ціль своєї кнопки. Використовуйте його для малого бізнесу, кампанії чи портфоліо.' 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-24T20:15:47+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Створення односторінкового сайту з гортанням' description: 'Тут ви створюєте цілий сайт на одній сторінці: hero-розділ на повну висоту, чиї кнопки стрибають до розділів About, Services і Contact нижче. Кожен розділ має HTML ID, ціль своєї кнопки. Використовуйте його для малого бізнесу, кампанії чи портфоліо.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T20:07:49+0000' dateModified: '2026-10-24T20:15:47+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BE%D0%B4%D0%BD%D0%BE%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%BE%D0%B2%D0%B8%D0%B9-%D1%81%D0%B0%D0%B9%D1%82' articleSection: 'Покрокові інструкції' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BE%D0%B4%D0%BD%D0%BE%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%BE%D0%B2%D0%B8%D0%B9-%D1%81%D0%B0%D0%B9%D1%82' description: 'Тут ви створюєте цілий сайт на одній сторінці: hero-розділ на повну висоту, чиї кнопки стрибають до розділів About, Services і Contact нижче. Кожен розділ має HTML ID, ціль своєї кнопки. Використовуйте його для малого бізнесу, кампанії чи портфоліо.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Покрокові інструкції](/uk/hc/documentation/learn-dxpr-builder/tutorials/overview) # Створення односторінкового сайту з гортанням. Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції ## In this guide Related guides - [Проєктування hero-розділу](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/hero-%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB) - [Створення маркетингового лендингу](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3) - [Посилання на розділи й повторне використання стилів через класи](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css) Тут ви створюєте цілий сайт на одній сторінці: hero-розділ на повну висоту, чиї кнопки стрибають до розділів About, Services і Contact нижче. Кожен розділ має **HTML ID**, ціль своєї кнопки. Використовуйте його для малого бізнесу, кампанії чи портфоліо. Для сторінки навколо однієї пропозиції натомість виконайте посібник [Створення маркетингового лендингу](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3). Відео створює сайт дизайн-студії під назвою Studio Nord. ## Перед початком - Ваша роль має дозвіл **Edit with DXPR Builder**. - Медіабібліотека містить широке фото для hero-розділу й фото команди. - Сторінка відкрита в конструкторі. Для нової перейдіть до **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) і натисніть **Save**. - Нові елементи стають угорі свого розділу чи стовпця, тож кнопки hero-розділу додаються від останньої до першої. ## Крок 1: створення hero-розділу 1. Натисніть **Add Elements** на порожній сторінці й виберіть **Section** на вкладці **Layout**. 2. Наведіть курсор на розділ і відкрийте **More** > **Settings**. Установіть **HTML ID** на `hero` і в розділі **HTML classes** виберіть **Align text center**. 3. Увімкніть **100% height**, щоб розділ заповнив екран, і **Vertical centering**, щоб вміст був посередині. 4. Відкрийте панель **Style**. У розділі **Background image** натисніть **Select Image**, позначте фото й натисніть **Insert selected**. Установіть **Background style** на **Cover**, виберіть темно-синій **Background** і білий **Font color**, потім натисніть **Save**. 5. Натисніть **+** на розділі й виберіть **Button**. Установіть **Title** на «Contact», **Link** на `#contact`, а **Type** на **Light**, потім натисніть **Save**. Додайте ще дві кнопки так само: «Services» з `#services`, потім «About» з `#about`. Кожна стає над останньою. 6. Натисніть **+** знову й виберіть **Text**; він стане над кнопками. Введіть «Studio Nord» як **Heading 2** і додайте слоган. Установіть **Font color** на білий на панелі **Style** і натисніть **Save**. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. [Створення SEO-дружніх сторінок](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/seo#step-1-start-the-content-at-heading-2). ## Крок 2: додавання розділу About 1. Наведіть курсор на hero-розділ і натисніть **Add Section Below**. Відкрийте **More** > **Settings** нового розділу, установіть **HTML ID** на `about` і натисніть **Save**. 2. Натисніть **+** на розділі й виберіть **Row**; спочатку він має два рівні стовпці. 3. Натисніть **+** у лівому стовпці й виберіть **Image**. Натисніть **Select Image**, позначте фото й натисніть **Insert selected**. Введіть **Alt attribute** на панелі **SEO** і натисніть **Save**. 4. Натисніть **+** у правому стовпці й виберіть **Text**. Введіть «About» як **Heading 2**, додайте вашу історію й натисніть **Save**. ## Крок 3: додавання розділу Services 1. Додайте третій розділ за допомогою **Add Section Below** і відкрийте його **More** > **Settings**. Установіть **HTML ID** на `services`, виберіть **Align text center** у розділі **HTML classes** і світло-сірий **Background** на панелі **Style**. Натисніть **Save**. 2. Додайте **Row**, натисніть його піктограму сітки (**Column layout**), виберіть пресет **1/3 + 1/3 + 1/3** і натисніть **Save**. 3. Натисніть **+** у першому стовпці й виберіть **Text**. Введіть «Branding» як **Heading 3**, додайте один рядок і натисніть **Save**. 4. Натисніть **+** у тому самому стовпці й виберіть **Icon**; він стане над текстом. Виберіть набір **Font Awesome Free Solid**, знайдіть `pen-nib` і натисніть піктограму. Установіть **Size** на **Very Large (3x)**, відкрийте **Icon utilities**, установіть **Style** на **Circle** і натисніть **Save**. 5. Повторіть для «Websites» з `laptop-code`, а для «Analytics» з `chart-pie`. ## Крок 4: додавання розділу Contact 1. Додайте четвертий розділ і відкрийте його **More** > **Settings**. Установіть **HTML ID** на `contact`, виберіть **Align text center** у розділі **HTML classes** і натисніть **Save**. 2. Натисніть **+** на розділі й виберіть **Social links**. Введіть `linkedin` як бренд першого рядка й вставте URL профілю, потім `instagram` і його URL у другому. Установіть **Style** на **Circle**, а **Size** на **2x**, потім натисніть **Save**. 3. Натисніть **+** знову й виберіть **Button**; він стане над посиланнями. Установіть **Title** на «Email us», **Link** на `mailto:hello@studionord.example` і лишіть **Type** на **Primary**, потім натисніть **Save**. 4. Натисніть **+** знову й виберіть **Text**; він стане над кнопкою. Введіть «Get in touch» як **Heading 2**, а вашу адресу електронної пошти й номер телефону під ним, потім натисніть **Save**. ## Крок 5: збереження й попередній перегляд 1. Натисніть **Save** на панелі інструментів конструктора. 2. Відкрийте меню перегляду (**піктограма ока**), виберіть **Preview** і натисніть кнопку hero-розділу, наприклад **Contact**. ## Далі Не показано у відео: - **Fixed menu**: створіть меню в розділі **Structure** > **Menus** > **Add menu** із одним посиланням на розділ, як-от `/studio-nord#about`, або `#about` на головній сторінці. Розмістіть його в регіоні шапки в розділі **Structure** > **Block layout**. У DXPR Theme увімкніть **Sticky Header** у розділі **Appearance** > **Settings** > **DXPR Theme**. - **Front page**: зробіть сторінку головною в розділі **Configuration** > **System** > **Basic site settings**. - **Contact form**: вставте форму з вкладки **Drupal Blocks** замість вступного тексту; див. [Додавання форм на сторінки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%B4%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D1%84%D0%BE%D1%80%D0%BC). ## Що ви бачите Фото заповнює екран із «Studio Nord», слоганом і трьома світлими кнопками. Натискання кнопки плавно гортає сторінку вниз до її розділу. About показує фото команди поруч із історією, Services три піктограми в колах на сірому, а Contact заголовок «Get in touch» і кнопку **Email us** над двома круглими соціальними піктограмами. ## Якщо сторінка виглядає не так, як показано - **Кнопка не стрибає до свого розділу.** Її **Link** не відповідає **HTML ID** розділу. Посилання це `#` плюс точно той самий ID, наприклад `#about` для ID `about`. - **Розділ стає під вашу фіксовану шапку.** Конструктор не знає висоти шапки. У розділі **Advanced Settings** за адресою **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) установіть **Scroll offset selector** на CSS-селектор вашої шапки. - **Соціальне посилання показує «No matching brand icon found».** Бренд не є відомим ім’ям піктограми. Введіть його малими літерами, наприклад `linkedin` або `instagram`. - **Ваші зміни зникли після перезавантаження.** Ви покинули сторінку, не натиснувши **Save** на панелі інструментів конструктора. Якщо Save показує помилку, див. [Зміни не зберігаються](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%83%D1%81%D1%83%D0%BD%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D0%B5%D0%B9/%D0%B7%D0%B1%D0%B5%D1%80%D0%B5%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5-%D0%B2%D0%B4%D0%B0%D1%94%D1%82%D1%8C%D1%81%D1%8F). ## Що далі? - [Hero-розділ](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/hero-%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB) для опцій накладання й паралакса - [Лендинг](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3) для сторінки кампанії - [Посилання на розділи й повторне використання стилів за допомогою класів](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css) для деталей про HTML ID