Przejdź do głównej treści

Jak zmienić kolor menu między stronami Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Czasami wyróżnienie witryny z tłumu jest łatwiejsze niż powiedzenie. Na szczęście możesz dać się wciągnąć w grę małego majsterkowicza, dodając kreatywne elementy personalizacji, które sprawią, że Twój blog będzie wyróżniał się z tłumu.

W tym samouczku pokażę, jak używać konstruktora Divi do dostosowywania swojego bloga, szczególnie w obszarze 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

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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 blogu WordPress.

Inne samouczki Divi

Ten artykuł zawiera komentarze 3

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

  2. 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ę

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
22 akcji
udział13
ćwierkanie2
Enregistrer7