utworzone przez admin | paź 9, 2018 | PORADY, wordpress
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:
utworzone przez admin | paź 7, 2018 | Aktualności, PORADY, SEO, wordpress
„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.
border-bottom: 1px solid #ddd; |
#sidebar .et_pb_widget:last-of-type { |
utworzone przez admin | paź 7, 2018 | Aktualności, PORADY, wordpress
Jeśli masz dobre oko, być może zauważyłeś małe obramowanie w dolnej części nagłówka Divi. Przygotujcie się na trochę emocji, ponieważ dzisiaj nauczymy was, jak na dobre pozbyć się tej nieznośnej granicy.
Ryzykując nadmuchiwanie niektórych umysłów, musimy wyjaśnić, że mały separator nie jest dokładnie ramą per se , ale prostym cieniem CSS, a poniższy kod po prostu ustawia jego wartość na „none”.
-webkit-box-shadow:none !important; |
-moz-box-shadow:none !important; |
box-shadow:none !important; |
utworzone przez admin | paź 7, 2018 | PORADY, wordpress
Ten jest dość prosty – zmieniamy domyślną szerokość widżetu paska bocznego Divi. Jeśli kiedykolwiek czułeś się zbyt wąski, wystarczy spojrzeć na poniższy kod.
Ten kod zmieni domyślną szerokość na 300px i ustawi margines 30px na brzegu ekranu przeglądarki. Być może zauważyłeś tam również zapytanie o media. Ponieważ zamierzamy wymusić nową szerokość i margines, gdyby nie to zapytanie o media, twoja strona mogłaby pęknąć na małych ekranach.
Do celów testowych ustawiliśmy minimalną szerokość 1 200 pikseli, aby wymusić zmiany CSS opisane poniżej. Jeśli rozdzielczość przeglądarki odpowiada lub przekracza to minimum, będą mogli zobaczyć twój nowy pasek boczny.
@media only screen and ( min-width: 1200px ) { |
.et_right_sidebar #sidebar .et_pb_widget { |
margin-right:30px !important; |
.et_left_sidebar #sidebar .et_pb_widget { |
margin-left:30px !important; |
.et_right_sidebar #left-area, |
.et_left_sidebar #left-area { |
.et_right_sidebar #main-content .container:before { |
.et_left_sidebar #main-content .container:before { |
.et_right_sidebar #sidebar, |
.et_left_sidebar #sidebar { |
