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

Prowadzenie udanej strony internetowej bez dedykowanej obecności w mediach społecznościowych jest praktycznie niemożliwe. Niezależnie od tego, czy wybierzesz Instagram, Twitter, TikTok, Facebook, czy dowolną kombinację tych i czegokolwiek innego, ludzie chcą bezpośrednio wchodzić w interakcję z Tobą i Twoją marką. Upewnienie się, że masz ikony społecznościowe w głównym menu Divi, to świetny sposób na kierowanie ruchu z Twojej witryny do wybranej sieci. To szybkie i łatwe, a my przeprowadzimy Cię przez każdy krok.

Zacznijmy!

Zapowiedź

Pulpit

mobilny

Użyj kreatora motywów Divi, aby przesłać darmowy globalny nagłówek

W tym artykule użyjemy pakietu układu Tennis Club i darmowego nagłówka/stopki. Możesz pobrać pakiet układu z poziomu swojego kreatora Divi, a pakiet nagłówka/stopki z naszego bloga. Po pobraniu pliki będą miały postać archiwum .zip . Upewnij się, że je wyodrębniłeś, aby mieć plik .json do przesłania do Divi.

Teraz przejdź do pulpitu WordPress i znajdź Divi Theme Builder w Divi – Theme Builder . Kliknij ikonę strzałki w górę i w dół w prawym górnym rogu strony. Spowoduje to otwarcie modułu przenośności , wybierz kartę Importuj , znajdź plik .json dla pobranego nagłówka/stopki i kliknij Importuj szablony Divi Theme Builder .

Następnie chcesz przejść do sekcji nagłówka swojej witryny. Ponieważ są to ikony społecznościowe, umieścimy je w globalnym nagłówku, ponieważ uważamy, że powinny znajdować się na wszystkich stronach w Twojej witrynie (o ile nie określono inaczej).

Powinieneś być teraz wewnątrz budowniczego. Jeśli postępowałeś zgodnie z powyższymi wskazówkami, nowy przesłany nagłówek powinien pojawić się już na swoim miejscu.

Możesz zauważyć, że są już tutaj ikony społecznościowe. Te ikony społecznościowe nie znajdują się jednak w głównym menu Divi, nad czym pracujemy dzisiaj. Więc wejdźmy w chwasty, dobrze?

Dodaj ikony społecznościowe do głównego paska menu

Po pierwsze, zmieńmy strukturę wiersza/kolumny. Chcemy znaleźć wiersz w sekcji 2 (dolny z linkami Strona główna/Kontakt ).

W tym samouczku wybieramy strukturę dwukolumnową, ale jest to najlepsza opcja dla Twojej witryny. Po wybraniu tego przejdź do ustawień wiersza i przejdź do karty Projekt . Znajdź menu Rozmiar i włącz opcję Użyj niestandardowej szerokości rynny . Ustaw wartość Gutter Width na 1. Możesz wpisać liczbę lub użyć w tym celu suwaka.

Kliknij zielony znacznik wyboru, aby zapisać ustawienia. Następnie wróć do ustawień wiersza. Tym razem wybierz koło zębate ustawień dla górnej/pierwszej/lewej kolumny.

Następnie przejdź do zakładki Zaawansowane . Znajdź obszar Custom CSS i kliknij pole Main Element . Wewnątrz tego pola będziesz chciał dodać następujący kod CSS.

width:80%;

lub

width:80%!important;

Być może będziesz musiał dodać tag !important, aby nadać styl temu elementowi. W porządku. Nie powinno powodować problemów z wydajnością ani kodu spaghetti, z którym trzeba sobie poradzić, ponieważ jest to pojedynczy element.

Następnie przejdź do ustawień responsywności i użyj tego samego kodu, aby zmienić szerokość kolumny z powrotem na 100% dla urządzeń mobilnych.

Następnie powtórz ten krok dla drugiej kolumny. Tylko tym razem ustaw domyślną wartość na 20% i nadal miej wartość mobilną na 100% .

Po wykonaniu tych czynności zapisz zmiany i przygotuj się na dodawanie i stylizowanie ikon mediów społecznościowych.

