Podświetlenie wtyczki Divi: ikony WP i Divi

WP i Divi Icons to wtyczka innej firmy do WordPress, która działa z dowolnym motywem WordPress i integruje się z Divi Builder. Do użytku z Divi zawiera ekskluzywne układy, których możesz używać w swoich projektach. Ikony są dostępne w edytorze WordPress oraz w dowolnym module Divi, który umożliwia wybór ikon. W tym artykule przyjrzymy się ikonom WP i Divi i zobaczymy, co wyróżnia je z tłumu.

Ikony WP i Divi dodają do WordPressa ponad 2500 ikon. Zawiera ikony Font Awesome, Material Icons i 450 niestandardowych ikon, w tym 48 wielokolorowych ikon. Jest dostępny zarówno w wersji bezpłatnej, jak i profesjonalnej. Testuję wersję pro.

Instalowanie ikon WP i Divi

Prześlij i aktywuj wtyczkę jak zwykle. Używam wersji 1.1.0 z Divi w wersji 3.17 i WordPress 4.9.8.

Następnie musisz aktywować swoją licencję. Możesz przejść do ekranu aktywacji lub kliknąć wiadomość, która pojawia się u góry ekranu. Jednak nadal warto wiedzieć, jak się tam poruszać, ponieważ ta strona stanie się ekranem opcji po wprowadzeniu klucza licencyjnego.

Aby przejść do ekranu niezależnie od używanego motywu, kliknij łącze Instrukcje w opisie wtyczki na liście wtyczek. Jeśli używasz Divi, nowy element menu zostanie dodany do menu Divi na desce rozdzielczej o nazwie Ikony WP i Divi. Kliknij to i wprowadź klucz licencyjny.

Dostosowywanie wielokolorowych ikon

Po wprowadzeniu klucza licencyjnego otwiera się ekran z instrukcjami, listą 48 wielokolorowych ikon oraz narzędziami do tworzenia własnych schematów kolorów dla tych ikon.

Masz kontrolę nad trzema kolorami. Dostosuj ustawienia kolorów i poczekaj kilka sekund, aby zobaczyć wyniki. Kliknięcie Usuń usuwa schemat kolorów. Kolory dodają trochę efektu cieniowania, co tworzy ciemniejsze wersje każdego koloru i wygląda niesamowicie.

Kliknięcie Dodaj schemat kolorów tworzy nowy zestaw wielokolorowych ikon, które można dostosować.

Dodaj tyle schematów kolorów, ile chcesz. To znacznie rozszerza możliwości korzystania z ikon. Sterowanie jest intuicyjne. Jak się okazuje, to trochę uzależnia.

Korzystanie z ikon WP i Divi w WordPress z dowolnym motywem

Aby użyć ikon z dowolnym motywem, wybierz nową ikonę dodaną do edytora WordPress.

Spowoduje to otwarcie edytora, w którym możesz wybrać ikonę, edytować kolor, wpisując go w polu koloru lub za pomocą próbnika kolorów, zmienić rozmiar, wprowadzając liczbę w pikselach lub używając suwaka, dodać tytuł i klasę. Możesz także wyszukiwać ikony.

Wszelkie wprowadzone zmiany są pokazywane na żywo. W tym przykładzie wprowadziłem żądany kolor, zmieniłem rozmiar na 106 pikseli i zmieniłem nazwę na Green Leaf.

Kliknięcie OK dodaje ikonę do treści.

Kliknij dwukrotnie ikonę, aby otworzyć edytor i wprowadzić zmiany.

Kliknij OK, a zmiany zostaną odzwierciedlone na ikonie w treści.

Ten edytor nie edytuje wielokolorowych ikon. Będziesz musiał je edytować na głównym ekranie ustawień, który zademonstrowałem powyżej. Nadal możesz wybrać je z tego edytora, zmienić ich rozmiar, dodać tytuł, dodać klasę i wstawić je do swojej treści stąd.

Ikony świetnie prezentują się w treści.

Używanie ikon WP i Divi z Divi Builder

Do Divi Builder dodano wiele nowych ikon, do których można uzyskać dostęp z dowolnego modułu, który pozwala wybierać ikony. Dodano nową funkcję wyszukiwania, a ikony są znacznie większe, dzięki czemu są łatwiejsze do zobaczenia (co pokazuje, że ta wtyczka została prawdopodobnie zaprojektowana przez starszego faceta, takiego jak ja. Mogę zarówno odnosić się do tej funkcji, jak i ją doceniać).

Chciałbym, aby dodano filtr, abym mógł wybrać między czcionką Awesome, Material lub niestandardowymi ikonami. W ten sposób mogłem łatwo zobaczyć niestandardowe ikony i zignorować ikony Font Awesome i Material, jeśli chciałem czegoś innego od wszystkich innych, lub zbudować tylko za pomocą Font Awesome lub Material Icons lub selektywnie mieszać moje ikony.

