Красивые текстовые блоки в статьях

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

Различные текстовые блоки все чаще и чаще встречаются на многих сайтах. Их можно использовать чтобы привлечь внимание читателя на определенные части статьи.

Четыре блока различного цвета (красный, оранжевый, зеленый, синий)

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

Блоки для отображения информации определенного типа

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

Рядом с текстом можно поставить любую картинку которая будет подходить к содержимому блока.

Необычные списки

namber

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

Так же можно использовать для создания красивых заголовков.


 Как применять различные блоки мы определились.

А теперь как начать использовать такие блоки?

 Для красивых текстовых блоков в статьях, мы будем использовать плагин Special Text Boxes

screenshot-4

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

И так находим в поиске плагинов наш плагин и устанавливаем. Либо качаем с сайта WordPress Special Text Boxes и кладем в папку с плагинами.

После активации плагина должен появиться пункт STB

stb

В нем есть множество параметров выберите те что вам необходимы!

Изучите возможности данного плагина подробнее, чтобы подстроить его под свой блог!

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

stb1

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

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

stb2

Вот так вот просто можно выделить определенный текст в статье.


Казалось бы все, но я решил разместить параметры которые использовал для своих текстовых блоков, мало ли кто-то захочет сделать такие же. Я использовал чисто CSS, если вы будите использовать javascript, то просто сделаете тоже самое.

Параметры для блоков (красный, оранжевый, зеленый, синий)

Блок внимание (красный блок).  Цвет фона и цвет фона заголовка везде указываем #f2dede . Цвет окантовки:#ebccd1 . Цвет текста #a94442 
Оранжевый блок Цвет фона и цвет фона заголовка везде указываем #fcf8e3. Цвет окантовки:#faebcc. Цвет текста #8a6d3b
Зеленый блок Цвет фона и цвет фона заголовка везде указываем #dff0d8 . Цвет окантовки:#d6e9c6 . Цвет текста #3c763d
Синий блок Цвет фона и цвет фона заголовка везде указываем #d9edf7 . Цвет окантовки:#bce8f1 . Цвет текста #31708f

Далее я сделал небольшую правку в файле stb-core.css который лежит /wp-content/plugins/wp-special-textboxes/css

В стиль .stb-image-big .stb-icon img

Добавил строчку margin: 5px 0px 0px 5px; для того чтобы сместить немного иконку.

Скачать архив с иконками. Распакуйте, залейте на сервер и укажите пути.

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

А вы используете специальные текстовые блоки в своих статьях?