Сітки у пості створення та редагування – Setka Editor

Сітки (Grids) та сітка посту (Post grid system)

У Setka Post Editor є два типи сіток.

Перший тип – це загальна сітка посту (Post Grid System). Це модульна система всього посту, що організує контент, її можна створити у Style Manager.

Другий тип - сітки (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-код.

Чи змінюється розмір зображення, коли я вставляю його в сітку?

Як встановити колір фону сітки?

Відкрийте вкладку Grid, у вікні Background можна зробити колір фону прозорим або вибрати один з кольорів, які ви задали в Style Manager.

Як зробити картинку фоном сітки?

Натисніть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.