Додавання вкладеного макета.

Вивчення DXPR BuilderСтворення сторінокДодавання вмістуМакет

Ви можете розмістити рядок усередині стовпця, щоб поділити цей стовпець знову, наприклад дві піктограми поруч над заголовком. Використовуйте це, коли одному стовпцю потрібна дрібніша сітка, ніж рядку навколо нього. Приклад додає рядок із двох піктограм до середнього стовпця рядка з трьох стовпців. Для вашого першого рядка почніть зі сторінки Рядки й стовпці.

Рядок із трьох стовпців, чий середній стовпець містить вкладений рядок із піктограмою олівця й піктограмою зірки над текстом Design

Додавання вкладеного макета

  1. Додайте розділ із рядком і стовпцями.
  2. Наведіть курсор на стовпець і натисніть + на його панелі Column.
  3. У виборі елементів виберіть Row на вкладці Layout.
  4. Вкладений рядок з’явиться всередині стовпця з власними стовпцями.
  5. Додайте елементи до вкладених стовпців як завжди, наприклад Icon у кожен.
  6. Натисніть Save на панелі інструментів, щоб зберегти сторінку.

Нові елементи стають угорі свого стовпця, тож вкладений рядок опиняється над текстом стовпця.

Що ви бачите

Олівець і зірка стоять поруч угорі середнього стовпця, над заголовком Design. Зовнішні стовпці незмінні. У редакторі вкладений рядок має власні панелі Row і Column усередині панелей зовнішнього рядка.

Section
  Row (1/3 + 1/3 + 1/3)
    Column
      Text: Discovery
    Column
      Row (nested, 1/2 + 1/2)
        Column
          Icon: pencil
        Column
          Icon: star
      Text: Design
    Column
      Text: Delivery

Налаштування вкладеного макета

Вкладений рядок має ту саму піктограму сітки й налаштування, що й будь-який рядок; див. Рядки й стовпці. Його ширини це частки батьківського стовпця, а не сторінки. Стовпець половинної ширини, що містить вкладений рядок із двох половин, дає вам дві області чверть ширини.

На екранах, вужчих за 768 пікселів, вкладені стовпці складаються так само, як зовнішні. Дайте вкладеному рядку телефонний макет за допомогою Add screen size, якщо піктограми мають лишитися поруч.

Максимальна глибина вкладення

Рядки вкладаються на три рівні вглиб: рядок, рядок в одному з його стовпців і ще один рядок усередині нього. Четвертий рівень відхиляється. Той самий ліміт застосовується до кожного типу контейнера окремо, наприклад Tabs усередині Tabs. Один тип ніколи не зараховується до ліміту іншого типу.

Двох рівнів вистачає для більшості макетів. Кожен зайвий рівень додає панелі керування, повз які треба цілитися, і звужує простір для вмісту.

Поширені патерни вкладення

Патерн Як створюється
Feature grid Рядок із трьох стовпців, кожен із вкладеним рядком: піктограма поруч із текстом
Sidebar blocks Рядок 2/3 + 1/3, чий вузький стовпець містить вкладені рядки, по одному на блок
Team members Рядок із двох стовпців, кожен із вкладеним рядком 1/3 + 2/3: портрет поруч із біографією

Якщо елемент не відображається

  • У попередженні сказано, що рядки можна вкладати лише на 3 рівні вглиб. Стовпець уже міститься всередині двох вкладених рядків, тож «Element cannot be added». Додайте рядок до стовпця рівнем вище або використовуйте пресет із більшою кількістю стовпців на зовнішньому рядку.
  • Вкладений рядок опиняється над текстом замість під ним. Нові елементи стають угорі свого стовпця. Відкрийте More на панелі вкладеного рядка й виберіть Move Down.
  • Піктограми складаються на телефоні. Вкладені стовпці складаються нижче 768 пікселів, як і всі стовпці. Натисніть піктограму сітки вкладеного рядка, потім Add screen size, і виберіть 1/2 + 1/2 для Extra small (< 576px).

Що далі?