Есть отличный плагин PageBuilder и с его помощью можно делать отличные посадочные страницы!

Но что если хочется сделать посадку широкого типа? Где каждая секция раскидывается на всю ширину экрана?

Например:

При том что сам сайт имеет контейнер и ограничивает ширину контента.

Например:

 

 

В этом случае сделать секцию на всю ширину и задать ей фон не такая уж и тривиальная задача.

Помню когда встретился с ней впервые, то не слабо так засел.

А решается довольно просто…

За основу была взята тема http://siteorigin.com/theme/vantage/ — где эта логика реализована.

Если коротко, то нужно добавить поддержку PageBuilder в тему, а точнее добавить хук вывода секций.

И далее добавить ряд стилей, которые обеспечат широкий вывод секции без лишних ползунков.

Итак по порядку…

Добавляем хук вывода секции PageBuilder

Делаем по инструкции http://siteorigin.com/page-builder/theme-integration/

Добавляем хук в тему:

function mytheme_panels_row_styles($styles) {
 $styles['wide-grey'] = __('Wide Grey', 'vantage');
 return $styles;
}
add_filter('siteorigin_panels_row_styles', 'mytheme_panels_row_styles');

Ключевое тут это название стиля wide-grey

На его основе будет добавлен класс для секции.

Затем добавляем стиль для широкой секции

Делается это примерно так:

.layout-full .panel-row-style-wide-grey {
 margin: 0 -1000px;
 padding: 25px 1000px 25px 1000px;
}

Отступы и выступы делаются так, чтобы обеспечить полную ширину на любой экран, и при этом вернуть контейнер на место. Чтобы контентная часть выводилась как следует.

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

Делаем оверфлоу для страницы

Чтобы убрать ползунок, нужно главному элементу страницы задать скрытие всего что выходит за границы.

#page {
 width: 100%;
 margin: 0;
 overflow: hidden;
 padding: 0;
}

Вот так

 

Обычно это делается в style.css или через плагины правки CSS для всего сайта.

Вуаля! Мы получаем широкоэкранные секции и можем рисовать посадочные страницы, оформлять фон для секций и резвиться 🙂

Обновление от 17.03.2015г.

Во 2-й версии PageBuilder все стало на много проще:

946