Jak wyróżnić tekst w WordPress (Przewodnik dla początkujących)

Pamiętasz używanie żółtego zakreślacza do zaznaczania ważnych fragmentów w podręcznikach? Cyfrowy odpowiednik w WordPress jest równie przydatny do wyróżniania kluczowych informacji na Twojej stronie internetowej.

Ale wielu początkujących nie zdaje sobie sprawy, jak łatwo jest dodać to formatowanie do ich treści.

Podczas prowadzenia WPBeginner zauważyliśmy, że proste techniki, takie jak podświetlanie tekstu, często mają największy wpływ na zaangażowanie czytelników z treścią.

Używany strategicznie, podświetlony tekst może kierować odwiedzających do Twoich najważniejszych punktów i poprawić zapamiętywanie przekazu.

W tym przewodniku pokażemy Ci kilka łatwych metod podświetlania tekstu w WordPress.

Dlaczego i kiedy wyróżniać tekst w WordPress

Podświetlanie tekstu to prosty sposób na podkreślenie ważnych informacji w Twoich treściach. Kieruje uwagę użytkownika na szczegóły, których nie chcesz, aby przegapił.

Na przykład, wyróżnienie oferty rabatowej na Twojej stronie internetowej WordPress innym kolorem przyciągnie uwagę czytelnika, pomagając Ci wygenerować więcej sprzedaży.

Oto przykład, jak może wyglądać podświetlanie tekstu w poście na blogu:

Wyróżnianie tekstu innym kolorem może również pomóc użytkownikom z wadami wzroku lub trudnościami w czytaniu w łatwiejszym nawigowaniu i zrozumieniu treści. Może nawet poprawić wygląd Twoich treści i uczynić je bardziej atrakcyjnymi wizualnie.

Jednak zbyt duże podświetlenie tekstu na stronie może rozpraszać i zmniejszać jego skuteczność. Dlatego zalecamy podświetlanie tylko ważnych informacji, takich jak wezwania do działania, ostrzeżenia i inne szczegóły, na które czytelnicy powinni zwrócić uwagę.

Mając to na uwadze, przyjrzyjmy się, jak łatwo wyróżnić tekst w WordPress. Możesz użyć poniższych szybkich linków, aby przejść do metody, którą chcesz zastosować:

• Metoda 1: Podświetlanie tekstu w WordPress za pomocą edytora bloków
• Method 2: Highlight Text in WordPress Using WPCode (Recommended)
• Bonus: Użyj SeedProd do podświetlenia ważnych stron w Twojej witrynie

Metoda 1: Podświetlanie tekstu w WordPress za pomocą edytora bloków

Ta metoda jest dla Ciebie, jeśli chcesz łatwo podświetlać tekst w WordPress za pomocą edytora bloków (Gutenberg).

Najpierw musisz otworzyć istniejący lub nowy wpis w edytorze treści z paska bocznego administracji WordPress.

Po przejściu tam po prostu zaznacz tekst, który chcesz podświetlić. Następnie kliknij ikonę strzałki w dół na pasku narzędzi bloku, aby wyświetlić więcej opcji.

Spowoduje to otwarcie menu rozwijanego, w którym musisz wybrać opcję „Podświetlenie” z listy.

Na ekranie otworzy się narzędzie do wyboru koloru. Z tego miejsca najpierw musisz przełączyć się na zakładkę „Tło”.

Następnie wybierz domyślny kolor wyróżnienia z podanych opcji.

Możesz również wybrać niestandardowy kolor do podświetlania tekstu, klikając opcję „Niestandardowy”, aby uruchomić narzędzie „Kroplomierz”.

Na koniec nie zapomnij kliknąć przycisku „Opublikuj” lub „Zaktualizuj”, aby zapisać zmiany.

Możesz teraz odwiedzić swojego bloga WordPress, aby sprawdzić podświetlony tekst w akcji.

Metoda 2: Podświetlanie tekstu w WordPress za pomocą WPCode (zalecane)

Jeśli chcesz konsekwentnie używać określonego koloru do podświetlania tekstu w całej swojej witrynie WordPress, ta metoda jest dla Ciebie.

Główną zaletą tej metody jest globalna kontrola. Jeśli kiedykolwiek zdecydujesz się zmienić kolor podświetlenia, wystarczy raz zaktualizować fragment kodu. Spowoduje to automatyczne zaktualizowanie koloru podświetlenia na całej Twojej stronie.

Możesz łatwo wyróżnić tekst w WordPress, dodając kod CSS do plików swojego motywu. Jednak najmniejszy błąd podczas wprowadzania kodu może zepsuć Twoją stronę internetową, czyniąc ją niedostępną.

Dlatego polecamy używanie WPCode, który jest najlepszym pluginem do fragmentów kodu WordPress na rynku.

Po dokładnych testach stwierdziliśmy, że jest to najłatwiejszy i najbezpieczniejszy sposób dodawania kodu do Twojej witryny bez bezpośredniej edycji plików motywu. Szczegółowe informacje znajdziesz w naszej recenzji WPCode.

Utwórz fragment kodu za pomocą WPCode

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Aby uzyskać więcej instrukcji, zapoznaj się z naszym przewodnikiem dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj fragment z paska bocznego administratora WordPress.

Następnie kliknij przycisk „+ Dodaj niestandardowy fragment” w opcji „Dodaj własny kod (nowy fragment)”.

Następnie musisz wybrać typ kodu. W tym samouczku wybierz opcję „Fragment kodu CSS”.

Następnie dodaj odpowiednią nazwę dla swojego fragmentu kodu.

Spowoduje to przejście do strony „Utwórz niestandardowy fragment”, gdzie możesz zacząć od wpisania nazwy dla swojego fragmentu kodu.

Nazwa jest tylko do Twojej wiadomości i może być dowolna, aby pomóc Ci zapamiętać, do czego służy kod.

Następnie skopiuj i wklej poniższy kod do pola „Podgląd kodu”:

mark {
background-color: #ffd4a1;
}

Gdy to zrobisz, dodaj kod szesnastkowy preferowanego koloru podświetlenia obok linii background-color w kodzie.

W naszym przykładzie używamy #ffd4a1, co jest jasnobrązowym kolorem.

Następnie przewiń w dół do sekcji „Wstawianie”.

Stąd wybierz metodę „Automatyczne wstawianie”, aby wykonać kod po aktywacji.

Następnie przejdź na górę strony i przełącz przełącznik z „Nieaktywny” na „Aktywny”.

Na koniec kliknij przycisk „Zapisz fragment”, aby zachować zmiany.

Podświetlanie tekstu w edytorze bloków

Teraz, gdy fragment kodu CSS został aktywowany, musimy zastosować formatowanie. Ponieważ jest to niestandardowy styl, na krótko przełączymy się do widoku HTML dla konkretnego bloku, aby objąć tekst.

Najpierw otwórz istniejący lub nowy wpis w edytorze bloków WordPress.

Stąd kliknij ikonę „Opcje” na pasku narzędzi bloku u góry. Otworzy się nowe menu rozwijane, w którym musisz wybrać opcję „Edytuj jako HTML”.

Zobaczysz teraz zawartość bloku w formacie HTML.

Tutaj po prostu umieść tekst, który chcesz podświetlić, wewnątrz tagów <mark> </mark> w ten sposób:

<mark>highlighted-text</mark>

Spowoduje to wyróżnienie tekstu kolorem szesnastkowym, który wybrałeś w swoim fragmencie WPCode.

Następnie kliknij opcję „Edytuj wizualnie” na pasku narzędzi bloku, aby przełączyć się z powrotem do edytora wizualnego.

Po zakończeniu kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać zmiany.

Teraz możesz odwiedzić swoją witrynę, aby sprawdzić podświetlony tekst w akcji.

Bonus: Użyj SeedProd do podświetlenia ważnych stron w Twojej witrynie

Omówiliśmy, jak formatować konkretne słowa w Twojej treści. Jednak czasami możesz chcieć podświetlić całe sekcje lub strony na swojej stronie, takie jak formularz kontaktowy lub kupon podarunkowy.

Na przykład, jeśli masz sklep internetowy i właśnie uruchomiłeś wyprzedaż sezonową, możesz chcieć wyróżnić tę ofertę na swojej stronie internetowej.

Możesz podświetlić te sekcje, tworząc dla nich strony docelowe. Są to samodzielne strony w Twojej witrynie, zaprojektowane w celu generowania leadów.

Aby tworzyć atrakcyjne wizualnie strony docelowe dla swojej witryny, zalecamy użycie SeedProd. Jest to najlepszy kreator stron docelowych WordPress na rynku, który oferuje kreator metodą przeciągnij i upuść, ponad 350 gotowych szablonów i ponad 90 bloków.

Kilka naszych marek partnerskich stworzyło z nim całe swoje strony internetowe i miało świetne doświadczenia. Szczegółowe informacje znajdziesz w naszej recenzji SeedProd.

Plugin ułatwia tworzenie atrakcyjnych stron docelowych, które podkreślają ważne sekcje Twojej witryny, takie jak formularz kontaktowy, ogłoszenie o wyprzedaży, konkursy, opinie klientów, formularze zapisu, strony logowania i inne.

Poza tym możesz również użyć SeedProd do tworzenia niestandardowych motywów, stron „wkrótce”, stron konserwacji i wielu innych.

Szczegółowe informacje znajdziesz w naszym poradniku jak stworzyć stronę docelową w WordPress.

Mamy nadzieję, że ten przewodnik pomógł Ci dowiedzieć się, jak wyróżniać tekst w WordPress. Możesz również zapoznać się z naszym przewodnikiem krok po kroku na temat jak dostosować kolory w WordPress, aby Twoja strona była bardziej estetyczna, oraz z naszym porównaniem najlepszych kreatorów stron AI dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.