Chcesz nadać Twojej witrynie internetowej WordPress nowy, świeży wygląd bez spędzania godzin na skomplikowanych zmianach w projekcie?
Tworzymy witryny internetowe WordPress od 2008 roku. I możemy z całą pewnością powiedzieć, że zmiana koloru tła twojej witryny jest jednym z najszybszych sposobów na zmianę jej wyglądu.
Jednak przy wszystkich dostępnych motywach i edytorach WordPress, znalezienie odpowiedniej metody może wydawać się przytłaczające dla początkujących.
W tym łatwym do wykonania przewodniku pokażemy ci dokładnie, jak zmienić kolor tła WordPressa, bez względu na to, jakiego motywu lub kreatora stron używasz.
Dlaczego Twój kolor tła WordPressa ma znaczenie 🎨
Pomyśl o kolorze tła twojej witryny internetowej jak o ścianach twojego cyfrowego domu. Chociaż twój motyw WordPress ma domyślny kolor, wybór odpowiedniego tła może mieć duży wpływ na to, jak przyjazna jest twoja witryna dla odwiedzających.
Oto dlaczego ten element projektu WordPress jest tak importowany:
- Ułatwiają one czytanie twojej treści
- Pomagają one wyróżnić ważne informacje
- Nadają one nastrój twojej witrynie internetowej
- Mogą one sprawić, że twoja witryna będzie wyglądać bardziej profesjonalnie
Odpowiednio dobrany kolor tła może pomóc wyróżnić twoje ważne przyciski i zwiększyć liczbę konwersji. Możesz także użyć różnych kolorów, aby lepiej zorganizować twoją treść, 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 wciągająca, możesz nawet dodać tła film owe, aby przyciągnąć uwagę odwiedzających.
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:
- How to Change Background Color in WordPress Theme Customizer
- How to Change Background Color in Full Site Editor (2024 Method)
- How to Change Background Color in WordPress With CSS
- How to Randomly Change Background Colors in WordPress
- How to Change Background Color for Individual Posts
- Bonus Tip: Use a Page Builder for More Design Control
Jak zmienić kolor tła we własnym konfiguratorze 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.
Jak zmienić kolor tła w pełnym edytorze witryny (metoda 2024)
Edytor pełnej witryny (FSE) to platforma edycyjna WordPress do edycji motywów blokowych. Edytor ten umożliwia bardzo łatwą zmianę koloru tła twojej witryny. Przejdźmy razem przez ten proces.
Zacznij od przejścia do Wygląd ” Edytor w twoim kokpicie WordPress.
Teraz zobaczysz przycisk “Style” w jednej z opcji menu.
Śmiało i kliknij na nią.
Teraz kliknij przycisk edycji ołówkiem.
Spowoduje to przejście do interfejsu edycji.
Teraz po prawej stronie twojego ekranu pojawi się przydatny panel. Jest to twoje centrum kontroli projektu, w którym możesz zmieniać kolory, kroje pisma i nie tylko.
Aby zmienić twój kolor tła, po prostu kliknij “Kolory” w panelu Style.
Następnie kliknij “Tło”.
Możesz teraz wybrać jednolity kolor lub utworzyć gradient. Wybierz to, co pasuje do twojego stylu. Kiedy będziesz zadowolony z twojego wyboru, naciśnij “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 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:
1 2 3 | 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.
Jak losowo zmieniać kolory 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:
1 2 3 4 5 6 7 8 9 10 11 12 | 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:
1 2 3 4 | 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ś.
Jak zmienić kolor 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ć:
1 | <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.
1 2 3 4 | .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.
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 przejąć pełną kontrolę nad wyglądem twojej witryny internetowej, kreator stron może otworzyć o wiele więcej możliwości.
Lubimy korzystać z SeedProd, najpopularniejszego kreatora stron dla WordPressa, ponieważ pozwala on na:
- Zaprojektuj dowolną stronę bez kodowania
- Dostosuj kolory, układy i odstępy.
- Tworzenie profesjonalnie wyglądających stron w kilka minut
- Spraw, by twoje strony wyglądały świetnie na wszystkich urządzeniach
Rozpoczęcie pracy jest łatwe – wystarczy zainstalować i włączyć SeedProd, korzystając z naszego prostego przewodnika instalacji wtyczek WordPress.
Uwaga: Możesz zacząć od darmowej wersji, ale SeedProd Pro daje dostęp do większej liczby szablonów i opcji projektowania, jeśli ich potrzebujesz.
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ą.
Film instruktażowy
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.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.