Как красиво оформить текст на сайте

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

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

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

Немного об оформлении текста на сайте

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

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

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

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

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

Мусорные теги в тексте статьи

Если вы переносите тексты статей с Microsoft Word или Google Doc, то даже при самом правильном оформлении статьи в документе контент копируется на сайт вместе с дополнительными тегами оформления, которые замусоривают код статей. Обычно это теги <span> со своими стилями, теги переноса строки </br> и т. п.

Пример такого тут:

При этом на сайте подобное выглядит так:

Согласитесь вид не очень презентабельный, а все потому что мусор из кода не убран.

Не используйте теги <span> и стили через атрибут style для правки шрифтов в тексте статьи. Так как это значительно удлиняет код страницы, кроме того требуется много времени, чтобы сделать всю статью одинаковой. Используйте для всех визуальных оформлений классы с прописанными централизованными свойствами в css файлах. Если вам не нравятся шрифты и внешний вид текстов после выкладки чистого кода, то лучше попросить программистов внести правки в отображение элементов централизовано. Тогда за 1 правку все статьи сразу станут выглядеть так, как вы хотели.

Не допускайте переносов строки при абзаце с помощью тега <br/> в тексте. Если нужно сделать абзац, то делайте это тегом <p>.

Очень часто копирайтеры для удобства чтения текстов в MS Word документах делают абзацы с помощью переносов строки, а не централизованных отступов, типа <p></p>:

Не делайте вертикальных отступов таким образом (пустыми тегами <p>), если вам не хватает отступов между абзацами, то лучше это исправлять централизованно, через css классы тегов <p> или любых других.

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

А вот пример корректного использования отступов:

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

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

Допускается для оформления текстов на сайте следующие теги:

• <p> — тег абзаца;
• <ul><li> и <ol><li> — маркированный и нумерованные списки;
• <b> или <strong> — выделение жирным;
• <i> или <em> — выделение курсивом;
• <u> — подчеркивание;
• <a> — ссылки;
• <img> — картинки;
• <del> — зачеркнутый текст;
• <h2>, <h3>, <h4>, <h5>, <h6> — подзаголовки.

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

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

Часто не совсем опытные копирайтеры делают подзаголовки в статьях в Word файла просто выделением жирным, и при переносе статей они так же и выкладываются:

Не нужно использовать простое выделение жирным для заголовков в статьях, у них есть собственный набор тегов <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Помимо визуального оформления все теги заголовков обрабатываются поисковыми системами немного иначе, чем обычный текст, и ключевые запросы в них немного лучше влияют на ранжирование статьи, чем запросы просто из текста. Поэтому важно их использовать правильно.

Заголовок h1 на странице должен встречаться один раз и в статье обозначать именно название статьи, а не какие-то элементы дизайна. Это может быть так:

Или вот так:

Далее по тексту используйте подзаголовки h2, h3, h4, h5 и h6 и их уже может быть неограниченное количество каждого. В среднем один подзаголовок на 500–750 знаков.

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

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

• Тег H1 — самый крупный тег по размеру на странице.
• Тег Н2 должен быть следующий по размеру.
• Тег H3 должен быть следующий по размеру после H2.
• Далее могут идти уже прочие теги заголовков по убыванию размера шрифта до H6.
• Даже H6 подзаголовок должен визуально выделяться на фоне основных блоков текста (шрифтами, отступом, цветом, жирностью и т. п.) и выглядеть именно как подзаголовок.

Пример:

Можно подзаголовки Н2 оформлять с картинкой в качестве подложки:

Или просто эффектными стилями:

А остальные уже выделять только шрифтами без ярких дополнительных элементов.

Не используйте сторонние теги, типа <span>, <strong> и др. внутри тегов подзаголовков, типа:

Все правки стилей подзаголовков делайте централизованно через css и классы. Особенно жестко этого правила нужно придерживаться в заголовке h1.

Подзаголовки должны создавать иерархию в статье, если сформировать ее оглавление. Пример:

• раздел с h2
  • дочерний раздел с h3
  • дочерний раздел с h3
    • более глубокий подраздел h4
    • более глубокий подраздел h4
  • дочерний раздел с h3
• раздел с h2

Не нужно использовать только какой-то один вид, если у статьи сложная структура, так как должна прослеживаться иерархия.

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

Списки

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

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

А вот так нумерованного:

Текст между закрывающимися и открывающимися тегами <li> не должен быть обрамлен дополнительно в теги абзацев <p>, что обычно происходит, если переносить контент с Word без правок кода. Иначе вы получите дополнительные отступы между пунктами списка не всегда красивые, типа:

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

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

Бывает, что при верстке дизайна сайта для списков убирают отступы и маркеры, тогда при выкладке выглядит это так:

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

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

Ссылки в тексте статьи

