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

блоки внимания вордпресс

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

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

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

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

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

Отрывки прямой речи или высказывания выделялись курсивом и нередко кавычками. Из-за этих ограничений их невозможно было использовать для других целей.

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

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

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

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

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

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

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

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

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

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

Поэтому опытные вебмастера советуют пользоваться блоками внимания WordPress для ведения качественных сайтов на этой платформе.

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

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

Важно: некоторые популярные в прошлом плагины (пример — WP-MFC Blocks) больше не обновляются и исключены из репозитория, поэтому их я не включила в обзор.

WPRemark

wpremark для создания блоков внимания

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

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

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

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

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

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

список в блоках внимания
Красивый список
вопрос-ответ
Вопросы и ответы
достоинства и недостатки
Плюсы и минусы

разное оформление

Плагин совместим с большинством шаблонов и отлично работает как в редакторе Гутенберг, так и в классическом редакторе (в виде шорткода с предпросмотром).

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

отзыв на плагин впремарк

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

Также читайте подробный обзор на этот плагин и гид по настройкам блоков внимания WPRemark.

Special Text Boxes

special text boxes

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

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

примеры special text boxes

Плагин работает на 16 языках, включая русский, на версии WordPress от 5.6 и выше.

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

Shortcodes Ultimate

шорткод ультимат

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

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

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

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

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

Simple Note

simple note

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

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

примеры simple note

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

Simple Note в настоящее время доступен только на 3 языках (английском, русском и шведском).

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

WP-Note 2019

wp-note

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

blocks attention wp note2019

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

Simple Alert Boxes

simple alert

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

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

пример блока simple alert

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

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

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

В отличие от WPRemark, особого выбора иконок в плагине нет и не предвидится.

Drop Shadow Boxes

plugin drop shadow

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

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

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

минималистичный блок внимания

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

Несмотря на совместимость с Gutenberg, плагин работает только в виде шорткода, но своего отдельного блока в самом редакторе не имеет.

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

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

Stellissimo Text Box

stelissimo

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

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

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

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

Тема Root

тема root

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

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

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

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

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

При желании можно загрузить плагин WPRemark от того же разработчика и создавать полностью уникальное визуальное оформление статей.

Тема Reboot

тема reboot

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

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

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

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

примеры блоков в ребуте

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

блоки внимания в шаблоне ребут

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

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

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

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

пример блока внимания
Пример блока внимания, сделанного вручную для детского сайта

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

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

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

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

Внимание: для размещения перед текстом иконки помещают в селектор класса :before.

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

Разработчики рекомендуют не ограничиваться базовыми настройками, так как многие пользователи привыкли к классическому внешнему виду блоков и не всегда обращают на них внимание. Поэтому и код «Цитаты», а тем более код блоков внимания следует персонализировать и адаптировать под себя.

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

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

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

По профессии инженер. Выпускница кафедры "Компьютерные технологии управления". Создаю сайты на WordPress с 2009 года.
Получай полезные материалы удобным способом!
Добавить комментарий