У багатьох макетах основний контент має залишатися в обмеженій по ширині області, а окремий банер, CTA-блок або кольорова секція повинні займати всю доступну ширину. Такий підхід часто називають повноширинним блоком усередині boxed-контейнера.
В Elementor для цього не обов’язково задавати елементу ширину 100vw. Значення viewport width може спричинити горизонтальний скрол, особливо на мобільних пристроях і в макетах із внутрішніми відступами. Надійніше розтягувати блок у межах батьківського контейнера або винести його на інший рівень структури сторінки.
Що означає boxed-контейнер і повна ширина
Boxed-контейнер має обмежену максимальну ширину. Наприклад, сторінка може містити центральну область для тексту, яка не розтягується на весь екран на великих моніторах. Це покращує читабельність і допомагає зберігати акуратну структуру макета.
Повноширинний блок у такій структурі не обов’язково має займати всю ширину viewport. У більшості випадків достатньо, щоб він займав 100% ширини батьківського контейнера. Якщо контейнер сам обмежений по ширині, дочірній елемент розтягнеться до його меж, але не вийде за них.
Важливо розрізняти два завдання: розтягнути елемент на всю ширину доступної області та вивести секцію за межі boxed-контейнера на всю ширину екрана. Для першого підходять налаштування контейнера. Для другого краще змінити структуру сторінки, а не компенсувати її за допомогою 100vw.
- Boxed-контейнер обмежує максимальну ширину контенту.
- Width: 100% використовує ширину батьківського контейнера.
- Width: 100vw орієнтується на ширину вікна браузера і може вийти за межі макета.
Як налаштувати блок у Elementor
Спочатку виберіть батьківський контейнер, у якому розміщений потрібний банер, CTA або інший елемент. Задайте йому максимальну ширину, яка відповідає вашому макету. Не потрібно штучно збільшувати ширину дочірнього блоку, якщо батьківський контейнер уже визначає правильні межі.
Далі виберіть елемент, який має розтягуватися, і встановіть для нього ширину 100%. У різних конфігураціях Elementor цей параметр може бути доступний у налаштуваннях макета елемента або контейнера. Сенс налаштування залишається однаковим: блок має зайняти всю доступну ширину, а не ширину всього viewport.
У батьківському контейнері перевірте вирівнювання дочірніх елементів по поперечній осі. Для вертикального контейнера потрібен режим, за якого елементи можуть розтягуватися по ширині, тобто Align items: Stretch. Якщо вибрано Center, дочірній блок може залишатися лише своєї власної ширини, навіть якщо для нього встановлено 100% у неоднозначній структурі.
- Виберіть батьківський контейнер і задайте йому потрібну максимальну ширину.
- Для дочірнього блоку встановіть Width: 100%.
- Перевірте Align items: Stretch у батьківському контейнері.
- Переконайтеся, що напрямок контейнера та вкладеність елементів відповідають задуму макета.
- Перегляньте результат на десктопі, планшеті й мобільному пристрої.
Чому 100vw часто створює горизонтальний скрол
Одиниця 100vw означає ширину viewport, а не ширину батьківського елемента. Якщо блок знаходиться всередині контейнера з відступами або зміщенням, його ширина може стати більшою за доступну область. Частина елемента вийде за межі сторінки, і браузер додасть горизонтальну прокрутку.
На десктопі проблему іноді спричиняє смуга вертикального скролу: ширина viewport може рахуватися разом із нею, тому елемент стає трохи ширшим за видиму область. На мобільних пристроях ситуація ускладнюється особливостями браузерних панелей, внутрішніх відступів і вкладених контейнерів.
Ще одна поширена причина — поєднання width: 100vw з margin або padding. Навіть якщо ширина елемента формально дорівнює ширині екрана, додаткові відступи можуть збільшити його фактичний розмір.
- Не використовуйте 100vw лише для того, щоб заповнити ширину батьківського контейнера.
- Перевіряйте горизонтальний padding контейнера та дочірнього елемента.
- Звертайте увагу на негативні відступи, трансформації та абсолютне позиціонування.
- Якщо скрол з’являється тільки на одному брейкпоінті, перевірте адаптивні значення ширини й відступів.
Фон контейнера замість окремого блоку
Якщо завдання полягає не в окремому повноширинному елементі, а лише у створенні кольорової або фонової області, найкраще призначити фон самому контейнеру. Це може бути суцільний колір, градієнт або фонове зображення.
У такому випадку фон автоматично займає область контейнера, а контент усередині зберігає правильну ширину. Не потрібно створювати додатковий порожній елемент, задавати йому 100vw або використовувати абсолютне позиціонування лише для декоративного фону.
Якщо фон має виходити за межі вузької колонки, розгляньте структуру з двома рівнями: зовнішній контейнер відповідає за фон і ширину секції, а внутрішній — за обмеження тексту та кнопок. Це зазвичай стабільніше для адаптивного дизайну.
- Фон секції задавайте на контейнері, який логічно є власником цієї області.
- Внутрішній контейнер використовуйте для обмеження ширини тексту.
- Не створюйте декоративний елемент із 100vw без реальної потреби.
- Для фону перевірте, як поводяться background size, position і повторення зображення на мобільному.
Коли потрібно винести секцію на рівень вище
Іноді банер або CTA справді має бути на всю ширину сторінки, а не на всю ширину внутрішньої колонки. У такому разі правильніше винести секцію з boxed-контейнера на один рівень вище в Navigator Elementor.
Зовнішній контейнер можна зробити full width і призначити йому фон, а всередині розмістити контейнер із максимальною шириною для контенту. Так фон або декоративна область розтягується по екрану, тоді як текст, зображення та кнопки залишаються вирівняними з іншими секціями сторінки.
Цей підхід особливо корисний для hero-секцій, широких CTA, смуг із фоновим зображенням і кольорових блоків між вузькими текстовими секціями. Він не потребує складних CSS-компенсацій і краще масштабується на різних екранах.
- Full width зовнішнього контейнера використовуйте для фону та загальної області секції.
- Внутрішній boxed-контейнер використовуйте для вирівнювання контенту.
- Не змішуйте в одному елементі функції повноширинного фону та обмеженого текстового блоку.
- Перевірте відступи між зовнішнім і внутрішнім контейнерами.
Перевірка та типові помилки
Після налаштування відкрийте сторінку в режимі адаптивного перегляду Elementor і перевірте кілька ширин екрана. Особливо важливо подивитися на мобільний режим: саме там найчастіше проявляються зайва ширина, обрізання контенту або горизонтальний скрол.
Якщо блок не розтягується, спочатку перевірте його батьківський контейнер. Center у параметрі Align items, фіксована ширина, максимальна ширина дочірнього елемента або внутрішній контейнер меншої ширини можуть обмежувати результат.
Якщо з’явився скрол, тимчасово приберіть 100vw, негативні margin і горизонтальні padding, щоб знайти джерело переповнення. Не варто приховувати проблему правилом overflow-x: hidden на рівні всієї сторінки: воно може замаскувати помилку й обрізати тіні, меню або інші елементи.
- Перевірте, чи немає елементів, ширших за батьківський контейнер.
- Порівняйте padding і margin у всіх вкладених контейнерах.
- Переконайтеся, що зображення та кнопки не мають фіксованої ширини, яка не поміщається на мобільному.
- Перевірте сторінку не тільки в редакторі, а й у реальному браузері.
- Після змін очистіть кеш сторінки та стилів, якщо сайт використовує кешування.
Поширені запитання
Чи потрібно використовувати width: 100vw для повноширинного блоку в Elementor?
У більшості випадків ні. Якщо блок має заповнити ширину батьківського контейнера, використовуйте Width: 100% і перевірте Align items: Stretch. 100vw потрібне лише для окремих сценаріїв, коли елемент справді має відповідати ширині viewport.
Чому Width: 100% не розтягує елемент на всю ширину?
Причиною може бути вирівнювання Center у батьківському контейнері, обмежена максимальна ширина, внутрішній контейнер меншого розміру або горизонтальні відступи. Перевірте всі рівні вкладеності, а не лише сам елемент.
Як зробити фон на всю ширину, а текст залишити в boxed-контейнері?
Створіть зовнішній full-width контейнер із фоном, а всередині розмістіть дочірній контейнер із максимальною шириною. Текст і кнопки вирівнюйте саме у внутрішньому контейнері.
Як прибрати горизонтальний скрол після додавання повноширинного блоку?
Перевірте та приберіть 100vw, зайві горизонтальні padding і margin, негативні відступи, фіксовані ширини та абсолютне позиціонування. Спочатку знайдіть елемент, який виходить за межі сторінки, а не приховуйте переповнення глобальним overflow-x: hidden.
Висновок
Для повноширинного блоку всередині boxed-контейнера зазвичай достатньо ширини 100%, правильного вирівнювання Stretch і коректних внутрішніх відступів. Такий спосіб використовує реальну ширину батьківського контейнера та рідше створює проблеми на мобільних.
Якщо ж секція має займати всю ширину екрана разом із фоном, винесіть її на рівень вище та розділіть зовнішній full-width контейнер і внутрішню boxed-область для контенту. Це робить структуру Elementor зрозумілішою, а адаптивний макет — стабільнішим.