Как использовать визуальный редактор и оформлять посты в iXBT.live

| Новости проектов iXBT.com

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

Содержание

Окно визуального редактора выглядит так:

1. Тип поста

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

  1. Обычный топик. Он выбран по умолчанию и отлично подходит для больших текстов с иллюстрациями. Если вы пишете обзор, размышления или гайд, используйте именно его.
  2. Опрос. Если вы хотите узнать мнение читателей, здесь есть форма для голосования и окно редактора для основного текста. Задать можно только один вопрос в посте, а выбрать — один из предложенных вариантов.
  3. Купон. Самый лучший способ рассказать о скидке на товар, ввести даты действия, начальную и конечную цены. Здесь действует правило «Одна скидка — один пост».
  4. Новость. Небольшой материал о событии. В новости обязательна ссылка на источник и пометка, если ваш материал является переводом. Обратите внимание, что по правилам новостной журналистики в новостях даются факты без оценочного мнения. Если вы хотите высказать свою точку зрения по этому поводу, сделайте это в обычном топике.
  5. Подборка. Этот тип поста сделан специально для рассказов о нескольких играх или устройствах сразу. То есть, посты типа «5 игр для смартфона», «10 товаров с Алиэкспресс» или «8 фильмов на вечер пятницы» лучше всего оформлять подборкой. Этот тип топика можно публиковать только в тематическом разделе «Подборки». Начинающие авторы и новички такой пост сделать не могут.

2. В какой блог публикуем?

По умолчанию пост пишется в ваш личный блог, в котором его не увидят ни читатели, ни поисковики. Если вы хотите внимания, просмотров и комментариев — выбирайте в выпадающем меню соответствующий тематический раздел, в который отправится ваш пост. После проверки модераторами пост будет опубликован и отправится в Большой Интернет.

3. Заголовок

Заголовок поста должен быть информативным и не кликбейтным. Что это значит? Читатель должен из заголовка понять, что в посте: если это обзор игры или устройства, гайд по установке ПО или лайфхак «как сэкономить место на ПК» — так и пишите. Но не обманывайте ожиданий читателя: «Лучшая игра для смартфона» или «Топ-10 товаров с Али» — это кликбейт. С чего бы они лучшие? По вашему мнению? Укажите это в заголовке.

У нас есть рекомендации по оформлению заголовков (и самих постов), их можно прочитать по ссылке.

4 и 5. Визуальный редактор

Начнем с пункта 5: это основное окно, где вводится текст и наглядно отображается все форматирование. В редакторе работают основные хоткеи, но не работает перетаскивание.

Пункт 4 — это кнопки визуального редактора, ваш основной инструмент. Выглядят они так:

Верхний ряд
Кнопки H1, H2 и H3

Это кнопки выделения заголовков и подзаголовков. Например, заголовок «4 и 5. Визуальный редактор» выделен кнопкой H1, а подзаголовок «Верхний ряд» — кнопкой H2. Кроме внешнего разделения простыни текста на отдельные смысловые блоки заголовки выполняют еще две важные функции:

  1. Они демонстрируют поисковикам, что перед ними не стена какого-то текста, а осмысленный материал. Поисковики знают, что такие материалы чаще нравятся пользователям, и чаще их подсовывают в выдаче.
  2. Заголовки и подзаголовки (и только они) используются для оглавления — о нем будет ниже.

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

Кнопки B, I, U и A

Это кнопки выделения текста. B — выделение жирным (bold), его аналог — сочетание Ctrl+B на клавиатуре. I — это курсив (italic), аналог Ctrl+I. U — подчеркивание (underline) или Ctrl+U. Кнопка A — выделение «желтым маркером», оно видно только в редакторе. Выделяйте только самые важные элементы, не перегружайте текст пестротой.

Кнопки выравнивания текста

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

Кнопки цитирования ( “ ) и моноширинного текста ( pre )

