Jak dodać ikony społecznościowe do podstawowego menu Divi?

Opublikowany: 2017-06-27

W dzisiejszym samouczku Divi pokażemy, jak dodać ikony społecznościowe do głównego menu witryny Divi. Postępując zgodnie z tym samouczkiem krok po kroku, będziesz mógł dodawać ikony społecznościowe do każdej tworzonej witryny — zarówno dla siebie, jak i klienta.

Mamy już możliwość dodawania ikon społecznościowych bezpośrednio do nagłówka i stopki witryny za pomocą dostosowywania motywu Divi. Ale jeśli nie tego szukasz, ten samouczek może ci pomóc, ponieważ w wielu przypadkach; ludzie wolą mieć ikony społecznościowe w swoim głównym menu zamiast w nagłówku lub stopce swojej witryny.

Pokażemy Ci dokładnie, jak możesz je dodać, jak je dostosować i jak otworzyć je w nowej karcie. To wszystko, co naprawdę musisz wiedzieć, aby ikony społecznościowe w menu głównym mogły wnieść wartość dodaną do całej witryny.

Po co dodawać ikony społecznościowe do głównego menu?

Strony internetowe i kanały mediów społecznościowych w wielu przypadkach się uzupełniają. Nie wszystkie treści udostępniane na stronie internetowej pojawiają się w kanałach mediów społecznościowych i odwrotnie. Dlatego promowanie swojej witryny w kanałach mediów społecznościowych i kanałów mediów społecznościowych w witrynie nie jest niczym niezwykłym i szczerze mówiąc; gorąco zachęcam.

Chcesz, aby ludzie wchodzili w interakcję z Twoją firmą lub marką w sposób, który najlepiej znają. Twoja witryna jest zwykle dla nich „ nieznanym terytorium ”. Bariera bezpośredniego kontaktu z Tobą przez Twoją stronę może być zatem większa niż w przypadku kanałów mediów społecznościowych. Większość osób, które odwiedzają Twoją stronę na Facebooku lub Twitterze, jest już zintegrowana z platformami, a poczucie komfortu może pozytywnie wpłynąć na ich zachowanie.

Dlatego ogólnie rzecz biorąc, umieszczenie ikon społecznościowych na swojej stronie jest bardzo zalecane. Ale po co udostępniać je wprost w swoim menu głównym? Wymieniliśmy dwa główne powody.

Łatwe do znalezienia/menu podąża za gościem podczas jego wizyty

Gdy dodajesz ikony społecznościowe do swojej witryny, chcesz, aby były jak najbardziej widoczne. Ludzie nie powinni wkładać wysiłku, aby znaleźć ikony społecznościowe w Twojej witrynie. W tym miejscu umieszczenie ikon społecznościowych w menu głównym może mieć znaczenie. Menu główne podąża za osobą przez cały czas jej pobytu na Twojej stronie. Nie musisz szukać ikon, ikony przychodzą do Ciebie. Jedyne, co musi zrobić osoba, to kliknąć i dotrą tam.

Menu główne podąża za osobą przez cały czas jej pobytu na Twojej stronie. Nie musisz szukać ikon, ikony przychodzą do Ciebie. Jedyne, co użytkownik musi zrobić, to kliknąć je, a dostaną się tam.

Działanie wyzwalające

Jak wspomniano wcześniej; kanały mediów społecznościowych i strony internetowe uzupełniają się. Współpracują ze sobą i zwykle mają te same cele, takie jak informowanie potencjalnych potencjalnych klientów i przyciąganie ich do oferowanych usług lub produktów. Im częściej są z nimi skonfrontowani, tym bardziej prawdopodobne jest, że ich ciekawość zostanie uruchomiona

Aby wesprzeć połączenie między stroną internetową a kanałami mediów społecznościowych, dobrze jest jak najczęściej skonfrontować odwiedzających z ikonami społecznościowymi. Im częściej się z nimi stykają, tym bardziej prawdopodobne jest, że ich ciekawość zostanie pobudzona i tym bardziej prawdopodobne, że w końcu je klikną.

Jak dodać ikony społecznościowe do podstawowego menu Divi?

Subskrybuj nasz kanał YouTube

Zainstaluj czcionkę niesamowitą

Przede wszystkim musimy zainstalować Font Awesome na naszej stronie WordPress. Zrobimy to, dodając kod CSS do opcji motywu Divi.

