Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

Бажаєте додати іконку WordPress на свій сайт? Або блок функцій, як їх іноді називають? Блоки з іконками – це головний елемент дизайну, який показує особливості вашого продукту, послуги, навички та багато що має привернути увагу.

У цьому пості ви дізнаєтесь, як додати гнучке поле значків на ваш WordPress сайт без коду. Ви зможете легко вибрати свій варіант із сотень іконок та налаштувати текст на свій смак.

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Якщо ви не впевнені, про що йтиметься, ось короткий приклад типу поля значків, яке ви зможете створити на момент закінчення цього уроку:

Ось короткий приклад типу поля значків

Ви дізнаєтеся, як налаштувати вікно значків, використовуючи три різні методи, всі – безкоштовні:

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

Як додати іконку з Elementor

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

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

Для початку:

  1. Встановіть та активуйте безкоштовний плагін Elementor з WordPress.org.
  2. Відкрийте редактор WordPress для поста або сторінки, куди ви бажаєте додати свій значок.
  3. Натисніть кнопку «Редагувати за допомогою Elementor», щоб запустити візуальний інтерфейс.

В інтерфейсі Elementor ви побачите попередній перегляд вашого контенту праворуч та бічну панель зліва. Щоб додати свій блок, знайдіть "іконку" на бічній панелі, а потім перетягніть віджет "Іконка" на попередній перегляд:

Перетягніть віджет значок на попередній перегляд:

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

Потім ви можете додати кілька віджетів Icon Box

У налаштуваннях віджету Icon Box на бічній панелі ви можете:

  • Вибрати різні значки з Font Awesome.
  • Змінити текст.
  • Зв'язати блок із іншим.
  • Змінити всі параметри стилю та макету.

Змінити всі параметри стилю та макету

У безкоштовній версії Elementor доступна функція у вигляді рамки для значків, а Elementor Pro додає безліч інших корисних функцій.

Дивіться також:

Порівняння найкращих конструкторів сторінок та тем для WordPress.

Як додати іконку за допомогою редактора блоків WordPress

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

Ці блоки дозволяють легко додати значок у звичайний контент. Якщо ви об'єднаєте їх із блоком «Стовпці», то зможете створити свій власний розділ функцій.

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

У цьому уроці будемо використовувати безкоштовний плагін Остаточні аддони для Гутенберга, Тому що він найпопулярніший і від того ж розробника, що і популярна тема Astra.

Проте можемо порадити й інші плагіни:

  • Гетьвід.
  • Gutentor.
  • GutenBee.
  • Остаточні блоки (З блоком «Styled Box»).

Якщо ви надаєте перевагу зовнішньому вигляду одного з цих плагінів, використовуйте його. Основні етапи будуть практично однаковими – назва блоку може бути іншою.

Щоб розпочати, встановіть та активуйте безкоштовний плагін Ultimate Addons for Gutenberg (або будь-який інший плагін, який ви вибрали) з WordPress.org.

Відкрийте редактор запису або сторінки, куди хочете додати свій блок, і клацніть піктограму плюс. Відкриється блок вставки. Потім виконайте пошук "Info Box":

Відкриється блок вставки блоків

Тепер у вас є значок, і щоб:

  • налаштувати текст, натисніть на блок та введіть текст.
  • налаштувати значок, кольори та інші елементи дизайну, можна використовувати бічну панель «Блок».

Налаштувати значок, кольори та інші елементи дизайну

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

Блок Columns

Як додати іконку за допомогою класичного редактора WordPress

Якщо ви не хочете використовувати Elementor і, як і раніше, використовуєте старий класичний редактор TinyMCE, найкращим варіантом для вас стане безкоштовний плагін Service Box Showcase.

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

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

Щоб налаштувати кольори та стиль блоків, використовуйте налаштування на бічній панелі:

Використовуйте налаштування на бічній панелі

Нижче ви побачите короткий код, який можна додати у будь-яке місце на сайті:

Нижче ви побачите короткий код

Якщо ви відчуваєте себе обмеженим через варіанти дизайну плагіна, ви можете використовувати Elementor.

 

Ви дізналися три безкоштовні способи (і навіть більше), як додати іконку на сайт WordPress.

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

Джерело: wplift.com

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 0

Додати коментар або відгук