Jak zmienić kolor tła w WordPress (przewodnik dla początkujących)

Kolor tła Twojej witryny nadaje nastrój dla Twoich odwiedzających.

Być może chcesz czegoś czystego i profesjonalnego, ciepłego i przyjaznego, lub odważnego i kreatywnego – niezależnie od tego, jaki nastrój chcesz stworzyć, odpowiedni kolor tła może zrobić całą różnicę.

Dobra wiadomość jest taka, że zmiana tego nie wymaga żadnych umiejętności technicznych ani drogich narzędzi. WordPress ma wbudowane funkcje, które pozwalają dostosować kolory za pomocą zaledwie kilku kliknięć.

Po pomocy wielu właścicielom witryn w personalizacji ich stron internetowych, odkryliśmy, że większość ludzi jest zaskoczona tym, jak prosty i natychmiastowy może być ten proces.

Przedstawimy Ci trzy proste sposoby na aktualizację koloru tła w WordPress, zaczynając od opcji najbardziej przyjaznej dla początkujących i przechodząc do nieco bardziej zaawansowanych technik.

Dlaczego kolor tła Twojego WordPress naprawdę ma znaczenie 🎨

Pomyśl o kolorze tła swojej strony internetowej jak o ścianach swojego cyfrowego domu. Chociaż Twój motyw WordPress ma domyślny kolor, wybór odpowiedniego tła może mieć duże znaczenie dla tego, jak przyjazna dla odwiedzających będzie Twoja strona.

Oto dlaczego ten element projektowania WordPress jest tak ważny:

• Sprawiają, że Twoje treści są łatwiejsze do odczytania
• Pomagają wyróżnić ważne informacje
• Nadają nastrój Twojej stronie internetowej
• Mogą sprawić, że Twoja witryna będzie wyglądać bardziej profesjonalnie

Odpowiedni kolor tła może pomóc wyróżnić ważne przyciski i zwiększyć konwersje. Możesz również używać różnych kolorów do lepszej organizacji treści, na przykład używając określonych kolorów dla różnych kategorii blogów lub specjalnych ogłoszeń.

A jeśli chcesz, aby Twoja witryna była jeszcze bardziej angażująca, możesz nawet dodać tła wideo, aby przyciągnąć uwagę odwiedzających.

Niemniej jednak, przyjrzyjmy się, jak zmienić kolor tła w WordPress. Pokażemy różne sposoby dostosowania koloru tła, dzięki czemu możesz przejść do sekcji, którą preferujesz:

• Jak zmienić kolor tła w narzędziu dostosowywania motywu WordPress
• Jak zmienić kolor tła w edytorze pełnej witryny (metoda 2024)
• Jak zmienić kolor tła w WordPress za pomocą CSS
• Jak losowo zmieniać kolory tła w WordPress
• Jak zmienić kolor tła dla poszczególnych wpisów
• Bonus Tip: Use a Page Builder for More Design Control
• FAQ: Zmiana kolorów tła w WordPress

Jak zmienić kolor tła w narzędziu dostosowywania motywu WordPress

W zależności od Twojego motywu, możesz zmienić kolor tła za pomocą Personalizatora motywu WordPress. Pozwala on na edycję wyglądu Twojej witryny w czasie rzeczywistym i bez konieczności edycji kodu.

Aby uzyskać dostęp do narzędzia Dostosowywanie motywu WordPress, możesz zalogować się do swojej witryny, a następnie przejść do Wygląd » Dostosuj.

Otworzy to narzędzie Dostosowywanie motywu, gdzie znajdziesz wiele opcji modyfikacji swojego motywu. Obejmuje to menu, kolory, stronę główną, widżety, obraz tła i inne.

Dostępne opcje będą zależeć od tego, jakiego motywu WordPress używa Twoja witryna. W tym samouczku używamy domyślnego motywu Twenty Twenty-One.

