---
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%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%B1%D0%BB%D0%BE%D0%B3%D1%83'
title: 'Проєктування макета списку блогу | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:26:00+00:00'
updated: '2026-10-24T20:15:47+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Тут ви створюєте сторінку, що перелічує ваші дописи в блозі: рекомендований допис угорі, список із вигляду Drupal із бічною панеллю й смугу розсилки. Нові дописи з’являються на ній без редагування сторінки. Щоб детально розповісти одну історію клієнта, натомість виконайте посібник Створення кейса.
  Відео створює блог звітного продукту.
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: |-
        Тут ви створюєте сторінку, що перелічує ваші дописи в блозі: рекомендований допис угорі, список із вигляду Drupal із бічною панеллю й смугу розсилки. Нові дописи з’являються на ній без редагування сторінки. Щоб детально розповісти одну історію клієнта, натомість виконайте посібник Створення кейса.
        Відео створює блог звітного продукту.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:26:00+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%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%B1%D0%BB%D0%BE%D0%B3%D1%83'
      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%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%B1%D0%BB%D0%BE%D0%B3%D1%83'
      description: |-
        Тут ви створюєте сторінку, що перелічує ваші дописи в блозі: рекомендований допис угорі, список із вигляду Drupal із бічною панеллю й смугу розсилки. Нові дописи з’являються на ній без редагування сторінки. Щоб детально розповісти одну історію клієнта, натомість виконайте посібник Створення кейса.
        Відео створює блог звітного продукту.
      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

- [Додавання форм на сторінки](/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)
- [Показ вигляду Drupal на сторінці](/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%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/drupal-%D0%B2%D0%B8%D0%B3%D0%BB%D1%8F%D0%B4%D0%B8)
- [Додавання блока Drupal на сторінку](/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%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8-drupal)
- [Створення сторінки «Про нас»](/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/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BF%D1%80%D0%BE-%D0%BD%D0%B0%D1%81)

Тут ви створюєте сторінку, що перелічує ваші дописи в блозі: рекомендований допис угорі, список із вигляду Drupal із бічною панеллю й смугу розсилки. Нові дописи з’являються на ній без редагування сторінки. Щоб детально розповісти одну історію клієнта, натомість виконайте посібник [Створення кейса](/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%BA%D0%B5%D0%B9%D1%81).

Відео створює блог звітного продукту.

  ## Перед початком

- Ваша роль має дозвіл **Edit with DXPR Builder**.
- Ваш сайт має вигляд, що перелічує дописи блогу. DXPR CMS постачає вигляд **Blog** зі списком **Blog** і відображенням **Featured posts**.
- Сторінка відкрита в конструкторі. Для нової перейдіть до **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) і натисніть **Save**.
- Нові елементи стають угорі свого стовпця. Додавайте елементи стовпця у зворотному порядку або потім перетягніть їх на місце.

## Крок 1: додавання рекомендованого допису

1. Натисніть **Add Elements** на порожній сторінці й виберіть **Section** на вкладці **Layout**.
2. Натисніть **+** на розділі й виберіть **Row**; спочатку він має два рівні стовпці. Натисніть його піктограму сітки (**Column layout**), виберіть пресет **2/3 + 1/3** і натисніть **Save**.
3. Натисніть **+** у широкому стовпці й виберіть **Image** на вкладці **Content**. Натисніть **Select Image**, позначте фото й натисніть **Insert selected**. Введіть **Alt attribute** на панелі **SEO** і натисніть **Save**.
4. Натисніть **+** у вузькому стовпці й виберіть **Button**. Установіть **Title** на «Read more», **Link** на допис і лишіть **Type** на **Primary**, потім натисніть **Save**.
5. Натисніть **+** у вузькому стовпці знову й виберіть **Text**; він стане над кнопкою. Введіть заголовок допису як **Heading 2**, додайте уривок під ним і натисніть **Save**.

## Крок 2: додавання списку й бічної панелі

1. Наведіть курсор на розділ і натисніть **Add Section Below**. Додайте до нього **Row** із пресетом **2/3 + 1/3**.
2. Натисніть **+** у широкому стовпці й відкрийте вкладку **Drupal Views**. Виберіть **View: Blog (Blog)** і натисніть **Save**; він виведе ваші дописи.
3. Натисніть **+** у вузькому стовпці й відкрийте вкладку **Drupal Views**. Виберіть **View: Blog (Featured posts)** і натисніть **Save**.
4. Натисніть **+** у вузькому стовпці знову й відкрийте вкладку **Drupal Blocks**. Виберіть **Block: Forms: Search form** і натисніть **Save**; він стане над рекомендованими дописами.

## Крок 3: додавання смуги розсилки

1. Додайте третій розділ за допомогою **Add Section Below**. Відкрийте його **More** > **Settings**, виберіть темно-синій **Background** на панелі **Style** і натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Button**. Установіть **Title** на «Subscribe to the newsletter», **Link** на `/newsletter`, а **Type** на **Light**, потім натисніть **Save**.
3. Натисніть **+** знову й виберіть **Text**; він стане над кнопкою. Введіть «Stay updated» як **Heading 2** і один рядок про розсилку під ним. Установіть **Font color** на білий на панелі **Style** і натисніть **Save**.

## Крок 4: збереження й попередній перегляд

1. Натисніть **Save** на панелі інструментів конструктора.
2. Відкрийте меню перегляду (**піктограма ока**) і виберіть **Preview**.

## Далі

Не показано у відео:

- **Signup 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)
- **Categories**: додайте до бічної панелі вигляд категорій вашого блогу
- **Sidebar tint**: відкрийте налаштування вузького стовпця й задайте йому світло-сірий **Background** і трохи відступів на панелі **Style**.

## Що ви бачите

Рекомендований допис відкриває сторінку: широке фото ліворуч, його заголовок, уривок і кнопка **Read more** праворуч. Під ним ваші дописи заповнюють широкий стовпець, а в бічній панелі містяться форма пошуку й рекомендовані дописи. Темно-синя смуга завершує сторінку заголовком **Stay updated** і кнопкою **Subscribe to the newsletter**.

## Якщо дописи не відображаються

- **Вигляду Blog немає на вкладці Drupal Views.** Вигляд вимкнено або ваш профіль користувача DXPR Builder його ховає. Увімкніть його в розділі **Structure** > **Views** (`/admin/structure/views`) або попросіть адміністратора позначити його в розділі **Views** вашого профілю користувача.
- **Стовпець списку лишається порожнім.** Вигляд не має опублікованих дописів для показу. Опублікуйте допис у розділі **Content** > **Add content** > **Blog post**, потім перезавантажте сторінку.
- **Форми пошуку немає на вкладці Drupal Blocks.** Модуль ядра **Search** надає цей блок. Увімкніть його в розділі **Extend** (`/admin/modules`).
- **Ваші зміни зникли після перезавантаження.** Ви покинули сторінку, не натиснувши **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).

## Що далі?

- [Додавання форм на сторінки](/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) для форм реєстрації
- [Інтеграція виглядів Drupal](/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%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/drupal-%D0%B2%D0%B8%D0%B3%D0%BB%D1%8F%D0%B4%D0%B8) для налаштування виглядів
- [Інтеграція блоків Drupal](/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%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8-drupal) для блоків бічної панелі
- [Сторінка «Про нас»](/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/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BF%D1%80%D0%BE-%D0%BD%D0%B0%D1%81) для наступного посібника