Jak zmienić kolor menu WooCommerce Storefront

Konfiguracja sklepu WooCommerce zajmuje dużo czasu, a znalezienie odpowiedniego motywu jest również dużym wyzwaniem. Jednak twórcy WooCommerce stworzyli motyw Storefront, który jest dostępny za darmo i jest bardzo elastyczny w dostosowywaniu. Stworzenie idealnego projektu layoutu, który pokochają użytkownicy, zajmuje wiele godzin. Możesz zmienić kolor menu lub kolor innego elementu, który Cię denerwuje.

WooCommerce Storefront Zmień kolor menu

Niemniej jednak bardzo łatwo jest dokonać tych dostosowań za pomocą opcji „Dostosuj” w obszarze „Wygląd” na pulpicie nawigacyjnym. Ta sekcja umożliwia łatwą zmianę motywu na wiele sposobów dozwolonych przez autora motywu. Jednak autor motywu nie może myśleć o wszystkim, a zmiana koloru menu może należeć do tej kategorii.

Niestandardowy CSS jest zapisywany osobno w zależności od motywu, a sztuczka polega po prostu na ustaleniu, jakiego CSS użyć. W tym krótkim samouczku pokażę Ci, jak możesz to zrobić. Co więcej, będziesz mógł zmienić kolor dowolnego elementu w motywie Storefront.

Kroki, aby zmienić kolor menu motywu Storefront

Oto proste kroki, które musisz wykonać:

1. Zidentyfikuj element, który chcesz zmienić

Bardzo łatwo jest powiedzieć „zmień kolor menu”. Jednak wdrożenie go to inna sprawa. Każdy motyw ma inny sposób odwoływania się do swoich elementów, dlatego zaleca się użycie właściwego, aby stylizacja CSS mogła działać. Oznacza to, że zanim będziemy mogli cokolwiek zmienić, musimy zapanować nad tym, co chcemy zmienić.

Po prostu kliknij prawym przyciskiem myszy obszar, który chcesz zmienić w przeglądarce takiej jak Chrome lub Firefox i kliknij „Sprawdź element” w następujący sposób:

Po kliknięciu otworzy się konsola zawierająca różne elementy strony po lewej stronie i ustawienia tych elementów po prawej stronie. Teraz musisz znaleźć element odpowiedzialny za zmianę koloru.

Aby wybrać element, kliknij selektor elementów, jak pokazano na zrzucie ekranu. Następnie wskaż kursorem element menu, aby sprawdzić styl. Wyszukaj słowa takie jak „tło” lub „kolor tła”. Gdy go znajdziesz, odznacz i zaznacz znacznik „ptaszka” obok nich, aby sprawdzić, czy powodują zmianę koloru menu. Jeśli kolor się nie zmienia, to nie jest ten, którego szukasz.

2. Wybierz żądany kolor

Teraz, gdy wykonałeś już ciężką pracę, następnym krokiem jest zmiana koloru. Można to zrobić, odznaczając istniejącą opcję koloru i klikając w pobliżu nawiasu zamykającego „}”. To pozwoli Ci wprowadzić swoją regułę CSS. Musisz wpisać coś w rodzaju „kolor tła”, nacisnąć tabulator i wpisać żądany kolor.

W moim przykładzie zmieniłem kolor na czerwony i widać, że menu nad konsolą również zmieniło kolor na czerwony. Należy jednak pamiętać, że nie powoduje to żadnych rzeczywistych zmian w Twojej witrynie. Działa to tylko jako tymczasowa zmiana, która jest widoczna w Twojej przeglądarce. Pozwala eksperymentować do woli. Co więcej, możesz nawet zdecydować się na umieszczenie obrazu jako tła. Teraz, gdy jesteś zadowolony ze swoich zmian, nadszedł czas, aby stały się one trwałe.

3. Wydobywanie nowej reguły

