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ę:

Niestandardowa sekcja kreatora css dla WordPress

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.

Ikona zmieniająca kolor divi

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.

Format nagłówka Divi

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.

Personalizacja menu Divi

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.

Kreator Divi dla Wordpress

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:

Ustawienia divi dostosowywania kolorów

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.

Ikona divi społecznej

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ć.

Dostosowywanie menu pomocniczego

Idź do „ Nagłówek i nawigacja> Elementy nagłówka I zaznacz pole „ Pokaż ikony społecznościowe ".

Element nagłówka Divi wordpress

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:

Niestandardowy edytor motywów Divi z kodem CSS

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.

Niestandardowe opcje motywu sekcji divi css

# 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