Особенности плагина Divi: значки загрузки Divi

Divi Upload Icons - это сторонний плагин для Divi, который упрощает добавление дополнительных значков в Divi Builder. В отличие от других плагинов иконок, которые интегрируют только Font Awesome и Material Icons, этот позволяет вам добавлять любой набор иконок, который вы хотите. Это просто должен быть совместимый тип файла, и он может использовать пять самых популярных типов файлов.

Плагин добавляет загрузчик в вашу установку WordPress, куда вы перетаскиваете файлы значков. Затем значки добавляются в любой модуль Divi, который отображает значки. Как и стандартные значки Divi, любой набор значков, который вы загружаете, можно стилизовать с помощью Divi Builder. В этом выделении плагина Divi мы рассмотрим значки загрузки Divi и увидим, насколько легко им пользоваться.

Установка и активация значков загрузки Divi

Загрузите и активируйте плагин как обычно, а затем перейдите в « Настройки» > « Значки загрузки Divi» в меню панели инструментов, чтобы ввести свой ключ активации.

Загрузка значков с помощью значков загрузки Divi

Также на экране настроек есть функция загрузки. Здесь вы загрузите свои значки. Значки должны быть в форматах .eot, .svg, .ttf, .woff, .woff2 и .css. Вы можете загружать значки из любого источника и использовать их с значками загрузки Divi, если они представлены в этих форматах и ​​включают файл CSS. Чтобы установить значки, перетащите их в окно загрузки. Инструкции представлены в области загрузки, а также есть короткое видео, демонстрирующее, как его использовать.

Иконки иногда включают несколько форматов. Вы должны загрузить файлы CSS вместе со значками, и значки должны быть поддерживаемым файлом. В этом примере я загружаю несколько наборов. Они включают несколько типов файлов и файлы CSS. На изображении выше с оранжевыми значками отсутствуют файлы.

Файлы в этом примере правильные. Я загрузил поддерживаемые типы файлов с их файлами CSS. Сейчас у меня более 2500 новых иконок. Я скачал их из iconfont, Dripicons, Foundation Icon Fonts и Map Icons. Разработчик ведет список протестированных значков, которые можно использовать с иконками загрузки Divi. Конечно, вы можете использовать гораздо больше значков.

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

Это изображение включает все 2500 загруженных мною значков. Теперь у меня гораздо больше значков на выбор, а полоса окна намного меньше. Вы можете видеть значки в Visual Builder, но он не включает новый фильтр и инструменты поиска.

Фильтр и поиск значков загрузки Divi

Если вы используете классический конструктор, добавляется новый инструмент фильтрации. Вы можете открыть или закрыть фильтр. В этом примере он закрыт.

Щелкните « Фильтр значков», чтобы просмотреть установленные семейства значков и функцию поиска. Щелкните любое из семейств значков, чтобы увидеть только это семейство. Вы также можете просмотреть все семейства или закрыть параметры фильтра и поиска. Фильтр работает быстро. Щелчок по семейству значков или поиск значков отображает значки почти мгновенно, даже с моими 2500 значками. Я уверен, что это частично зависит от того, сколько значков вы установили, поэтому ваш опыт может быть другим.

В этом примере я выбрал значки карты, которые я загрузил. В этом семействе икон почти 200 икон.

Вот значки Foundation . Также в нем около 200 иконок.

Вот икофонты . Это семейство значков добавляет более 2000 значков.

Вы можете искать по ключевому слову или по названию семейства значков. Результаты включают значки из всех семейств значков, которые вы загрузили, и те, которые уже были доступны в Divi.

Было бы интересно, если бы фильтр работал после поиска, чтобы видеть результаты по семейству иконок. Он показывает вам имя с семейством значков, когда вы наводите курсор на каждый значок. На изображении выше я нахожу курсор на второй значок справа. Это достаточно полезно, поэтому поисковый фильтр на самом деле не имеет высокого приоритета.

Примеры значков загрузки Divi

Конечно, одним из преимуществ использования значков является возможность настраивать размеры, цвета, добавлять круги, границы и т. Д. С помощью Divi Builder. Плагин и значки работают с Visual Builder, но не отображаются значки в режиме реального времени. В этом примере показаны значки в выборе значков модуля, но предварительный просмотр в реальном времени не работает.

Иконки отлично отображаются на опубликованной странице или в сообщении. Вы по-прежнему можете использовать Visual Builder для настройки размера и цвета, вы просто не увидите их при предварительном просмотре в реальном времени. Я предпочитаю Visual Builder, когда настраиваю цвета и размеры, но я буду использовать Classic Builder для остальных примеров. Это целевая страница из пакета макетов Mortgage.

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

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

Для этого я выбрал размер шрифта для значка и установил его до 32 пикселей. Он начинает больше походить на оригинальный дизайн, но с моими иконками.

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

Вот как выглядят значки, расположенные слева от текста.

В этом я заменил изображения в макете поля для гольфа на значки. Я использовал цвета из макета и установил размер 48 пикселей.

В этом примере я отключил настройку размера шрифта для значков. Это размер по умолчанию, 96 пикселей. Они хорошо сочетаются с дизайном макета.

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

Для этого я использовал один из оттенков зеленого из макета. С настройками Divi Builder есть много возможностей.

Стоимость Divi Upload Icons

Иконки загрузки Divi стоят 24,97 доллара США. Он имеет неограниченное использование и обновления. Вы можете приобрести значки загрузки Divi на торговой площадке.

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

Divi Upload Icons позволяет легко загружать нужные значки из любой библиотеки шрифтов. Идея плагина заключается в том, что вместо установки тысяч ненужных значков вы можете установить именно те значки и семейства значков, которые хотите использовать на своем веб-сайте Divi.

Поскольку вы загружаете значки в Divi Builder, они хранятся на вашем сервере. Я загрузил более 2500 иконок, и у меня не было проблем со скоростью работы Divi Builder или моего веб-сайта.

Имейте в виду, что для этого требуются шрифты с файлом шрифта и файлом CSS. Легко загружать шрифты неправильно (угадайте, откуда я знаю). Убедитесь, что вы точно следуете инструкциям, иначе шрифты будут пустыми квадратами. Кроме того, он не работает с Font Awesome 5, но отлично работает с 4.7.

Мне понравилось использовать иконки загрузки Divi. Я хотел бы использовать его с Visual Builder, но он отлично работает с классическим построителем. Потребовалась дополнительная попытка убедиться, что у меня есть нужные файлы, но, учитывая, сколько семейств значков существует в Интернете, стоит потратить время на поиск значков с нужными файлами. Иконки найти несложно, и разработчик предоставляет множество ссылок на уже протестированные им иконки.

Если вы заинтересованы в добавлении собственных значков в Divi Builder, стоит взглянуть на значки загрузки Divi.

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

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