Zainstaluj Font Awesome

Przede wszystkim musimy zainstalować Font Awesome w naszej witrynie WordPress. Zamierzamy to zrobić, dodając trochę kodu CSS do opcji kompozycji Divi.

Otwórz swoją witrynę WordPress, przejdź do Divi> Opcje motywu> Nawigacja i wklej następujący kod w sekcji <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Teraz czcionki powinny być dodawane do czcionek, które są używane w Twojej witrynie. Możesz teraz dodać te ikony do głównego menu, postępując zgodnie z kolejną częścią naszego postu krok po kroku.

Rozpocznij tworzenie menu głównego

Najprawdopodobniej już stworzyłeś własne dostosowane menu główne, w którym wymienione są wszystkie strony, które chcesz wyświetlić w głównym menu witryny. Jeśli jeszcze tego nie zrobiłeś, przejdź do strony „Menu” w sekcji Wygląd i utwórz nowe menu.

Dodaj ikony społecznościowe

Idąc dalej, chcemy dodać ikony społecznościowe. Podczas tworzenia głównego menu możesz wybrać miejsce wyświetlania ikon społecznościowych. W większości przypadków pojawią się one zaraz po stronach, ale możesz je również umieścić jako pierwsze. Dostępne są ikony mediów społecznościowych dla wszystkich ważnych i najpopularniejszych stron internetowych; od Facebooka do Twittera, Instagrama, LinkedIn i innych.

Zacznij od otwarcia  następującego linku  na stronie internetowej Font Awesome. Będziemy potrzebować tej witryny do następnej części tego posta, gdzie będziemy dodawać ikony ręcznie.

Dodaj ikony ręcznie

Ten sam sposób pracy dotyczy każdej ikony społecznościowej dodanej do głównego menu. Jako przykład pokażemy, jak dodać ikonę Instagram. Dla wszystkich innych ikon, które chcesz dodać; wiem, że działa to w ten sam sposób (tylko ikona, kod HTML i URL różnią się odpowiednio).

Otwórz opcję „Niestandardowe linki”, a zobaczysz dwa pola: URL i etykieta nawigacji. Oczywiście w polu adresu URL wpisujesz adres URL prowadzący użytkownika do jednego z kanałów mediów społecznościowych. W tym przykładzie chcemy, aby ikona prowadziła do Instagrama, więc po prostu wpisz swój adres URL Instagrama.

Następnie przejdź do witryny Font Awesome  w przeglądarce i poszukaj ikony Instagram na pasku wyszukiwania. Podobnie możesz wyszukać Facebooka, LinkedIn i dowolną inną ikonę.

Po kliknięciu ikony na Instagramie zobaczysz, że strona zawiera następujący kod HTML:

<i class="fa fa-instagram" aria-hidden="true"></i>

 

Jest to dokładny kod, którego musimy użyć w polu Etykieta nawigacji, więc śmiało wypełnij niestandardowy link, kopiując i wklejając kod do pola.

owtórz ten sam proces dla każdej ikony społecznej, która ma się pojawiać w głównym menu, i spójrz, jak to wygląda na początku witryny.

Zmień wygląd ikon społecznościowych

Wspólne zmiany w menu głównym (w tym ikony społecznościowe)

Funkcja dostosowywania motywów pozwala w jednym miejscu wprowadzić wszystkie zmiany wyglądu, które chcesz wprowadzić w menu głównym.

Zmiany, które można wprowadzić w menu głównym za pomocą opcji Divi, dotyczą również ikon społecznościowych. Kiedy nadajesz swojemu menu podstawowemu określony kolor, ikony społeczności będą miały ten sam kolor. Dzieje się tak, ponieważ używamy czcionki zamiast obrazu, aby to działało.

Możesz wprowadzić wszystkie zmiany, które chcesz wprowadzić w wyglądzie, w Dostosowaniu kompozycji, przechodząc do  Nagłówek i nawigacja> Pasek menu głównego. Zmiany, które wprowadzasz, obowiązują w czasie rzeczywistym i dają dobre spojrzenie na to, jak chcesz wyglądać w menu głównym.

Otwórz ikony społecznościowe w nowej karcie

Ta część wpisu to coś więcej, co możesz zrobić z ikonami społecznościowymi. Prawdopodobnie nie chcesz odsyłać użytkowników z witryny, nawet jeśli odwiedzają Twoje kanały mediów społecznościowych. Chcesz utrzymać obie interakcje przy życiu przez jak najdłuższy czas, otwierając linki do mediów społecznościowych w nowej karcie za każdym razem, gdy ktoś kliknie na nich.

Możemy z łatwością włączyć opcję „Otwórz w nowej karcie” we wszystkich ikonach mediów społecznościowych, powracając do menu, które stworzyliśmy wcześniej. Musimy wprowadzić wszystkie poprawki ręcznie do każdej z ikon. W tym przykładzie wprowadzimy zmiany w ikonie Instagram.

Śmiało i usuń adres URL podany w polu adresu URL, a następnie wklej następujący kod w adresie URL nawigacji:

Otwórz ikony społecznościowe w nowej karcie

Ta część wpisu to coś więcej, co możesz zrobić z ikonami społecznościowymi. Prawdopodobnie nie chcesz odsyłać użytkowników z witryny, nawet jeśli odwiedzają Twoje kanały mediów społecznościowych. Chcesz utrzymać obie interakcje przy życiu przez jak najdłuższy czas, otwierając linki do mediów społecznościowych w nowej karcie za każdym razem, gdy ktoś kliknie na nich.

Możemy z łatwością włączyć opcję „Otwórz w nowej karcie” we wszystkich ikonach mediów społecznościowych, powracając do menu, które stworzyliśmy wcześniej. Musimy wprowadzić wszystkie poprawki ręcznie do każdej z ikon. W tym przykładzie wprowadzimy zmiany w ikonie Instagram.

Śmiało i usuń adres URL podany w polu adresu URL, a następnie wklej następujący kod w adresie URL nawigacji:

 

 

Accessibility