Aby zmienić kolor tła swojej strony internetowej, kliknij zakładkę „Kolory i tryb ciemny” w menu po lewej stronie.

Następnie musisz kliknąć opcję „Kolor tła” i wybrać kolor dla swojej witryny.

Możesz użyć narzędzia do wyboru koloru lub wprowadzić kod koloru szesnastkowego dla swojego tła.

Po zakończeniu zmian nie zapomnij kliknąć przycisku „Opublikuj”.

Możesz teraz odwiedzić swoją stronę internetową WordPress, aby zobaczyć nowy kolor tła w akcji.

Twój motyw może nie mieć tej opcji dostępnej w Personalizatorze motywu. W takim przypadku możesz spróbować jednej z poniższych metod.

Jak zmienić kolor tła w edytorze pełnej witryny (metoda 2024)

Edytor całych witryn (FSE) to platforma edycyjna WordPress do edycji motywów blokowych. Ten edytor sprawia, że zmiana koloru tła Twojej witryny jest niezwykle łatwa. Przejdźmy razem przez ten proces.

Zacznij od przejścia do Wygląd » Edytor w swoim panelu WordPress.

Teraz zobaczysz przycisk „Style” w jednej z opcji menu.

Przejdź dalej i kliknij go.

Teraz kliknij przycisk edycji ołówkiem.

Spowoduje to przejście do interfejsu edycji.

Teraz zauważysz poręczny panel po prawej stronie ekranu. To Twoje centrum kontroli projektu, gdzie możesz zmieniać kolory, czcionki i inne.

Aby zmienić kolor tła, kliknij po prostu „Kolory” w panelu Stylów.

Następnie kliknij „Tło”.

Teraz możesz wybrać między jednolitym kolorem a stworzeniem gradientu. Wybierz to, co pasuje do Twojego stylu. Kiedy będziesz zadowolony z wyboru, kliknij „Zapisz” i gotowe!

Jak zmienić kolor tła w WordPress za pomocą CSS

Zastanawiasz się, jak zmienić kolor tła za pomocą CSS?

Innym sposobem na zmianę koloru tła Twojej strony WordPress jest dodanie niestandardowego CSS w narzędziu do dostosowywania motywów WordPress.

Na początek przejdź do Wygląd » Dostosuj, a następnie przejdź do zakładki „Dodatkowe CSS”.

Następnie możesz wprowadzić następujący kod:

body {
 background-color: #FFFFFF;
}

Wszystko, co musisz zrobić, to zastąpić kod koloru tła kodem koloru, którego chcesz użyć na swojej stronie internetowej. Następnie przejdź do zakładki Dodatkowe CSS i wprowadź kod.

Po zakończeniu nie zapomnij kliknąć przycisku „Opublikuj”. Możesz teraz odwiedzić swoją witrynę, aby zobaczyć nowy kolor tła.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat jak łatwo dodać niestandardowy CSS do swojej witryny WordPress.

Jak losowo zmieniać kolory tła w WordPress

Czy szukasz sposobu na losową zmianę koloru tła w WordPress?

Możesz dodać płynny efekt zmiany koloru tła, aby automatycznie przechodzić między różnymi kolorami tła. Efekt przechodzi przez wiele kolorów, aż osiągnie końcowy kolor.

Aby dodać efekt, musisz dodać kod do swojej witryny WordPress. Poniżej przeprowadzimy Cię przez ten proces.

Pierwszą rzeczą, którą musisz zrobić, to znaleźć klasę CSS obszaru, w którym chciałbyś dodać efekt płynnej zmiany koloru tła.

Możesz to zrobić, korzystając z narzędzia Inspektuj w swojej przeglądarce. Wszystko, co musisz zrobić, to najechać myszą na obszar, którego kolor chcesz zmienić, i kliknąć prawym przyciskiem myszy, aby wybrać narzędzie Inspektuj.

