Najnowsza aktualizacja Beaver Builder zawiera potężną funkcję, którą z radością pokażę Ci dzisiaj. Oprócz Font Awesome, Foundation Icons Zurb i Dashicons WordPress, możesz teraz tworzyć własne czcionki ikon za pomocą Icomoon lub Fontello i przesyłać je do użycia bezpośrednio w interfejsie Beaver Builder. Nie wymaga kodowania!

Tworzenie niestandardowej czcionki

W tym demo będę korzystać z aplikacji Icomoon, ale kroki powinny być podobne, jeśli zdecydujesz się na Fontello. Aby rozpocząć, odwiedź witrynę Icomoon i kliknij duży przycisk aplikacji Icomoon w prawym górnym rogu.

Po uruchomieniu aplikacji Icomoon zostaniesz powitany wyborem bezpłatnych ikon, spośród których możesz wybrać, aby zbudować własną czcionkę. Jeśli potrzebujesz czegoś innego niż to, co jest tam oferowane, możesz przesłać własne ikony lub dodać inne z bibliotek bezpłatnych i premium.

Po zakończeniu tworzenia zaznaczenia możesz wygenerować nową czcionkę ikony do pobrania, klikając kartę Generuj czcionkę w prawym dolnym rogu.

Na ekranie Generuj czcionkę zostaniesz powitany wyborem ikon, a także wieloma sposobami dostosowania ustawień czcionki przed jej pobraniem. Ustawienia domyślne są zazwyczaj w porządku, ale jest jedno, które należy szczególnie zmienić, jeśli planujesz przesyłać wiele czcionek ikon. Dostęp do tego ustawienia można uzyskać, klikając przycisk Preferencje w nagłówku i nosi nazwę Przedrostek klasy .

Ustawienie przedrostka klasy pomaga zidentyfikować ikony na stronie po dodaniu do układu Beaver Builder. Jeśli pozostawi się je bez zmian, wiele czcionek ikon korzystających z przedrostka ikony będzie kolidować, powodując nieprawidłowe wyświetlanie niektórych czcionek w selektorze ikon Beaver Builder. Możesz zmienić to ustawienie na dowolne, na przykład moja-ikona1- lub moja-ikona2-, ale najważniejsze jest to, że zostało zmienione.

Możesz także zmienić ustawienie nazwy czcionki , aby łatwo zidentyfikować niestandardową czcionkę ikony w selektorze ikon Beaver Builder (konieczne jest wybranie niestandardowej nazwy Fontello). Po zakończeniu dostosowywania ustawień kliknij przycisk Pobierz w prawym dolnym rogu i przygotuj się do przesłania nowej czcionki ikony do Beaver Builder!

Przesyłanie czcionki ikony do programu Beaver Builder

Aby przesłać niestandardową czcionkę ikony do Beaver Builder, zaloguj się do swojej witryny WordPress i przejdź do Ustawienia > Kreator stron > Ikony. Stamtąd kliknij przycisk Prześlij zestaw ikon i prześlij plik zip pobrany z Icomoon, korzystając z natywnego narzędzia do przesyłania multimediów WordPress. Następnie wybierz przesłany plik zip i kliknij przycisk Wybierz plik , aby dodać niestandardową czcionkę ikony do Beaver Builder. Strona zostanie odświeżona, a Twoja niestandardowa czcionka ikony będzie teraz widoczna na liście dostępnych czcionek ikon Beaver Builder, podobnie jak na obrazku poniżej.

Zarządzanie dostępnymi czcionkami ikon

Oprócz przesyłania własnych niestandardowych czcionek ikon, dajemy Ci także możliwość zarządzania, które zestawy mają być włączone lub wyłączone w Beaver Builder, lub całkowitego usunięcia przesłanej niestandardowej czcionki ikon. Jest to świetna funkcja dla tych, którzy chcą ograniczyć wybór czcionek ikon dostępnych do własnych zestawów niestandardowych lub ułatwić wybór klientom, którzy będą edytować strony za pomocą Beaver Builder.

Wyłączenie czcionek ikon jest względne łatwe. Po prostu odznacz czcionki ikon, które chcesz wyłączyć (lub zaznacz te, które chcesz włączyć) i kliknij przycisk Zapisz ustawienia ikon . Aby usunąć przesłaną niestandardową czcionkę ikony, po prostu kliknij łącze Usuń obok nazwy czcionki ikony, którą chcesz usunąć.

Z wielką mocą wiąże się wielka odpowiedzialność

Czcionki ikon są niesamowite i naprawdę mogą urozmaicić zawartość Twojej witryny, ale musisz zachować ostrożność. To, że masz dostęp do wielu zestawów czcionek ikon, nie oznacza, że ​​powinieneś używać ich wszystkich na tej samej stronie. Dlaczego nie? Szybkość ładowania strony!

Załóżmy, że dodałeś ikony z Font Awesome i Foundation na tej samej stronie. Aby wyrenderować te ikony, Beaver Builder będzie musiał załadować arkusz stylów i pliki czcionek zarówno dla Font Awesome, jak i Foundation, co wydłuży czas ładowania strony. Zamiast używać wielu czcionek ikon na tej samej stronie, postaraj się zachować jedną lub jeszcze lepszą, aby uzyskać najlepsze rezultaty, utwórz własną czcionkę ikon zawierającą tylko potrzebne ikony i używaj jej zamiast tego!

Miłej zabawy!

Mamy nadzieję, że spodoba Ci się ta nowa funkcja i uznasz ją za przydatny dodatek do zestawu narzędzi Beaver Builder. Jak zawsze, jeśli masz jakieś pytania lub uwagi, daj nam znać w komentarzach poniżej. Cieszyć się!

Źródło obrazu: Thomas S.