Otwórz swoją witrynę WordPress, przejdź do Divi > Opcje motywu > Integracja 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" />

Font awesome powinien teraz zostać dodany do czcionek używanych w Twojej witrynie. Możesz teraz dodać te ikony do głównego menu, wykonując krok po kroku następną część naszego postu.

Rozpocznij tworzenie menu głównego

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

Następnie nazwij menu, dodaj strony, które mają się pojawiać w menu głównym, i wybierz poniżej opcję „Menu główne”.

Dodaj ikony społecznościowe

Idąc dalej, chcemy dodać ikony społecznościowe. Tworząc menu główne, możesz wybrać, gdzie chcesz wyświetlać ikony społecznościowe. W większości przypadków pojawią się zaraz po stronach, ale możesz też umieścić je na pierwszym miejscu. Istnieją ikony mediów społecznościowych dostępne dla wszystkich ważnych i najpopularniejszych stron internetowych; od Facebooka po Twittera, Instagram, LinkedIn i nie tylko.

Zacznij od otwarcia następującego linku na stronie Font Awesome. Będziemy potrzebować tej witryny w następnej części tego postu, w której będziemy dodawać ikony ręcznie.

Dodaj ikony ręcznie

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

Otwórz opcję „Linki niestandardowe”, a zobaczysz dwa pola: adres URL i etykieta nawigacyjna. Oczywiście w polu adresu URL wpisujesz adres URL, który prowadzi 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 na Instagramie.

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 Instagram zobaczysz, że witryna zawiera następujący kod HTML: 

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

To jest dokładnie ten kod, którego musimy użyć w polu Etykieta nawigacyjna, więc kontynuuj i uzupełnij niestandardowy link, kopiując i wklejając kod w polu.

Powtórz ten sam proces dla każdej z ikon społecznościowych, które chcesz wyświetlić w menu głównym, i spójrz, jak wygląda na interfejsie witryny.

Zmień wygląd ikon społecznościowych

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

Konfigurator motywów umożliwia wprowadzanie w jednym miejscu wszystkich zmian wyglądu, które chcesz wprowadzić w menu głównym.

Zmiany, które możesz wprowadzić w menu głównym za pomocą opcji Divi, dotyczą również ikon społecznościowych. Kiedy na przykład nadajesz określony kolor swojemu menu głównemu, ikony społecznościowe będą miały ten sam kolor. To dlatego, że używamy czcionki zamiast obrazu, aby to zadziałało.

Możesz wprowadzić wszystkie te zmiany, które chcesz wprowadzić w wyglądzie w konfiguratorze motywów, przechodząc do opcji Nagłówek i nawigacja > Główny pasek menu. Wprowadzane zmiany są stosowane w czasie rzeczywistym i dają dobrą perspektywę na to, jak ma wyglądać Twoje menu główne.

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

Ta część postu to coś, co możesz zrobić za pomocą ikon społecznościowych. Prawdopodobnie nie chcesz odsyłać odwiedzających z witryny, nawet jeśli przechodzą do twoich kanałów mediów społecznościowych. Chcesz utrzymać obie interakcje przy życiu tak długo, jak to możliwe, otwierając linki do mediów społecznościowych w nowej karcie za każdym razem, gdy ktoś na nie kliknie.

Możemy łatwo sprawić, by opcja „Otwórz w nowej karcie” działała na wszystkich ikonach mediów społecznościowych, wracając do menu, które stworzyliśmy wcześniej. Wszystkie zmiany w każdej z ikon musimy wprowadzić ręcznie. W tym przykładzie wprowadzimy zmiany w ikonie Instagrama.

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

<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

Zrób to samo dla każdej z ikon, jeśli chcesz, aby otwierały się w nowej karcie. Za każdym razem, gdy odwiedzający je kliknie, otworzy się nowa karta, która pozwoli Ci zatrzymać odwiedzających tak długo, jak to możliwe.

Końcowe przemyślenia

Ten samouczek z pewnością pomoże Ci zintegrować ikony społecznościowe z własną witryną Divi w sposób, w jaki chcesz. Możesz je dostosować i dopasować do reszty głównego menu. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej. Pozostaniemy w kontakcie i postaramy się odpowiedzieć na wszystkie Twoje pytania lub sugestie.

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie za pośrednictwem Oceans / shutterstock.com