Następnie musisz zapisać klasę CSS, którą chcesz docelowo zmienić. Na przykład, na powyższym zrzucie ekranu chcemy docelowo zmienić obszar z klasą CSS „page-header”.

Następnie musisz otworzyć prosty edytor tekstu na swoim komputerze, na przykład Notatnik, i utworzyć nowy plik. Będziesz musiał zapisać plik jako „wpb-background-tutorial.js” na swoim pulpicie.

Gdy to zrobisz, możesz dodać poniższy kod do utworzonego właśnie pliku JS:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

Jeśli przeanalizujesz kod, zauważysz, że użyliśmy klasy CSS 'page-header', ponieważ jest to obszar, który chcemy docelowo zmienić na naszej stronie internetowej.

Zobaczysz również, że użyliśmy czterech kolorów za pomocą kodu koloru szesnastkowego. Możesz dodać tyle kolorów, ile chcesz dla swojego tła. Wszystko, co musisz zrobić, to wprowadzić kody kolorów w fragmencie i oddzielić je przecinkiem i pojedynczymi cudzysłowami, podobnie jak inne kolory.

Teraz, gdy Twój plik JS jest gotowy, musisz przesłać go do folderu JS swojego motywu WordPress. Najprostszym sposobem na zrobienie tego jest użycie klienta protokołu transferu plików (FTP), który pozwala bezpośrednio zarządzać plikami na serwerze internetowym.

Do tego samouczka użyjemy FileZilla. Jest to darmowy i prosty klient FTP dla systemów Windows, Mac i Linux. W rzeczywistości jest to powszechne narzędzie, które sami testowaliśmy do zarządzania plikami witryny.

Aby rozpocząć, musisz zalogować się na serwer FTP swojej witryny. Dane logowania znajdziesz w wiadomości e-mail od swojego dostawcy hostingu lub w panelu cPanel swojego konta hostingowego.

Po zalogowaniu zobaczysz listę folderów i plików Twojej witryny w kolumnie „Zdalna witryna”. Przejdź do folderu JS w motywie swojej witryny.

Jeśli Twój motyw nie ma folderu js, możesz go utworzyć.

Po prostu kliknij prawym przyciskiem myszy folder swojego motywu w kliencie FTP i kliknij opcję „Utwórz katalog”.

Następnie musisz otworzyć lokalizację swojego pliku JS w kolumnie „Witryna lokalna”.

Następnie kliknij prawym przyciskiem myszy na plik i wybierz opcję „Prześlij”, aby dodać plik do swojego motywu.

Aby uzyskać więcej szczegółów, możesz skorzystać z naszego poradnika na temat jak używać FTP do przesyłania plików do WordPress.

Następnie musisz wprowadzić następujący kod do pliku funtions.php swojego motywu. Ten kod prawidłowo ładuje plik JavaScript i zależny skrypt jQuery, którego potrzebujesz, aby ten kod działał:

function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

Zalecamy użycie darmowego pluginu WPCode, aby bezpiecznie dodać kod do swojej witryny. Więcej szczegółów znajdziesz w naszym przewodniku jak wklejać fragmenty z sieci do WordPress.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć losowo zmieniające się kolory w akcji w obszarze, który wybrałeś.

Jak zmienić kolor tła dla poszczególnych wpisów

Możesz również zmienić kolor tła każdego pojedynczego wpisu na blogu w WordPress zamiast używać jednego koloru na całej stronie internetowej za pomocą niestandardowego kodu CSS.

Pozwala to na zmianę wyglądu konkretnych postów i personalizację ich tła. Na przykład, możesz dostosować styl każdego posta w zależności od autora lub wyświetlić inny kolor tła dla swojego najczęściej komentowanego posta.

Możesz nawet zmienić kolor tła dla postów w określonej kategorii. Na przykład, posty z wiadomościami mogą mieć inne kolory tła w porównaniu do samouczków.

