Выделение текста информации

Рассмотрим ситуацию, которая может случиться у каждого. Допустим, вы написали или заказали статью, в которой 2000 символов или более. Текст в ней выглядит одним большим блоком, который сливается. Необходимо «разбавить» его.

Для этого создаём блок «Информации» в который вы сможете вставить любые данные по вашей теме. Например: у вас статья по продвижению сайтов, вы можете внести в блок информации данные по стоимости продвижения или данные по примерам того или иного продвижения.

Но есть один нюанс. Если текст который внесён в блок «Информация» не уникален, а например взять с Wikipedia, необходимо поставить теги noindex. Это необходимо, что бы ваш сайт не был определён поисковыми машинами как плагиатор.

Установка кода

Установка данного блока, состоит из двух этапов. Первым делом необходимо установить следующий HTML код в вашу статью.

 

<div class=«informacia»> <p>Нужная информация</p> </div>

 

Таких блоков в статье может быть несколько штук. Отталкивайтесь от количества символов. Например: в тексте из 2000 символов, нужно разместить 1-2 таких блока.

После установки HTML кода, необходимо вставить стили CSS. Для этого копируем понравившийся вариант и устанавливаем его в файл стилей .css

Вариант №1

Ваш текст

.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #E7E7E8;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №2

Ваш текст

Вариант с серой заливкой

.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #cbecf5;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №3

Ваш текст

.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #cbf5d8;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №4

Ваш текст

.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #fcffc2;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №5

Ваш текст

.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #ffe3c2;  background-position: 9px;  padding: 40px 20px 40px 80px; }

 

Как вы могли заметить, я выбрал нейтральные цвета для блоков. Так как они должны лишь «разбавлять» текст, а не концентрировать внимание на себе.

Заключение

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

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