Путеводитель по новому редактору постов

Почему это важно. Социальное взаимодействие в сети Интернет - это непрерывный процесс изменений. Вы могли заметить как меняется значение социальных сетей и виртуального общения. Популярные платформы стремятся быть на волне со своими посетителями и меняются для того, чтобы посетителю было комфортно и уютно на сайте.

Hairmaniac долгое время сохранял нейтралитет. С сентября 2015 года по июль 2022 года сайт работал с одним и тем же редактором постов.

К лету 2022 года была поставлена важная задача - найти и адаптировать новый редактор постов, чтобы он был простым, понятным и удобным. В данном контексте понятие "удобства" и "современности" почти синонимы. Потому что использовать старый редактор постов в мобильном телефоне это было той еще сложностью.

Что появилось нового, чего не было в редакторе раньше. На самом деле перемены в редакторе стали происходить гораздо раньше. Ниже мы перечислим, что уже было установлено в редакторе в период с января по июль 2022 года, чего не было в редакторе в предыдущие годы.

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

Добавление тегов. Сейчас теги напрямую связаны с поиском по тегам, что замыкает разброс поисковых слов. Посты подчинены порядку поиска. В конце поста можно присоединять до 15 тегов, которые бы создавали альтернативный поиск ключевой информации.

Например, пост содержит информацию о том, что делать в уходе за ломкими пористыми волосами, которым подошел уход без силиконов. Внизу редактора отображаем эту информацию. Для этого нажимаем на кнопку "Добавить теги" и выбираем подходящие:


Оглавление/содержание. Помимо того, что это помогает поисковым системам анализировать информацию, так же у пользователей появляется аналог книжного оглавления, выделяя важные этапы в повествовании. Не нужно украшать его смайликами или другими графическими символами, это перегружает его значение.

Включить содержание достаточно просто. В старой версии редактора нужно было выстроить подзаголовки с помощью тегов H2, H3, H4. И затем внизу редактора нажать галку в строчке "Включить блок "содержание" статьи".

В новой версии редактора подзаголовки формируются иначе. На поле редактора нужно нажать плюс, затем выбрать из списка "Заголовок". Если Вы в какой-то момент решите, что заголовок не нужен, то можно выделить его и появится меню конвертирования, где можно из списка выбрать пункт, который конвертирует выделенный текст. В новом редакторе есть те же уровни заголовков, но при этом Вы можете работать с этой функцией более широко.

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

Схематично все кнопки старого редактора выполняли следующие функции:


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

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

Разница панели старого и нового редактора

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

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

Визуальный, блочный и удобный. В новом редакторе можно сразу увидеть, как будет выглядеть пост с заголовками, порядком следования фотографий, блоками внимания и цитат. Раньше ширина текстового поля составляла 709 пикселей, сейчас она увеличена и занимает 795 пикселей.

Формальная информация о постах в сообществе: минимальный объем текста не менее 2 000 знаков, максимальный - 60 000 знаков.

В новом редакторе шрифт будет чуть крупнее, чем в старом, но все равно меньше, чем на сайте. Обычно так делают, чтобы при написании текста его больше было на экране, чтобы удобнее было формулировать мысль.

Функции нового редактора


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


Любой момент работы с новым блоком заключается в двух шагах: добавить и настроить.

Каждый блок добавляется через плюс:

Настройки для каждого блока можно увидеть, нажав справа кнопку с шестью точками:


"Добавить" кнопка слева, "Настроить" кнопка справа. Всё, на этом можно было бы завершить путеводитель по новому редактору, потому что во время работы постепенно интуитивно ориентируешься в функциях и возможностях внутри поста. Для лучшего взаимопонимания уделим внимание каждой функции редактора.

Функции нового редактора постов:

Параграф представляет собой блок для текста, то есть это место для размещения текстовой информации. Если на чистом участке поста нажать Энтер, то по умолчанию создается новый блок именно типа "Параграф".

При работе с текстом есть ряд возможностей. Выделив текст можно конвертировать его в другую функцию: Цитата, Внимание, Спойлер, Заголовок, Список. Либо добавить цитату, либо выделить маркером участок текста, к которому нужно вернуться позже. И доступны стандартные функции - выделить полужирным, курсивом, подчеркнутым, зачеркнутым. Чтобы активировать любое вышепречисленное действие необходимо выделить текст и выбрать подходящее решение.



Смайлики доступны к выбору на поле редактора в правом верхнем углу. Акцентируем Ваше внимание на том, что смайлики и эмоджи не заменяют знаков препинания. И перед смайликом нужен знак препинания, который соответствует контексту.



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

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

Цитата занимает небольшой объем текста - примерно 1-2 абзаца. Лучший вариант: цитата появляется точечно и выделяет примерно 1-2 блока текста при просмотре на 1 экране персонального компьютера. То есть цитатами лучше дополнять пост, а не заполнять его.


Выравнивание можно сделать как по левому краю так и по центру.


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

Внимание - это новый тип блоков для акцентов и привлечения внимания читателей.


Блоки внимания, как и прочие подобные блоки предназначены визуально выделять какую-то важную информацию, делать ее заметной на фоне остального текста. Фразы «Внимание!» и «Рекомендую!» не статичны, при создании поста Вы задаете их самостоятельно. Соответственно, и картинка яркая, и шрифт чуть больше.

