Додавання розділу.

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

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

Сторінка клініки, як її бачать відвідувачі: темно-синій розділ від краю до краю з центрованим заголовком Book your health check, рядком про прийом цього тижня й білою кнопкою Book online, над світло-сірим розділом із трьома стовпцями, Same-week visits, Experienced GPs і Results online

Додавання розділу

Приклад створює темно-синій hero-розділ для клініки. Під ним іде світло-сірий розділ із трьома стовпцями.

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout. Під наявним розділом натисніть Add Section Below, круглий плюс під ним.
  2. Наведіть курсор на розділ, відкрийте More і виберіть Settings.
  3. Налаштуйте весь розділ: тут Align text center у розділі HTML classes, темно-синій Background і білий Font color. Натисніть Save.
  4. Натисніть + на розділі, щоб додати вміст просто в нього, або додайте Row, щоб поділити його на стовпці.
  5. Натисніть Save на панелі інструментів, щоб зберегти сторінку.

Background і Font color містяться на панелі Style діалогового вікна. Нові елементи стають угорі розділу, тож додавайте найнижчий першим: у відео кнопка додається перед заголовком.

Що ви бачите

Темно-синя смуга заповнює вікно від краю до краю. Її заголовок і кнопка лишаються в центрованому блоці, внутрішньому контейнері розділу. Сірий розділ починається одразу під ним, із трьома стовпцями функцій у тому самому центрованому блоці.

Кожен новий розділ уже має клас Vertical padding size 5 (py-5) у розділі HTML classes. Цей клас дає йому простір над і під його вмістом.

Налаштування розділу

Діалогове вікно налаштувань має п’ять панелей: General, Background effects, Animation, Style і Hover style. Лише розділи мають Background effects.

Налаштування Панель Що робить Стандартно
Full width General Рядки йдуть від краю до краю замість центрованого контейнера Off
100% height General Розділ заввишки принаймні як вікно браузера Off
Vertical centering General Вміст перебуває посередині по вертикалі розділу, вищого за нього Off
HTML ID General Ім’я якоря, щоб посилання на #name стрибало до цього розділу Empty
HTML classes General Службові класи, як-от Align text center або розмір відступів Vertical padding size 5 (py-5)
Background effect Background effects Simple image, Fixed image, Parallax image, Gradient або YouTube video Simple image
Background, Font color Style Колір за розділом і колір його тексту None: тема вирішує

Тло завжди охоплює весь розділ незалежно від Full width. Ефекти зображень рухають Background image, яке ви вибираєте на панелі Style; сторінка Тла показує кожен ефект.

Для більшого чи меншого простору замініть Vertical padding size 5 (py-5) на менший розмір або No vertical padding (py-0). Для точних пікселів використовуйте блокову модель на панелі Style, як пояснює сторінка Відступи.

Рецепти розділів

Розділ Налаштування, що його створюють
Hero 100% height і Vertical centering увімкнено, ефект Parallax image, заголовок і кнопка
Features Світлий Background, заголовок, потім рядок із трьох стовпців
Call to action Насичений Background, Align text center, один короткий рядок і кнопка
Testimonials Світлий Background і рядок із трьох стовпців, кожен із Block quote

Проєктування hero-розділу створює перший крок за кроком.

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

  • Порожня сторінка не має кнопки Add Elements. Помічник створення сторінок вимкнено, тож порожня сторінка пропонує лише Choose a template. Натисніть порожню область, щоб відкрити вибір елементів, або увімкніть Enable page creation assistant за адресою /admin/dxpr_studio/dxpr_builder/ai_settings.
  • Немає кнопки Add Section Below. Її мають лише розділи, розміщені просто на сторінці, а не розділ усередині стовпця чи вкладки. Натомість натисніть + на стовпці.
  • Вертикальне центрування нічого не змінює. Розділ заввишки лише як його вміст, тож немає простору для центрування. Увімкніть також 100% height.
  • Full width ніби нічого не робить. Тло вже охоплює весь розділ; Full width лише виносить рядки до його країв. З коротким текстом в одному стовпці зміну важко помітити.
  • З’явився розділ, якого ви не додавали. Ви вибрали Row або елемент вмісту на порожній сторінці, а кожен елемент потребує розділу навколо себе. DXPR Builder додав його за вас; відкрийте його налаштування, як будь-які інші.

Що далі?