Pierwszą rzeczą, którą musisz zrobić, to znaleźć klasę ID posta w kodzie CSS Twojego motywu. Możesz to zrobić, przeglądając dowolny wpis na blogu, a następnie klikając prawym przyciskiem myszy, aby użyć narzędzia Inspekcja w swojej przeglądarce.

Oto przykład, jak to będzie wyglądać:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

Gdy masz już identyfikator posta, możesz zmienić kolor tła pojedynczego posta, używając poniższego niestandardowego CSS. Po prostu zastąp identyfikator posta, aby pasował do Twojego, oraz kod koloru tła, który chcesz.

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

Aby dodać niestandardowy kod CSS, możesz użyć WordPress Theme Customizer. Najpierw upewnij się, że jesteś zalogowany do swojej witryny WordPress. Następnie odwiedź swój wpis na blogu i kliknij opcję „Dostosuj” na górze.

Następnie przejdź do zakładki Dodatkowy CSS z menu po lewej stronie.

Następnie wprowadź niestandardowy kod CSS.

Gdy to zostanie zrobione, kliknij przycisk „Opublikuj”.

Możesz teraz odwiedzić swój wpis na blogu, aby zobaczyć nowy kolor tła.

Jeśli chcesz zmienić kolor tła w zależności od autora, komentarzy lub kategorii, zapoznaj się z naszym szczegółowym samouczkiem na temat jak inaczej stylizować każdy post WordPress.

Dodatkowa wskazówka: Użyj kreatora stron, aby uzyskać większą kontrolę nad projektem

Zmiana kolorów tła to dopiero początek. Jeśli chcesz w pełni kontrolować projekt swojej witryny, kreator stron może otworzyć wiele więcej możliwości.

W WPBeginner polecamy SeedProd, ponieważ jest to najpopularniejszy i przyjazny dla użytkownika kreator stron dla WordPress. Nasze partnerskie marki również używały go do projektowania swoich stron internetowych, w tym WPForms, Duplicator i Charitable.

Daje Ci to pełną kontrolę nad projektem i pozwala na:

• Projektuj dowolną stronę bez kodowania
• Dostosuj kolory, układy i odstępy
• Twórz profesjonalnie wyglądające strony w kilka minut
• Spraw, aby Twoje strony wyglądały świetnie na wszystkich urządzeniach

Dokładnie przetestowaliśmy narzędzie w naszym środowisku demonstracyjnym i uznaliśmy je za niezwykle intuicyjne i łatwe w użyciu. Aby dowiedzieć się więcej o naszym doświadczeniu, możesz zapoznać się z naszą recenzją SeedProd.

Rozpoczęcie jest łatwe – po prostu zainstaluj i aktywuj SeedProd, korzystając z naszego prostego przewodnika po instalacji pluginów WordPress.

Uwaga: Możesz zacząć od darmowej wersji, ale SeedProd Pro daje Ci dostęp do większej liczby szablonów i opcji projektowania, jeśli ich potrzebujesz.

Po aktywacji wtyczki zostaniesz poproszony o wprowadzenie klucza licencyjnego. Klucz można znaleźć w obszarze konta SeedProd. Po wprowadzeniu klucza kliknij przycisk „Zweryfikuj klucz”.

Następnie możesz przejść do SeedProd » Strony.

Stąd kliknij przycisk „Dodaj nową stronę docelową”.

Następnie musisz wybrać motyw dla swojej strony docelowej. SeedProd oferuje wiele pięknych szablonów stron docelowych, od których możesz zacząć.

Możesz również użyć pustego szablonu, aby zacząć od zera. Sugerujemy jednak użycie szablonu, ponieważ jest to łatwiejszy i szybszy sposób na stworzenie strony docelowej.

Po wybraniu szablonu zostaniesz poproszony o podanie nazwy strony i wybranie adresu URL.

