Блок

Создание/удаление блока

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

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

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

Настройки блока

Для перехода к настройкам блока нажмите на нужном контейнере кнопку:

В появившемся окне будет ряд настроек

  1. Выбор размера, с которого начнут действовать параметры ниже. На каждом сайте может быть свои параметры размеров. По умочанию это:
    s - мобильные телефоны
    m - планшеты в портретном режиме
    h - настольные компьютеры и планшеты в ландшафтном режиме
  2. Блоки с параметрами:
    Margin - внешние отступы
    Padding - внутренние отступы
    Border - настройки рамки (цвет, ширина, стиль)
    Background - фон еваблока
    Размеры - максимальные, минимальные, фактические размеры еваблока
    Свой CSS - свои стили, если остальных параметров не хватает - вы можете добавить свои стили

В верхней части так же присутствуют общие параметры у блока:

  1. Класс - CSS class, будет дат div элементу блока
  2. Отключить инициализацию сетки - отключает все наборы классов для работы сетки. Параметр используется в случае, если блок должен отображаться совсем по особенному (например, если у вас все блоки имеют максимальную ширину в 1200px, а вам нужно растянуть блок с одной колонкой на весь экран)
  3. Положение отступов, имеет 3 параметра:
    • По умолчанию - использует настройку для всего сайта
    • Между колонками - используется отступ между колонками, по умолчанию он равен 30px
    • Внутри колонок - колонки будут соединены встык, а отступ будет внутри колонок
    • Без отступов - колонки будут соединены встык, а отступов не будет вовсе

Посмотрим, что мы с этим можем сделать

Зададим имеющемуся блоку фон, и поставим нужные отступы

Редактирование колонок

Для перевода блока в режим редактирования колонок, нажмите на соответвтующую иконку в верхней части блока.

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

Редактирование отображения для разных устройств

По умолчанию редактор контента использует 3 режима отображения:

  1. h - Для больгших экранов (он редактируется по умолчанию)
  2. m - для планшетов в портретном режиме
  3. s - для смартфонов

Для перехода в режим редактирования разных отображений, нажмите на кнопку:

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

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