Бажаєте додати іконку WordPress на свій сайт? Або блок функцій, як їх іноді називають? Блоки з іконками – це головний елемент дизайну, який показує особливості вашого продукту, послуги, навички та багато що має привернути увагу.
У цьому пості ви дізнаєтесь, як додати гнучке поле значків на ваш WordPress сайт без коду. Ви зможете легко вибрати свій варіант із сотень іконок та налаштувати текст на свій смак.
Якщо ви не впевнені, про що йтиметься, ось короткий приклад типу поля значків, яке ви зможете створити на момент закінчення цього уроку:
Ви дізнаєтеся, як налаштувати вікно значків, використовуючи три різні методи, всі – безкоштовні:
- Плагін для конструктора сторінок Elementor.
- Рідний редактор блоків WordPress
- Старий "класичний" редактор WordPress (TinyMCE).
Як додати іконку з Elementor
Для гнучкого способу налаштування функціональних блоків / значків WordPress ви можете використовувати безкоштовний плагін конструктора сторінок Elementor .
Elementor буде зайвим, якщо потрібно додати одну іконку на звичайній сторінці WordPress. Однак, якщо ви створюєте цільову сторінку або сторінку іншого типу, вам сподобається гнучкість методу перетягування, яку пропонує Elementor.
Для початку:
- Встановіть та активуйте безкоштовний плагін Elementor з WordPress.org.
- Відкрийте редактор WordPress для поста або сторінки, куди ви бажаєте додати свій значок.
- Натисніть кнопку «Редагувати за допомогою Elementor», щоб запустити візуальний інтерфейс.
В інтерфейсі Elementor ви побачите попередній перегляд вашого контенту праворуч та бічну панель зліва. Щоб додати свій блок, знайдіть "іконку" на бічній панелі, а потім перетягніть віджет "Іконка" на попередній перегляд:
Як правило, ви хочете відобразити поля значків у сітці певного типу. Натисніть на значок плюса та виберіть потрібну кількість стовпців. Потім ви можете додати кілька віджетів 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 також включає в себе власний блок стовпців, який дає трохи більше гнучкості під назвою «Розширені стовпці»:
Як додати іконку за допомогою класичного редактора 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
Коментарі до запису: 0