Musisz wyodrębnić regułę, klikając ją prawym przyciskiem myszy (w Firefoksie) w ten sposób i wybierając "Kopiuj regułę":

Jeśli jednak korzystasz z Chrome, możesz po prostu zaznaczyć całą regułę za pomocą myszy i skopiować tekst. Wklej go do edytora i usuń wszystkie istniejące reguły z wyjątkiem nowo dodanej, jeśli takie istnieją.

4. Dodawanie reguły

Pozostała część to skopiowanie/wklejenie do sekcji „ Dodatkowy CSS ” interfejsu dostosowywania motywu Storefront. Aby to zrobić:

• Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
• W menu Dashboard kliknij menu Wygląd > Dostosuj .
• Przejdź w dół do Dodatkowe CSS na lewym pasku bocznym, który się pojawi.
• Dodaj regułę CSS, jak pokazano poniżej:
• Kliknij publikuj, gdy będziesz zadowolony ze zmian.

Wniosek

W tym samouczku pokazałem Ci bardzo prosty sposób na zmianę koloru menu motywu Storefront w zaledwie czterech prostych krokach. Co więcej, możesz skorzystać z powyższej procedury, aby zmodyfikować wygląd dowolnego elementu na swojej stronie, a nie tylko menu. Najtrudniejszą częścią jest po prostu znalezienie odpowiedniego elementu i właściwej zasady do zmiany.

Po zidentyfikowaniu elementu należy wybrać preferowany kolor. Obszar konsoli umożliwia wprowadzanie reguł CSS, ale nie powoduje to żadnych rzeczywistych zmian w witrynie. Pozwala poeksperymentować ze swoimi regułami i zobaczyć je w akcji przed wdrożeniem ich w witrynie.

Gdy będziesz zadowolony ze zmian, musisz wyodrębnić nową regułę i wkleić ją w sekcji Dodatkowe CSS w interfejsie dostosowywania Storefront. Jeśli jesteś pod wrażeniem zmian, możesz kliknąć publikuj. Do tej pory jestem pewien, że możesz zmienić kolor dowolnego elementu na swojej stronie!

Podobne artykuły

1. Jak zmienić tekst przycisku kasy w WooCommerce [Złóż zamówienie]
2. Stylizacja tabeli, wiersza, kolumn i komórek w formacie HTML
3. Jak dodać aktywną klasę nawigacji na podstawie adresu URL
4. Jak zmienić powiadomienie „Dodano do koszyka” WooCommerce?
5. Jak zmienić tekst przycisku Dodaj do koszyka na stronie sklepu WooCommerce?
6. Jak liczyć przedmioty dodane do koszyka Kod liczenia koszyka WooCommerce
7. Jak ukryć sumę częściową koszyka w WooCommerce lub usunąć wiersz sumy częściowej?
8. Jak utworzyć oddzielną stronę z postami lub blogiem WordPress?
9. Oddzielne stylizowanie pozycji menu WordPress Klasy CSS w menu WordPress
10. Jak wybrać wszystko oprócz ostatniego dziecka w CSS »Przykład CSS Not Last Child
11. Ponad 80 sztuczek, aby dostosować motyw WooCommerce Storefront: Najlepszy przewodnik po dostosowywaniu motywu Storefront
12. Jak zmienić rozmiar ikony koszyka w motywie WooCommerce Storefront?
13. Jak zmienić rozmiar motywu przycisku menu mobilnego Storefront?
14. Jak przekierować stronę WordPress bez wtyczek?
15. Jak dodać nowe menu w menu strony Moje konto w Woocommerce?
16. Jak usunąć tekst stopki wiadomości e-mail „Zbudowany za pomocą WooCommerce”
17. Jak zrobić przewijalne menu Divi Mobile Quick Fix?
18. Jak przejść do zmiany tekstu w kasie w WooCommerce
19. Jak dostosować wysokość nagłówka sklepu WooCommerce?