Как красиво выделить блок текста? Подсветка текста
В очередной раз поговорим о плагинизации нашего блога, и о дизайне текста в частности.
Я уже затронул тему как правильно писать в записях блога, и данная тема будет дополнением к предыдущей. В ней расскажу как выделять отдельные блоки в ваших записях с помощью плагина подсветки текста.
Как известно:
- Люди в интернете не очень любят читать…
- Читают особо не вчитываясь…
- Читают не все, а только то, на чем цепляется взгляд…
Если вы наивно полагаете, что все посетители будут прочитывать ваши статьи, которые они только открыли – вы ошибаетесь. Как правило, человек открывший статью – бегло пробегается по ней до конца (по диагонали), и ТОЛЬКО, если тема ему показалось интересной и его внимание зацепилось – будет читать ее внимательно.
Визуальные зацепкиПоэтому важно делать так называемые «визуальные зацепки«, которые останавливают внимание посетителей и заставляют его ВЧИТЫВАТЬСЯ в текст! 🙂
Давайте разберем все на примере, чтобы ВИЗУАЛЬНО показать важность этой темы.
Пробегитесь по тексту глазами, и постарайтесь что-нибудь запомнить:
Пример 1.
Здесь будет вступление и обычное слово, еще одно обычное слово, а тут самое важное слово. Тут я хочу выделить слово, чтобы вы обратили именно на него внимание. А тут просто обычное предложение. А вот это предложение я бы не стал выделять полностью, а выделил бы только одно слово так, чтобы твое внимание сконцентрировалось на нем. Тут уже пора бы разделить абзацы, чтобы текст был более читабельным. А это самое важное предложение в данном абзаце, но, к сожалению, я не могу его ничем выделить, и, возможно, вы его вообще не заметите и не прочитаете.
Пример 2.
Здесь будет вступление и обычное, еще одно обычное слово, а тут самое важное слово. Тут я хочу выделить слово, чтобы вы обратили именно НА НЕГО внимание.А тут просто обычное предложение.
А вот это предложение я бы не стал выделять полностью, а выделил бы только одно слово, а так, чтобы твое внимание сконцентрировалось на нем.
Тут самое важное предложение А вот это самое важное предложение в данном абзаце, и поэтому его нужно выделить плагином, чтобы его все прочитали и запомнили!
Итак, какой пример нравиться вашим глазам больше?
Мне кажется, что 2-й 🙂
А теперь перейдем непосредственно к плагину для подсветки блоков и предложений в записях блога.
Плагин называется Special Text Boxes.
Плагин переведен на русский язык, так что никаких сложностей при установке не возникнет.
Чтобы скачать плагин — кликни на ссылкуСкачать плагин Special Text Boxes
После установки и активации плагина, в панели редактирования у вас появиться НОВАЯ кнопка. Чтобы сделать подсветку текста – нужно сначала выделить текст, после чего нажать на кнопку (либо выделить текст вручную с помощью шпаргалки – см. ниже).
Теперь рассмотрим функционал плагина, и какие блоки с его помощью можно выводить:
Без заголовка – [ stextbox id=»НУЖНЫЙ_ID«]Подсвечиваемый текст[/stextbox]
С заголовком – [ stextbox id=»НУЖНЫЙ_ID» caption=»Заголовок»]Подсвечиваемый текст[/stextbox]
P.S. Уберите пробел перед словом stextbox.
Шпаргалка (сохраните в отдельный файл) — НУЖНЫЙ_ID может принимать следующие значения:
warning – жёлтый блок
alert – красный блок
info – зелёный блок
download – синий блок
black– чёрный блок
grey – серый блоr
custom – настраиваемый блок
ЗаголовокЖелтый блок ЗаголовокКрасный блок ЗаголовокЗеленый блок ЗаголовокСиний блок ЗаголовокЧерный блок ЗаголовокСерый блок ЗаголовокНастраиваемый блок
P.S.S. Единственной проблемой может быть КРАКОЗЯБРА после установки плагина, но этого не нужно боятся, ведь с помощью шпаргалки вы можете выделять текст вручную в меню ВИЗУАЛЬНОГО просмотра.
P.S.S.S. Статья получилась немного цветная, но это всего лишь для наглядности. При написании своих статей на блоге, используйте 2 текстовые цветовые гаммы + плагин Special Text Boxes.
Цитата поста:
Если хочешь доставить удовольствие, научись его получать.