JAK DODAĆ IKONY SPOŁECZNOŚCIOWE  W MENU DIVI

JAK DODAĆ IKONY SPOŁECZNOŚCIOWE W MENU DIVI

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:

 

 

Analiza seo słów kluczowych

Analiza seo słów kluczowych

https://moz.com/explorer

Keyword Explorer jest podobny do SEMrush, jeśli chodzi o funkcjonalność. Pozwala analizować konkretne słowa kluczowe, aby dowiedzieć się, kto z nimi konkuruje.

Oprócz tego, że dajesz informacje o swoich rywalach, możesz również użyć Moz Keyword Explorer, by znaleźć alternatywne słowa kluczowe. Z drugiej strony, jeśli użyjesz tego narzędzia do analizy domeny, pokażą one, do których słów kluczowych masz rangę.

SEMrush to wszechstronne narzędzie SEO, które pomaga znaleźć najlepsze słowa kluczowe. Oprócz umożliwienia Ci badania własnych witryn, możesz także zbadać, jak konkurencja działa i dowiedzieć się, jakie inne witryny konkurują o te same słowa kluczowe.

Ponadto SEMrush dostarcza również dane o kosztach reklamy i pokazuje, które ogłoszenia są lepsze. Możesz go nawet użyć, aby znaleźć informacje o tym, ile osób płaci za reklamy wyświetlane w określonych zapytaniach.

Na koniec SEMrush pokazuje informacje o domenach, które łączą się z twoją witryną. Dzięki temu możesz zapoznać się z profilem wstecznym i dowiedzieć się, czy jest coś, co możesz zrobić, aby uzyskać lepsze rekomendacje .

Dodaj separator/dzielnik między widżetami

Dodaj separator/dzielnik między widżetami

„Ale Tom, a jeśli nie jestem komunistą nienawidzącym granic?”, Możesz zadać sobie pytanie po przejściu przez ostatnie dostosowanie CSS. Cóż, szczerze mówiąc, wolimy nie dyskryminować obrońców granic lub w inny sposób.

W rzeczywistości, aby nadrobić naszą bezmyślność, będziemy Cię uczyć, jak dodać dodatkowe marginesy lub dzielniki do pasków bocznych. Tak, jesteśmy super.

Poniższy kod utworzy dzielniki między poszczególnymi widżetami lub sekcjami paska bocznego, dzięki czemu Twoja witryna będzie bardziej zorganizowana. Możesz modyfikować wysokość i kolor obramowań, zmieniając wartości bezpośrednio od początku.

#sidebar .et_pb_widget {
border-bottom1px solid #ddd;
padding-bottom20px;
margin-bottom20px;
}
#sidebar .et_pb_widget:last-of-type {
border-bottom:0;
}
Accessibility