--- 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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD' title: 'Змусьте свій макет працювати на телефонах | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:20:26+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Ваші сторінки самі пристосовуються до телефонів і планшетів: колонки стоять поруч на широких екранах і складаються на малих. Ця сторінка показує, як узяти керування на себе. Ви встановлюєте макет колонок для кожного розміру екрана, дзеркалите порядок на широких екранах і показуєте елементи лише на деяких пристроях. У прикладі рядок із чотирьох колонок стає два на два на планшетах. Відео ховає фото на телефонах, а потім звужує вікно, щоб показати його зникнення. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:03:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Змусьте свій макет працювати на телефонах' description: |- Ваші сторінки самі пристосовуються до телефонів і планшетів: колонки стоять поруч на широких екранах і складаються на малих. Ця сторінка показує, як узяти керування на себе. Ви встановлюєте макет колонок для кожного розміру екрана, дзеркалите порядок на широких екранах і показуєте елементи лише на деяких пристроях. У прикладі рядок із чотирьох колонок стає два на два на планшетах. Відео ховає фото на телефонах, а потім звужує вікно, щоб показати його зникнення. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:20:26+0000' dateModified: '2026-10-24T20:03:43+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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD' 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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD' description: |- Ваші сторінки самі пристосовуються до телефонів і планшетів: колонки стоять поруч на широких екранах і складаються на малих. Ця сторінка показує, як узяти керування на себе. Ви встановлюєте макет колонок для кожного розміру екрана, дзеркалите порядок на широких екранах і показуєте елементи лише на деяких пристроях. У прикладі рядок із чотирьох колонок стає два на два на планшетах. Відео ховає фото на телефонах, а потім звужує вікно, щоб показати його зникнення. 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/element-settings) /[Посібники з дизайну](/uk/hc/documentation/learn-dxpr-builder/design/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96) - [Редагування сторінки на телефоні чи планшеті](/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%80%D0%B5%D0%B4%D0%B0%D0%B3%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%80%D0%B5%D0%B4%D0%B0%D0%B3%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BB%D0%B5%D1%84%D0%BE%D0%BD%D1%96) - [Розтягніть розділ від краю до краю](/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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B8-%D0%BD%D0%B0-%D0%BF%D0%BE%D0%B2%D0%BD%D1%83-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83) Ваші сторінки самі пристосовуються до телефонів і планшетів: колонки стоять поруч на широких екранах і складаються на малих. Ця сторінка показує, як узяти керування на себе. Ви встановлюєте макет колонок для кожного розміру екрана, дзеркалите порядок на широких екранах і показуєте елементи лише на деяких пристроях. У прикладі рядок із чотирьох колонок стає два на два на планшетах. Відео ховає фото на телефонах, а потім звужує вікно, щоб показати його зникнення. ## Перш ніж почати - Рядок із чотирма рівними колонками на сторінці; див. [Рядки та колонки](/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96). ## Виберіть макет для кожного розміру екрана 1. Наведіть курсор на рядок і натисніть піктограму сітки на його панелі керування. Діалогове вікно макета відкриється з панеллю **Medium devices (≥ 768px)**. 2. Натисніть **Add screen size**. Відкриється друга панель, установлена в **Extra small (< 576px)**. 3. У спадному списку цієї панелі виберіть **Small devices (≥ 576px)**. 4. Натисніть **Custom Layout**, введіть `1/2 + 1/2 + 1/2 + 1/2` і натисніть **Save**. 5. Натисніть **Save** на панелі інструментів. Чотири половини зберігають усі чотири колонки й ставлять дві на кожен рядок. Плитка з двома рівними колонками скоротила б рядок до двох колонок на кожному розмірі екрана. ## Що ви бачите На настільному комп’ютері чотири колонки досі стоять в один рядок. Звузьте вікно браузера нижче 768 пікселів, і вони перенесуться дві на дві. Нижче 576 пікселів вони складаються, по одній на рядок, у порядку, який ви бачите в редакторі. Макет діє від свого розміру екрана вгору, доки більший розмір екрана не матиме власного макета. Кожен новий рядок починається з одним макетом для **Medium devices (≥ 768px)**, тож його колонки складаються на телефонах і малих планшетах. **Remove screen size** у панелі знову видаляє цей макет. ## Дзеркальте порядок на широких екранах Відкрийте меню **More** рядка, виберіть **Settings** і ввімкніть **Mirror row**. Від 768 пікселів і вгору колонки показуються у зворотному порядку; на менших екранах вони складаються в порядку редактора. Використовуйте це для рядків зі змінними зображенням і текстом. Поставте зображення першим у редакторі, щоб телефони показували його над текстом, і дзеркальте кожен другий рядок, щоб настільні комп’ютери показували зображення праворуч. ## Показуйте або ховайте елемент для кожного розміру екрана 1. Відкрийте меню **More** елемента й виберіть **Settings**. 2. У розділі **HTML classes** виберіть чип із групи **Responsive Visibility**, наприклад **Hidden on extra small devices, phones (<576px)**. 3. Натисніть **Save**. Кожен чип **Hidden on** ховає елемент лише на одному розмірі екрана. Кожен чип **Visible on** показує його на цьому одному розмірі й ховає скрізь інде. ## Розміри екрана | Мітка в діалоговому вікні макета | Ширина екрана | |---|---| | **Extra small (< 576px)** | Телефони у вертикальній орієнтації | | **Small devices (≥ 576px)** | Великі телефони, малі планшети | | **Medium devices (≥ 768px)** | Планшети | | **Large devices (≥ 992px)** | Ноутбуки | | **Extra large (≥ 1200px)** | Настільні комп’ютери | | **Extra extra large (≥ 1400px)** | Великі настільні комп’ютери | Елемент **Positioned layers** має власний перемикач **Responsive**, типово вимкнений. Увімкніть його, щоб масштабувати висоту полотна та його текст за шириною вікна, щоб композиція зберігала свої пропорції. ## Якщо ви не бачите зміни - **Колонки досі складаються на планшеті.** Рядок не має макета для цього розміру екрана, тож колонки складаються нижче 768 пікселів. Відкрийте піктограму сітки рядка, натисніть **Add screen size** і виберіть **Small devices (≥ 576px)**. - **Елемент зник на кожному розмірі екрана.** Він має два чипи **Visible on**, і кожен ховає його там, де інший його показує. Залиште один або використайте чипи **Hidden on**, по одному на розмір, який ховаєте. - **Mirror row нічого не робить на телефоні.** **Mirror row** працює від 768 пікселів і вгору. Щоб змінити порядок на телефонах, натомість пересуньте колонки в редакторі. ## Що далі? - [Рядки та колонки](/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96): будуйте рядки, які ви робите адаптивними тут. - [Редагуйте сторінку на телефоні або планшеті](/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%80%D0%B5%D0%B4%D0%B0%D0%B3%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%80%D0%B5%D0%B4%D0%B0%D0%B3%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BB%D0%B5%D1%84%D0%BE%D0%BD%D1%96): перевіряйте та виправляйте сторінки на малому екрані. - [Розтягніть розділ від краю до краю](/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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B8-%D0%BD%D0%B0-%D0%BF%D0%BE%D0%B2%D0%BD%D1%83-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83): вирішуйте, наскільки широким іде ваш вміст.