Zawiera zarówno ikony jedno, jak i wielokolorowe.

Wyszukuj i zmieniaj ikony na żywo z poziomu frontendu.

Można je regulować jak każdą ikonę Divi.

Możesz także dodać wielokolorowe ikony z kreatora frontendu. Nie możesz tutaj dostosować kolorów ikony (jest to zrobione w edytorze ikon wielokolorowych), ale możesz dodać okrąg, dodać obramowanie, dostosować ich kolory i dostosować rozmiar ikony z ustawień modułu.

W tym przykładzie dodałem okrąg z obramowaniem.

Możesz ich używać zarówno z poziomu frontendu, jak i backendu.

Edytor ikon WordPress jest również dostępny w module tekstowym Divi. Ten edytor działa dokładnie tak samo, jak w przypadku dowolnego motywu WordPress.

Układy ikon WP i Divi

Wtyczka działa z dowolnym motywem, ale ma specjalne funkcje tylko dla Divi. Jedną z największych zalet korzystania z niego z Divi są ekskluzywne niestandardowe układy. Zostały one zaprojektowane na zamówienie przy użyciu ikon WP i Divi, a link do pobrania jest dostępny tylko w wtyczce. Są dostępne do pobrania dla każdego, kto ma wtyczkę i mogą być używane w dowolnym projekcie. Są to pełne układy z wieloma stylizowanymi modułami.

Dostępnych jest już kilka, a kilka kolejnych jest w drodze. Oto spojrzenie na każdy z nich z naciskiem na to, jak używają ikon. Możesz je zobaczyć na stronie demonstracyjnej dewelopera.

Układ e-commerce

Ten układ zawiera stylizowany nagłówek z bąbelkami, aby pokazać typy bramek płatności i partnerów wysyłkowych, z których korzysta firma. Wielokolorowe ikony pokazują oferowane usługi. Jak to działa, pokazano w zakładkach. Zawiera również tabele cenowe, referencje, zapis do newslettera FAQ i stopkę.

Układ agencji kreatywnej

Ten zawiera stylizowany nagłówek, obszar o rodzajach usług, które oferujesz, portfolio, suwak opisujący sposób pracy i podejmowane kroki, referencje, nagrody, zespół, kontakt i stopkę. Wykorzystuje wiele skośnych narożników i efektów głębokiego cienia. Wielokolorowe ikony pokazują usługi.

Układ biznesowy ciemny

Ten ma dwukolumnowy nagłówek z obrazem po jednej stronie i tekstem po drugiej. Sekcja przedstawiająca oferowane przez Ciebie usługi wykorzystuje wielokolorowe ikony i wyświetla naprzemiennie obrazy i tekst w dół strony. Inne sekcje używają dużego tekstu tła i pokazują historię firmy, członków zespołu z wielokolorowymi ikonami w nakładce, formularz kontaktowy, informacje kontaktowe i stopkę.

Biznesowy układ światła

Jest to taki sam układ jak Business Layout Dark, ale z jasnymi kolorami.

Układ non-profit

Ten wyświetla pełnoekranowy suwak obrazu z pionowym menu po prawej stronie i używa ikon do przycisków śledzenia społecznościowego. Wąska sekcja poniżej pokazuje CTA dotyczące darowizny. Zawiera również sekcję o tematyce, przyczyny, które wspierasz, sekcję wydarzeń, projekty, notki z ikonami, sponsorów oraz stopkę.

Licencja i dokumentacja

Ceny wahają się od darmowej edycji limitowanej, 39 USD za jedną witrynę, 59 USD za 3 witryny i 79 USD za nieograniczoną liczbę witryn. Wtyczkę można kupić na stronie dewelopera.

Obejmuje wsparcie premium i 3 lata aktualizacji. Dokumentacja jest dostępna na stronie dewelopera.

Końcowe myśli

Ikony WP i Divi są łatwe w użyciu. Załadowanie ikon po kliknięciu w moduły Divi zajmuje kilka dodatkowych sekund. Jestem pewien, że wynika to głównie z mojego wolnego połączenia internetowego „Witamy w wiejskim życiu”. Chciałbym zobaczyć filtr dodany do modułów Divi. Funkcja wyszukiwania jest pomocna w znajdowaniu ikon na podstawie słów kluczowych.

Podoba mi się, że dodaje ikony Font Awesome i Material, ale moimi ulubionymi są ikony niestandardowe, a zwłaszcza ikony wielokolorowe. Edytor jest prosty i przyjemny w użyciu. Myślę, że to świetna wtyczka nawet bez Divi, ale z Divi jest jeszcze lepsza ze względu na darmowe układy.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś ikony WP i Divi? Daj nam znać, co o tym myślisz w komentarzach.

Polecany obraz za pośrednictwem VectorsMarket / shutterstock.com