Многим нравятся мультиколоночные блоки с преимуществами на промостраницах плагинов и шаблонов WPShop. Клиенты часто задают вопрос, как они реализованы. На официальном сайте блоки сделаны с помощью кода css+php.
Но далеко не у всех есть навыки программирования или возможность нанять кодера под эту задачу. Поэтому сегодня покажу, как можно сделать такой блок преимуществ с помощью плагина WPRemark и блочного WordPress-редактора Gutenberg.
Инструкция: как сделать трехколоночный блок преимуществ
Если у вас на сайте установлен плагин блоков внимания WPRemark, просто повторите описанный здесь алгоритм по шагам:
1. Если у вас отключен блочный редактор Gutenberg, включите его.
2. Создайте новую запись или страницу.
3. В списке блоков Гутенберг (по умолчанию он занимает левую часть экрана) найдите колонки и выберите формат отображения.
4. В нашем случае в редакторе появятся три пустые колонки.
5. Щелкните по одной из колонок и найдите в списке блоков WPRemark.
6. Внутри выбранной колонки отобразится блок внимания с настройками по умолчанию. Их можно менять для каждого созданного блока (правая часть экрана).
7. Задайте нужные вам параметры оформления для иконки, фона и заголовка, введите в блок внимания необходимый текст.
8. Повторите пункты 4-6 для оставшихся колонок.
Ваш блок с преимуществами готов. Сравните с оригиналом, размещенном на сайте WPShop, и найдите 10 отличий 🤩.
Если такой блок нужен вам не внутри записи, а, например, в сайдбаре, футере сайта или на главной странице, выберите блок с преимуществами целиком и нажмите «Копировать».
Код html+css только что созданного вами блока можно будет вставить непосредственно в редактор вашего шаблона или, как вариант, в HTML-область конструктора главной страницы (если вы используете тему с таким функционалом, например Reboot).
Как видите, ничего сложного в создании блока с преимуществами на WordPress нет. И совсем не обязательно подключать Elementor. Достаточно плагина WPRemark.