Кнопка цитирования ( “ ) выделяет весь абзац текста и делает его более заметным. Обычно используется, чтобы отметить чужой фрагмент текста или Очень Важную Мысль. Выглядит это так:

Одиннадцатая заповедь: «Не прелюбоцитатствуй!»

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

Так этот текст выглядит в оформлении.

Кнопка (<strong> pre</strong> ) переводит весь абзац (или несколько) в моноширинный текст (текст с одинаковой шириной символов). Это удобно, если вам нужно продемонстрировать пример кода. Все символы абзаца отображаются в строку, абзацы отбиты пустой строкой. Моноширинный текст можно переносить, редактировать и выделять точно так же, как и обычный.<br />А эта строка добавлена при помощи Enter уже после оформления кнопкой (pre).<br /><br />Так этот текст выглядит в оформлении.
Кнопки «Вставить/редактировать ссылку» и «Удалить ссылку»

Доступно два вида ссылок: обычная и кнопка. В окне редактора есть одна особенность: если курсор стоит у края ссылки, и она подсвечена голубым — вы редактируете ее текст. Чтобы не пририсовывать к ней лишние знаки (например, пробелы или знаки препинания), можно нажать стрелку влево/вправо на клавиатуре, подсветка исчезнет, и ссылки на вводимом тексте уже не будет.

Нумерованный и маркированный списки

Нумерованный список выглядит так:

  1. Первый пункт
  2. Второй пункт (перейдите к нему с помощью Enter)
    1. Первый подпункт (для его создания после Enter нажмите Tab на клавиатуре)
  3. Третий пункт (чтобы вернуться к первому уровню нумерации, нажмите Shift+Tab на клавиатуре или еще раз Enter)

А маркированный список — так:

  • Один пункт
  • Другой пункт
    • Один подпункт
      • Еще один подпункт
Кнопки с глазами «Add spoiler» и «Remove spoiler»

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

В публикации спойлер выглядит так (нажмите, чтобы увидеть)

Всё — сплошная банальность.

Ссылка на ссылку к ссылке.

— Главный вопрос, который теперь задают себе люди, это не «В чём смысл существования?». — говорят губы. — Главный вопрос— это «Откуда эта цитата?».

© Чак Паланик

Кнопка «Очистить формат» ( Ix )

Эта кнопка чистит «лишние» теги, которые остаются после переноса текста из стороннего редактора и могут повлиять на окончательный вид. Она НЕ убирает визуальное форматирование, поддерживаемое нашим движком — заголовки, выделения, списки и прочее. Если вы писали и оформляли текст где-то в другом месте, а потом скопировали в наш редактор, пожалуйста, выделите текст и нажмите эту кнопку: всем станет лучше.

Кнопки создания и редактирования таблицы

При использовании таблиц в тексте важно помнить несколько нюансов:

  1. Таблицы НЕ СКРОЛЛЯТСЯ по ширине. Это значит, что если ваша таблица слишком широкая для экрана читателя (например, на мобильном телефоне — а 70% пользователей читают именно с них), то часть информации пользователь просто не увидит. Как правило, таблицы в две колонки влезают на экран, а вот больше — уже нет.
  2. Заверстывать картинки в таблицы, чтобы они встали несколько в ряд — не надо. Совсем. Вообще. Для этого у нас есть удобный инструмент при вставке изображений, расскажем о нем ниже.

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

Нижний ряд
Кнопка вставки YouTube-ролика

Ничего сложного, просто вставьте ссылку на ролик в поле. Растягивать в редакторе не надо, видео само растянется при публикации. Сейчас поддерживается вставка из сервисов YouTube и Vimeo.

Кнопки вставки изображения и относительной ширины

Почему-то большинство проблем возникает именно со вставкой картинок. Давайте рассмотрим меню повнимательнее.

Чтобы загрузить картинку с компьютера, нажмите кнопку +, картинка загрузится сразу же после выбора.

Можно вставить картинку из Сети — вставьте ссылку и нажмите «добавить картинку», она перезальется на наш хостинг и останется видна, даже если исходное изображение было удалено.

