Сборка страницы

Сразу после добавления раздел не содержит блоков. Чтобы добавить первый блок, откройте страницу в режиме редактирования и нажмите на плюс в центральной части страницы.

Выберите нужный тип блока. У некоторых блоков есть различные шаблоны отображения, например, у изображений, корпоративных контактов, меню. После добавления наведите мышку нас место, куда вы добавили блок. Вы увидите панель управления блоком или иконку, при нажатии на которую раскрывается панель, а для некоторых компонентов предзаполненный объект-заглушка. Отредактируйте его (иконка “карандаш)  или нажмите кнопку добавления в панели, если объекта нет.

Добавив в блок нужную информацию, при необходимости настройте внешний вид блока (компоновка, отступы, рамки, фон и пр.).

Чтобы добавить следующий блок, нажмите плюс ниже имеющегося. Есть и другой способ, востребованный в случаях, когда блоки имеют небольшой размер и попасть в нужный “плюс” сложно: в панели блока выберите “Добавить блок… - до или после этого блока”. 

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

Составные блоки

Иногда требуется объединить несколько блоков, чтобы вывести их не последовательно, а справа/слева друг от друга, или объединить общим элементом оформления (фоновая картинка, рамка). Для этой задачи существуют контейнеры. Разберем по пунктам следующую задачу: вывести иллюстрацию на половину ширины контентной области, а справа от нее текст с заголовком, и обвести весь этот контейнер рамкой.

Для начала добавьте в нужное место контейнер.

Добавьте в контейнер первый блок (изображение), нажав на иконку плюса внутри контейнера, выбрав тип блока “Изображения” и заменив изображение по умолчанию на нужное.

Изображение выведено на всю ширину контейнера. Укажем контейнеру компоновку: по две плитки в строке с отступом 20 пикселей.

Теперь добавим после изображения новый блок - заголовок. Обратите внимание, что при наведении на картинку вы увидите несколько кнопок-иконок плюса: со всех четырех сторон изображения, а также плюсы от контейнера. 

Поскольку наше изображение это первая плитка в контейнере, где в строке выводится по две плитки, то “после изображения” означает “справа”. Если вы опасаетесь запутаться в этих кнопках, можно нажать пункт “Добавить блок… - после этого блока” в настройках блока изображения.

После добавления заголовка и его редактирования добавим после него текст. Но заголовок находится внутри контейнера с компоновкой “по две плитки в строке”, и следующий после заголовка блок встанет ниже изображения. Чтобы текст встал ниже заголовка, надо обернуть эти два блока в еще один контейнер. Нажмите на плюс ниже заголовка, вы увидите окно-предупреждение о создании контейнера и после подтверждения после подтверждения вы сможете добавить текст.

Теперь в этом составном блоке (контейнере) содержатся два блока: изображение и еще один контейнер (внутренний), а внутри этого контейнера еще два блока: заголовок и текст.

Теперь настроим отступ между заголовком и текстом. Например, это можно сделать, добавив заголовку отступ снизу.

И нам осталось адаптировать этот блок для узких экранов, ведь две колонки на экране телефона скорее всего будут смотреться плохо. Обычно это делается перестроением компоновки из двух колонок в одну при разрешении экрана или ширине блока ниже определенного значения. Самый простой способ подобрать это значение - вызвать панель разработчика браузера (Ctrl-Shift-I на Windows) и постепенно сужать ширину рабочей области, чтобы определить значение, при котором надо перестроить внешний контейнер.

Когда ширина определена, закроем панель разработчиков (еще раз Ctrl-Shift-I или крестик в правой верхней части панели) и откроем настройки оформления внешнего контейнера. Добавим в левой части таблицы брейкпоинт (точку перехода), соответствующий нашему значению (в данном случае немного больше, с запасом), укажем, что она будет применяться при достижении этой ширины не блоком, а страницей (т.к. мерили мы ширину страницы), нажмем на пересечении колонки нижнего диапазона ширины и компоновки и поменяем компоновку для этого значения ширины: укажем одну колонку вместо двух.

Теперь осталось обвести внешний контейнер рамкой.

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

И теперь осталось добавить отступ снизу у контейнера, чтобы следующий блок не прилегал к нему. Обратите внимание, что для установки только одного отступа вам надо сначала нажать на иконку "замок": если замок будет закрытым, во всех четырех полях ввода для отступа значение будет одинаковым. Это относится к обоим видам отступа и к рамке.