Редактор постов Начало работы в Setka Editor: устройство, горячие клавиши

Начало работы в Setka Editor: устройство, горячие клавиши

Как начать пользоваться Setka Editor?

Когда вы установите плагин Setka Editor, на странице добавления нового поста (Add New Post) вы увидите вкладку Setka Editor.

 

1.png

 

Можно ли перейти из вкладки Setka Editor в другие вкладки редактора WordPress?

Как только вы переходите во вкладку Setka Editor в посте WordPress, остальные вкладки больше не доступны. Во встроенном редакторе нельзя доработать пост, созданный в Setka Editor: WordPress не сможет корректно воспринять его верстку.

 

2.png

 

 

Как устроен интерфейс Setka Post Editor внутри Wordpress?

Интерфейс Setka Post Editor состоит из нескольких элементов:

1. Поле редактирования поста — здесь вы работаете с контентом статьи;
2. Панель инструментов сверху — позволяет форматировать различные элементы поста: абзацы, выделенный текст, изображения, сетки, эмбеды и т.д;
3. Горизонтальная панель инструментов состоящая из вкладок — подразделов на панели инструментов сверху: 

Post — пост;
Paragraph — абзац;
Grid — сетка;
Selection — выделенный текст;
Image — изображение;
Embed — эмбед.

Количество вкладок меняется в зависимости от того, в каком элементе поста находится курсор. Если вы кликаете на текст, то вам будут доступны вкладки Post и Paragraph. Если вы выделите текст в таблице, то вы увидите вкладки Post, Grid, Column, Paragraph. При нажатии на тот или иной элемент верстки вкладки переключаются так, чтобы вы могли форматировать выделенный элемент.

4. Контекстное меню, которое открывается по правому клику мыши. Оно позволяет управлять абзацами и копировать элементы поста.

 

 

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

 

 

Настройка ширины рабочего поля редактора

У темы WordPress есть определенная ширина поста, иногда есть несколько вариантов (“широкий” и “узкий” пост, например).

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

Для этого внизу есть опция настроить рабочее поле редактора так, чтобы оно равнялось ширине поста, которая установлена у вас в WordPress (View post as > 620 px/940 px/1200 px).

Рекомендуем настраивать внизу ту ширину, которая равняется ширине поста в вашем WordPress.

 

______________2017-05-03___13.26.35.png

  

Особенность работы с текстом в Setka Post Editor

В Setka Post Editor текст разбивается по абзацам, так что вы работаете не с произвольным отрывком текста, а с абзацем (Paragraph).

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

Шорткат Shift + Enter создает новую строку в том же абзаце. Это может быть удобнее, когда вы печатаете статью прямо в редакторе.

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

 

Возможности кастомизации постов*

*Инструмент Custom CSS редактора доступен только на тарифах Pro.

Setka Post Editor — гибкий инструмент, вы можете отредактировать HTML код поста (нажмите Post > Advanced > Edit html) и задать CSS тексту или элементу (откройте нужную вкладку на верхней панели управления). Например, если вы хотите задать CSS для определенного абзаца, нажмите Paragraph > … > Custom CSS.

 

3.png

 

Как выглядит предпросмотр поста на разных устройствах?

Нажмите на меню справа кнопку Preview post или шорткат Tab и вы увидите, как выглядит пост на десктопе и на мобильном устройстве. Чтобы выйти из режима предпросмотра, нажмите на крест в правом верхнем углу или на клавишу Esc / Tab.

 

Горячие клавиши

Если что-то нужно быстро сделать (перейти на следующий абзац, выделить несколько абзацев), вы можете воспользоваться контекстным меню (правая кнопка) или шорткатами. Полный список шорткатов доступен, если нажать кнопку shortcuts на панели инструментов справа.

 

Шоркаты для Mac

Tab — показать/скрыть предпросмотр поста
Cmd + 1...9 — задать стили для абзаца
Cmd + (стрелочка вниз-вверх) — задать нижний отступ элемента
Сmd+Alt+Сlick — выделить сетку
Ctrl/Cmd + Click — выделить несколько элементов
CmdShift + A — выделить все элементы
Delete — удалить выбранные элементы (за исключением эмбедов и абзацев)
ShiftDelete — удалить выбранный абзац или эмбед
Cmd + Z — то же самое, что UNDO при нажатии на правую кнопку мыши


Шорткаты для PC

Tab — показать/скрыть предпросмотр поста
Ctrl + 1...9 — задать стили для абзаца
Ctrl + (стрелочка вниз-вверх) — задать нижний отступ элемента
Shift + Click — выделить сетку
Alt + Click — выделить несколько элементов
Ctrl + Shift + A — выделить все элементы
Delete — удалить выбранные элементы (за исключением эмбедов и абзацев)
ShiftDelete — удалить выбранный абзац или эмбед
Ctrl + Z — то же самое, что UNDO при нажатии на правую кнопку мыши


Панель Grids

Click (на значок сетки) — превратить каждый выделенный элемент в одиночную сетку
Shift + Click —  превратить каждый выделенный элемент в одиночную сетку
Cmd + Click — вставить пустую сетку после выделенного элемента (для PC: Ctrl + Click)


Панель Images

Click (на изображение) — вставить изображение после выделенного текста
Shift + Click — вставить изображение в строку

Иногда шорткаты могут конфликтовать с плагинами вашего браузера. В этом случае вы можете отключить плагин или не пользоваться этим шорткатом.