Zmiana koloru tekstu w WordPress nie jest skomplikowana. Trzeba tylko znać odpowiednie miejsce, aby to zrobić.
Sam proces jest w rzeczywistości dość prosty, ale odkryliśmy, że nie wszyscy wiedzą, jak zrobić to skutecznie. Dzieje się tak, ponieważ proces ten może się różnić w zależności od twojej konkretnej sytuacji.
Na przykład, jeśli korzystasz z klasycznego motywu, możesz mieć możliwość zmiany koloru tekstu tylko dla całej witryny, a nie dla konkretnej strony. A czasami kolor, którego chcesz użyć, nie jest nawet dostarczany przez twój motyw.
Te scenariusze mogą sprawić, że poczujesz się zagubiony lub niepewny, jak kontynuować. Ale nie martw się! Spędziwszy ponad dekadę w WordPressie, omówimy wiele sposobów zmiany koloru tekstu w WordPressie, niezależnie od twojego motywu lub konkretnych potrzeb.
Dlaczego warto zmienić kolor tekstu w WordPress?
Istnieje wiele powodów, dla których warto zmienić kolor tekstu w WordPress. Może chcesz wyróżnić wezwanie do działania na stronie docelowej, a może chcesz użyć kolorowych podtytułów na twojej witrynie.
Czasami możesz nawet chcieć zmienić kolor tekstu na całej witrynie internetowej. Na przykład, być może twój motyw WordPress używa szarego koloru pisma, ale wolałbyś użyć czarnego, aby uzyskać lepszy kontrast z kolorem tła.
Możesz również użyć koloru, aby wywołać emocje u odwiedzających Twoją stronę. Na przykład, wiele osób uważa, że kolor niebieski tworzy poczucie zaufania i niezawodności. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat wyboru idealnego schematu kolorów dla twojej witryny internetowej WordPress.
To powiedziawszy, zobaczmy, jak można zmienić kolor tekstu w WordPress. Po prostu użyj poniższych odnośników, aby przejść do preferowanej metody:
- Method 1: How to Change Text Color in Block Editor
- Method 2: How to Change Text Color in Theme Customizer (Classic Themes Only)
- Method 3: How to Change Text Color in Full Site Editor (Block Themes Only)
- Method 4: How to Change Text Color With CSS Code (More Customizable)
- Method 5: How to Change Text Color in a Page Builder
Porada eksperta: Masz trudności z zaprojektowaniem Twojej witryny internetowej WordPress? Pozwól naszemu zespołowi WPBeginner Pro Services przekształcić twoją witrynę tak, aby dokładnie odpowiadała twojej wizji. Zaplanuj twoją bezpłatną konsultację już dziś i zobacz, jak możemy ci pomóc!
Metoda 1: Jak zmienić kolor tekstu w edytorze bloków
Jeśli chcesz zmienić tylko kilka słów, akapit lub nagłówek we wpisie, możesz użyć edytora treści WordPress. Ta metoda działa niezależnie od tego, czy używasz motywu blokowego, czy klasycznego.
Aby rozpocząć, otwórz wpis lub stronę, na której chcesz zmienić kolor tekstu lub utwórz nową stronę.
Jeśli jeszcze tego nie zrobiłeś, wpisz tekst, który chcesz dostosować. W zależności od tekstu może być konieczne dodanie akapitu, nagłówka lub innego bloku, który akceptuje tekst. Aby uzyskać pomoc w tym zakresie, zapoznaj się z naszym przewodnikiem na temat korzystania z edytora bloków WordPress.
Gdy masz już tekst, możesz zmienić jego kolor.
Zmiana koloru tekstu w bloku
W tym pierwszym przykładzie zmienimy kolor tekstu dla całego bloku. Jest to dobry sposób na wyróżnienie całej sekcji treści, na przykład całego akapitu.
Wystarczy kliknąć blok, a następnie wybrać kartę „Blokuj” w menu po prawej stronie.
Gdy to zrobisz, znajdź sekcję „Kolor” i kliknij „Tekst”.
Edytor wizualny pokaże teraz kilka kolorów, które uzupełniają twój motyw WordPress. Możesz po prostu kliknąć dowolny kolor, aby zmienić cały tekst wewnątrz tego bloku.
Aby użyć innego koloru, wystarczy kliknąć pole w górnej części wyskakującego okienka.
Spowoduje to otwarcie selektora, w którym można wybrać nowy kolor pisma.
Innym rodzajem opcji jest wpisanie kodu szesnastkowego, który jest kodem HTML dla określonego koloru. Jest to przydatne, jeśli chcesz użyć bardzo konkretnego koloru, takiego jak dokładny odcień czerwieni z logo twojej witryny internetowej.
Jeśli nie masz pewności, jakiego kodu szesnastkowego użyć, pomocna może być witryna taka jak Kody kolorów HTML. Tutaj można zapoznać się z różnymi kolorami i uzyskać ich kody szesnastkowe.
Gdy masz już kod, wklej go lub wpisz w polu „Hex”.
Jeśli zmienisz zdanie i zechcesz przywrócić domyślny kolor tekstu, kliknij kropkowany przycisk w menu po prawej stronie.
Opcje, które zobaczysz, będą się różnić w zależności od tego, czy zmieniłeś również kolor tła bloku, więc może być konieczne kliknięcie „Tekst” lub „Resetuj wszystko”.
Zmiana koloru tekstu słowa lub frazy
Czasami możesz chcieć zmienić kolor tylko określonego słowa, frazy lub zdania, takiego jak wezwanie do działania na twojej stronie.
Aby to zrobić, wystarczy podświetlić słowo lub frazę, którą chcesz zmienić w edytorze bloków WordPress. Następnie kliknij małą strzałkę w dół na pasku narzędzi edytora treści i kliknij „Podświetl”.
Spowoduje to otwarcie wyskakującego okienka pokazującego kilka kolorów, które będą dobrze wyglądać z twoim obecnym, aktualnym motywem.
Możesz także wybrać kolor ręcznie lub nawet użyć kodu szesnastkowego, postępując zgodnie z tym samym procesem opisanym powyżej.
Pro Tip: Chcesz zmienić kolor twoich odnośników? Sprawdź nasz przewodnik dla początkujących, jak zmienić kolor odnośników w WordPress.
Metoda 2: Jak zmienić kolor tekstu w konfiguratorze motywu (tylko motywy klasyczne)
Kolor może przyciągać uwagę do najważniejszych treści na stronie, ale wiele różnych kolorów może być przytłaczających. Mając to na uwadze, zazwyczaj warto używać tego samego koloru tekstu na większości twojej witryny internetowej WordPress.
Ręczna zmiana każdej strony i wpisu za pomocą edytora bloków zajęłaby dużo czasu, więc zamiast tego zalecamy zmianę samego motywu za pomocą konfiguratora motywów.
Uwaga: Jeśli brakuje konfiguratora motywu, to najprawdopodobniej używasz motywu blokowego i możesz przejść do metody 3.
Aby rozpocząć, przejdź do Wygląd ” Dostosuj.
Teraz należy znaleźć ustawienia tekstu motywu. Każdy motyw jest inny, ale zazwyczaj trzeba szukać opcji „Typografia”.
Na naszych obrazkach używamy OceanWP.
Kliknij „Typografia” lub podobne ustawienie. W tym momencie zwykle zobaczysz wszystkie różne rodzaje tekstu używane w motywie, takie jak Nagłówek 1 i Tytuł strony.
Aby zmienić tekst wewnątrz twoich wpisów i stron, kliknij sekcję „Body” lub podobną.
Aby dostosować kolor tekstu, znajdź sekcję „Kolor pisma”.
Następnie kliknij „Wybierz kolor”.
Spowoduje to otwarcie selektora. Możesz użyć jednego z gotowych kolorów, wybrać nowy kolor za pomocą ustawień lub wpisać rodzaj kodu szesnastkowego.
Jeśli chcesz przywrócić domyślny kolor motywu w dowolnym momencie, po prostu kliknij „Domyślny”.
Za pomocą tych ustawień można również zmienić wielkość liter, styl, odstępy między literami i nie tylko.
Gdy będziesz zadowolony z wyglądu tekstu, kliknij przycisk „Opublikuj” u góry ekranu.
Metoda 3: Jak zmienić kolor tekstu w pełnym edytorze witryny (tylko motywy blokowe)
Jeśli korzystasz z motywu opartego na blokach, takiego jak ThemeIsle Hestia Pro lub Twenty Twenty-Three, proces zmiany koloru tekstu motywu jest nieco inny.
Aby dostosować tekst za pomocą Edytora całej witryny, przejdź do Motywy „ Edytor.
Teraz zobaczysz kilka menu, aby dostosować wygląd twojej witryny internetowej.
Tutaj należy wybrać opcję „Style”. Ta sekcja definiuje globalne kolory, typografię i układ twojej witryny internetowej.
Na następnym ekranie zobaczysz kilka kombinacji stylów do wyboru. Jeśli chcesz całkowicie zmienić wygląd twojego motywu blokowego, możesz po prostu wybrać jedną z dostępnych opcji.
Ale dla celów demonstracyjnych przejdziemy dalej i klikniemy przycisk ołówka „Edytuj style”.
Pojawi się teraz pełny edytor witryny i otwarta zostanie karta Style.
Kliknij „Kolory”.
Panel boczny pokaże kilka elementów, których ustawienia kolorów można zmienić, takich jak tekst, odnośniki, podpisy, przyciski i nagłówki.
Każdy z nich będzie miał inne ustawienia kolorów, więc pamiętaj, aby je zbadać, aby zobaczyć, co potrafią.
Użyjmy przykładu, klikając „Nagłówek”.
Aby zmienić kolor nagłówka, można wybrać jeden z predefiniowanych kolorów motywu lub użyć własnego, klikając selektor kolorów.
Gdy będziesz zadowolony z wyglądu twoich kolorów tekstu, po prostu kliknij przycisk „Zapisz”. Wszystkie wprowadzone zmiany zostaną zastosowane do wszystkich twoich stron i wpisów.
Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących na temat pełnej edycji witryny WordPress.
Metoda 4: Jak zmienić kolor tekstu za pomocą kodu CSS (bardziej konfigurowalny)
W zależności od twojego motywu, zmiana tekstu na całej witrynie za pomocą menu konfiguratora może nie być możliwa. Jedną z opcji jest ręczna zmiana każdego fragmentu tekstu przy użyciu jednej z metod opisanych w tym wpisie. Jednak zajęłoby to dużo czasu i wysiłku.
Dobrą wiadomością jest to, że można dostosować tekst na całej witrynie, dodając własny CSS. Co więcej, ta metoda pozwala zdefiniować różne kolory dla określonych rodzajów tekstu, takich jak nagłówek 1 (h1) lub tekst akapitu (p).
Ponieważ edycja i konfigurator motywu WordPress mogą się zmieniać w zależności od motywu, zalecamy użycie WPCode, aby dodać własny CSS do twojej witryny.
WPCode to najlepsza wtyczka do fragmentów kodu używana przez ponad 1 milion witryn internetowych WordPress. Ułatwia dodawanie własnych CSS, PHP, HTML i innych bez konieczności edytowania rdzennych plików WordPress.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu udaj się do Code Snippets ” Add Snippet.
Tutaj zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny.
Po prostu najedź kursorem myszy na „Dodaj swój własny kod”, a następnie wybierz „Użyj fragmentu kodu”, gdy się pojawi.
Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w kokpicie WordPress.
Następnie otwórz listę rozwijaną „Rodzaj kodu” i wybierz „Fragment kodu CSS”.
Następnie możesz dodać własny CSS do małego edytora kodu. Będziesz musiał wpisać selektor dla rodzaju tekstu, który konfigurujesz, a następnie kod szesnastkowy dla koloru, którego chcesz użyć.
Można na przykład zmienić kolor tekstu akapitu, dodając poniższe polecenie:
p { color:#990000; }
Jeśli chcesz użyć innego koloru dla nagłówków twojej witryny, musisz użyć selektorów h1, h2, h3 lub podobnych.
Widać to na poniższym obrazku.
Jeśli nie jesteś pewien, jakiego kodu szesnastkowego użyć, możesz skorzystać z witryny takiej jak Kody kolorów HTML.
Gdy będziesz zadowolony z fragmentu kodu, przewiń do sekcji „Wstaw”. WPCode może dodać CSS do różnych miejsc, takich jak po każdym wpisie, tylko frontend lub tylko administrator.
Aby zmienić tekst na całym twoim blogu WordPress, kliknij opcję „Wstaw automatycznie”, jeśli nie jest jeszcze wybrana. Następnie otwórz menu rozwijane „Położenie” i wybierz „Nagłówek całej witryny”.
Gdy to zrobisz, przewiń do góry ekranu i kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.
Na koniec kliknij przycisk „Zapisz fragment”, aby uruchomić fragment kodu CSS.
Teraz, jeśli przejdziesz na swoją witrynę, zobaczysz własny tekst na żywo.
Jeśli chcesz użyć innego koloru tekstu w dowolnym miejscu lub po prostu dodać więcej CSS do tego fragmentu, po prostu przejdź do Fragmenty kodu „ Fragmenty kodu. Tutaj najedź kursorem myszy na fragment kodu, który właśnie utworzyłeś i kliknij „Edytuj”, gdy się pojawi.
Możesz teraz edytować fragment kodu, aby użyć nowego koloru, a następnie kliknąć „Zapisz fragment”, aby wprowadzić zmianę na twojej witrynie internetowej.
Oprócz koloru tekstu, można również użyć WPCode do zmiany domyślnego koloru po zaznaczeniu tekstu lub włączenia podświetlenia tekstu na stronie i treści wpisu.
Metoda 5: Jak zmienić kolor tekstu w kreatorze stron
W wielu przypadkach twoje strony docelowe powinny wyglądać inaczej niż reszta witryny internetowej. Dzięki temu będą się wyróżniać, co może zwiększyć liczbę konwersji.
Jest to szczególnie ważne, jeśli masz wiele stron docelowych, takich jak jedna dla wiralowej listy oczekujących, a druga dla kampanii reklamowej Google. Każda z tych stron może potrzebować własnego unikatowego projektu i schematu kolorów, aby skutecznie docierać do różnych odbiorców lub kanałów marketingowych.
Jeśli chcesz stworzyć stronę docelową lub sprzedażową, zalecamy skorzystanie z SeedProd. Spośród wszystkich kreatorów stron, które wypróbowaliśmy, jest on najlepszy na rynku i ma łatwy w użyciu kreator stron typu „przeciągnij i upuść”.
SeedProd zawiera ponad 90 bloków, które można po prostu przeciągnąć i upuścić na twój układ. Bloki te można następnie dostosować na wiele różnych sposobów, w tym zmieniając kolor tekstu.
Jeśli korzystasz z własnej strony, aby uzyskać więcej konwersji, SeedProd współpracuje z wieloma popularnymi narzędziami innych firm, których możesz już używać do zarządzania konwersjami.
Należą do nich najlepsze usługi e-mail marketingu, WooCommerce, Google Analytics i inne.
Najpierw należy zainstalować i włączyć SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Uwaga: Istnieje również darmowa wersja SeedProd, która umożliwia tworzenie własnych stron. Jednak w tym przewodniku będziemy używać SeedProd Pro, ponieważ ma on o wiele więcej szablonów i zaawansowanych bloków.
Po włączaniu wtyczki, SeedProd poprosi o twój klucz licencyjny.
Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd. Po wpisz klucz licencyjny, przejdź dalej i kliknij przycisk „Zweryfikuj klucz”.
Następnie należy przejść na stronę SeedProd ” Pages i kliknąć przycisk „Add New Landing Page”.
Następnie nadszedł czas na wybór szablonu. SeedProd oferuje ponad 300 profesjonalnie zaprojektowanych szablonów, które możesz konfigurować za pomocą własnych obrazków, tekstu, kolorów i nie tylko.
Aby wybrać szablon, po prostu najedź na niego kursorem myszy, a następnie kliknij ikonkę „Znacznik wyboru”.
Używamy szablonu „Juicy Sales Page” na wszystkich naszych obrazkach, ale możesz użyć dowolnego projektu.
Następnie wpisz rodzaj nazwy dla własnej strony. SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz go zmienić na dowolny inny.
Gdy jesteś zadowolony z informacji, które wpiszesz, kliknij przycisk „Zapisz i rozpocznij edycję strony”.
Następnie zostaniesz przeniesiony do kreatora stron SeedProd typu „przeciągnij i upuść”, w którym możesz dostosować swój szablon.
Edytor SeedProd pokazuje podgląd na żywo twojego projektu po prawej stronie i niektóre ustawienia bloków po lewej stronie.
Menu po lewej stronie zawiera również bloki, które można przeciągnąć na twój układ.
Można na przykład przeciągać i upuszczać standardowe bloki, takie jak przyciski i obrazki, lub korzystać z zaawansowanych bloków, takich jak liczniki czasu, obracające się referencje, przyciski udostępniania społecznościowego i inne.
SeedProd zawiera również „Sekcje”, które są zbiorami bloków często używanych razem. Na przykład SeedProd ma nagłówek, obrazek wyróżniający, wezwanie do działania, referencje, formularz kontaktowy, często zadawane pytania, funkcje, sekcje stopki i wiele innych. Może to pomóc w szybkim stworzeniu profesjonalnie zaprojektowanej strony.
Aby przejrzeć poszczególne sekcje, wystarczy kliknąć kartę „Sekcje”. Aby wyświetlić podgląd dowolnej sekcji, najedź na nią kursorem myszy, a następnie kliknij ikonkę lupy.
Aby dodać sekcję do twojego projektu, po prostu kliknij „Wybierz tę sekcję”.
Spowoduje to dodanie sekcji na dole twojej strony.
Możesz przenosić sekcje i bloki w twoim układzie za pomocą metody „przeciągnij i upuść”.
Aby dostosować blok, wystarczy kliknąć, aby wybrać go w twoim układzie. Menu po lewej stronie pokaże teraz wszystkie ustawienia, których można użyć do skonfigurowania tego bloku.
Aby zmienić kolor tekstu, wystarczy kliknąć dowolny blok zawierający tekst.
W menu po lewej stronie wybierz kartę „Zaawansowane”. W sekcji „Style” kliknij „Kolor”.
Spowoduje to otwarcie okna podręcznego, w którym można wybrać nowy kolor tekstu.
Innym rodzajem opcji jest wpisanie kodu szesnastkowego w polu „Hex”.
Możesz teraz zmienić kolor tekstu dla dowolnego innego bloku, wykonując ten sam proces opisany powyżej.
Kiedy jesteś zadowolony z wyglądu strony, nadszedł czas, aby ją opublikować, klikając przycisk „Zapisz”. Następnie wybierz „Opublikuj”.
Jeśli przejdziesz na swój sklep internetowy, blog lub witrynę internetową, zobaczysz nową stronę w działaniu, wraz z Twoimi własnymi konfiguratorami kolorów tekstu.
Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak zmienić kolor tekstu w WordPress. Możesz również zapoznać się z naszym poradnikiem na temat dodawania zmiany kroju pisma w WordPressie i sposobów tworzenia przyjaznej dla urządzeń mobilnych witryny internetowej WordPress.
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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi
QUICK QUESTION…. is there a way to customize the highlight color when selecting text?
It would be awesome if that could match my brand’s color palette too instead of the default blue color.
thanks in advance for any insight on that!
WPBeginner Comments
In many cases this can be set with the theme settings in the Customizer.
If it’s not available, the theme may not have included this feature, in which case you may have to use CSS.
WPBeginner Comments
If you are trying to customize the link color, this usually can be set in the Customizer, if the theme has this feature.
Otherwise, CSS could be used to change the link color.
Jim Toth
This tutorial was of no help to me. M y headings still have no colour other than white.
WPBeginner Support
If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.
Administrator
Jiří Vaněk
If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.
Simba
What is the color of wpbeginner h2 text?
WPBeginner Support
To find out information about that for our or any site, we would recommend taking a look at our guide on Inspect Element below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Administrator
Lara
Thank you! This was a great quick fix for an only semi-literate in the technical stuff.
WPBeginner Support
You’re welcome
Administrator
Kayla
Do you have any insight into how to change the background color of just part of a sentence?
Thank you for all of your help. I’ve learned an immense amount from the content you share.
WPBeginner Support
You would want to use the CSS method and instead of color:, use background-color:
Administrator
Ekta
The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.
WPBeginner Support
You’re welcome, glad our guide helped
Administrator
Bob Wood
I still cannot change the color of a single word.
I pull down options on single word –
Inline code
Inline image
justify
strikethrough
underline
WPBeginner Support
For a single word, you would need to use CSS for the moment.
Administrator
Tunde Sanusi (Tuham)
Users can only do this in the Block Editor!
That’s why I’ve been recommending people to start learning about the Block Editor
WPBeginner Support
The CSS method would still work for those still on the Classic editor
Administrator