Как сделать блок с преимуществами для сайта на WordPress: все способы и примеры оформления
Чтобы контент работал, он должен быть хорошо оформлен. Это актуально для любых типов ресурсов, а особенно для продающих товары и услуги. Блок с преимуществами для WordPress сайтов является обязательным при оформлении посадочных страниц.
В этой статье разберу основные способы создать такой элемент, чтобы он выглядел эффектно и привлекал внимание.
Для чего нужен на вашем сайте блок с преимуществами
Полотна текстов в настоящее время уже не работает с точки зрения продажи товара или услуги клиенту. Посетитель сайта хочет быстро понять, что предлагает компания или магазин, и почему ему нужно сделать выбор в их пользу. Здесь и помогает блок с преимуществами.
Такой информационный элемент должен иметь привлекательный внешний вид и являться адаптивным. Другими словами, он должен отлично выглядеть на всех устройствах. Тогда он позволит донести заложенную в него информацию и увеличит конверсию.
Практика показывает, что наличие блока с преимуществами дает буст поведенческим факторам на сайте: повышает время просмотра страниц, глубину, взаимодействие с активными элементами и прочие показатели. А это позитивно сказывается не только на конверсии, но и на SEO.
Как сделать блок с преимуществами на WordPress: все способы
Есть множество способов вывести плюсы компании на странице сайта с ВордПресс. Это реально сделать, как с помощью встроенных инструментов CMS, так и за счет дополнительных плагинов или небольшого кусочка программного кода. Рассмотрю самые актуальные варианты.
Некоторые темы WP предлагают встроенные решения для оформления преимуществ. Поскольку на рынке представлены тысячи разнообразных шаблонов, данный вариант рассматриваться в рамках материала не будет.
В конструкторе Elementor
Многие зарубежные темплейты имеют встроенный конструктор. В 90% им является Elementor. В нем есть огромное количество готовых пресетов, которые легко вывести на сайте, в том числе для создания блока с достоинствами компании.
Количество доступных компонентов меняется от версии Elementor. В платном варианте гораздо больше заготовок.
Перейдите в редактирование страницы или записи при помощи Elementor и выберите структуру области. Для этого нужно нажать на “+”.
Чаще всего рассматриваемый блок состоит из 3-4 плюсов, укажите нужный макет.
После перенесите из раздела “Общие” шаблоны “Блок с иконкой” — они лучше всего подходят для оформления преимуществ. Заполнив их, можно получить красиво оформленный элемент на сайте.
Готовый пример:
Делать рассматриваемый в статье блок при помощи Elementor имеет смысл только тогда, когда сам сайт работает на этом конструкторе.
В WordPress-редакторе блоков Gutenberg
Встроенный в WordPress блочный редактор Gutenberg достаточно функциональный, что позволяет использовать его для создания фрагмента с преимуществами. Но на вывод такого элемента с нуля нужно потратить немало времени. Поэтому я рекомендую установить поверх библиотеку дополнительных шаблонов.
Вариант от компании Spectra базово является бесплатным и обладает многими встроенными паттернами, которые дают простор для реализации разных элементов, в том числе — блока преимуществ.
После установки Spectra в редакторе страниц Gutenberg появится кнопка “Наборы шаблонов” — нажмите на нее.
Здесь в разделе Patterns можно найти немало готовых вариантов оформления, которые легко использовать для вывода достоинств фирмы, товара, услуги. Оптимальные варианты находятся в рубриках Image and Text, Features и Testimonials. Выберите нужный паттерн и нажмите Import.
Теперь остается добавить изображения (есть множество встроенных иконок) и текст с преимуществами. Правка происходит в классическом Gutenberg. Легко настроить цвета, размеры, отступы и другие параметры.
Готовый пример:
Плюсы и минусы работы с Gutenberg известны каждому вебмастеру, который знаком с WordPress. Если на портале уже используется данный редактор, то оформить блок преимуществ с его помощью будет легко и удобно. Но он иногда конфликтует с другими конструкторами. Также есть риск при его использовании сломать верстку страниц, оформленных в обычном классическом редакторе ВП.
В плагине Expert Review
Премиальное расширение Expert Review создано для повышения качества оформления контента. В нем есть множество различных инструментов. Данный модуль разумно использовать и чтобы отобразить преимущества.
После установки Expert Review на сайте в текстовом редакторе появится кнопка “Отзыв эксперта”. Нажав на нее, перейдите в пункт “Добавить блок эксперта”.
Сверху установите цветовое оформление. Можно выбрать из списка доступных, либо настроить свой собственный стиль в параметрах расширения.
Далее выберите один из доступных инструментов. Для оформления преимуществ лучше всего подойдет “Плюсы и минусы”. В левой колонке укажите плюсы, в правой минусы (можно не указывать). Для каждой колонки при необходимости также можно задать заголовок.
Мне нравится применять расширение Expert Review для демонстрации преимуществ компании на фоне конкурентов.
В результате, получится минималистичное красивое перечисление выгодных отличий.
Готовый пример:
Чтобы быстро выводить созданный элемент на разных страницах, разработчики плагина предусмотрели пресеты. Создав блок, сохраните его в качестве шаблона, после чего останется нажать всего пару кликов, чтобы его вывести.
Само расширение Expert Review платное, но вывод плюсов-минусов — это лишь одна из его многочисленных функций. Через него легко сформировать комментарий эксперта, блок рейтинга, вопросы-ответы, опросы и многое другое. Фактически это универсальное решение для повышения ценности контента на сайте.
При правильном использовании Expert Review существенно повысит процент задержавшихся пользователей на сайте, что зачастую приводит к увеличению конверсии.
Промокод на Expert Review
С помощью WPRemark
Еще одним удобным плагином, с помощью которого я бы рекомендовал организовать вывод достоинств компании, является WPRemark. Этот модуль позиционируется в качестве решения для создания блоков внимания на сайте. С их помощью имеет смысл вывести и преимущества.
После покупки лицензии WPRemark на сайте разработчиков, установки модуля и активации ключа, отразить преимущества компании, товара или услуги получится максимально быстро. Проще всего это сделать через предустановленные в плагин пресеты.
Установив модуль к себе на портал, перейдите в раздел “Пресеты” в его настройках.
Откроется страница, где представлено огромное количество уже подготовленных в разных дизайнах блоков внимания. Выберите понравившиеся варианты и нажмите около них “Загрузить”.
После этого выбранные пресеты добавятся в список быстрого доступа расширения. При оформлении записи, страницы или товара на сайте, нажмите на панели визуального редактора кнопку WPRemark.
Далее остается выбрать шаблон, внести изменения в текст, иконку, цвета и другие параметры, после чего вставить его в запись.
В результате, несколькими кликами можно оформить красивейший блок преимуществ, ниже представлен наглядный пример.
Готовый пример:
WPRemark максимально удобен для оформления различных блоков внимания на сайте.
Если говорить о цене, то у WPRemark фактически нет конкурентов. Это российская разработка студии WPShop, которая стоит гораздо дешевле зарубежных аналогов. По кнопке ниже можно еще и получить 15% скидку на продукт.
Приобрести WPRemark выгодно
Через кастомные CSS-стили
Оформление блока преимуществ на сайте можно реализовать и при помощи CSS-стилей. Чтобы получить красивый результат, нужно иметь некоторые навыки веб-разработки: работы с CSS и HTML.
Я предлагаю базу для оформления такого блока на сайте при помощи CSS стилей.
Код CSS:
.benefits {
display: flex;
justify-content: space-between;
margin: 8rem 0;
text-align: center;
}
.benefit {
flex: 1;
padding: 1rem;
text-align: center;
background-color: #c107c10;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.benefit h3 {
margin-top: 0;
margin-bottom: 1rem;
}
Код HTML:
<section class="benefits">
<div class="benefit">
<h3>Доставка</h3>
Уже через 15 минут вы получите свой товар, курьер вручит его в руки!
</div>
<div class="benefit">
<h3>Профессионализм</h3>
Мы успешно работаем уже более 30 лет в данной области бизнеса!
</div>
<div class="benefit">
<h3>Гарантия</h3>
Если вас не устроит качество, то мы вернем незамедлительно деньги!
</div></section>Приведенный выше код CSS нужно разместить в стилях шаблона вашего портала, а код HTML непосредственно на странице, где планируется выводить блок преимуществ.
Готовый пример:
Элемент удастся сделать гораздо более красочным, если вы умеете работать с CSS, HTML и JS. В ином варианте лучше выбрать один из способов, которые описаны выше.
Я рассмотрел в этой статье разные способы вывести блок с преимуществами на сайте WordPress. На мой взгляд, проще всего это делать при помощи WPRemark, который стоит недорого и позволяет красиво подавать информацию.
-15% на WPRemark
Другие методы тоже рабочие, имеют свои преимущества и недостатки. Выбирайте оптимальный для себя вариант, ориентируясь на потребности и наличие специализированных навыков у вас или менеджера, который занимается оформлением контента на портале.
Пожалуйста, оцените материал:
