Czy chcesz zmienić kolor tekstu w WordPress?
Kolor może zwrócić uwagę na najważniejsze treści na stronie i wzmocnić branding twojej witryny internetowej. Zmiana koloru tekstu może również sprawić, że twoja witryna będzie łatwiejsza do odczytania, szczególnie dla osób z problemami ze wzrokiem.
W tym przewodniku pokażemy ci, jak łatwo zmienić kolor tekstu na twojej witrynie internetowej WordPress.
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: Using the Block Editor (Best For Small Amounts of Text)
- Method 2: Using the Theme Customizer (For Classic Themes Only)
- Method 3: Using the Full Site Editor (For Block Themes Only)
- Method 4: Changing the Text Color Using CSS Code (Recommended)
- Method 5: Changing the Text Color Using a Page Builder (Best For Landing Pages)
Metoda 1: Korzystanie z edytora bloków (najlepsze dla małych ilości tekstu)
Jeśli chcesz zmienić tylko kilka słów, akapit lub nagłówek we wpisie, możesz skorzystać z edytora treści WordPress.
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 konkretnego słowa, frazy lub zdania, takiego jak wezwanie do działania na twojej stronie sprzedaży.
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.
Metoda 2: Korzystanie z konfiguratora motywu (tylko dla motywów klasycznych)
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.
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: Korzystanie z pełnego edytora witryny (tylko dla motywów blokowych)
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: Zmiana koloru tekstu za pomocą kodu CSS (zalecane)
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. Obejmują one fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączać strony załączników i wiele więcej.
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: Zmiana koloru tekstu za pomocą kreatora stron (najlepsza dla stron docelowych)
W wielu przypadkach twoje strony docelowe i strony sprzedaży powinny wyglądać inaczej niż reszta witryny internetowej. Dzięki temu będą się wyróżniać, co może zwiększyć liczbę konwersji.
Jeśli chcesz zmienić kolor tekstu na stronie docelowej lub sprzedażowej, zalecamy użycie SeedProd. Jest to najlepsza wtyczka do landing page’y dla WordPressa i posiada ł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 głównych, stron docelowych i innych. W tym przewodniku będziemy jednak korzystać z SeedProd Pro, ponieważ ma on znacznie 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.
Aby pomóc wyszukiwarkom zrozumieć, o czym jest strona, możesz dodać kilka odpowiednich słów kluczowych. Może to poprawić twoje SEO WordPress.
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, animowane nagłówki, przyciski udostępniania w serwisach społecznościowych 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. Być może spodoba ci się również nasz poradnik na temat tego, jak zwiększyć ruch na twoim blogu oraz nasz wybór najlepszych usług e-mail marketingu.
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 says
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 says
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 says
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 says
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 says
This tutorial was of no help to me. M y headings still have no colour other than white.
WPBeginner Support says
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 says
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 says
What is the color of wpbeginner h2 text?
WPBeginner Support says
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 says
Thank you! This was a great quick fix for an only semi-literate in the technical stuff.
WPBeginner Support says
You’re welcome
Administrator
Kayla says
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 says
You would want to use the CSS method and instead of color:, use background-color:
Administrator
Ekta says
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 says
You’re welcome, glad our guide helped
Administrator
Bob Wood says
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 says
For a single word, you would need to use CSS for the moment.
Administrator
Tunde Sanusi (Tuham) says
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 says
The CSS method would still work for those still on the Classic editor
Administrator