W artykule:
Większość widżetów paska bocznego w WordPress zwykle wygląda tak samo. Byłoby dobrze, gdyby wszystkie Twoje widżety miały takie samo znaczenie, ale prawda jest taka, że niektóre widżety są ważniejsze dla rozwoju Twojej witryny niż inne. Na przykład widżet subskrypcji listy e-mail jest z pewnością ważniejszy niż widżet archiwum. Czy nie byłoby miło, gdybyś mógł łatwo stylizować ważne widżety inaczej? W tym artykule pokażemy, jak dodać niestandardowe style do widżetów WordPress.
Używanie wtyczki do dodawania niestandardowych stylów do widżetów WordPress
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Widget CSS Classes. Po aktywacji wystarczy przejść do Wygląd ” Widgety i kliknij dowolny widżet na pasku bocznym, aby rozwinąć.
Zauważysz nowy Klasa CSS pole poniżej widżetów, dzięki czemu można łatwo zdefiniować klasę CSS dla każdego widżetu. Na przykład, dodaliśmy Subskrybuj klasy do naszego widżetu formularza subskrypcji.
Teraz możesz przejść do arkusza stylów szablonu i dodać tam swoje reguły stylu. O tak.:
.subscribe {
background-color: #858585;
color: # FFF;
}
Możesz dodać dowolny niestandardowy CSS, który chcesz, na przykład dodać tło, zmienić granice, użyć różnych kolorów itp.
Ręczne dodawanie niestandardowych stylów do widżetów WordPress
Jeśli nie chcesz używać wtyczki, możesz ręcznie dodać niestandardowe style do widżetów WordPress. Domyślnie WordPress dodaje klasy CSS do różnych elementów, w tym widżetów.
Każdy widżet na pasku bocznym ma klasę widżetu numerowanego. Jak widget-1, widget-2, widget-3, itp. Korzystając z narzędzia Inspect Element w przeglądarce Google Chrome, możesz znaleźć klasę CSS dla widżetu, który chcesz dostosować.
Jak widać na powyższym zrzucie ekranu, widżet, który chcemy dostosować, ma widget-2 Klasa dodana przez WordPress. Teraz przejdź do arkusza stylów szablonu i dodaj własne reguły stylu.
.widget-2 {
background-color: #858585;
color: # FFF;
}
.widget-2 .widget-title {
font-weight: bold;
}
To wszystko, mamy nadzieję, że ten artykuł pomógł Ci dodać niestandardowe style do widżetów WordPress. Baw się CSS i eksperymentuj z różnymi kolorami. Użyj testów podzielonych A / B, aby dowiedzieć się, które niestandardowe style działają najlepiej dla Twojej witryny.
Ponadto, jeśli chcesz łatwiej wyróżnić widżet formularza Subskrybuj pasek boczny, wypróbuj OptinMonster, ponieważ oferuje wiele projektów, testy A/B i wiele więcej.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Google+.