Для статей в основном важно, чтобы при их прочтении аудитория затягивалась в прочтение и переходила от одной статьи к другой на сайте или уходила со статьи вообще на другой сайт (особенно это важно в проектах, которые стараются переводить пользователей на другие сайты со своего по партнерским ссылкам). Поэтому обязательно в статьях указываются ссылки на другие документы и даже сайты. Но недостаточно просто указать, важно, чтобы ссылки были такими, чтобы пользователи с первого взгляда на статью понимали, где и куда можно кликнуть на странице. Поэтому ссылки должны иметь такую настройку стилей в css, чтобы они по цвету визуально еще отличались от всего остального текста даже не нажатыми, типа:

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

Для блогов и интернет изданий, где важно вызвать переход вглубь сайта, можно еще сделать так, чтобы там, где это необходимо, ссылки на другие ваши статьи на сайте выстраивались по тексту вот так (с обтеканием сбоку):

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

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

Картинки

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

Вот пример уточняющего использования картинок:

Когда они действительно дополняют текст визуальным пояснением.

А вот пример нейтральной картинки в тексте:

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

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

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

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

Чтобы статья хорошо смотрелась, нужно размещать 1 картинку, как и любой другой визуальный элемент (видео, таблицы, врезки, цитаты) на 750–1000 знаков текста. Если по логике повествования в статье надо приводить больше картинок, то не страшно, главное разделять логические группы картинок текстом. Но если промежутки без картинок больше и там нет дополнительно никаких визуальных элементов типа: таблиц, списков, советов и т. п., то текст будет выглядеть скучно:

В некоторых тематиках подобные статьи будут нормой (например юриспруденция), но для большинства тем — это будет не очень.

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

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

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

Галереи

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

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

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

Например, с разбивкой по тегам картинок:

Или с листалкой:

При очень большом количестве фотографий в галерее, которые надо показать именно в первом блоке, можно использовать галерею, показывающую количество картинок и превью 1-2 картинок с описанием, типа:

А далее уже всю остальную галерею пользователь сможет посмотреть в модальном окне.

У сайта Vogue галереи с пролистыванием показываются вообще прямо в тексте и можно рассматривать все изображения, не прибегая к модальным окнам:

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

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

Расположение картинок в тексте

Размещайте картинки по тексту с выравниванием посередине, как это сделано тут:

Или делайте картинки по ширине текста, как это сделано тут:

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

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

Варианты с выравниванием по левому краю или по правому краю в тексте статьи могут выглядеть более проигрышно (особенно если область текста узкая):

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

Сравнение картинок

Если разрабатываете дизайны или другие творческие работы, то эффектным будет показ дизайнов в стиле сравнения (до и после), так тут:

или тут:

Такое решение больше расскажет о вашей работе, чем тысячи слов текста.

Видео

В большинстве тематик отличным дополнением к тексту статьи будет видео. Поэтому важно предусмотреть возможность его встраивания в текст статьи. Самый простой вариант для большинства пользователей — это встраивание видео с YouTube, Vimeo или аналогичных сервисов на сайт. И казалось бы, что может быть проще? YouTube сам дает код плеера с видео в виде iframe, тут:

Скопировал его, да вставил в статьи и все:

Все, да не все.

Видео нужно встраивать в статью гармонично, как дополнение статьи: отдельным этажом контента в середине статьи или финальным аккордом, как в пример ниже:

Не стоит делать его с обтеканием текстом по бокам небольшим окошком:

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

Но еще не стоит забывать и о мобильных пользователях. Если вы просто встретите в коде страницы тег iframe с YouTube даже с правильными размерами, то ваше видео будет красиво смотреться на десктопе, но при этом, скорее всего, будет намного больше экрана в смартфоне или отображаться в неправильной пропорции. И адаптироваться под размер экрана нормально не будет. Пример:

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

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

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

Аудио

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

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

Вставки из инстаграм, фейсбук, твиттер и т. п.

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

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

Оглавление статьи

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

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

При создании оглавлений стоит заметить:

• если статья имеет сложную структуру и заголовки разного уровня h2, h3 и далее, то лучше, чтобы меню было не таким, как на фото, а многоуровневое, например как тут:

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

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

Таблицы

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

Само оформление таблиц может быть разным:

или:

или:

Есть ряд моментов в оформлении таблиц, на которые надо обратить внимание:

• Желательно, чтобы заголовки столбцов были выделены цветом или стилем среди остальной таблицы (что видно на приведенных выше примерах).
• Таблицы должны корректно отображаться на мобильных устройствах и иметь свой собственный горизонтальный скролл через CSS стили. Это ни в коем случае не скролл самого браузера (так как иначе гугл будет считать, что страница не адаптивна), а если это скролл верстки, то у гугла тогда претензий к странице нет.

и она же на мобильном:

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

Примеры документов в виде картинок

Бывают тематики, где важно показать примеры документов, и их тоже можно использовать в качестве визуального контента. Если это ваш случай, то сделайте так, чтобы отображалось небольшое превью документа — миниатюра (несколько в ряд):

