Особенности плагина Divi: иконки WP и Divi

WP и Divi Icons - это сторонний плагин для WordPress, который работает с любой темой WordPress и интегрируется в Divi Builder. Для использования с Divi он включает эксклюзивные макеты, которые вы можете использовать в своих проектах. Значки доступны в редакторе WordPress и в любом модуле Divi, который позволяет вам выбирать значки. В этой статье мы взглянем на WP и Divi Icons и посмотрим, что отличает их от других.

WP и Divi Icons добавляет в WordPress более 2500 иконок. Он включает в себя Font Awesome Icons, Material Icons и 450 специально разработанных значков, включая 48 разноцветных значков. Он доступен как в бесплатной, так и в профессиональной версии. Тестирую профессиональную версию.

Установка значков WP и Divi

Загрузите и активируйте плагин как обычно. Я использую версию 1.1.0 с Divi версии 3.17 и WordPress 4.9.8.

Далее вам нужно активировать вашу лицензию. Вы можете перейти к экрану активации или щелкнуть сообщение, которое появляется в верхней части экрана. Тем не менее, все же полезно знать, как туда перемещаться, потому что эта страница станет экраном параметров после ввода лицензионного ключа.

Чтобы перейти на экран независимо от того, какую тему вы используете, щелкните ссылку « Инструкции» в описании плагина в списке плагинов. Если вы используете Divi, в меню Divi на панели инструментов добавляется новый пункт под названием WP и Divi Icons. Щелкните здесь и введите свой лицензионный ключ.

Настройка многоцветных значков

После ввода лицензионного ключа откроется экран с инструкциями, списком из 48 разноцветных значков и инструментами для создания собственных цветовых схем для этих значков.

У вас есть контроль над тремя цветами. Настройте элементы управления цветом и подождите несколько секунд, чтобы увидеть результаты. Щелчок по Удалить удаляет цветовую схему. Цвета добавляют небольшой эффект затенения, что создает более темные версии каждого цвета и выглядит потрясающе.

При нажатии кнопки « Добавить цветовую схему» создается новый набор разноцветных значков, которые можно настроить.

Добавьте столько цветовых схем, сколько хотите. Это значительно расширяет возможности использования значков. Элементы управления интуитивно понятны. Как оказалось, это немного затягивало.

Использование значков WP и Divi в WordPress с любой темой

Чтобы использовать значки с любой темой, выберите новый значок, добавленный в редактор WordPress.

Откроется редактор, в котором вы можете выбрать значок, отредактировать цвет, введя его в поле цвета или используя палитру цветов, изменить размер, введя число в пикселях или используя ползунок, добавить заголовок и добавить класс. Вы также можете искать значки.

Любые внесенные вами изменения отображаются в реальном времени. В этом примере я ввел нужный цвет, изменил размер на 106 пикселей и изменил имя на Green Leaf.

Нажатие OK добавляет значок к вашему контенту.

Дважды щелкните значок, чтобы открыть редактор и внести изменения.

Нажмите « ОК», и изменения отобразятся на значке в вашем содержимом.

Этот редактор не редактирует разноцветные значки. Вам нужно будет отредактировать их на главном экране настроек, который я продемонстрировал выше. Вы по-прежнему можете выбрать их в этом редакторе, изменить их размер, добавить заголовок, добавить класс и вставить их в свой контент отсюда.

Иконки отлично смотрятся в контенте.

Использование значков WP и Divi с Divi Builder

В Divi Builder добавлено множество новых значков, к которым можно получить доступ из любого модуля, позволяющего выбирать значки. Добавлена ​​новая функция поиска, а значки стали намного больше, что упрощает их просмотр (что показывает, что этот плагин, вероятно, был разработан таким старым парнем, как я. Я могу одновременно оценить эту функцию и оценить ее).

Я хотел бы, чтобы был добавлен фильтр, чтобы я мог выбирать между Font Awesome, Material или пользовательскими значками. Таким образом, я мог легко видеть пользовательские значки и игнорировать значки Font Awesome и Material, если я хотел чего-то отличного от всех остальных, или создавать только с помощью Font Awesome или Material Icons, или выборочно смешивать мои значки.

