Розтягніть розділ від краю до краю.

Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну

Ви можете дозволити вмісту розділу йти від краю до краю або тримати його в контейнері по центру, поки фон заповнює вікно. Вирішує один перемикач на розділі: Full width. У прикладі будується сірий розділ із трьома колонками, а потім вмикається Full width, щоб колонки розтягнулися. Про заливки кольором і фото див. Фони.

Відео будує сірий розділ із 3 колонками, а потім дозволяє його вмісту йти від краю до краю.

Побудова розділу в контейнері

  1. Натисніть Add Elements у порожній області вмісту й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ, відкрийте More і виберіть Settings.
  3. Відкрийте панель Style і виберіть світло-сірий Background.
  4. Натисніть Save. Сірий уже простягається на все вікно.
  5. Натисніть + на розділі й виберіть Row.
  6. Натисніть піктограму сітки на рядку, виберіть плитку з трьома рівними колонками й натисніть Save.
  7. У кожній колонці натисніть +, виберіть Text на вкладці Content, введіть Heading 4 і один рядок, а потім натисніть Save.

Три колонки тепер стоять у відцентрованому контейнері на сірій смузі.

Увімкнення Full width

  1. Відкрийте More на розділі й виберіть Settings.
  2. На панелі General увімкніть Full width.
  3. Натисніть Save.
  4. Натисніть Save на панелі інструментів DXPR Builder.
  5. Відкрийте меню перегляду, піктограму ока на панелі інструментів, і виберіть Preview.

Що ви бачите

Сіра смуга виглядає так само, як раніше. Змінився лише контейнер вмісту: перша колонка тепер починається від лівого краю розділу, а остання закінчується біля правого краю.

Кожен розділ має дві частини: зовнішній елемент, що несе фон, і внутрішній контейнер, що тримає рядки. Full width змінює лише внутрішній контейнер. Вимкнений, він відцентрований з максимальною шириною; ввімкнений, він розтягується до країв розділу.

Налаштування

Панель General розділу містить три перемикачі макета, усі типово вимкнені:

Налаштування Що робить
Full width Рядки заповнюють розділ від краю до краю замість відцентрованого контейнера
100% height Розділ заввишки щонайменше як вікно браузера
Vertical centering Рядки стоять посередині розділу по вертикалі

Рядки не мають власного налаштування ширини; вирішує розділ.

Два шаблони

  • Фон від краю до краю, текст у контейнері: звичайна шапка-герой. Залиште Full width вимкненим і встановіть фон на панелі Style або Background effects.
  • Вміст від краю до краю: смуга карток або зображень. Увімкніть Full width і надайте колонкам трохи Padding, якщо текст стоїть надто близько до краю вікна.

Якщо ви не бачите зміни

  • Нічого не змінюється, коли ви вмикаєте Full width. На вузькому екрані, наприклад телефоні, версія в контейнері вже заповнює ширину. Розширте вікно браузера й подивіться знову.
  • Фон не доходить до країв вікна. Ваша тема розміщує вміст сторінки у фіксованій області, і розділ може заповнити лише цю область. Виберіть у своїй темі макет сторінки або область на повну ширину.
  • Текст торкається краю вікна. Саме це й робить Full width. Додайте Padding на панелі Style колонок або залиште Full width вимкненим.

Що далі?