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 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecana]

Wyróżnianie witryny z tłumu jest czasem łatwiejsze niż zostało powiedziane. Na szczęście możesz zagrać w zrób to sam, dodając kreatywne personalizacje, które wyróżnią twój blog od innych.

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

Oznacza to, że wszelkie zmiany, które tutaj zastosujemy, będą skuteczne tylko na edytowanej stronie. To niesamowicie interesująca i przydatna funkcja!

Oto końcowy wynik, jaki otrzymamy na końcu tego samouczka. Kolor tła menu nawigacyjnego, który zmienia się w zależności od odwiedzanej strony. Dodatkową opcją jest fakt, że ikony zmieniają także kolor.

Najpierw pokażę, jak zastosować kolor tła w menu. Następnie osobno pokażę, jak dopasować ikony społecznościowe.

Jeśli nie przeczytałeś naszego tutoriala na prezentacja tematu WordPress Divi, Zapraszam cię do tego.

Zacznijmy!

Zastosuj kolory do menu

Najpierw używam domyślnego formatu nagłówka. Jeśli użyjesz innego formatu, ten samouczek powinien nadal być skuteczny, ponieważ ogólny identyfikator Divi Divi jest taki sam dla wszystkich formatów (# main-header), o ile wiem. Jeśli masz problemy z innymi formatami.

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

Musimy się upewnić, że linki znajdują się na dole. Kolory, które wybrałem, które znajdziesz na Coolors.co, jeśli chcesz ich użyć, są na najciemniejszej stronie, więc muszę zrobić link tekstowy w jasnym kolorze. Zdecydowałem się na biały kolor.

Używam rgba (255,255,255,0.6), który będzie koloru łącza i ciemnobiały jako kolor 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ę w "Linie 3" i pojawi się okno opcji.

Teraz dodaj następujące CSS w tym polu:

# main-header {background: #474f61; }

Powinieneś mieć coś podobnego do tego, nie zapomnij zmienić szesnastkowego kodu wybranego koloru:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Kliknij " Zapisz i aktualizuj I to będzie dotyczyło menu głównego, wszystko w jednym wierszu kodu.

Teraz wystarczy dodać ten sam kod do wszystkich swoich stron i za każdym razem zmienić kod szesnastkowy.

Ikony sieci społecznościowej (opcjonalnie)

W tej części zamierzamy zmodyfikować kod, który już zrobiliśmy, a następnie dodać kod na poziomie CSS witryny, a ja wyjaśnię, dlaczego niektóre CSS powinny być dodane na poszczególnych stronach i dlaczego niektóre nie powinny być.

Najpierw musisz upewnić się, że skonfigurowałeś swoje linki społecznościowe. Idź do " Divi Options> General Theme I dodaj swoje adresy URL do stron mediów społecznościowych.

Następnie przejdź do ustawień na pasku podmenu i ustaw kolory tła i tekst. Wybieram "biały" jako kolor tekstu, ponieważ zamierzam dodać zaokrąglone tło koloru do każdej ikony społecznościowej, aby dopasować ją do nowego koloru menu, 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 zredagujemy to, co napisaliśmy wcześniej. Zastąp to, co masz, poniższym CSS lub jeśli rozpoznasz, co jest innego, 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. Właśnie dodaliśmy kolejny element do miksu. Powinieneś mieć coś, co wygląda tak:

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Być może trzeba sprawdzić, czy kolory heksadecymalne są poprawne na każdej stronie.

Ogólne CSS

Poniższy kod będzie w twoim " Opcja motywu> Pole CSS Lub w pliku stylu tematu 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 nie dzieje się tak dobrze w polu CSS strony. Powodem jest to, że ten konkretny fragment kodu wpływa na wszystkie elementy docelowe, więc nie jest wydajne umieszczanie tego samego kodu w wielu miejscach. Zmienia się tylko kolor tła na stronę, ale ten kod nie zmienia się na stronę. To najlepsza praktyka, aby nie dodawać wagi do 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 zmienić kolor tekstu w głównym nagłówku? Mając przezroczyste tło (w moim głównym nagłówku), kolor czcionki, który wybrałem (w moim głównym nagłówku, który przedstawia moje różne sekcje) za pośrednictwem interfejsu personalizacji divi, jest czarny. Chciałbym jednak, aby był NIEBIESKI na NIEKTÓRYCH STRONACH, 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. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

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