Блок внимания можно переименовать по контексту информации. Не нужно делать изобилие блоков в посте, лучший вариант: блок внимания занимает 1-2 небольших абзаца, а самих блоков размещается 1-2 на 1 экран при просмотре на ПК. Старайтесь выделять действительно важное, а не только делать пост пестрым и вычурным. Эстетика в данном случае имеет большое значение и авторы могут взять этот инструмент для того, чтобы сделать необходимый акцент в посте. Цветовых решений у блоков три - зеленый, розовый и оранжевый.



Чтобы сменить вид достаточно выделить блок и нажать 6 точек (это кнопка настроек / списка возможных действий). И выбрать желаемый вариант.

Спойлер это функция, которая теряет свою актуальность, но пока еще остается в редакторе постов. Там желательно размещать информацию, которая может пригодиться читателю. Например, мы рекомендуем убирать в спойлер описание производителя и составы. Потому что это информация может дублироваться на сторонних сайтах и быть неким "шумом" для читателя, который предпочитает вместо чтения состава и позиционирования продукта изучить результат применения косметического средства. В таком случае большой состав не является аргументом.

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

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

Как выстраивались заголовки в старом редакторе рассказали выше, сейчас повторим, что принцип сохранился. Изменился лишь способ выделения текста. Добавить > Заголовок. Затем добавляете подходящий текст и нажимаете 6 точек (кнопка Настроек функции). И определяете какой уровень заголовка будет соответствовать Вашему тексту. На примере ориентироваться легче:


Затем внизу редактора нажать галку в строчке "Включить блок "содержание" статьи". И в результате внутри поста получится:


Список в новом редакторе представлен тремя видами.


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


Если же нужен маркированный или формат плюсов/минусов, то нужно нажать 6 точек блока и выбрать подходящий вариант:


Как будет выглядеть каждый вариант:

Фото теперь можно загружать как по отдельности, так и сразу несколько.


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

Например, в историях волос часто выкладывают архивные фотографии какого-то периода. И когда по тексту автор пишет "красила волосы в зеленый цвет" и добавляет фотографию того периода с подписью "радовала прохожих бликами зеленых оттенков волос осенью 2015 года", то для читателя текст и фото соотносятся в единое целое.

В случае косметического средства можно загрузить фото, например, спрея для волос и ниже написать его полное наименование "DeLoren Несмываемый спрей для поврежденных волос".

Какие действия можно делать с изображениями, можно увидеть нажав правую кнопку с 6 точками:


Гиф-изображения можно загружать в новый редактор. Это одна из особенностей, которой не было в старом редакторе.

Галерея теперь представляет собой отдельную функцию. Больше нет необходимости искать и добавлять специальный тег, как это было реализовано в старом редакторе.

Нужно лишь на пустом поле редактора нажать "Добавить", затем "Галерея", и в новом открывающемся окне выбрать путь загрузки изображений. На ПК и на мобильном можно загружать сразу несколько фотографий. Для это их нужно лишь выделить и одним кликом добавить в галерею. А потом только подписи проставить под каждой.


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


Таблица еще одна из новых функций, которой не было раньше в редакторе. Для этой функции прописаны дополнительные настройки, которые упрощают заполнение и работу со строчками таблицы.

Добавить > Таблица. И далее помимо 6 точек с Настройками есть еще кнопки для работы со столбцами и строчками:



Внутри каждой ячейки можно делать ряд настроек: выделять жирным, курсивом, подчернутым, выделять маркером, добавлять ссылку или делать активную ссылку на страницу автора сообщества.


Кат - это современная замена тегу cut, который работал в старом редакторе и помогал обрезать текста в начале поста. Чтобы сокращать длинные записи, скрывая их целиком или частично под ссылкой («Читать дальше»). Скрытая часть не видна в общей ленте постов, но доступна в полной записи на странице поста.

HTML-фрагмент. Эта функция находится в работе у специалистов и будет работать позже.

Как добавить видео в пост. На Ютубе или другой площадке с видео-контентом нужно скопировать ссылку-адрес на видео. И через плюс на поле редактора добавить «Параграф». Это стандартная строчка для добавления текста. Вставить ссылку-адрес на видео.



Какие еще нововведения последовали за добавлением нового редактора постов.

• Внизу опубликованного поста список косметических продуктов теперь воспроизводится как трио из полного наименования средства + его аватара + ссылки на страницу в каталоге.
  
  
• Также реализована функция быстрого перехода к новым комментариям. Для этого нужно нажать на иконку с комментариями и система переведет Вас к тому моменту, где Вы остановились в прошлый раз при чтении комментариев.
  
  
• В профиле каждого зарегистрированного пользователя появилась строка "Вас упомянули", которая отображает упоминания данной страницы. Например, в одном из постов кто-то рекомендовал Вашу страницу или ссылался на Вас с помощью инструмента "Автор" - и эта информация отобразится в данном блоке. Профиль > Вас упомянули.
  
  
• Для тех, кому удобнее посещать сайт с помощью мобильного телефона, были добавлены кнопки для быстрого перехода к комментариям и вниз поста.
  
  

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