Среди владельцев вордпрессовских сайтов довольно распространенными являются блоки иконок, которые хорошо дополняют главную страницу. Чаще всего блоки иконок применяются на главных страницах или лендингах. Под иконками можно перечислять ключевые преимущества компании или же освещать основные темы сайта. Пока что не каждая тема оснащена подобным элементом и не везде можно сделать блоки иконок. Но данный элемент дизайна можно добавить на сайт при помощи плагинов, причем отказываться от текущей темы не придется.
Какие плагины можно использовать для создания блоков иконок?
Grid Columns. Популярное бесплатное решение, которое позволяет быстро разделять части страниц или записей на колонки посредством шорткодов.
WordPress Icons – SVG. Данный плагин тоже является бесплатным, он также поможет упростить добавление иконок. Помимо прочего предоставляет доступ к большому количеству иконок.
Как создать колонки
Ключевой частью блока является колоночная или табличная разметка, необходимая для разделения текста-описания и иконок. Рассмотрим создание трехколоночной разметки для иконок по горизонтали на примере Grid Columns. Для создания колонок в запись необходимо вставить шорткоды:
[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=. Теперь необходимо перейти к вставке иконок.
Как вставить конки в разметку
Сперва стоит определиться, где можно взять иконки. Отличным решением будет установка плагина WordPress Icon – SVG. Как уже отмечалось, он предоставляет доступ к векторным шрифтовым иконкам: их количество превышает 500. Доступно масштабирование без потери качества, а также смена цвета: все примерно также как и со шрифтами. Для того чтобы добавить иконки, стоит найти в консоли графу плагина и перейти на страницу, откуда можно скачивать доступные иконки, по щелчку которым будет создаваться код вставки. Теперь достаточно скопировать код и вставить его в вашу запись, как и в предыдущем случае.
Теперь о смене размера:
<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>
Стоит отметить одну неприятную особенность: переключаясь в визуальный режим из текстового, код иконок удаляется и это уже особенность работы вордпрессовской платформы.
Если совместить все вместе, получится:
[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</span>
<ul>
<li>It’s free</li>
<li>It’s cool</li>
</ul>
<a href=”http://#”>Sign up</a> to get free.
[/column]
Если разобраться, ничего сложного нет. Тем не менее, вы можете приобрести у нас готовый сайт, а если вы хотите подобный функционал, его можно обговорить при заказе сайта. Таким образом, вам не придется тратить время на освоение работы с плагином: заказав лендинг или главную с колонками, вы получите готовый результат.