Вставить выбранные картинки по ширине, 1/2, 1/3 или 1/4. Этот пункт нужно выбирать ДО вставки картинки, иначе потом придется кликать на вставленное изображение и использовать соответствующие кнопки на панели. Пункт влияет на то, как расположатся изображения — по одному, два, три или четыре в ряд. Если экран читателя слишком маленький, картинки развернутся в столбик. А при клике на уменьшенную версию откроется предпросмотр на весь экран.

Для примера. Три картинки с шириной 1/3 вставляются вот так:

Если у вас включено визуальное отображение блоков в редакторе, то под вставленными картинками вы увидите небольшое поле. Это поле для подписи. Не нужно выделять курсивом, болдом, кавычками или выравнивать по ширине: это излишне.

Вставка партнерских ссылок и виджетов

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

Кнопка «Показывать блоки» ( ¶ )

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

Подсказка — чаще всего это происходит после копирования из другого источника, нажмите кнопку «очистить форматирование».

Кнопка «Исходный код» ( < > )

Показывает ваш пост в виде простого текста и html-кодов. Полезно, чтобы быстро скопировать весь пост с форматированием и вставить его в какой-то другой редактор (который тоже поддерживает отображение исходного кода, разумеется). Или найти ссылку на изображение. Или посмотреть, где ошибка верстки, если вы умеете читать код. Еще можно на всякий случай скопировать код в Блокнот, чтобы не потерять плоды трудов, если вдруг случится сбой сохранения или дисконнект.

Кнопка «Содержание»

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

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

Содержание редактировать нельзя. Если вам нужно обновить содержание, просто удалите его и вставьте заново.

Кнопки «Отменить» и «Вернуть»

Ничего необычного:) Аналог кнопки «Отменить» — сочетание клавиш Ctrl+Z.

Кнопка «Восстановление последнего проекта»

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

6. Теги

Заводите сюда теги (ключевые слова) для темы вашего поста. Не пишите SEOшный спам и сотни вариантов, выберите только самые главные.

7. Превью топика

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

Разные соцсети по-разному кропят (обрезают) изображение под свои превью, поэтому оставляйте достаточно места по краям (примерно 20-30% от размеров изображения)

8. Кнопки сохранения и публикации

Кнопка «Сохранить в черновиках»

Наш Ctrl+S. Пост сохраняется в ваши черновики, там можно посмотреть, как он будет выглядеть as is, и поправить при необходимости. Страница при этом перезагружается. Советуем жать на кнопку почаще, сохраняя проделанную работу.

Кнопка «Предпросмотр»

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

Кнопка «Опубликовать»

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

нет
Об авторе
На-все-руки-девочка, толсти тролле и техногик. Нервы как стальные канаты.
Злой дракон iXBT.games. Самоидентифицирую себя как песца. Прихожу.
По всем вопросам пишите в телеграм @makcimko

6 комментариев

140149854@vkontakte
Вопрос по исходному коду. На каком-нибудь уровне пользователя (кроме админов и редакции) есть возможность редактировать исходный код? С HTML как-то попроще, когда пилишь длинный текст с вставкой всякого. Длинные статьи в вашем редакторе трудно редактировать. Страница дёргается при вводе любого символа.
Последний раз редактировалось
Makcimko
Сейчас эта возможность закрыта, потому что туда немедленно начинают совать неподдерживаемый код, и все едет
SanctusSusanin
Кнопка A — выделение «желтым маркером», оно видно только в редакторе. Выделяйте только самые важные элементы, не перегружайте текст пестротой.

Так видно только в редакторе или в итоговой статье тоже? Смысл выделять только в редакторе?
Makcimko
Если вы работаете над статьей несколько дней, то маркер помогает выделить фрагменты, которые нужно потом доработать
A-Gugu
Поправьте баг, когда при копировании форматированного текста, скажем из ворда, пробелы заменяются на line break-и, и это видно только после публикации.

Добавить комментарий