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

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

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

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

Для чего нужны блоки внимания на сайтах

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

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

Блоки внимания часто используются на сайтах, так как они:

  • упрощают навигацию по текстовому контенту;
  • обращают внимание пользователя на оставленные ссылки;
  • выделяют спецпредложения в онлайн-магазине;
  • выдают наиболее важную справочную информацию;
  • усиливают call-to-action (призыв к действию);
  • предостерегают от чего-либо (если блок оформлен в виде предупреждения);
  • предлагают подписаться на рассылку или скачать файл.

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

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

Конечно, ни в коем случае не нужно пихать 10 блоков внимания в небольшой текст. Иначе будет обратный эффект – пользователь не будет обращать внимания на них, а статья станет чересчур пестрой.

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

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

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

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

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

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

Чтобы добавить блоки внимания на свой сайт, сделанный на WordPress, необходимо установить плагин или привлечь разработчика, разбирающегося в php и css.

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

В статье далее рассмотрим лучшие актуальные варианты для движка ВордПресс.

WPRemark

wpremark плагин блоков внимания

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

WPRemark (ВПРемарк) – это наиболее популярный и востребованный плагин, который дает возможность добавлять на сайт блоки внимания. Его разработала команда WPShop, которая базируется в России.

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

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

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

И это только небольшой перечень того, что может видоизменить веб-мастер в процессе создания вордпрессовского блока внимания. Если хотите создать уникальное оформление сайта, этот плагин ждет вас. А скидка в 15% станет приятным дополнением к покупке.

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

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

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

WPRemark прекрасно работает как в классическом редакторе, так и в любом другом, в том числе в редакторе блочного типа Gutenberg «Гутенберг». В общем, это лучший вариант из всех, что есть на рынке.

Нравится? Специально для наших читателей у нас есть скидка:

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

Special Text Boxes

special text boxesspecial text boxes примеры текстовых блоков

Special Text Boxes – плагин для добавления блоков внимания, который после установки, как и WPRemark, самостоятельно интегрируется в редактор WordPress. Это очень удобно.

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

Special Text Boxes работает на 16 языках, что тоже можно отнести в копилку плюсов.

При помощи программы легко добавить в текст 7 вариантов блоков:

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

Special Text Boxes часто используют как простую альтернативу блокам, имеющимся в теме, или простому блоку «Цитата», который по умолчанию есть в редакторе самого движка. Это может быть предупреждение, призыв задержать внимание, справочный инфоблок и сообщение о загрузке и блок в пользовательском стиле.

Блоки выглядят не очень современно и чем-то напоминают по стилистике эпоху зарождения интернета.

Shortcodes Ultimate

shortcodes ultimate красивые блоки

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

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

Зато при помощи Shortcodes Ultimate можно создавать:

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

Кроме этого, плагин дает возможность добавить адаптивное видео, что является еще одним преимуществом.

Программа доступна на 20 языках, в том числе на русском.

По совокупности всех вышеперечисленных достоинств плагин Shortcodes Ultimate является одним из лучших среди бесплатных вариантов. Этим объясняется его популярность и количество положительных отзывов.

Simple Note

simple note классные блоки внимания

Simple Note – это бесплатный и одновременно простой плагин, пользоваться которым легко и приятно. Здесь нет большого количества настроек и максимально простой интерфейс.

Программное обеспечение доступно на 3 языках: английском, шведском и, конечно же, русском.

В библиотеке этой всего 5 шаблонов блоков внимания:

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

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

После установки плагина его шаблоны добавятся в общий перечень редактора «Гутенберг».

Если вас устраивает максимально простой плагин с шаблонными блоками внимания, то Simple Note – допустимый вариант.

WP-Note

симпатичные блоки wp-note

wp note example

WP-Note– это еще один плагин с традиционными шаблонами блоков внимания. После установки программного обеспечения, в интерфейсе редактора «ВордПресс» появится отдельная кнопка, нажатие по которой позволяет вставлять блоки внимания в текст.

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

Simple Alert Boxes

simple alert boxessimple alert demo

Simple Alert Boxes – этот плагин уже около 5 лет не обновлялся, поэтому на актуальных версиях движка может работать нестабильно. Какой-либо поддержки при его использовании ждать просто неоткуда, о чем висит предупреждение в самом репозитории.

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

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

Drop Shadow Boxes

drop shadow WP plugin drop shadow boxes в стиле минимализма

Drop Shadow Boxes – одна из самых старых прог на WordPress для добавления блоков внимания.

У нее есть одна особенность – вместо цветного выделения используются тени. Если сайт сделан в стиле минимализм, то такие блоки внимания идеально туда впишутся. При желании затемнение можно и вовсе убрать, а можно отредактировать – сделать теневую составляющую сильнее или слабее.

Есть и другая интересная особенность – блоки внимания можно добавлять по 2 штуки в ряд. Это очень оригинально и интересно. Также можно вставлять созданные программой элементы контента в виджеты сбоку или в футер интернет-страницы.

Последнее важное преимущество – блоки внимания можно добавлять не только в записи (статьи), но и на любые страницы сайта, в том числе в рубрики.

Несмотря на обилие преимуществ, недостатков у Drop Shadow Boxes не меньше.

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

В общем, это оригинальный плагин, но с серьезными недостатками.

Stellissimo Text Box

stelissimo blocks

Stellissimo Text Box – из названия этого attention block плагина становится понятно, что его разработали итальянцы.

В целом это обычное бесплатное программное обеспечение с небольшим количеством шаблонов и минимумом настроек (можно изменить цвет и текст).

Из недостатков особенно бросается в глаза отсутствие русского языка и совместимость с версиями WordPress только до 4.3.0 включительно (сейчас актуальны более поздние версии).

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

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

Компания WPShop разработала не только качественный плагин WPRemark, но и множество других полезных инструментов для пользователей WordPress.

Например, в их портфолио есть несколько классных тем, в которых уже предустановлен функционал блоков внимания. К ним, в частности, относятся Root, Reboot, Cook It, Yelly.

Тема Root

attention в теме root

Шаблон Root является одним из самых популярных и востребованных не только среди продуктов WPShop, но и среди всех конкурентов в ру-сегменте. Часто его описывают как самый «экологичный». И вот почему:

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

Другие преимущества и подробный гид по настройкам Root ищите в отдельной статье. 

Инструменты для добавления блоков внимания уже интегрированы в тему.

attention blocks в редакторе wordpress

блоки внимания root и reboot

Задействовать скидку на тему Root

Но при желании владелец сайта может приобрести лицензию также на WPRemark, так как этот plugin дает больше возможностей и подойдет даже самым придирчивым покупателям.

Тема Reboot

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

Тема «Ребут» идеальна для создания большинства типов интернет-страницы (webpages), начиная от лендинга и заканчивая крупным интернет-журналом.

В целом у этого продукта от WPShop те же характеристики, что и у темы «Рут», но с добавлением конструктора главной и нескольких других интересных фишек:

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

Текстовые блоки внимания можно настроить как угодно и разместить где угодно. Поэтому выгоднее покупать тему Reboot.

типы блоков внимания

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

Активировать скидку на шаблон Reboot

Также читайте: Шаблон Reboot: обзор настроек кастомайзера и оценка всего спектра возможностей.

Тема Cook It

cook it

Как и в других темах от команды WPShop, в кулинарном шаблоне Cook It предусмотрен аналогичный набор универсальных блоков внимания. Он подойдет под большинство задач.

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

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

рецепты в теме cook it
Визуальная разметка рецептов в теме Cook It

Также предусмотрен функционал для добавления рецептов с пошаговыми фото.

Планируете освоить кулинарную нишу? Тогда шаблон Cook It поможет вам быстро стартануть и обогнать конкурентов на виражах. Берите с действующей скидкой:

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

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

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

пример блока
Пример блока, созданного без плагина, только кодом

Чтобы внедрить цепляющие внимание блоки без плагина, необходимо использовать CSS и HTML для стилевого оформления, а затем добавить соответствующие кнопки в редактор «ВордПресс» при помощи php.

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

  1. Придумать CSS-класс для своей разработки.
  2. Прописать свойства его внешнего вида в файле style.css дочерней темы, в том числе указать путь к заранее загруженной в медифайлы иконке, задать внутренние и внешние отступы, рамку, цвет текста и другие параметры шрифта, цвет фона или фоновую картинку.
  3. В крайнем случае можете взять готовый css-код из интернета, но есть риск, что на вашем шаблоне он не будет отображаться так, как нужно, или не получится адаптивным.
  4. Через файл functions.php или бесплатную программу от ВПШоп Profunctions добавить вывод кнопки для созданного блока внимания в WordPress, обернутого, например, в тег <div>.
  5. Проверить, появились ли в HTML-редакторе нужные кнопки.

После этого можно добавлять сформированные блоки внимания в свой контент через редактор движка.

Зачастую использовать программные коды лучше, чем бесплатные плагины. Так как на уже шаблонные и привычные всем блоки внимания посетители сайта не обращают никакого внимания. А CSS и HTML-коды позволяют добавить действительно уникальный фрагмент в текст.

Если же не знаете программирование, рекомендуем рассмотреть платное ПО, в особенности сравнительно новый плагин WPRemark, позволяющий создавать современные и грамотно стилизованные блоки. Он гарантированно не будет заброшен разработчиками.

* Кто еще не догадался, все блоки внимания в этой статье сделаны с помощью именно этого плагина.

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

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