Содержание
Сетки (Grids) и cетка поста (Post Layout Grid)
Как выровнять текст в сетке по вертикали?
Как работает вертикальное выравнивание?
Как добавить изображение внутрь сетки?
Меняется ли размер изображения, когда я вставляю его в сетку?
Как сделать картинку фоном сетки?
Как регулировать нижние отступы под сетками?
Как вложить сетку в другую сетку?
Как управлять сетками в мобильной версии?
Сетки (Grids) и cетка поста (Post Layout Grid)
В Setka Post Editor есть два типа сеток.
Первый тип — это общая сетка поста (Post Layout Grid). Это модульная система всего поста, организующая контент, ее можно создать в Управлении дизайн системой.
Второй тип — сетки (Grids), которые встраиваются в пост и организуют пространство в пределах одного или нескольких абзацев - по колонкам. В одном посте может быть много таких сеток.
Количество колонок в сетке и их размер определяются сеткой поста (Post grid), которая выбрана. Например, если Post grid — 6 колонок, то вы можете вставить в пост сетку (Grid) из 6х колонок, например 1+5 колонки, 4+2 колонки, 2+2+2 колонки и т.д.
Как создать сетку?
Выберите абзац или несколько (зажав Alt и кликнув поочередно на абзацы), которые вы хотите организовать в сетку, затем нажмите кнопку add grid на панели инструментов справа. Можно также сделать это из контекстного меню (правая кнопка мыши) или используйте шорткат Shift+Click. Шорткат Cmd (Ctrl для PC)+Click позволяет вставить пустую сетку в новом параграфе.
Как выровнять текст в сетке по вертикали?
Откройте вкладку Grid, а затем меню Vertical alignment и выберите нужный тип выравнивания на верхней панели инструментов. Вы можете выровнять текст по центру, по левому краю, по верхнему краю или по нижнему краю.
Как работает вертикальное выравнивание?
Чтобы понять, как работает вертикальное выравнивание, создайте две колонки с разной высотой (одна из них должна быть немного меньше). Выделите маленькую колонку, попытайтесь изменить настройки вертикального выравнивания на панели инструментов, и вы увидите разницу.
Как добавить колонку?
Кликните на значок "+" на верхнем краю сетки.
Как убрать колонку?
Кликните на значок "–" на верхнем краю сетки.
Как добавить изображение внутрь сетки?
Нажмите на кнопку add image, выберите и загрузите файл, поставьте курсор в нужную ячейку, а затем нажмите на изображение. Оно появится в выделенной ячейке.
Внутри колонки тоже можно настроить отступы, Overhangs, ссылки — иными словами, к изображению в колонке можно применить все те же стили, что и к обычной картинке.
Как добавить видео в сетку?
Поставьте курсор в ту колонку, в которой вы хотите расположить эмбед, а затем нажмите на значок </> справа. В появившемся окне вы можете ввести HTML-код.
Чтобы посмотреть, как видео будет выглядеть в сетке, откройте вкладку Embed и нажмите на кнопку render. Если вы нажмете unrender, оно снова будет отображаться в виде кода.
Если вы нажмете Embed > Responsive embed > off эмбед будет отображаться в том размере, который задан в коде. Если нажать Embed > Responsive embed > on, то видео растянется или уменьшится по ширине сетки.
Меняется ли размер изображения, когда я вставляю его в сетку?
Изображение автоматически уменьшается по ширине той колонки, в которую оно вставлено в таблице (видео останется в размере, заданном в эмбед-коде, если вы не нажмете Keep iframe aspect ratio>on). Если ширина колонки больше исходной ширины изображения, то оно встанет в своем исходном размере.
Как задать цвет фона сетки?
Откройте вкладку Grid, в окне Background вы можете сделать цвет фона прозрачным или выбрать один из цветов, которые вы задали в Управлении дизайн системой.
Как сделать картинку фоном сетки?
Нажмите на кнопку add image на панели инструментов справа, выберите и загрузите нужный файл. Затем откройте вкладку Grid или Column (в зависимости от вашей цели) и в меню Background выберите загруженное изображение.
Подробнее об установке фонового изображения для всего поста, отдельной сетки или колонки.
Как регулировать нижние отступы под сетками?
Откройте вкладку Grid, а затем — меню Bottom indent или используйте шорткат CMD + (стрелочки вниз-вверх). Вы можете задать размер отступа в пикселях (px).
Как вложить сетку в другую сетку?
Поставьте курсор в одной из ячеек сетки и нажмите на значок add grid на панели инструментов справа. Внутренняя сетка будет выделена желтым цветом. В верхнем меню у вас будет несколько вкладок Grid.
Эту функцию можно использовать, например, если вы работаете с инфографикой или делаете сложную верстку.
Например, вы хотите вставить на фон картинку и поверх нее сделать красивую колоночную верстку – тогда вы делаете сетку, вставляете картинку на фон, сверху вставляете текст в колонки. И поверх всего этого вы вписываете общее название всего блока. Как на скриншоте ниже.
Как убрать сетку?
Чтобы расформировать сетку, нажмите правую кнопку мыши, а в появившемся меню — Flatten grid.
Как управлять сетками в мобильной версии?
Сетки адаптируются под мобильные устройства по умолчанию: ячейки отображаются в виде колонки, но вы можете придать им другой вид.
Надо переключиться в меню Grid, нажать на троеточие в верхнем меню, оно расхлопнется вниз.
Чтобы правый столбец шел перед левым, нажмите Grid > Grid layout (mobile) > reverse. Чтобы ячейки выстраивались в две колонки, нажмите Grid > Grid layout (mobile) > matrix.
Как добавить поля сетки в мобильной версии?
Функция Overhangs позволяет убрать поля. Нажмите Grid > Overhangs > both, чтобы края сетки не были видны (по умолчанию в мобильной версии будет отступ).
Как установить якорь в сетке?
Дайте якорю название, нажав Grid > Anchor name. Чтобы вернуться к нему из другой части текста, нажмите Selection > Anchor.