Уфф…. Наконец то я выделил время написать статью. Новогодние праздники подошли к концу, пора продолжать работать над блогом. В этом посте я решил поговорить о красивых текстовых блоках (боксах) , которые можно использовать в статьях для выделения важной информации и не только.
Различные текстовые блоки все чаще и чаще встречаются на многих сайтах. Их можно использовать чтобы привлечь внимание читателя на определенные части статьи.
Четыре блока различного цвета (красный, оранжевый, зеленый, синий)
Блоки для отображения информации определенного типа
Рядом с текстом можно поставить любую картинку которая будет подходить к содержимому блока.
Необычные списки
Так же блоки можно использовать для не стандартных списков, красивые цифры могут улучшить вид статьи, если вы расписываете что-либо по шагам то это кок раз для вас, такие списки лучше видно по сравнению с обычными списками.
Так же можно использовать для создания красивых заголовков.
Как применять различные блоки мы определились.
А теперь как начать использовать такие блоки?
Для красивых текстовых блоков в статьях, мы будем использовать плагин Special Text Boxes
Конечно есть и другие плагины например WP-Note, для создания текстовых блоков, но у этого множество настроек.
И так находим в поиске плагинов наш плагин и устанавливаем. Либо качаем с сайта WordPress Special Text Boxes и кладем в папку с плагинами.
После активации плагина должен появиться пункт STB
В нем есть множество параметров выберите те что вам необходимы!
Обратите внимание, что в левом углу при выборе цвета есть кнопка, чтобы можно задавать конкретные значения!
После того как настроите стили блоков под свой сайт, можете использовать их в статьях.
Для того чтобы поместить текст в уже созданные блоки нужно в режиме «Визуально» его выделить после чего на панели инструментов в визуальном режиме выделиться розовая кнопка, нажимаете ее и выбираете айдишник созданного ранее блока, так же можете задать дополнительные параметры, после чего нажимаете «вставить» теперь ваш текст будет между шорткодами.
Вот так вот просто можно выделить определенный текст в статье.
Казалось бы все, но я решил разместить параметры которые использовал для своих текстовых блоков, мало ли кто-то захочет сделать такие же. Я использовал чисто CSS, если вы будите использовать javascript, то просто сделаете тоже самое.
Параметры для блоков (красный, оранжевый, зеленый, синий)
Далее я сделал небольшую правку в файле stb-core.css который лежит /wp-content/plugins/wp-special-textboxes/css
В стиль .stb-image-big .stb-icon img
Добавил строчку margin: 5px 0px 0px 5px; для того чтобы сместить немного иконку.
Как и любой плагин Special Text Boxes нагружает сервер, поэтому возможно лучшим будет написание собственного плагина для вставки текстовых блоков, не такого гибкого по настройкам, но зато менее ресурсоемкого. Надеюсь данная статья вам будет полезной.
