БЛОГ 2410

Как добавить блоки с иконками в WordPress

Как добавить блоки с иконками в WordPress
Обсудим ваш проект?

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

Поделиться статьей

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

Добавление блоков функций в WordPress с помощью значков
Добавление блоков функций в WordPress с помощью значков Изображение с сайта wpbeginner.com

Что такое блоки со иконками?

Большинство людей, посещая веб-сайты, на самом деле их не читают. Как люди, мы становимся профессиональными сканерами.

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

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

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

Вот пример с нашего сайта OptinMonster:

Пример блоков функций на домашней странице веб-сайта на WordPress
Пример блоков функций на домашней странице веб-сайта на WordPress Изображение с сайта wpbeginner.com

Добавление блоков с иконками на главную страницу WordPress

Первое, что вам нужно сделать, это установить и активировать плагин Advanced WP Columns. После активации вам необходимо зайти в Настройки »Расширенные столбцы WP, чтобы настроить плагин.

Просто прокрутите вниз до параметра «Класс столбца» и введите рядом с ним mycolumns. Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки.

Добавление класса CSS для ваших столбцов
Добавление класса CSS для ваших столбцов Изображение с сайта wpbeginner.com

Затем вам понадобится плагин для вставки красивых значков SVG в поля функций. Установите и активируйте плагин WP SVG Icons.

Теперь вы готовы создавать свои блоки функций.

Начните с редактирования страницы, на которой вы хотите добавить блоки функций.

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

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

Расширенные столбцы и кнопки значков svg в редакторе сообщений
Расширенные столбцы и кнопки значков svg в редакторе сообщений Изображение с сайта wpbeginner.com

Сначала вам нужно нажать кнопку Advanced WP Columns. Появится всплывающее окно, в котором вам нужно нажать «Пусто», а затем выбрать количество столбцов, которые вы хотите добавить.

Создание столбцов блоков функций
Создание столбцов блоков функций Изображение с сайта wpbeginner.com

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

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

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

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

Добавление значков в блоки функций в WordPress
Добавление значков в блоки функций в WordPress Изображение с сайта wpbeginner.com

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

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

[wp-svg-icons icon = "rocket" wrap = "span"]

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

Когда вы закончите, просто нажмите кнопку «Обновить», чтобы сохранить страницу.

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

Блоки функций с маленькими значками и без стиля
Блоки функций с маленькими значками и без стиля Изображение с сайта wpbeginner.com

Вам нужно будет добавить немного CSS, чтобы решить эту проблему. Просто добавьте этот фрагмент CSS в таблицу стилей своей темы или дочерней темы.

span.wp-svg-rocket.rocket {
font-size:100px;
}
span.wp-svg-cloud.cloud {
font-size:100px;
}
span.wp-svg-headphones.headphones {
font-size:100px;
}
.mycolumns {
border:1px solid #eee;
min-height:250px;
padding-top:20px !important;
}

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

блоки функций с правильным стилем и большими значками
блоки функций с правильным стилем и большими значками Изображение с сайта wpbeginner.com

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

Контакты
Как добавить блоки с иконками в WordPress | Блог 2410

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее