Блоки іконок зараз дуже поширені серед сайтів на WordPress, вони добре доповнюють будь-яку головну сторінку. На жаль, якщо ваша тема не дає вам інструменти для створення такого блоку, ви, можливо, подумаєте, що час оновити тему. Але це часто витратно за часом та грошима, адже все залежить від кількості роботи, яку необхідно буде зробити.
Приклад на сайті Форст
На щастя, ви можете додати цей елемент дизайну на сайт, не уникаючи поточної теми. Блоки іконок хороші для головних сторінок, наприклад, для перерахування ваших ключових переваг або висвітлення основних тем контенту вашого сайту. Дотримуючись цього посібника, ви можете відносно легко додати їх на свій сайт.
Приклад із теми Чистий жирний
Дивіться також:
1. Встановіть плагін на вибір
Є багато плагінів, які дозволять вам легко розділити ваші записи та сторінки на таблиці або колонки, є також безліч варіантів швидкої вставки іконок у контент.
Стовпці сітки
Для цього посібника я вибрав безкоштовний плагін Стовпці сітки, оскільки це популярне рішення, що дозволяє швидко розділити частину запису або сторінки на колонки за допомогою шорткодів.
WordPress Icons - SVG
Для спрощення додавання іконок також рекомендується використовувати плагін. Я для цього вибираю безкоштовний плагін WordPress Icons - SVG.
Проте, якщо у вас є свої переваги щодо додавання до ваших записів розмітки у вигляді таблиці та роботи з іконками, цілком можете використовувати інші плагіни.
Якщо вам потрібний преміум варіант або ви вже використовуєте потужний плагін Візуальний Композитордля нього є додаток, спеціально створений для створення такого типу елемента сторінки. Icon Box for Visual Composerщо може стати вашим всього за $10.
2. Створення колонок
Перший крок у створенні елемента блоку іконок — створення табличної або колонкової розмітки, яка потрібна для розділення іконок та опису тексту.
У цьому прикладі ми будемо використовувати плагін Стовпці сітки для створення три-колонкової розмітки для відображення на сторінці трьох іконок у ряд по горизонталі.
Щоб створити стовпчики, вставте ці шорткоди у ваш запис (і візуальний, і текстовий режим перегляду спрацюють):
[column grid="3" span="1"]Column One[/column] [column grid="3" span="1"]Column Two[/column] [column grid="3" span="1"]Column Three[/column]
Якщо ви увімкнете попередній перегляд сторінки, ви побачите, що текст розділений на три стовпчики. Якщо ви хочете створити розмітку з іншою кількістю колонок, просто змініть цифру після grid=, а потім збільшіть або зменшіть відповідно кількість рядків шорткоду. Наприклад, двоколонова розмітка буде виглядати наступним чином:
[column grid="2" span="1"]Column One[/column] [column grid="2" span="1"]Column Two[/column]
А чотири-колонова розмітка буде ось такою:
[column grid="4" span="1"]Column One[/column] [column grid="4" span="1"]Column Two[/column] [column grid="4" span="1"]Column Three[/column] [column grid="4" span="1"]Column Four[/column]
І так далі.
Після додавання шорткодів для розмітки час вставляти іконки.
3. Вставка іконок
Найкращий спосіб отримати безкоштовний доступ до великої кількості іконок — встановити плагін. Хорошим варіантом буде плагін WordPress Icons - SVG, який надає доступ до більш ніж 500 векторних іконок шрифту. Ці іконки можна змінювати розміром або масштабувати без втрати якості, кольори можуть бути легко змінені за принципом роботи зі звичайним шрифтом.
Як тільки ви встановили цей або будь-який подібний плагін, ви можете легко додавати іконки в свої записи або сторінки на WordPress. Щоб зробити це за допомогою плагіна SVG, просто перейдіть на сторінку плагіна на вашому сайті (пункт меню 'SVG Icons Free'):
Звідси ви зможете завантажувати доступні іконки, а потім клацати по тій, яку хочете використовувати. По клацанню на іконку вам буде створено код вставки. Скопіюйте код, перевірте, чи ви перейшли в текстовий режим редактора запису, а потім вставте код іконки у ваш запис або сторінку.
Якщо ви бажаєте змінити розмір іконки, ви можете додати в скопійований вами код наступне:
<span data-icon=”” style=”font-size:200%;”></span>
Щоб змінити колір, додайте стиль до шару іконок:
<span data-icon=”” style=”color:green;”></span>
Щоб змінити колір і розмір, використовуйте наступне:
<span data-icon=”” style=”font-size:200%; color:green;”></span>
Найбільша проблема цього підходу в тому, що коли ви переключитеся з текстового візуального режиму, весь код іконок буде видалено. Так працює WordPress. Якщо ви не готові встановлювати якийсь інший плагін, то вам доведеться завжди використовувати текстовий режим для цього конкретного запису або сторінки.
Збираємо всі разом
Коли ви створили колонки і додали потрібні іконки, ваш код має виглядати приблизно так:
[column grid="3" span="1"] <span data-icon=”” style=”color:green; font-size:1000%;”></span> [/column] [column grid="3" span="1"] <span data-icon=”” style=”color:red; font-size:1000%;”></span> [/column] [column grid="3" span="1"] <span data-icon=”” style=”color:blue; font-size:1000%;”></span> [/column]
Розширене редагування
Наведений вище посібник дасть вам старт і базовий шаблон для побудови елемента сторінки у вигляді блоку іконок, але ви, швидше за все, захочете піти далі у форматуванні, щоб краще підігнати його під ваші потреби. За допомогою додавання тексту та форматування наведеного прикладу ви можете створити власний блок з іконками для вашої головної сторінки або якоїсь іншої сторінки сайту без необхідності зміни теми:
[column grid="3" span="1"] <span data-icon=”” style=”color:green; font-size:1000%;”></span> <span style=”color:green; font-size:120%;”>Join our Club</span> <ul> <li>It’s free</li> <li>It’s cool</li> <li>It’s now</li> </ul> <a href=”http://#”>Sign up</a> to get free timely emails from us. [/column] [column grid="3" span="1"] <span data-icon=”” style=”color:red; font-size:1000%;”></span> <span style=”color:red; font-size:120%; text-align=center;”>Get Writing Tips</span> We provide great writing tips to your inbox every Monday to help you improve your writing skills and abilities. Tips cover prose, grammar and punctuation. [/column] [column grid="3" span="1"] <span data-icon=”” style=”color:blue; font-size:1000%;”></span> <span style=”color:blue; font-size:120%; text-align=center;”>Earn Money</span> Use our guidance and tips to help you earn money and increase your freelance rates, all for free. [/column]
Висновок
Блоки іконок в останній рік стали дуже популярними, це хороший спосіб додати сторінкам і записам вашого WordPress сайту привабливий елемент, за який чіпляється око. Якщо вибрана вами тема не включає можливість створення таких блоків, дотримуючись цього посібника та встановивши кілька безкоштовних плагінів, ви зможете додати такі блоки, не змінюючи тему.
Якщо вам потрібний потужніший і, можливо, більш елегантний спосіб створення блоків іконок, зверніть увагу на такі платні плагіни:
- Візуальний Композитор
- Icon Box for Visual Composer
Джерело: wplift.com
Коментарі до запису: 3
Чому тут все так по центру вирівняно і гарненько, а у мене повний бардак, хоч і код такий же.
Очевидно, потрібно розібратися зі стилями у style.css
Чи могли б ви допомогти вирішити цю проблему? Ось мій сайт попередньо вдячний!