Блоки внимания на сайте WordPress: как сделать и вывести на странице

Для сайтов на движке WordPress часто нужно создать привлекательные блоки внимания – небольшие фрагменты информации, которые отличаются от основного стиля оформления. Их цель — обратить на себя внимание посетителей, отсюда и название.

Что это дает и каким образом это реализовать на ВордПресс, читайте дальше.

Для чего можно использовать

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

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

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

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

Одним из наиболее интересных программных расширений для WP можно назвать плагин WPRemark. Именно его рассмотрю в качестве основного примера.

WPRemark

обзор wpremark plugin

Этот инструмент от команды WPShop подойдёт для всех.

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

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

WPRemark максимально гибкий по функционалу. В нём можно настроить практически всё, что имеет отношение к тексту: цвет фона, цвет текста, вид рамки, подбор уникальной тени, тематическую иконку, изменение шрифта и многое другое.
Программным кодом здесь пользоваться не придется, так как плагин сам сгенерирует блок внимания по заданным в настройщике параметрам.
Отдельного внимания заслуживают иконки. Для удобства предусмотрено более 200 вариантов, и со дня на день грядет очередное обновление с несколькими десятками новинок.
Иконки – основная «фишка»

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

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

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

Если кому-то из пользователей WPRemark потребуются какие-либо еще иконки, он всегда может обратиться в техподдержку WPShop с просьбой нарисовать нужный вариант. Создатели рассматривают все предложения и постепенно реализуют.

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

Дарю промокод: Скидка -15% на WPRemark

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

Все блоки внимания в этой статье оформлены именно с помощью этого плагина.

Special Text Boxes

special text boxes

Начну с плагина Special Text Boxes.

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

Simple Alert Boxes

simple alert boxes

Как и другие бесплатные плагины, Simple Alert Boxes предоставляет минимум вариантов оформления блоков внимания.

Хотя плюсы все-таки имеются:
простота использования;
минимальная работа с кодом;
малый размер плагина.
Но минусы, на мой взгляд, перекрывают все:
давно не обновлялся;
мало функционала;
доступен только английский язык.

Drop Shadow Boxes

drop shadow boxes

С Drop Shadow Boxes дела обстоят несколько лучше, согласно высокой оценке пользователей (97 %).

Безусловные плюсы:
дружелюбный интерфейс;
плагин идеален для оформления цитат;
широкая кастомизация.

Как и предыдущие бесплатные WordPress-утилиты по созданию блоков внимания, не поддерживает русский язык, а также требует работы с программным кодом.

Stellissimo Text Box

stellissimo plugin

Недостатки у Stellissimo Text Box общие для всей группы подобных плагинов, за исключением WPRemark.

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

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

Simple Note

simple note

Простенький плагин Simple Note позволяет выводить на сайте блоки внимания без необходимости вмешиваться в код напрямую.

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

Помимо минимального числа настроек, есть еще одна серьезная недоработка: красиво оформить можно только текст.

Shortcodes Ultimate

shortcode ultimate
Примеры блоков «Заметка» и «Цитата»

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

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

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

WP-Note

wp note

WP-Note от alado удобен и прост в использовании. Но массовую популярность не приобрел: в репозитории WordPress значится всего 400+ активных установок. Это и понятно: в плагине крайне мало возможностей по сравнению с другими подобными плагинами.

Периодически возникают новые решения для WordPress, а уже существующие исчезают. Закрылись плагины WP-VFC Blocks и WP Special Textboxes. Официальный сайт первого недоступен, а вместо второго поиск предлагает другое решение со схожим названием, которое я упоминала выше, — Special Text Boxes.

Возможности премиум-шаблонов

У платных продуктов выше шансы «удержаться на плаву». Важно понимать, что зачастую программное обеспечение класса premium имеет преимущества перед бесплатными по части качества исполнения, длительной поддержки и качественного справочного раздела.

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

Yelly

Основная задача данного шаблона — помощь в распространении информации через социальные сети.

блоки внимания в теме yelly

На промо-сайте Yelly можно ознакомиться с примерами некоторых элементов, а также посмотреть на специальную демонстрационную веб-страницу. Эта WP-тема уже активно используется на более чем 4500 сайтах.

Помимо блоков внимания, Yelly содержит следующие интересные элементы:

  • Кнопки «Поделиться» уже встроены в тему. Нет необходимости в подключении дополнительных библиотек, скриптов и т. п. Можно легко менять положение кнопок и акцентировать внимание на главном элементе. Также есть возможность встраивания в картинки или фотографии на сайте.
  • Заметная полоса при прокрутке страницы. Довольно распространённый и эффективный метод привлечения внимания, который сегодня можно увидеть на многих сайтах.
  • Интегрированная социальная плашка для YouTube-роликов для наращивания пользовательских репостов.

Взять Yelly выгодно

Cook It

cook it attention

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

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

cook it recipe

Cook It по лучшей цене

Читайте подробный обзор топовой кулинарной темы WordPress на русском языке.

Root

В Root имеется достаточно вариантов по созданию блоков внимания.

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

reboot root att block

Также контент-менеджер вашего проекта может создавать и выводить в тексте спойлеры (небольшие элементы, при нажатии на которые открывается дополнительная информация), цветные панели с текстом, стилизовать таблицы и списки (нумерованные либо маркированные).

Активировать промокод на знаменитый шаблон

Инструкцию по настройкам шаблона Root с полным разбором всего функционала найдете по ссылке.

JournalX

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

выделенные блоки в Journalx

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

Приобрести JournalX по акции

Reboot

reboot blocks wp
Пример блоков внимания в шаблоне

При помощи SEO шаблона Reboot с отличными возможностями по комплексному оформлению статей предоставляет пользователю возможность использовать 3 разных способа привлечения внимания: выделенный цветом текст, цветные панели с иконками в 8 вариантах исполнения, панель «Поделиться» с несколькими ссылками на социальные сети.

Если еще не знакомы с этой замечательной и быстрой темой:

скорее берите Reboot со скидкой

Bono

Отличное решение с поддержкой WooCommerce, если вам необходимо создать онлайн-магазин. В теме Bono есть всё, что нужно для запуска интернет-бизнеса.

градиентный блок внимания в bono

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

Шаблон Bono для интернет-магазина по акционной цене

Создание блоков кодом

При создании кода для блоков внимания самостоятельно вам потребуются знания html, php и css. Рекомендую усвоить несколько правил, которые помогут любому кодеру:

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

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

Ольга/ автор статьи

По профессии инженер робототехники. Больше 10 лет назад программирование C++ было полностью вытеснено из моего сердца сайтами на WordPress.

Понравилась статья? Поделиться с друзьями:
WordPress Plus