Розміщення вмісту в стовпцях.

Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції

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

Відео створює сторінку вивезення сміття для ради.

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

  • Ваша роль має дозвіл Edit with DXPR Builder.
  • Сторінка відкрита в конструкторі. Для нової перейдіть до Content > Add content > Landing Page (/node/add/landing_page) і натисніть Save.
  • Нові елементи стають угорі свого розділу. Тому кожен заголовок додається після свого рядка: він стає над ним.

Вибір макета

Макет Найкраще для Пресет
Вміст із бічною панеллю статті з пов’язаними посиланнями 2/3 + 1/3
Дві рівні половини порівняння, до й після стандарт рядка
Три рівні третини основні функції, послуги 1/3 + 1/3 + 1/3
Чотири рівні чверті статистика, малі картки 1/4 + 1/4 + 1/4 + 1/4

Новий Row спочатку має два рівні стовпці. Кожен інший макет береться з піктограми сітки рядка (Column layout).

Крок 1: вміст із бічною панеллю

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Натисніть + на розділі й виберіть Row. Натисніть його піктограму сітки (Column layout), виберіть пресет 2/3 + 1/3 і натисніть Save.
  3. Натисніть + у широкому стовпці й виберіть Text на вкладці Content. Введіть статтю, установіть перший рядок на Heading 3 і натисніть Save.
  4. Натисніть + у вузькому стовпці й виберіть Text. Введіть «Related» як Heading 4, додайте по одному рядку на пов’язану сторінку й натисніть Save.
  5. Натисніть + на розділі й виберіть Text; він стане над рядком. Введіть «Content with a sidebar» як Heading 2 і натисніть Save.

Крок 2: дві рівні половини

  1. Наведіть курсор на розділ і натисніть Add Section Below. Відкрийте More > Settings нового розділу, виберіть світло-сірий Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Row. Два рівні стовпці це стандартно, тож змінювати нічого.
  3. Додайте елемент Text у кожному стовпці: «Before» і «After» як Heading 4 із одним рядком кожен.
  4. Додайте заголовок «Two equal halves» так само, як у кроці 1.

Крок 3: три рівні третини

  1. Додайте третій розділ за допомогою Add Section Below і дайте йому клас Align text center.
  2. Додайте Row, натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Додайте елемент Text у кожному стовпці: «Paper», «Glass» і «Organic» як Heading 4 із одним рядком кожен.
  4. Додайте заголовок «Three equal thirds».

Крок 4: чотири рівні чверті

  1. Додайте четвертий розділ зі світло-сірим Background і класом Align text center.
  2. Додайте Row, натисніть його піктограму сітки (Column layout), виберіть пресет 1/4 + 1/4 + 1/4 + 1/4 і натисніть Save.
  3. Додайте елемент Text у кожному стовпці: день як Heading 4 і що забирають.
  4. Додайте заголовок «Four equal quarters».

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

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

На менших екранах

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

Далі

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

  • Narrow, wide, narrow: завдяки пресету 1/4 + 1/2 + 1/4 довгий текст лишається читабельним із порожніми полями.
  • Mirror row: увімкніть його в налаштуваннях рядка, щоб поміняти стовпці місцями на планшетах і комп’ютерах. Телефони зберігають вихідний порядок, тож перший стовпець там досі йде першим.

Що ви бачите

Чотири смуги йдуть одна за одною, кожна зі своїм заголовком угорі. Стаття та її пов’язані посилання ділять першу, дві половини розміщено на сірому, далі йдуть три центровані третини. Чотири центровані чверті на сірому завершують сторінку.

Якщо стовпці виглядають не так, як показано

  • Рядок має неправильну кількість стовпців. Пресет застосовується, лише коли ви натискаєте Save у діалоговому вікні макета. Натисніть піктограму сітки рядка (Column layout) знову, виберіть пресет і натисніть Save.
  • Заголовок опинився під своїм рядком. Заголовок додано перед рядком, а нові елементи стають угорі свого розділу. Перетягніть заголовок над рядок за ручку перетягування на його панелі керування.
  • Стовпці складаються на планшеті. Планшет вужчий за 768 пікселів, як-от малий планшет у портретній орієнтації. Додайте макет для цієї ширини за допомогою Add screen size у діалоговому вікні макета рядка.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?