Czasami łatwiej powiedzieć, niż zrobić, aby Twoja witryna wyróżniała się z tłumu. Na szczęście możesz zaangażować się w bycie małym majsterkowiczem, dodając kreatywne elementy dostosowywania, które to zapewnią Twój blog wyróżnia się na tle innych.
W tym samouczku pokażę, jak używać kreatora Divi do dostosowywania Twój blog, a w szczególności obszar CSS.
To jest region, o którym mówię:
Oznacza to, że wszelkie zmiany, które tutaj wprowadzimy, będą obowiązywać tylko na edytowanej przez nas stronie. To niezwykle interesująca i użyteczna funkcja!
Oto końcowy wynik, który uzyskamy na końcu tego samouczka. Kolor tła menu nawigacji, który zmienia się w zależności od odwiedzanej strony. Jako dodatkową opcję zauważysz, że ikony również zmieniają kolor.
Najpierw pokażę, jak zastosować kolor tła w menu. Następnie osobno pokażę, jak dopasować ikony społecznościowe.
Jeśli jeszcze nie przeczytałeś naszego poradnika na temat prezentacja tematu WordPress Divi, Zapraszam do zrobienia tego.
Zacznijmy!
Zastosuj kolory do menu
Po pierwsze, używam domyślnego formatu nagłówka. Jeśli używasz innego formatu, ten samouczek powinien być nadal skuteczny, ponieważ ogólny identyfikator „div” w Divi jest taki sam dla wszystkich formatów (# main-header), o ile wiem. Jeśli masz problemy z innymi formatami.
Musimy się upewnić, że linki pojawiają się na dole. Kolory, które wybrałem, które znajdziesz na Coolors.co, jeśli chcesz ich użyć, są ciemniejsze, więc muszę nadać linkowi tekstowemu jasny kolor. Zdecydowałem się na kolor biały.
Używam rgba (255,255,255,0.6), który będzie kolorem linku i ciemnobiałym jako kolorem aktywnego linku (dla pożądanego efektu wizualnego)
Następnie przejdź do strony, na której chcesz zastosować pierwszą zmianę (powinieneś zobaczyć skonfigurowane linki menu). Kliknij ikonę „3 linie”, a pojawi się okno opcji.
Teraz dodaj następujący CSS w tym polu:
# main-header {background: #474f61; }
Powinieneś mieć coś podobnego do tego, nie zapomnij zmienić kodu szesnastkowego na dowolny kolor:
Kliknij na Zapisz i zaktualizuj Dotyczy to menu głównego, wszystko w jednym wierszu kodu.
Teraz wystarczy dodać ten sam kod do wszystkich stron i za każdym razem zmieniać kod szesnastkowy.
Ikony sieci społecznościowych (opcjonalnie)
W tej części zmodyfikujemy kod, który już zrobiliśmy, a następnie dodamy trochę kodu na poziomie CSS witryny, a ja wyjaśnię, dlaczego niektóre CSS powinny być dodawane na poszczególnych stronach, a niektóre nie być.
Najpierw upewnij się, że masz skonfigurowane linki społecznościowe. Idź do „ Opcje Divi> Motyw ogólny I dodaj swoje adresy URL do stron mediów społecznościowych.
Następnie przejdź do ustawień na dodatkowym pasku menu i ustaw kolory tła i tekstu. Wybieram „biały” jako kolor tekstu, ponieważ zamierzam dodać okrągłe kolorowe tło do każdej ikony społecznościowej, aby pasowało do nowego koloru menu, tak aby ikona mogła się pojawić.
Idź do „ Nagłówek i nawigacja> Elementy nagłówka I zaznacz pole „ Pokaż ikony społecznościowe ".
Czy pamiętasz, jak dodaliśmy CSS na każdej stronie? Wrócimy i edytujemy to, co napisaliśmy wcześniej. Zamień to, co masz, na następujący CSS, lub jeśli rozpoznasz, co jest inne, możesz po prostu dodać dodatkowy kod.
# main-header, # top-header i-social-icon a {background: #474f61; }
Ten kod pozwoli naszej witrynie nie tylko zmienić kolor tła menu na tej stronie, ale także tło naszych ikon społecznościowych. Po prostu dodaliśmy kolejny element do miksu. Powinieneś mieć coś, co wygląda następująco:
Może być konieczne sprawdzenie, czy kolory heksadecymalne są prawidłowe na każdej stronie.
Ogólne CSS
Poniższy kod będzie w Twoim „ Opcja motywu> pole CSS Lub w pliku stylu motywu potomnego.
# top-header .and-social-icons li {margines-lewy: 5px; } # top-header i-social-icon a {padding: 4px; margines-dolny: 8px; szerokość: 30px; wysokość: 30px; promień graniczny: 50%; wysokość linii: 24px; }
Być może zastanawiasz się, dlaczego tak nie jest w polu CSS strony. Powodem jest to, że ten konkretny fragment kodu wpływa na wszystkie docelowe elementy, dlatego umieszczenie dokładnie tego samego kodu w wielu miejscach jest nieefektywne. Zmienia się tylko kolor tła na stronie, ale ten kod nie zmienia się na stronie. Jest to po prostu najlepsza praktyka, aby unikać dodawania wagi do swojej witryny.
To wszystko w tym samouczku, mam nadzieję, że pozwoli ci dostosować menu na twoim blog WordPress.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]
Inne samouczki Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Witam,
Dziękuję za wszystkie tutoriale.
Czy wiesz, czy możemy umieścić podmenu divi (drugi poziom poniżej menu rozwijanego) w wypełnieniu-szerokości? która zajmuje całą szerokość strony
Witam,
Jak zmieniasz kolor tekstu w głównym nagłówku? Mając przezroczyste tło (w głównym nagłówku), wybrany przeze mnie kolor czcionki (w moim głównym nagłówku, który przedstawia moje różne sekcje) za pośrednictwem interfejsu dostosowywania divi jest czarny. Chciałbym jednak, aby na NIEKTÓRYCH STRONACH był biały, ponieważ poniższe zdjęcie jest zbyt ciemne.
W jaki sposób?
Z góry dziękuję
Witaj Germain,
Czy chcesz, aby był biały na wszystkich stronach, czy tylko na kilku stronach?