Następnie po prostu kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Na następnym ekranie zobaczysz kreator stron SeedProd. Tutaj możesz użyć kreatora metodą przeciągnij i upuść, aby dodawać bloki z menu po lewej stronie. Możesz dodać nagłówek, wideo, obraz, przycisk itp.

Po przewinięciu w dół, w sekcji Zaawansowane znajdziesz więcej bloków. Na przykład, możesz dodać odliczanie, aby stworzyć poczucie pilności, wyświetlić profile społecznościowe, aby zwiększyć liczbę obserwujących, dodać formularz kontaktowy, aby zbierać dane kontaktowe i wiele więcej.

Korzystając z kreatora przeciągnij i upuść, bez wysiłku można zmienić pozycję każdego bloku na stronie docelowej. Możesz nawet zmienić układ, rozmiar, kolor i czcionkę tekstu.

Aby zmienić kolor tła strony docelowej, po prostu wybierz dowolną sekcję strony. Zobaczysz teraz opcje w menu po lewej stronie, aby edytować styl tła, kolor i dodać obraz.

Po zakończeniu edycji strony docelowej nie zapomnij kliknąć przycisku „Zapisz” u góry.

Następnie możesz przejść do zakładki „Połącz” i zintegrować stronę z różnymi usługami e-mail marketingu. Na przykład możesz połączyć się z Constant Contact, Brevo (dawniej Sendinblue) i innymi.

Następnie kliknij zakładkę „Ustawienia strony”.

Tutaj możesz zmienić status strony z Wersji roboczej na Opublikuj, aby opublikować swoją stronę.

Poza tym możesz również zmienić ustawienia SEO strony, wyświetlić analizy, dodać niestandardowy kod w sekcji Skrypty oraz wprowadzić niestandardową domenę.

Po zakończeniu możesz wyjść z kreatora stron SeedProd i odwiedzić swoją niestandardową stronę docelową.

Samouczek wideo

FAQ: Zmiana kolorów tła w WordPress

Oto kilka pytań, które często zadają nasi czytelnicy dotyczące zmiany kolorów tła w WordPress:

Czy mogę użyć obrazu jako tła zamiast koloru?

Tak, absolutnie możesz. Większość motywów WordPress, które pozwalają na zmianę koloru tła, ma również opcję przesłania obrazu tła.

Zazwyczaj można znaleźć to ustawienie w narzędziu dostosowywania motywu (Wygląd » Dostosuj) w zakładce takiej jak „Obraz tła”. Stamtąd możesz przesłać plik ze swojego komputera.

Czy zmiana koloru tła wpłynie na szybkość mojej witryny?

Jednolity kolor tła praktycznie nie wpływa na szybkość Twojej witryny, co czyni go bezpiecznym i łatwym sposobem na poprawę wydajności.

Jednak użycie dużego, niezoptymalizowanego obrazu tła może znacznie spowolnić czas ładowania strony. Jeśli używasz obrazu, zawsze zalecamy jego skompresowanie.

Aby uzyskać więcej wskazówek, zapoznaj się z naszym przewodnikiem na temat optymalizacji obrazów dla sieci bez utraty jakości.

Jak znaleźć poprawny kod szesnastkowy dla koloru mojej marki?

Kod szesnastkowy to sześciocyfrowy kod reprezentujący określony kolor (np. #FFFFFF dla czystej bieli). Najlepszym miejscem do znalezienia kodu szesnastkowego swojej marki jest oficjalny przewodnik po stylu Twojej firmy.

Jeśli go nie masz, możesz skorzystać z bezpłatnego narzędzia online, takiego jak HTML Color Codes. Ich selektor kolorów pozwala znaleźć dokładny kod szesnastkowy dla dowolnego odcienia, którego potrzebujesz.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak zmienić kolor tła w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak przekonwertować Figmę na WordPress oraz naszym porównaniem najlepszego oprogramowania do projektowania stron internetowych.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.