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

Kolor tła twojej witryny internetowej odgrywa ważną rolę w projektowaniu i budowaniu marki. Sprawia, że twoja treść jest bardziej czytelna i pomaga przyciągnąć uwagę użytkownika, gdy tylko ktoś wyląduje na twojej witrynie internetowej.

W WPBeginner używamy WordPressa od ponad 15 lat i widzieliśmy, jak ewoluował, aby znacznie ułatwić użytkownikom zmianę kolorów tła. Na przykład, można użyć pełnego edytora witryny lub konfiguratora motywu, aby zmodyfikować motyw i wybrać inny kolor.

W tym artykule pokażemy ci kilka sposobów na łatwą zmianę koloru tła twojej witryny WordPress.

Dlaczego warto zmienić kolor tła w WordPress?

Motyw WordPress jest dostarczany z domyślnym kolorem tła. Zmiana koloru tła może pomóc spersonalizować wygląd twojej witryny internetowej i poprawić jej czytelność.

Można na przykład wyróżnić określoną sekcję strony za pomocą innego koloru tła. Pomaga to wyróżnić twoje wezwanie do działania (CTA) i zwiększyć liczbę konwersji.

Możesz używać różnych kolorów tła dla różnych wpisów na twoim blogu WordPress w oparciu o autorów, komentarze lub kategorie. Pomaga to odróżnić artykuły od innych treści w twojej witrynie internetowej.

Istnieje również sposób na dodanie tła filmowego, aby natychmiast przyciągnąć uwagę odwiedzających Twoją stronę i zwiększyć zaangażowanie.

W związku z tym przyjrzyjmy się, jak zmienić kolor tła w WordPress. Pokażemy ci różne sposoby na dostosowanie koloru tła, abyś mógł przejść do sekcji, którą preferujesz:

Film instruktażowy

Jeśli wolisz pisemne instrukcje, czytaj dalej.

Zmiana koloru tła za pomocą konfiguratora motywu WordPress

W zależności od twojego motywu, możesz być w stanie zmienić kolor tła za pomocą konfiguratora motywu WordPress. Pozwala on edytować wygląd twojej witryny w czasie rzeczywistym i bez konieczności edytowania kodu.

Aby uzyskać dostęp do konfiguratora motywu WordPress, zaloguj się do swojej witryny internetowej, a następnie przejdź do Wygląd ” Dostosuj.

Spowoduje to otwarcie konfiguratora motywu, w którym znajdziesz wiele opcji modyfikacji twojego motywu. Obejmuje to menu, kolory, stronę główną, widżety, obrazek tła i wiele innych.

Konkretne dostępne opcje będą zależeć od tego, z jakiego motywu WordPress korzysta twoja witryna. W tym poradniku używamy domyślnego motywu Twenty Twenty-One.

Aby zmienić kolor tła twojej witryny internetowej, kliknij kartę ustawień „Kolory i tryb ciemny” w menu po lewej stronie.

Następnie należy kliknąć opcję „Kolor tła” i wybrać kolor dla twojej witryny internetowej.

Możesz użyć narzędzia wyboru koloru lub wpisz kod koloru Hex dla twojego tła.

Po wprowadzeniu zmian nie zapomnij kliknąć przycisku „Opublikuj”.

Możesz teraz przejść na swoją witrynę internetową WordPress, aby zobaczyć nowy kolor tła w działaniu.

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

Zmiana koloru tła za pomocą edytora pełnej witryny

Edytor pełnej witryny (FSE) to oparty na blokach edytor motywów WordPress, którego możesz użyć do edycji koloru tła twojej witryny. Oferuje on różne bloki umożliwiające dostosowanie wyglądu witryny internetowej i jest podobny do korzystania z edytora bloków WordPress.

Pełny edytor witryn jest obecnie dostępny w wybranych motywach WordPress, takich jak motyw Twenty Twenty-Two. Aby wykonać zmianę koloru tła, możesz przejść do Wygląd ” Edytor z twojego kokpitu WordPress.

Po przejściu do pełnego edytora witryny można zmienić kolor tła poszczególnych bloków.

Najpierw wybierz blok, który chcesz edytować. Następnie w panelu ustawień po twojej prawej stronie przejdź do sekcji „Kolor” i kliknij opcję „Tło”, aby wybrać kolor.

Po zakończeniu kliknij przycisk „Zapisz”.

Z drugiej strony, jeśli chcesz dodać kolor tła, który pojawi się za wszystkimi blokami, możesz dodać blok Cover.

Najpierw kliknij znak „+” u góry i dodaj blok „Okładka”.

Następnie w szablonie motywu pojawi się blok „Okładka” z kilkoma opcjami koloru tła do wyboru.

Alternatywnie, możesz przejść do sekcji Nakładka z panelu ustawień po twojej prawej stronie i kliknąć opcję „Kolor”.

Po wybraniu koloru, następnym krokiem jest pokazanie go na całej twojej stronie.

Aby rozpocząć, należy kliknąć ikonkę widoku listy z trzema kreskami u góry. Spowoduje to otwarcie konspektu twojego motywu i wyświetlenie różnych sekcji.

Następnie wystarczy przeciągnąć i upuścić wszystkie elementy motywu w widoku listy pod blokiem Okładka.

Gdy to zrobisz, twój kolor bloku okładki pojawi się jako kolor tła na całej witrynie internetowej.

Nie zapomnij kliknąć przycisku „Zapisz” u góry, aby zapisać twoje zmiany.

Zmiana koloru tła poprzez dodanie własnego CSS

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

Innym sposobem na zmianę koloru tła twojej witryny internetowej WordPress jest dodanie własnego CSS w konfiguratorze motywu WordPress.

Aby rozpocząć, przejdź do Wygląd ” Konfigurator, a następnie przejdź do karty „Dodatkowe CSS”.

Następnie wpisz 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 witrynie internetowej. Następnie wpisz kod w karcie Dodatkowe CSS.

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

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

Losowa zmiana kolorów tła w WordPress

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

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

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

Pierwszą rzeczą, którą musisz zrobić, jest znalezienie klasy CSS obszaru, w którym chcesz dodać efekt płynnej zmiany koloru tła.

Możesz to zrobić za pomocą narzędzia Insp ect w twojej przeglądarce. Wszystko, co musisz zrobić, to najechać myszką na obszar, którego kolor chcesz zmienić i kliknąć prawym przyciskiem myszy, aby wybrać narzędzie Inspect.

Następnie musisz zapisać klasę CSS, na którą chcesz kierować reklamy. Na przykład, na powyższym zrzucie ekranu, chcemy wycelować w obszar z klasą CSS „strona-nagłówek”.

Następnie musisz otworzyć zwykły edytor tekstu na twoim komputerze, taki jak notatnik, i utworzyć nowy plik. Będziesz musiał zapisać plik jako „wpb-background-tutorial.js” na twoim pulpicie.

Gdy to zrobisz, możesz dodać następujący kod do właśnie utworzonego 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 przestudiujesz kod, zauważysz, że użyliśmy klasy CSS „page-header”, ponieważ jest to obszar, na który chcemy kierować reklamy na naszej witrynie internetowej.

Zobaczysz również, że użyliśmy czterech kolorów przy użyciu kodu szesnastkowego. Możesz dodać dowolną liczbę kolorów dla twojego tła. Wszystko, co musisz zrobić, to wpisz kody kolorów we fragmencie kodu i oddziel je przecinkiem i pojedynczym cudzysłowem, tak jak inne kolory.

Teraz, gdy twój plik JS jest gotowy, musisz przesłać go do katalogu JS twojego motywu WordPress za pomocą usługi protokołu przesyłania plików (FTP).

W tym poradniku użyjemy programu FileZilla. Jest to darmowy klient FTP dla systemów Windows, Mac i Linux, który jest bardzo łatwy w użyciu.

Aby rozpocząć, musisz logować się do serwera FTP twojej witryny internetowej. Dane uwierzytelniające można znaleźć w e-mailu od dostawcy hostingu lub w kokpicie cPanel twojego konta hostingowego.

Po zalogowaniu się zobaczysz listę katalogów i plików twojej witryny internetowej w kolumnie „Zdalna witryna”. Przejdź do katalogu JS w motywie twojej witryny.

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

Wystarczy kliknąć prawym przyciskiem myszy katalog twojego motywu w kliencie FTP i kliknąć opcję „Utwórz katalog”.

Następnie musisz otworzyć lokalizację twojego pliku JS w kolumnie „Witryna regionalna”.

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

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

Następnie wpisz następujący kod do pliku funtions.php twojego motywu. Ten kod poprawnie wczytuje plik JavaScript i zależny skrypt jQuery, który jest potrzebny 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 skorzystanie z darmowej wtyczki WPCode, aby bezpiecznie dodać kod do twojej witryny. Więcej szczegółów można znaleźć w naszym przewodniku na temat wklejania fragmentów kodu z sieci do WordPressa.

Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć losowo zmieniające się kolory w działaniu w obszarze, na który celowałeś.

Zmiana koloru tła dla poszczególnych wpisów

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

Pozwala na zmianę wyglądu konkretnych wpisów i personalizację ich tła. Możesz na przykład dostosować styl każdego wpisu na podstawie autorów lub wyświetlić inny kolor tła dla najczęściej komentowanego wpisu.

Możesz nawet zmienić kolor tła dla wpisów z danej kategorii. Na przykład wpisy z wiadomościami mogą mieć inny kolor tła niż poradniki.

Pierwszą rzeczą, którą musisz zrobić, jest znalezienie klasy identyfikatora wpisu w CSS twojego motywu. Możesz to zrobić, zobacz dowolny wpis na blogu, a następnie kliknij prawym przyciskiem myszy, aby użyć narzędzia Inspect w twojej przeglądarce.

Oto przykład tego, jak mogłoby to wyglądać:

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

Gdy masz już identyfikator wpisu, możesz zmienić kolor tła pojedynczego wpisu za pomocą poniższego własnego CSS. Po prostu zamień identyfikator wpisu na twój własny i kod koloru tła, który chcesz.

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

Aby dodać własny CSS, możesz użyć konfiguratora motywu WordPress. Najpierw upewnij się, że logujesz się do swojej witryny internetowej WordPress. Następnie przejdź na twój wpis na blogu i kliknij opcję „Dostosuj” u góry.

Następnie przejdź do karty Additional CSS w menu po twojej lewej stronie.

Następnie wpisz własny CSS.

Po zakończeniu kliknij przycisk „Opublikuj”.

Możesz teraz przejść na twój wpis na blogu, aby zobaczyć nowy kolor tła.

Jeśli chcesz zmienić kolor tła w oparciu o autora, komentarze lub kategorię, zapoznaj się z naszym szczegółowym poradnikiem na temat stylizowania każdego wpisu WordPress w inny sposób.

Użyj filmu w tle

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

Najprostszym sposobem na dodanie filmu w tle jest użycie wtyczki WordPress. W tym poradniku użyjemy mb.YTPlayer do filmów w tle.

Jest to darmowa wtyczka, która umożliwia odtwarzanie filmów z YouTube w tle Twojej witryny internetowej WordPress. Dostępna jest również wersja premium, która pozwala usuwać znak wodny mb.YTPlayer i oferuje również więcej funkcji dostosowywania.

Najpierw musisz zainstalować i włączyć wtyczkę na swojej witrynie internetowej. Aby uzyskać więcej informacji, możesz skorzystać z naszego poradnika na temat instalacji wtyczki WordPress.

Po włączaniu, możesz udać się do mb.ideas ” YTPlayer z twojego obszaru administracyjnego WordPress.

Na następnym ekranie musisz wpisz adres URL twojego filmu z YouTube i włączanie filmu w tle.

Poza tym, wtyczka pozwala wybrać miejsce wyświetlania twojego filmu w tle. Możesz wybrać statyczną stronę główną, stronę główną indeksu bloga lub obie. Istnieje również opcja wyświetlania filmu na całej twojej witrynie, jeśli wybierzesz opcję „Wszystkie”.

Gdy już wpiszesz adres URL filmu i włączysz tło, przejdź na twoją witrynę internetową, aby zobaczyć tło wideo w działaniu.

Utwórz własną stronę docelową (Landing Page)

Tworzenie własnych stron docelowych w WordPress pozwala generować leady i zwiększać sprzedaż dla twojego biznesu. Masz pełną kontrolę nad kolorem tła i wyglądem strony.

Najłatwiejszym sposobem na stworzenie wysoce angażującej własnej strony docelowej jest użycie SeedProd. Jest to najlepsza wtyczka do landing page’y dla WordPressa, która oferuje łatwy w użyciu kreator stron typu „przeciągnij i upuść”, umożliwiający tworzenie stron bez edytowania kodu.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie SeedProd na twojej witrynie internetowej. Możesz zapoznać się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

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

Po włączeniu wtyczki zostaniesz poproszony o wpisz klucza licencyjnego. Klucz można znaleźć w obszarze twojego konta SeedProd. Po wpisz klucz, kliknij przycisk „Zweryfikuj klucz”.

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

Następnie kliknij przycisk „Utwórz nową stronę docelową”.

Następnie musisz wybrać motyw dla twojej strony docelowej. SeedProd oferuje wiele 111111 pięknych szablonów stron docelowych.

Możesz także 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 wpisz nazwę strony i wybierz adres URL.

Następnie wystarczy kliknąć przycisk „Zapisz i rozpocznij edycję strony”.

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

Po przewinięciu w dół, w sekcji Zaawansowane znajduje się więcej bloków. Możesz na przykład dodać licznik czasu, aby stworzyć pilną potrzebę, 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ść„, możesz łatwo zmienić położenie każdego bloku na twojej stronie docelowej. Możesz nawet zmienić układ, rozmiar, kolor i krój pisma tekstu.

Aby zmienić kolor tła twojej strony docelowej, po prostu wybierz dowolną sekcję strony. W menu po twojej lewej stronie pojawią się opcje edycji stylu tła, koloru i dodania obrazka.

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

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

Następnie przejdź dalej i kliknij kartę „Ustawienia strony”.

Tutaj możesz zmienić status strony z Wersja robocza na Opublikuj, aby Twoja strona stała się aktywna.

Poza tym możesz także zmienić ustawienia SEO strony, zobaczyć analitykę, dodać własny kod w sekcji Skrypty i wpisz własną domenę.

Gdy skończysz, możesz wyjść z kreatora stron SeedProd i przejść na twoją własną 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 na temat konwertowania Figma na WordPress i naszym porównaniem najlepszych programów do projektowania stron internetowych.