В структурированных макетах можно упорядочивать контент, располагая его в столбцах. Это делает сайт визуально привлекательнее и проще в обращении. Из этого руководства вы узнаете, как настраивать параметры оформления столбцов, например: цвета, выравнивание и внешний вид на мобильных устройствах.
Чтобы добавить или изменить цвет фона столбцов, выполните следующие действия.
- Выберите Представление в виде списка в верхнем левом углу редактора. Значок выглядит как три расположенные друг над другом горизонтальные линии.
- Найдите блок «Колонки» и щёлкните по нему.
- В настройках блока «Колонки» в правой части экрана перейдите на вкладку Стили (значок выглядит как чёрно-белый кружок).
- В настройках цвета нажмите «Фон» и выберите цвет фона.
- Нажмите кнопку «Сохранить».
Если вы хотите, чтобы столбцы были разных цветов, следуйте той же процедуре, но вместо общего блока «Колонки» в представлении в виде списка выбирайте отдельный блок «Колонка».
При вставке контента в новый столбец выравнивание по умолчанию делается по верхнему краю контейнера столбца. Вы можете изменить параметры выравнивания контента внутри столбцов, выполнив следующие действия.
- Выберите Представление в виде списка в верхнем левом углу редактора. Значок выглядит как три расположенные друг над другом горизонтальные линии.
- Найдите блок «Колонки» и щёлкните по нему.
- На панели инструментов над или под выбранными столбцами выберите опцию выравнивания по вертикали.
- Выберите «Выровнять по верхнему краю», «Выровнять по центру» или «Выровнять по нижнему краю», чтобы контент внутри столбцов располагался в верхней, средней или нижней части контейнера столбца.
Если необходимо задать различные способы выравнивания для каждого столбца, выполняйте те же действия, но в представлении в виде списка выбирайте каждый раз отдельный столбец, а не все столбцы сразу. Таким образом можно создать распределённую компоновку, например:
Выбирая макет со столбцами, важно учитывать, как они будут отображаться на мобильных устройствах посетителей вашего сайта. Экран смартфона невелик, поэтому, располагаясь в ряд, столбцы могут затруднять чтение контента.
Вы можете размещать столбцы на экранах мобильных устройств таким образом, чтобы они располагались друг под другом, а не на одной строке.
- Выберите блок «Колонки» в представлении в виде списка или на панели инструментов блока.
- В настройках блока «Колонки» в правой части экрана включите опцию «Друг под другом на мобильных устройствах».
Этот переключатель определяет, будут столбцы отображаться горизонтально или размещаться друг над другом по вертикали при просмотре страницы или записи на мобильном устройстве. Ниже можно увидеть, как выглядят столбцы друг под другом на экранах ПК и ноутбуков в сравнении с экраном мобильного устройства.
Поддержка 