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.

Przeprowadzimy Cię przez różne łatwe sposoby na zmianę koloru tła w WordPressie, zaczynając od opcji najbardziej przyjaznej dla początkujących, a kończąc na nieco bardziej zaawansowanych technikach.

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

Kolor tła Twojej witryny traktuj jak ściany Twojego cyfrowego domu. Chociaż Twój motyw WordPress jest dostarczany z domyślnym kolorem, wybór odpowiedniego tła może znacząco wpłynąć na to, jak przyjazna dla odwiedzających będzie Twoja witryna.

Oto dlaczego ten element projektu 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ć Twoje konwersje. Możesz także 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

W zależności od motywu, możesz zmienić kolor tła za pomocą Niestandardowych ustawień motywu WordPress. Pozwala to edytować wygląd 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 Niestandardowe ustawienia motywu, gdzie znajdziesz wiele opcji modyfikacji 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ą witrynę 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 (motywy blokowe)

Edytor całego obszaru witryny (FSE) to platforma edycyjna WordPress do edycji motywów blokowych. Ten edytor ułatwia zmianę koloru tła witryny. 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 zmiany koloru tła witryny WordPress jest dodanie niestandardowego CSS w Niestandardowych ustawieniach motywu 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 chcesz dodać płynny efekt zmiany koloru tła do swojej witryny? Ten efekt automatycznie przechodzi przez różne kolory, co może być świetne do wyróżnienia konkretnej sekcji lub przyciągnięcia uwagi.

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ć, używając narzędzia Inspekcja w swojej przeglądarce. Wystarczy najechać kursorem na obszar, którego kolor chcesz zmienić, i kliknąć prawym przyciskiem myszy, aby wybrać narzędzie Inspekcja.

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 Twojego motywu WordPress. Najłatwiejszym sposobem 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 informacji, możesz skorzystać z naszego samouczka 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órych 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 wtyczki WPCode, aby bezpiecznie dodać kod do swojej witryny. Więcej szczegółów znajdziesz w naszym przewodniku na temat wklejania fragmentów z sieci do WordPressa.

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

Chcesz nadać konkretnemu wpisowi na blogu unikalny wygląd? Możesz zmienić kolor tła poszczególnych wpisów za pomocą niestandardowego CSS. Pozwala to wyróżnić specjalne ogłoszenia, kategoryzować treści według koloru lub po prostu wykazać się kreatywnością w projektowaniu.

Najpierw musisz znaleźć konkretną klasę Post ID w kodzie CSS swojego motywu. Po prostu wyświetl post na blogu, który chcesz dostosować, kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz narzędzie „Zbadaj”.

Poszukaj znacznika <article> lub <body> w kodzie źródłowym. Zobaczysz klasę, która wygląda jak post-104 lub postid-104.

Gdy już będziesz mieć swój identyfikator posta, możesz użyć poniższego fragmentu niestandardowego kodu CSS. Pamiętaj, aby zastąpić identyfikator posta i kod koloru własnymi danymi:

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

Aby dodać ten kod, przejdź do Wygląd » Dostosuj i wklej go w zakładce „Dodatkowy CSS”.

Po kliknięciu „Opublikuj” kolor tła zmieni się tylko dla tego konkretnego posta na blogu.

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 różnego stylowania każdego wpisu w WordPressie.

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 WordPressa. 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 naszych doświadczeniach, zapoznaj się z naszą recenzją SeedProd.

Rozpoczęcie pracy jest łatwe – wystarczy zainstalować i aktywować SeedProd, korzystając z naszego prostego przewodnika instalacji wtyczek 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ół, pod sekcją Zaawansowane, znajduje się więcej bloków. Na przykład, możesz dodać licznik czasu, aby stworzyć poczucie pilności, wyświetlić profile społecznościowe, aby zwiększyć liczbę obserwujących, dodać formularz opcji, aby zbierać leady i wiele więcej.

Korzystając z kreatora przeciągnij i upuść, można bez wysiłku zmienić pozycję każdego bloku na stronie docelowej. Można 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 marketingu e-mailowego. 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 i wprowadzić niestandardową domenę.

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

Samouczek wideo

Często zadawane pytania dotyczące zmiany kolorów tła w WordPressie

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.

Więcej wskazówek znajdziesz w naszym przewodniku 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 użyć darmowego narzędzia online, takiego jak HTML Color Codes. Ich selektor kolorów pozwala znaleźć dokładny kod szesnastkowy dla każdego pożądanego odcienia.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak zmienić kolor tła w WordPressie. Możesz również zapoznać się z naszym przewodnikiem na temat konwertowania Figma do WordPressa 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.