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

Блок с преимуществами WordPress сайта

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

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

Для чего нужен на вашем сайте блок с преимуществами

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

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

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

Как сделать блок с преимуществами на WordPress: все способы

Есть множество способов вывести плюсы компании на странице сайта с ВордПресс. Это реально сделать, как с помощью встроенных инструментов CMS, так и за счет дополнительных плагинов или небольшого кусочка программного кода. Рассмотрю самые актуальные варианты.

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

В конструкторе Elementor

Плагин Elementor для WordPress

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

Количество доступных компонентов меняется от версии Elementor. В платном варианте гораздо больше заготовок.

Перейдите в редактирование страницы или записи при помощи Elementor и выберите структуру области. Для этого нужно нажать на “+”.

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

Чаще всего рассматриваемый блок состоит из 3-4 плюсов, укажите нужный макет.

Настройка макета Elementor

После перенесите из раздела “Общие” шаблоны “Блок с иконкой” — они лучше всего подходят для оформления преимуществ. Заполнив их, можно получить красиво оформленный элемент на сайте.

Интерфейс Элементора ВП

Готовый пример:

Оформление преимуществ на Elementor

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

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

В WordPress-редакторе блоков Gutenberg

Spectra для Gutenberg

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

Вариант от компании Spectra базово является бесплатным и обладает многими встроенными паттернами, которые дают простор для реализации разных элементов, в том числе — блока преимуществ.

После установки Spectra в редакторе страниц Gutenberg появится кнопка “Наборы шаблонов” — нажмите на нее.

Spectra панель управления

Здесь в разделе Patterns можно найти немало готовых вариантов оформления, которые легко использовать для вывода достоинств фирмы, товара, услуги. Оптимальные варианты находятся в рубриках Image and Text, Features и Testimonials. Выберите нужный паттерн и нажмите Import.

Gutenberg редактор

Теперь остается добавить изображения (есть множество встроенных иконок) и текст с преимуществами. Правка происходит в классическом Gutenberg. Легко настроить цвета, размеры, отступы и другие параметры.

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

Готовый пример:

Преимущества на Gutenberg + Spectra

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

В плагине Expert Review


Expert Review WPShop

Премиальное расширение Expert Review создано для повышения качества оформления контента. В нем есть множество различных инструментов. Данный модуль разумно использовать и чтобы отобразить преимущества.

После установки Expert Review на сайте в текстовом редакторе появится кнопка “Отзыв эксперта”. Нажав на нее, перейдите в пункт “Добавить блок эксперта”.

Expert Review для WordPress

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

Выбор цветовой гаммы Expert Review

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

Настройка плюсов и минусов

Мне нравится применять расширение Expert Review для демонстрации преимуществ компании на фоне конкурентов.

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

Готовый пример:

Expert Review пример вывода преимуществ

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

Само расширение Expert Review платное, но вывод плюсов-минусов — это лишь одна из его многочисленных функций. Через него легко сформировать комментарий эксперта, блок рейтинга, вопросы-ответы, опросы и многое другое. Фактически это универсальное решение для повышения ценности контента на сайте.

При правильном использовании Expert Review существенно повысит процент задержавшихся пользователей на сайте, что зачастую приводит к увеличению конверсии.

Промокод на Expert Review

С помощью WPRemark


WPRemark от WPShop

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

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

Установив модуль к себе на портал, перейдите в раздел “Пресеты” в его настройках.

Пресеты в WPRemark

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

Загрузить пресет

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

Панель визуального редактора

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

Настройка блока внимания WPReview

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

Готовый пример:

WPReview преимущества

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

Достоинства:
Полная адаптивность.
Моментальная скорость загрузки, отсутствие тяжелых CSS или JS.
Множество готовых пресетов для разных целей.
Простейшая кастомизация, которая не требует особых навыков.
Более 200 уникальных иконок в комплекте.
Поддержка редактора Гутенберг.
Возможность вставить блоки внимания (или иконки) в любом месте при помощи шорткодов.
Низкая стоимость.

Если говорить о цене, то у 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

Элемент удастся сделать гораздо более красочным, если вы умеете работать с CSS, HTML и JS. В ином варианте лучше выбрать один из способов, которые описаны выше.

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

-15% на WPRemark

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

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

Специализируюсь на разработке и оптимизации уникальных веб-решений для клиентов различных отраслей. Имею большой опыт работы с WordPress, которым активно делюсь с читателями.
Получай полезные материалы удобным способом!
Добавить комментарий