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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WPRemark

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

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

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

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

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

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

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

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

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

Special Text Boxes

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

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

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

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

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

Shortcodes Ultimate

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

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

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

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

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

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

Simple Note

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

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

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

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

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

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

WP-Note

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

Simple Alert Boxes

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

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

Drop Shadow Boxes

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

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

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

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

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

Stellissimo Text Box

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

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

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

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

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

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

Тема Root

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

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

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

 

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

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

Тема Reboot

 

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

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

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

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

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

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

Тема Cook It

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

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

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

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

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

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

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

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

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

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

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

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

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