Як додати додатковий блок іконок у WordPress
Блоки іконок зараз дуже поширені серед сайтів на WordPress, вони добре доповнюють будь-яку головну сторінку. На жаль, якщо ваша тема не дає вам інструменти для створення такого блоку, ви, можливо, подумаєте, що час оновити тему. Але це часто витратно за часом та грошима, адже все залежить від кількості роботи, яку необхідно буде зробити.
Приклад на сайті Forrst
На щастя, ви можете додати цей елемент дизайну на сайт, не уникаючи поточної теми. Блоки іконок хороші для головних сторінок, наприклад, для перерахування ваших ключових переваг або висвітлення основних тем контенту вашого сайту. Дотримуючись цього посібника, ви можете відносно легко додати їх на свій сайт.
Приклад із теми Clean Bold
Дивіться також :
1. Встановіть плагін на вибір
Є багато плагінів, які дозволять вам легко розділити ваші записи та сторінки на таблиці або колонки, є також безліч варіантів швидкої вставки іконок у контент.
Grid Columns
Для цього посібника я вибрав безкоштовний плагін Grid Columns , оскільки це популярне рішення, що дозволяє швидко розділити частину запису або сторінки на колонки за допомогою шорткодів.
WordPress Icons - SVG
Для спрощення додавання іконок також рекомендується використовувати плагін. Я для цього вибираю безкоштовний плагін WordPress Icons-SVG.
Проте, якщо у вас є свої переваги щодо додавання до ваших записів розмітки у вигляді таблиці та роботи з іконками, цілком можете використовувати інші плагіни.
Якщо вам потрібен преміум варіант або ви вже використовуєте потужний плагін Visual Composer, для нього є додаток, спеціально створений длястворення такого типу елемента сторінки — Icon Box for Visual Composer, який може стати вашим лише за $10.
2. Створення колонок
Перший крок у створенні елемента блоку іконок — створення табличної або колонкової розмітки, яка потрібна для розділення іконок та опису тексту.
У цьому прикладі ми будемо використовувати плагін Grid Columns для створення трьох-колонкової розмітки для відображення на сторінці трьох іконок у ряд по горизонталі.
А чотири-колонова розмітка буде ось такою:
Після додавання шорткодів для розмітки час вставляти іконки.
3. Вставлення іконок
Найкращий спосіб отримати безкоштовний доступ до великої кількості іконок — встановити плагін. Хорошим варіантом буде плагін WordPress Icons – SVG, який надає доступ до більш ніж 500 векторних шрифтових іконок. Ці іконки можна змінювати розміром або масштабувати без втрати якості, кольори можуть бути легко змінені за принципом роботи зі звичайним шрифтом.
Як тільки ви встановили цей або будь-який подібний плагін, ви можете легко додавати іконки в свої записи або сторінки на WordPress. Щоб зробити це за допомогою плагіна SVG, просто перейдіть на сторінку плагіна на вашому сайті (пункт меню 'SVG Icons Free'):
Якщо ви бажаєте змінити розмір іконки, ви можете додати в скопійований вами код наступне:
Щоб змінити колір, додайте стиль до шару іконок:
Щоб змінити колір і розмір, використовуйте наступне:
Найбільша проблема цього підходу в тому, що коли ви переключитеся з текстового візуального режиму, весь код іконок буде видалено. Так працює WordPress. Якщо ви не готові встановлювати якийсь інший плагін, то вам доведеться завжди використовувати текстовий режим для цього конкретного запису або сторінки.
Збираємо всі разом
Коли ви створили колонки і додали потрібні іконки, ваш код має виглядати приблизно так:
Розширене редагування
Наведений вище посібник дасть вам старт і базовий шаблон для побудови елемента сторінки у вигляді блоку іконок, але ви, швидше за все, захочете піти далі у форматуванні, щоб краще підігнати його під ваші потреби. За допомогою додавання тексту та форматування наведеного прикладу ви можете створити власний блок з іконками для вашої головної сторінки або якоїсь іншої сторінки сайту без необхідності зміни теми:
Висновок
Блоки іконок в останній рік стали дуже популярними, це хороший спосіб додати сторінкам і записам вашого WordPress сайту привабливий елемент, за який чіпляється око. Якщо вибрана вами тема не включає можливість створення таких блоків, дотримуючись цього посібника та встановивши кілька безкоштовних плагінів, ви зможете додати такі блоки, не змінюючи тему.
Якщо вам потрібний потужніший і, можливо, більш елегантний спосіб створення блоків іконок, зверніть увагу на такі платні плагіни:
- Visual Composer
- Icon Box for Visual Composer