Как сделать блоки внимания в WordPress: лучшие плагины и не только

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

Зачем нужны блоки внимания WordPress

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

Такая функция до сих пор есть практически в каждом редакторе WP, но ранее она предназначалась только для цитат.

Сегодня, помимо «Цитаты», во многих темах, использующих редактор Gutenberg, есть встроенный «Блок внимания».

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

• изменить форму (например, из прямоугольника сделать овал);
• выделить цветом текст и/или фон;
• использовать различные шрифты;
• добавить иконки.

Блоки внимания в WordPress служат разнообразным целям:

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

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

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

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

Лучшие плагины для блоков внимания ВордПресс

Какие же плагины можно использовать для создания блоков внимания ВордПресс? Ниже привожу экспертный обзор ведущих плагинов из официального репозитория WordPress.org.

WPRemark

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

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

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

Даю промокод на скидку:

Жмите, чтобы купить плагин с максимальной скидкой

Ниже приведены примеры того, как можно расположить цветные блоки на странице:

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

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

Special Text Boxes

Special Text Boxes – многоформатный плагин автоматически добавляется в редактор при установке. Если вам нравится тема Metro, то в ней весь функционал плагина используется по умолчанию. С его помощью в тексте можно выделить 7 разных цветных блоков:

• предупреждение;
• внимание;
• информация;
• цитата;
• авторский стиль;
• загрузка файла;
• специальный код.

Уникальные иконки и регулярные обновления делают этот плагин довольно популярным среди пользователей WordPress. Но плагину WPRemark он все-таки сильно уступает.

Shortcodes Ultimate

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

Вебмастер может пользоваться плагином для создания:

• вкладок;
• кнопок;
• блоков внимания;
• слайдеров и каруселей.

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

Доступен на 20 языках, включая русский, и работает на версии WP 4.6 и выше. Для адекватной работы потребуется версия PHP 5.6 и выше.

Simple Note

Simple Note – простой как внешне, так и технически плагин включает пять блоков привлечения внимания:

• информация;
• ошибка;
• предупреждение;
• цитата;
• успешное завершение.

После установки цветные блоки выводятся непосредственно в перечне блоков редактора Гутенберг.

Работает с версиями WordPress от 5.3 и версией PHP 7.0 и выше.

WP-Note 2019

WP-Note 2019 – традиционные пять цветных блоков вызываются при нажатии кнопки в графическом редакторе темы WP. С их помощью легко выделить важные элементы статей и в целом придать тексту более органичный вид.

Плагин имеет русскую и английскую версии, работает на WP 5.0 и выше и PHP от 5.6.

Simple Alert Boxes

Simple Alert Boxes – несмотря на то что в последние пять лет плагин не обновлялся, пользователи продолжают его применять для версий WordPress вплоть до 4.9.20.

Пользовательские настройки 4 блоков внимания (Information, Success, Warning, Danger) могут быть изменены по необходимости.

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

• заполнение цветом;
• кегль и тип шрифта;
• стиль (курсив, полужирный, нижнее подчеркивание).

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

Drop Shadow Boxes

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

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

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

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

Перевод на русский язык отсутствует. Текущая версия плагина работает на версиях WP от 3.0 до 5.9.3.

Stellissimo Text Box

Итальянская разработка. Stellissimo Text Box имеет перевод на английский язык и совместима с WordPress до 4.3.0, что намекает на ее устаревший формат, учитывая, что в настоящий момент уже вовсю функционирует последняя версия 6.0.1.

Шаблоны WordPress со встроенными блоками внимания от WPShop

Помимо востребованного плагина WPRemark, компания WPShop предлагает два ультрасовременных, лаконичных, адаптивных шаблона со встроенными блоками внимания: Root и Reboot.

Тема Root

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

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

Пользовательские блоки в теме Root встроены в редактор.

Всем читателям доступна скидка по промокоду на этот шаблон:

Взять тему Root дешевле

Тема Reboot

Многоцелевая тема Reboot подходит для создания самых разных сайтов: от стильных одностраничников, блогов и новостных порталов до крупных интернет-журналов и агрегаторов. Как и тема Root, она имеет следующие преимущества:

• адаптивность;
• SEO оптимизация;
• легкий, чистый код.

Есть и другие характеристики, благодаря которым Reboot выгодно отличается от своей «старшей сестры»:

• 12 встроенных плагинов, написанных специально под эту тему;
• множество настроенных пресетов;
• богатая сетка главной страницы (встроенный конструктор);
• гибкие настройки карточек постов;
• 12 позиций для размещения рекламного кода;
• 8 блоков внимания.

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

Берите прямо сейчас со скидкой в размере 15%:

Активировать промо на Reboot

Как сделать блоки внимания без плагина

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

• использовать только css и html;
• добавить кнопки в редактор (используя php).

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

• придумайте css-классы для своих блоков внимания;
• пропишите визуальные свойства и путь к иконке в файле стилей style.css;
• напишите свой код или скопируйте его из интернета;
• добавьте вывод кнопок в редактор WordPress через файл functions.php и сохраните;
• в HTML-редакторе WordPress-сайта появятся названия ваших кнопок.

Таким образом, даже без специального плагина вы можете настроить сайт или блог WordPress для показа блоков внимания. Наряду с добавлением отдельных блоков можно модифицировать код блока «Цитата».

В статье разобрала, какими плагинами можно воспользоваться, чтобы создать блоки внимания WordPress. Также хороший результат можно получить с помощью шаблонов, имеющих встроенные блоки. Наконец, есть вариант самостоятельного добавления через css и php-код или модификацию блока «Цитата». Это позволит сделать контент сайта визуально уникальным.

Пожалуйста, оцените материал: