Менеджер стилей Grids. Модульная сетка поста

Grids. Модульная сетка поста

Зачем нужна сетка поста

Сетка поста — это система организации контента. Она используется при верстке и позволяет упорядочивать простую и сложную информацию, расставлять акценты и добиваться при этом единого стиля и узнаваемости издания. 

В Setka Editor используются колоночные сетки — это базовые сетки для графического дизайна. К ним часто добавляются горизонтальные ряды, рассчитываемые, исходя из величины кегля. Их конфигурация зависит от числа колонок, отступов от края макета (margins) и отступов колонок друг от друга (gutters).

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

 

______________2017-08-18___12.31.18.png

 

Как добавить собственную сетку поста

В разделе Grid Systems настраиваются базовые сетки для выбранной темы. Далее, одна из них используется в редакторе. По умолчанию в Setka Editor подключено несколько сеток, состоящих из 6, 8, 10 и 12 колонок. Кроме того, вы можете добавить неограниченное количество собственных сеток:

  1. Перейдите в раздел Grids Systems на сайте editor.setka.io и нажмите Add grid system.
  2. Задайте количество колонок (base columns), ширину пробелов между ними (gutter) и боковые отступы (Advanced – Horizontal margins): 

 

Чтобы отключить сетку, нажмите стрелочку слева от шестеренки и выберите Disable. Сетка пропадет из раздела Grids. Посты, использующие эту сетку, не потеряют свое оформление.

Для удаления сетки, выберите Delete this grid system.

 

disable_grid_system.png

 

Важно: Если отключить все сетки, последнюю удалить не получится, так как для любого поста нужна сетка.

 

Как отредактировать систему сеток

Все настройки системы сеток, кроме количества колонок, можно изменить:

Screen_Shot_2019-12-25_at_12.43.37.png

Количество колонок не меняется — иначе посты, оформленные в этой системе сеток, потеряют исходную верстку.

Внесенные изменения автоматически применятся ко всем постам, оформленным в этой системе сеток.

 

Auto и Limited ширина

Добавляя систему сеток, вы можете задать для нее расширенные настройки (пункт Advanced), определив тип сетки — Auto или Limited.

В Auto контент заполняет всю ширину контейнера поста. Ширина внешних отступов (margins) фиксирована, границы контейнера не меняются при изменении размеров окна.

Limited позволяет задать точную максимальную ширину границ контента поста в пикселях. Внешние отступы (margins) будут заполнять все доступное пространство между шириной контейнера поста и шириной контента, центрируя его. Этот стиль сетки подходит в случае, если вы хотите установить точную ширину поста и обеспечить выступ изображения за его границы.