Dodaj moduł śledzenia mediów społecznościowych

Kliknij czarną ikonę + w kolumnie 2, aby dodać nowy moduł i przewijaj, aż znajdziesz Social Media Follow . Włóż to.

Niezależnie od używanego nagłówka domyślne ikony mediów społecznościowych najprawdopodobniej nie będą pasować do Twojego stylu. Nie będą też prawidłowo ustawione. Następnym krokiem będzie prawidłowe ich stylizowanie i rozmieszczenie. W ustawieniach modułu Social Media Follow przejdź do Design , a następnie Alignment . Wybierz, gdzie chcesz umieścić moduł.

Wybieramy odpowiednio wyjustowany dla pulpitu, a następnie przechodzimy do opcji Responsywności i centrujemy go.

Następnym krokiem jest przewijanie w dół do menu Ikona . Wybierz kolor ikony, którą chcesz. To jest f na Facebooku, ptak na Twitterze, aparat na Instagramie. To nie jest na przykład niebieskie tło.

Dalej jest odstęp. Naprawdę najważniejszą rzeczą, która wymaga dostosowania, jest górna marża. Zamierzamy zastosować górny margines o wartości 1,5 vw, aby wyśrodkować go z tekstem menu. Jeśli chcesz go mniej więcej na urządzenia mobilne, możesz to również dostosować.

Teraz kliknij kartę Treść i przejdź do indywidualnej ikony sieci społecznościowej, którą chcesz dostosować. Powtórzysz te kroki dla każdej ikony wybranej dla swojej witryny.

Przewiń w dół do opcji Tło i wybierz żądany kolor, który pasuje do projektu witryny. Ponownie, pamiętaj, że zmieni to tylko tło tej konkretnej ikony.

Możesz także zmienić kolor tej konkretnej ikony. Możesz to zrobić w zakładce Projekt i w sekcji Ikona , tak jak w całym module. To ustawienie zastąpi ogólne, więc nie musisz się martwić o zakłócanie innych, jeśli chcesz jednorazowych kolorów.

Następnie przewiń w dół do wpisu Obramowanie pod zakładką Projekt , a w nim znajdziesz Szerokość obramowania . Ustaw tę wartość na 3px, a następnie wybierz kolor obramowania, który wyróżnia się na tle głównego menu Divi.

W tym momencie wrócisz do karty Treść i powtórzysz te kroki dla każdej ikony sieci społecznościowej, którą chcesz wyświetlić. Jeśli chcesz, aby każda z ikon w tym module miała ten sam projekt, możesz po prostu kliknąć prawym przyciskiem myszy ten, który zaprojektowałeś i wybrać opcję Kopiuj style elementów .

Następnie kliknij prawym przyciskiem myszy inne sieci, do których chcesz nadać styl, i wybierz opcję Wklej style elementów .

I to wszystko! Pamiętaj, aby kliknąć przycisk Zapisz w prawym dolnym rogu ekranu, aby zapisać ogólny układ. Następnie możesz bezpiecznie wyjść X z ekranu edycji w prawym górnym rogu.

Upewnij się, że strona Divi Theme Builder pokazuje wszystkie zmiany zapisane w lewym górnym rogu. Jeśli nie, kliknij Zapisz zmiany . Po zakończeniu Twoja witryna będzie aktywna, wyświetlając ikony mediów społecznościowych w Twoim głównym menu Divi!

Ostateczne rezultaty

I tak powinny wyglądać Twoje wyniki końcowe.

Pulpit

mobilny

Zawijanie

Upewnienie się, że Twoi odbiorcy zawsze mogą znaleźć Twoje główne sieci społecznościowe, to bułka z masłem z Divi. W zaledwie kilku krokach możesz dostosować jeden z naszych darmowych pakietów nagłówków/stopek, aby umieścić ikony mediów społecznościowych w menu głównym (lub w dowolnym innym miejscu). Powodzenia!

Co sądzisz o ikonach mediów społecznościowych w menu głównym? Gdzie je umieszczasz?