Как добавить иконку на сайт WordPress (3 бесплатных плагина)

Хотели бы добавить иконку WordPress на веб-сайт? Или блок возможностей, как их иногда называют? Блоки с иконками – это главный элемент дизайна, который показывает особенности продукта, услуги, навыки и многое, что должно привлечь внимание.

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

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

Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

Вы узнаете, как изменить окно значков, используя три разных способа, все – бесплатные:

  1. Плагин для конструктора страниц Elementor.
  2. Родной редактор блоков WordPress.
  3. Старый «классический» редактор WordPress(TinyMCE).

Как добавить иконку с Elementor

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

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

Для начала:

  1. Установите и активируйте бесплатный плагин Elementor с WordPress.org.
  2. Откройте редактор WordPress для поста или страницы, куда вы хотели бы добавить значок.
  3. Нажмите кнопку «Редактировать при помощи Elementor», чтобы запустить визуальный интерфейс.

В интерфейсе Elementor вы увидите предварительный просмотр содержимого справа и боковую панель слева. Чтобы добавить блок, найдите «иконку» на боковой панели, а далее перетащите виджет «Иконка» на предварительный просмотр:

Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

Как правило, вы планируете отобразить поля ввода значков в сетке определенного типа. Нажмите на значок плюса и выберите необходимое число столбцов. Далее вы можете добавить пару виджетов Icon Box, чтобы создать такой эффект:

Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

В параметрах виджета Icon Box на боковой панели вы можете:

  • Выбрать разные значки из Font Awesome.
  • Настроить текст.
  • Связать блок с иным.
  • Настроить все настройки стиля и макета.
Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

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

Смотрите также:

Сравнение лучших конструкторов страниц и тем для WordPress.

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

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

Данные блоки могут без проблем добавить значок в обычный контент. Если вы объедините их с блоком «Столбцы», то сможете создать собственный раздел возможностей.

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

В этом уроке будем использовать использовать бесплатный плагин Ultimate Addons for Gutenberg, так как он самый популярный и от того же разработчика, что и популярная тема Astra.

Тем не менее можем порекомендовать и иные плагины:

  • Getwid.
  • Gutentor.
  • GutenBee.
  • Ultimate Blocks(с блоком «Styled Box»).

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

Чтобы начать, установите и активируйте бесплатный плагин Ultimate Addons for Gutenberg(или любой другой плагин, который вы выбрали) с WordPress.org.

Откройте редактор записи или страницы, куда хотели бы добавить блок, и щелкните значок «плюс». Откроется блок вставки блоков. Далее выполните поиск «Info Box»:

Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

Сейчас у вас есть значок, и чтобы:

  • изменить текст, нажмите на блок и введите текст.
  • изменить значок, цвета и иные элементы дизайна, можете легко использовать боковую панель «Блок».
Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

Если вы планируете добавить пару блоков значков в сетку, вы можете вложить их в собственный блок Columns. Ultimate Addons for Gutenberg также содержит собственный блок столбцов, который дает больше гибкости под названием «Расширенные столбцы»:

Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

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

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

После того, как вы установите и активируете плагин, перейдите в Service Box → Add New Service Box на админ панели.

Там вы можете легко выбирать между двумя макетами в бесплатной версии и между многими – в Pro. Ниже вы можете изменить содержимое и значок для каждого поля ввода. Плагин использует для ваших иконок Font Awesome, что дает большую гибкость.

Чтобы изменить цвета и стиль блоков, используйте параметра на боковой панели:

Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

Ниже вы увидите короткий код, который можно добавить в любое место на веб-сайте:

Как добавить иконку на веб-сайт WordPress(3 бесплатных плагина)

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

Вы узнали три бесплатных метода(и даже больше), как добавить иконку на веб-сайт WordPress.

  • Elementor – лучший вариант, если нужна полная гибкость дизайна как для панели значков, так и для всего остального контента. Он идеально подходит для целевых и иных важных страниц.
  • Ultimate Addons for Gutenberg – лучший вариант для работы в новом редакторе блоков WordPress.
  • Service Box Showcase – хороший вариант, если вы все ещё используете классический редактор TinyMCE и не планируете использовать Elementor. Он не такой гибкий, как предыдущие два плагина.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *