Page Builder Sandwich не похож на обычный конструктор страниц: он понятен и прост в использовании.

Вы можете посмотреть видео ниже для краткого обзора.

Где находится редактор?

Сначала создайте новую страницу, запись или CPT. Затем откройте новую запись или любую существующую во фронтенде. PBS работает полностью во фронтенде, вам не придется разбираться в бэкенде.

В верхней части страницы (на панели администратора) должна быть кнопка «Page Builder Sandwich», нажмите на нее, чтобы начать редактирование. Сверху появится панель форматирования текста, а сбоку — панель добавления элементов. Область содержимого вашей темы теперь стала вашим редактором!

С помощью PBS можно редактировать только отдельные страницы. Вы не можете редактировать список записей блога или страницу 404, так как они создаются вашей темой. Записи, страницы и произвольные типы записей подходят.

Редактирование содержимого

А теперь самое интересное… оказавшись во фронтенде внутри редактора, нажмите на любой текст в вашем содержимом или кликните внутри области контента и начните вводить текст! В отличие от других конструкторов страниц, PBS позволяет редактировать контент напрямую, без необходимости использовать всплывающие диалоговые окна.

Форматирование контента / Придание красивого вида

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

Добавление элементов

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

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

Стилизация и изменение элементов

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

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

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

Инспектор свойств

Инспектор свойств дает больше контроля над внешним видом элементов. Вы можете добавлять множество вещей, таких как тени, анимации, менять цвета карт, радиус скругления углов и многое другое.

Вы также можете получить доступ к свойствам родительских элементов. Например, если вы поместили изображение внутри колонки и открыли инспектор свойств, то сможете получить доступ к свойствам изображения, колонки, в которой оно находится, и строки, содержащей эту колонку.

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

Использование шорткодов

Page Builder Sandwich отображает актуальные шорткоды прямо во фронтенде, и вы также можете легко их редактировать! 

Если вы помните свои шорткоды наизусть, вы можете вставлять их, вводя прямо в контент. Но если вы не запомнили их все (кто так делает?), в инспекторе перечислены все шорткоды, доступные на вашем сайте. Перетащите кнопку шорткода из инспектора в область контента, найдите нужный и нажмите на него, чтобы вставить.

Шорткоды отображаются в виде реального содержимого во фронтенде. Чтобы отредактировать их, выберите шорткод и просмотрите его атрибуты в инспекторе. Или, для большего контроля, дважды щелкните по шорткоду, чтобы отредактировать его в исходном виде. После внесения правок шорткод обновится с учетом изменений.

Изменение порядка контента

С помощью PBS вы можете щелкнуть и перетащить что угодно и куда угодно. При перетаскивании наведите элемент на другой элемент страницы: вы можете переместить его выше или ниже любого другого контента.

Сохранение вашей работы

Когда вы будете довольны дизайном, просто нажмите кнопку сохранения в левом верхнем углу страницы. Вот и все!