Обсудить проект

Способы оформления текста в блоге

  • INBOUND
  • 15 июня 2021
  • 8791
  • 11 минут

Многие компании сейчас ведут блоги самостоятельно: без помощи inbound-маркетологов или даже копирайтеров. В таких handmade-проектах мы часто встречаем повторяющуюся ошибку — статьи в них выглядят как «стена текста».

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

10 инструментов для оформления текста в блоге

1. Подзаголовки

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

Визуально подзаголовки разбивают текст на блоки. Но расставлять их бездумно, конечно, не стоит. Каждый блок должен нести смысловую нагрузку. В книге «Безгрешный маркетинг» я рекомендовала перед написанием текста составлять список вопросов, на которые вы хотите ответить. Пункты этого списка как раз и могут стать вашими подзаголовками.

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

2. Иллюстрации

В книге «Пиши, сокращай» Максим Ильяхов дает инструкцию, которая легко помогает отличить хорошие изображения от плохих. Для себя мы перефразировали ее так:

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

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

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

Сейчас чтобы делать подобные изображения самостоятельно, не нужен даже дизайнер с фотошопом, можно воспользоваться Figma или Canva. Дизайнер, конечно, сделает более стильный вариант, но если на него нет средств или времени, то можно обойтись и без него.

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

3. GIF

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

Но GIF могут быть не только for fun. Чтобы разнообразить текст, вы можете самостоятельно делать гифки и с их помощью объяснить, как применить ту или иную настройку, функцию, фичу. Мы, например, использовали такой формат в статье про полезные формулы Excel и Google Таблиц для маркетолога.

Чтобы делать гифки, есть много разных приложений и расширений. Я пробовала расширение GIPHY for Chrome и Recordit — программа для компьютера. Второй вариант понравился больше.

4. Цитаты

Кажется, первым проектом, где мы начали выделять цитаты в отдельные блоки, была Учебка. Нам очень нравилось приписывать смешные фразы личностям или даже предметам.

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

Если усложнять, то можно добавить к ним и личность говорящего, и должность:

5. Подкасты

Подкасты — еще один вид мультимедийного контента, который хорошо сносит стену текста.

Зачем нужен подкаст вашему бизнесу — рассказывал в Учебке эксперт Антон Заболоцкий. Он, кстати, поделился и списком техники, которая понадобится для запуска. Если перечень выглядит слишком внушительным, то вы можете не делать подкасты самостоятельно, а воспользоваться сервисом для автоматической озвучки, например, Retell.

С недавних пор они делают и полноценные подкасты, которые вы можете выгрузить и загрузить на свой канал в «Яндекс.Музыке» или любой другой площадке.

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

Кстати, чтобы сделать такую вставку, достаточно просто скопировать HTML-код в «Яндекс.Музыке».

6. Форма подписки

С помощью кода вы можете вставить посередине статьи не только подкасты, но и форму подписки. Если вы говорите о каком-то лид-магните — полезном материале, который вы отдаете за e-mail, то необязательно отправлять читателя в конец материала. Разместите ее сразу после упоминания.

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

7. Списки и таблицы

Более простые способы оформления текста. Такие же простые, как и подзаголовки.

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

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

8. Выделение цветом

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

Чтобы сделать простое цветное выделение в фоне, вроде того, что вы сейчас видите, достаточно открыть HTML-версию статьи и добавить код, где #ffffff — код цвета.

<div class="highlight" style="background-color: #ffffff; padding: 20px; margin: 20px -20px;">текст</div>

Если вы не знаете код цвета, который используется на сайте, можете проверить его с помощью расширения Eye Dropper.

9. Рекламная врезка или блок «Читать по теме»

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

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

Давайте обсудим

С этим способом оформления текста вы можете справиться как самостоятельно, так и с помощью дизайнера/верстальщика. В первом случае вам нужно будет сделать такую плашку с кнопкой в Figma. Минус в том, что весь он будет кликабельным. Это выглядит не очень профессионально, но сути такого блока не меняет, ведь главное, чтобы пользователь кликнул, перешел на другую страницу и продолжил изучение сайта, а еще лучше оставил заявку. Для этого можно создать блок вроде нашего, того, что справа от этого текста.

10. Видео

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

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

Кроме того, можно снимать обучающие ролики в духе предложенных выше GIF. Там даже не обязательно говорить и показывать лицо. Вы также можете записать какую-то инструкцию прямо со своего экрана. Специальное оборудование не понадобится, даже в простом QuickTime Player есть такая функция.

Вот как это реализовывала моя коллега Елизавета Митина, когда рассказывала, как создать Google Analytics 4.

Способы оформления текста в блоге: от простого к сложному

Подведем небольшой итог и разместим все инструменты от простого к сложному:

  1. Подзаголовки
  2. Списки и таблицы
  3. Выделение цветом
  4. Цитаты
  5. Изображение
  6. GIF
  7. Форма подписки
  8. Рекламные врезки или блоки «Читать по теме»
  9. Подкасты
  10. Видео

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

Анастасия Мартынова
inbound-маркетолог, автор книги «Безгрешный маркетинг»

Обсуди с другими
Обсудить проект
Выберите услугу,
впишите имя и телефон, нажмите кнопку
Нужна консультанция Экспресс-аудит Реклама Аналитика Анализ конкурентов Стратегия ROI-маркетинг SMM Блог Сайт Другое
Нажимая кнопку, вы соглашаетесь с  Условиями обработки персональных данных
Выберите услугу,
впишите имя и телефон, нажмите кнопку
Нужна консультанция Экспресс-аудит Реклама Аналитика Анализ конкурентов Стратегия ROI-маркетинг SMM Блог Сайт Другое
Нажимая кнопку, вы соглашаетесь с  Условиями обработки персональных данных