Он включает как одноцветные, так и разноцветные значки.

Ищите и меняйте значки прямо из интерфейса.

Они настраиваются так же, как и любой значок Divi.

Вы также можете добавить разноцветные значки из конструктора внешнего интерфейса. Здесь вы не можете настроить цвета значков (это делается в редакторе многоцветных значков), но вы можете добавить круг, добавить границу, настроить их цвета и настроить размер значка в настройках модуля.

В этом примере я добавил круг с рамкой.

Вы можете использовать их как во фронтенде, так и в бэкэнде.

Редактор значков WordPress также доступен в текстовом модуле Divi. Этот редактор работает точно так же, как и любая тема WordPress.

Макеты значков WP и Divi

Плагин работает с любой темой, но у него есть специальные функции только для Divi. Одно из самых больших преимуществ использования его с Divi - это эксклюзивные настраиваемые макеты. Они были специально разработаны с использованием WP и Divi Icons, а ссылка для скачивания доступна только в плагине. Они доступны для загрузки всем, у кого есть плагин, и могут использоваться в любом проекте. Это полные макеты со многими стилизованными модулями.

Уже есть несколько доступных и еще несколько в пути. Вот посмотрите на каждого из них с акцентом на то, как они используют значки. Вы можете увидеть их на демо-странице разработчика.

Макет электронной коммерции

Этот макет включает стилизованный заголовок с пузырьками, чтобы показать типы платежных шлюзов и партнеров по доставке, которых использует компания. Разноцветные значки показывают предлагаемые услуги. Как это работает, показано на вкладках. Он также включает в себя таблицы цен, отзывы, подписку на рассылку FAQ и нижний колонтитул.

Макет креативного агентства

Он включает стилизованный заголовок, область с типами услуг, которые вы предлагаете, портфолио, слайдер, описывающий, как вы работаете и какие шаги вы предпринимаете, отзывы, награды, информацию о вашей команде, контакты и нижний колонтитул. Он использует множество скошенных углов и глубоких теневых эффектов. Разноцветные значки показывают услуги.

Деловой Макет Темный

У этого есть заголовок из двух столбцов с изображением с одной стороны и текстом с другой. В разделе, показывающем предлагаемые вами услуги, используются разноцветные значки, а изображения и текст чередуются вниз по странице. Другие разделы используют большой фоновый текст и показывают историю компании, членов команды с разноцветными значками в оверлее, контактную форму, контактную информацию и нижний колонтитул.

Бизнес-макет Light

Это тот же макет, что и Business Layout Dark, но со светлыми цветами.

Макет для некоммерческих организаций

На нем отображается полноэкранный слайдер изображения с вертикальным меню справа и используются значки для кнопок подписки в социальных сетях. Тонкая секция под ним показывает призыв к действию пожертвования. Он также включает в себя раздел «О нас», причины, которые вы поддерживаете, раздел событий, проекты, сообщения со значками, спонсоров и нижний колонтитул.

Лицензия и документация

Цены варьируются от бесплатных для ограниченного выпуска, 39 долларов за один сайт, 59 долларов за 3 сайта и 79 долларов за неограниченное количество сайтов. Вы можете приобрести плагин на сайте разработчика.

Он включает в себя премиум-поддержку и 3 года обновлений. Документация размещена на сайте разработчика.

Конечные мысли

WP и Divi Icons просты в использовании. Когда я нажимаю на них в модулях Divi, на загрузку значков уходит несколько дополнительных секунд. Я уверен, что это в основном из-за моего медленного подключения к Интернету «добро пожаловать в деревенскую жизнь». Я бы хотел, чтобы в модули Divi был добавлен фильтр. Функция поиска полезна для поиска значков по ключевым словам.

Мне нравится, что он добавляет Font Awesome и Material Icons, но мне больше всего нравятся пользовательские значки, особенно многоцветные. Редактор прост в использовании. Я думаю, что это отличный плагин даже без Divi, но с Divi он еще лучше из-за бесплатных макетов.

Ждем вашего ответа. Вы пробовали WP и Divi Icons? Дайте нам знать, что вы думаете об этом в комментариях.

Лучшее изображение через VectorsMarket / shutterstock.com