А далее при нажатии документ разворачивался полностью поверх окна — пример:

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

Примеры pdf-файлов, презентаций и т. п.

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

Например, для публикации pdf-документов есть сервис Yumpu.com, который позволяет залить документ к себе, настроить его отображение для сторонних сайтов и далее вставить полученный код прямо в страницу. Использование данного сервиса не требует вмешательства программистов, так как адаптивность данному блоку можно регулировать настройками показа документа в админке самого сервиса (пример):

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

Для разных типов файлов существуют разные подобные сервисы, но не стоит также забывать, что аналогичным способом можно встроить на страницу и документы, что лежат на Google Drive (через Google Doc, Google Spreadsheets и т. п.).

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

Разнообразие верстки

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

Советы и важные идеи

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

или

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

Примеры и определения

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

Второй вариант выделения неполной рамкой:

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

Блоки правильно / неправильно

Есть целый ряд тематик, где при написании статьи можно приводить примеры, как негативные, так и позитивные. И чтобы акцентировать внимание читателей на этом, можно использовать в зависимости от контента различные варианты оформления блока правильно / неправильно (достоинства / недостатки) (пример):

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

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

Аккордеон контента и FAQ

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

Особенно часто это методика применяется при оформлении блока FAQ (вопрос-ответ) — текст вопроса будет заголовком пункта аккордеона, а ответ — в выпадающей части. Пример:

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

Табы контента

Если вам нужно компактно показать несколько контентных блоков, хорошим вариантом будут табы. Например, как на сайте Schema.org:

При помощи табов можно показать блоки было / стало, несколько вариантов реализации одной и той же задачи или просто заверстать разные смысловые блоки.

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

Этого блока по умолчанию нет во многих CMS, но в некоторых из них он легко реализуется через шорткоды. Главное, заранее сделать дизайн для их оформления и выбрать самый подходящий вариант:

Блок с цитатами

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

Также можно работать с цитатами только одного эксперта, публикуя их по ходу статьи.

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

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

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

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

Продающие элементы для статей

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

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

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

Например, это может быть блок в конце статьи, собирающий контакты в обмен на что-то полезное, типа такого:

Или элемент в конце статьи с товарами, о которых шла речь, пример:

Желательно, чтобы эти блоки были не просто картинками и ссылками, а полноценными индексируемыми html-блоками, каждый из которых содержит:

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

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

Статью просто прервали по абзацу и дали продающий блок.

А вот аналогичный пример с формой (всплывающей при нажатии):

Или вот:

!!!Обратите внимание: в зависимости от возможностей вашей CMS подобные элементы программисты могут реализовать по-разному. Кто-то может сделать просто в одной из статей полноценную заготовку html-кода, где вы будете только в коде заготовки менять текст и ссылки, а далее публиковать. Но при этом вам надо знать хотя бы основы верстки, чтобы контролировать работу или править все это самому. Либо, как вариант, программист может установить плагин или модуль шорткодов и отладить отображение его по дизайну. Тогда вы просто будете прописывать шорткоду нужные URLы и тексты в отдельных полях, и все оформление будет подстраиваться под эти правки. И для работы с данным вариантом вам не нужно будет углубленное изучение верстки, а достаточно лишь освоить специальные команды вызова заготовок. Конечно, более удобный с точки зрения пользователя второй вариант, но, увы, на многих CMS подобное внедрение невозможно или очень дорого стоит, поэтому там может применяться первый вариант.

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

У сайтов-обзорщиков Амазона может неплохо работать вот такой вариант оформления продуктов прямо в тексте статьи:

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

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

Примеры кода

Не секрет, что большинство различных IT и маркетинговых компаний продвигаются в первую очередь за счет блогов. В статьях таких тематик нередко надо показать фрагмент кода или стилей верстки. И вот тут начинаются проблемы. Так как без специальных надстроек большинство движков блогов все фрагменты кода обрабатывают по своему: заменяя при этом символы, либо удаляя их. Такое явление не редкое в популярных CMS-системах, типа WordPress. А даже если вам повезло, настройте сайт так, чтобы он ничего не обрабатывал, иначе достаточно большие фрагменты кодов, которые могут быть важны в качестве примеров для статей, будут не очень хорошо смотреться выложенными сплошняком в текст.

Чтобы фрагменты программного кода или верстки показывать нормально в тексте, стоит смотреть либо в сторону сторонних решений, которые просто встраиваются в код страницы, либо как видео из YouTube, и дают возможность показать все аккуратно, типа codepen.io:

Либо искать специальные плагины движка сайта.

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

Частые ошибки при оформлении

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

• Перебор с оформлением в тексте и визуальными элементами:

• Слишком большие отступы, которые мешают чтению:

• Сложные для чтения шрифты в оформлении даже заголовков ― подобное смотрится красиво, но заставляет пользователей напрягаться при прочтении:

• Слишком крупные или слишком мелкие шрифты: