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

Szukasz łatwego sposobu na zmianę koloru tła swojej witryny WordPress?

Kolor tła Twojej strony internetowej odgrywa ważną rolę w projektowaniu i brandingu oraz w zwiększaniu czytelności treści.

W tym artykule pokażemy, jak łatwo zmienić kolor tła swojej witryny WordPress.

Po co zmieniać kolor tła w WordPress?

Motyw WordPress ma domyślny kolor tła. Zmiana koloru tła może pomóc spersonalizować wygląd witryny i poprawić czytelność.

Na przykład można wyróżnić określoną sekcję Strony za pomocą innego koloru tła. Pomaga to podkreślić wezwanie do działania (CTA) i zwiększyć konwersje.

Możesz użyć różnych kolorów tła dla różnych postów na swoim blogu WordPress na podstawie autorów, komentarzy lub kategorii. Pomaga to odróżnić artykuły od innych treści na twojej stronie.

Istnieje również sposób dodawania tła wideo, aby natychmiast przyciągnąć uwagę odwiedzających i zwiększyć zaangażowanie.

Mając to na uwadze, przyjrzyjmy się, jak zmienić kolor tła w WordPress. Pokażemy Ci różne sposoby dostosowywania koloru tła, abyś mógł przejść do dowolnej sekcji:

• Zmień kolor tła za pomocą WordPress Customizer
• Zmień kolor tła za pomocą niestandardowego CSS
• Losowo Zmieniaj Kolory Tła
• Zmień kolor tła dla poszczególnych postów
• Użyj wideo w tle
• Tworzenie niestandardowej strony docelowej

Zmień kolor tła za pomocą WordPress Theme Customizer

W zależności od motywu możesz zmienić kolor tła za pomocą dostosowywania motywu WordPress. Pozwala edytować wygląd witryny w czasie rzeczywistym i bez potrzeby edytowania kodu.

Aby uzyskać dostęp do dostosowywania motywów WordPress, możesz zalogować się do swojej witryny, a następnie przejść do Wygląd ” Dostosuj.

Spowoduje to otwarcie dostosowywania motywu, w którym znajdziesz wiele opcji modyfikacji motywu. Obejmuje to Menu, kolory, stronę główną, widżety, obraz tła i inne.

Konkretne dostępne opcje zależą od tego, z którego motywu WordPress korzysta Twoja witryna. W tym samouczku używamy domyślnego motywu Twenty Twenty-One.

Aby zmienić kolor tła witryny, kliknij kartę Ustawienia „kolory i tryb ciemny” z menu po lewej stronie.

Następnie musisz kliknąć opcję „Kolor tła” i wybrać kolor dla swojej witryny. Możesz użyć narzędzia próbnik kolorów lub wprowadzić kod koloru sześciokątnego dla tła.

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

Twój motyw może nie mieć tej opcji dostępnej w edytorze motywów. W takim przypadku możesz wypróbować jedną z poniższych metod.

Zmień kolor tła, dodając własny CSS

Innym sposobem na zmianę koloru tła witryny WordPress jest dodanie niestandardowego CSS w edytorze motywów WordPress.

Na początek udaj się do Wygląd ” Dostosuj a następnie przejdź do zakładki „dodatkowy 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ć w swojej witrynie. Następnie wprowadź kod w dodatkowej karcie CSS.

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

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat łatwego dodawania niestandardowego CSS do witryny WordPress.

Losowo zmieniaj kolory tła w WordPress

Teraz szukasz sposobu, aby losowo zmienić kolor tła w WordPress?

Możesz dodać efekt płynnej zmiany koloru tła, aby automatycznie przełączać się między różnymi kolorami tła. Efekt przechodzi przez wiele kolorów, aż do osiągnięcia ostatecznego koloru.

Aby dodać efekt, musisz dodać kod do swojej witryny WordPress. Przeprowadzimy Cię przez proces poniżej.

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

Można to zrobić za pomocą narzędzia Inspect w przeglądarce. Wszystko, co musisz zrobić, to wziąć mysz do obszaru, który chcesz zmienić kolor i kliknij prawym przyciskiem myszy, aby wybrać narzędzie Inspect.

Następnie musisz zapisać klasę CSS, którą chcesz kierować. Na przykład na powyższym zrzucie ekranu chcemy skierować obszar na nagłówek strony klasy CSS.’

Następnie musisz otworzyć zwykły edytor tekstu na komputerze, taki jak Notatnik, i utworzyć nowy plik. Musisz zapisać plik jako ’ wpb-background-tutorial.js ’ na pulpicie.

Po zakończeniu możesz dodać następujący 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();
                kolory.push (kolor);
                $ to.animate ({backgroundColor: color}, 2000);
            },4000);
        });
        }); 

Jeśli przestudiujesz kod, zauważysz, że użyliśmy klasy CSS „page-header”, ponieważ jest to obszar, który chcemy skierować na naszą stronę internetową.

Zobaczysz również, że użyliśmy czterech kolorów, używając 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 za pomocą przecinka i pojedynczych cudzysłowów, podobnie jak inne kolory.

Teraz, gdy plik JS jest gotowy, musisz przesłać go do folderu js motywu WordPress za pomocą usługi file transfer protocol (FTP).

W tym samouczku używamy Filezilli. Jest to darmowy klient FTP dla Systemów Windows, Mac i Linux i jest bardzo łatwy w użyciu.

Aby rozpocząć, musisz zalogować się na serwerze FTP swojej witryny. Poświadczenia logowania można znaleźć w wiadomości e-mail od dostawcy usług hostingowych lub na pulpicie nawigacyjnym cPanel konta hostingowego.

Po zalogowaniu się w kolumnie „strona zdalna” zobaczysz listę folderów i plików witryny. Przejdź do folderu JS w motywie witryny.

Jeśli twój motyw nie ma folderu js, możesz go utworzyć. Po prostu kliknij prawym przyciskiem myszy folder motywu w kliencie FTP i kliknij opcję „Utwórz katalog”.

Następnie musisz otworzyć lokalizację pliku JS w kolumnie „witryna lokalna”. Następnie kliknij plik prawym przyciskiem myszy i kliknij opcję „Prześlij”, aby dodać plik do motywu.

Aby uzyskać więcej informacji, możesz skorzystać z naszego samouczka na temat korzystania z FTP do przesyłania plików do WordPress.

Następnie musisz wprowadzić następujący kod do funkcji motywu.plik php. Ten kod poprawnie ładuje plik JavaScript i zależny skrypt jQuery, którego potrzebujesz do działania tego kodu.

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 wtyczki urywki kodu, aby bezpiecznie dodać kod do witryny. Aby uzyskać więcej informacji, zobacz nasz przewodnik na temat wklejania fragmentów z internetu do WordPress.

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć losowo zmieniające się kolory w akcji w wybranym obszarze.

Zmień kolor tła dla poszczególnych postów

Możesz także zmienić kolor tła każdego pojedynczego posta na blogu w WordPress zamiast używać jednego koloru w całej witrynie za pomocą niestandardowego CSS.

Pozwala zmienić wygląd konkretnych postów i spersonalizować ich tło. Na przykład możesz dostosować styl każdego postu na podstawie autorów lub pokazać inny kolor tła dla najczęściej komentowanego postu.

Możesz nawet zmienić kolor tła dla postów w określonej kategorii. Na przykład wiadomości mogą mieć różne kolory tła w porównaniu z samouczkami.

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

Oto przykład jak by to wyglądało:

<article id = "post-104" class = "post-104 typ postu-status postu-format publikacji-standardowa Kategoria hentry-uncategorized"> 

Po uzyskaniu identyfikatora postu możesz zmienić kolor tła pojedynczego postu za pomocą następującego niestandardowego CSS. Wystarczy zastąpić identyfikator postu, aby pasował do własnego i kodu koloru tła, który chcesz.

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

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

Następnie udaj się do Dodatkowe CSS Zakładka z menu po lewej stronie.

Następnie wprowadź niestandardowy kod CSS, a następnie kliknij przycisk „Publikuj”.

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

Jeśli chcesz zmienić kolor tła na podstawie autora, komentarzy lub kategorii, sprawdź nasz szczegółowy samouczek, jak inaczej stylizować każdy post WordPress.

Użyj wideo w tle

Używanie filmów jako tła witryny to świetny sposób na przyciągnięcie uwagi odwiedzających i zwiększenie zaangażowania użytkowników.

Najprostszym sposobem na dodanie wideo w tle jest użycie wtyczki WordPress. W tym samouczku użyjemy mb.YTPlayer dla filmów w tle.

Jest to darmowa wtyczka, która pozwala odtwarzać filmy z YouTube w tle witryny WordPress. Dostępna jest również wersja premium, która pozwala usunąć mb.YTPlayer watermark i oferuje więcej funkcji dostosowywania.

Najpierw musisz zainstalować i aktywować wtyczkę na swojej stronie internetowej. Aby uzyskać więcej informacji, możesz śledzić nasz samouczek na temat instalacji wtyczki WordPress.

Po aktywacji możesz udać się do mb.pomysły ” YTPlayer z obszaru administracyjnego WordPress.

Na następnym ekranie musisz wprowadzić adres URL swojego filmu z YouTube i aktywować wideo w tle.

Poza tym wtyczka pozwala wybrać lokalizację, aby wyświetlić wideo w tle. Możesz wybrać statyczną stronę główną, stronę indeksu bloga lub obie te opcje. Istnieje również opcja wyświetlania wideo na całej stronie, jeśli wybierzesz ” wszystkie.’

Po wprowadzeniu adresu URL filmu i aktywowaniu tła przejdź do swojej witryny, aby zobaczyć tło wideo w akcji.

Tworzenie niestandardowej strony docelowej

Tworzenie niestandardowych stron docelowych w WordPress pozwala generować potencjalnych klientów i zwiększać sprzedaż dla Twojej firmy. Masz pełną kontrolę nad kolorem tła i wyglądem strony.

Najprostszym sposobem na stworzenie wysoce angażującej niestandardowej strony docelowej jest użycie SeedProd. Jest to najlepsza wtyczka strony docelowej dla WordPress i oferuje łatwy w użyciu Kreator stron typu przeciągnij i upuść, aby tworzyć strony bez edycji kodu.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować SeedProd na swojej stronie internetowej. Możesz zapoznać się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Uwaga: Będziemy używać wersji SeedProd Pro, ponieważ oferuje ona bardziej zaawansowane funkcje, szablony i opcje dostosowywania. Istnieje jednak również darmowa wersja dostępna na WordPress.org.

Gdy wtyczka jest aktywna, zostaniesz poproszony o wprowadzenie klucza licencyjnego. Możesz znaleźć klucz w obszarze Konta SeedProd. Po wprowadzeniu klucza kliknij przycisk „zweryfikuj klucz”.

Następnie możesz udać się do SeedProd ” Strony i kliknij przycisk „Dodaj nową stronę docelową”.

Następnie musisz wybrać motyw dla strony docelowej. SeedProd oferuje wiele pięknych szablonów stron docelowych,aby 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 tworzenia strony docelowej.

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

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

Po przewinięciu w dół w sekcji Zaawansowane znajduje się więcej bloków. Na przykład możesz dodać minutnik, aby utworzyć pilność, pokazać profile społecznościowe, aby zwiększyć liczbę obserwujących, dodać formularz opcji do zbierania potencjalnych klientów i nie tylko.

Korzystając z Kreatora przeciągnij i upuść, łatwo jest 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, SendinBlue i innymi.

Następnie kliknij kartę „Ustawienia strony”. Tutaj możesz zmienić status strony z wersji roboczej na publikację, aby strona była aktywna.

Poza tym możesz również zmienić ustawienia SEO strony, wyświetlić analitykę, dodać niestandardowy kod w skryptach i wprowadzić niestandardową domenę.

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

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, jak wybrać najlepszy kreator stron internetowych lub nasze porównanie najlepszego oprogramowania do projektowania stron internetowych.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.