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

/

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

Добавление блоков функций в WordPress с помощью значков

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

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

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

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

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

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

Пример блоков функций на домашней странице веб-сайта на WordPress

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

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

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

Добавление класса CSS для ваших столбцов

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

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

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

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

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

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

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

Создание столбцов блоков функций

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

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

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

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

Добавление значков в блоки функций в WordPress

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

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

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

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

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

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

Блоки функций с маленькими значками и без стиля

Вам нужно будет добавить немного 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 в соответствии с названиями используемых вами значков.

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как добавить новый плагин страницы Facebook в WordPress

Facebook Like Box, также известный как фан-бокс Facebook, стал обязательным элементом для многих веб-сайтов. Недавно Facebook заменил этот виджет новым плагином

Как добавить фавикон в свой блог WordPress

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

Как заблокировать IP-адреса в WordPress

Вы хотите заблокировать определенные IP-адреса от доступа к вашему сайту WordPress? Блокировка IP-адресов используется в качестве решения для блокировки

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

Хотите создать в WordPress калькулятор автокредита или оплаты автомобиля? Если вы работаете в автосалоне, то добавление калькулятора платежей по