Как в Гутенберге сделать блок во всю ширину экрана

Простая и вполне тривиальная задача, которая запросто может сломать мозг неподготовленного пользователя, особенно привыкшего к разным элементорам и тильдам.

Обычно пользователь начинает гуглить вопрос и не понимает, почему во всех примерах на скринах есть кнопка «Во всю ширину», а у него нет.

Как в Гутенберге сделать блок во всю ширину экрана

Но переживать не стоит, все очень легко и решается: нужно просто включить эту фичу в теме.

Для этого открываем файл functions.php активной темы и добавляем такую строчку:

add_theme_support( 'align-wide' );

После этого заветная кнопочка появится, но чтобы блоки правильно выводились, нужно добавить еще CSS стили:

@media screen and (min-width: 960px) {
  .alignwide,
  .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

После этого все будет работать как положено: блоки будут выводиться во всю ширину экрана.

Если этот способ не сработает, значит в вашей теме эта возможность заблокирована.
Некоторые темы не поддерживают работу с блочным редактором и может потребоваться более глубокая доработка.

Иван Данилин
Автор Иван Данилин

Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.

Подробнее
Добавить комментарий