Twoi odwiedzający lubią Twoją witrynę za Twoje treści – im lepsza treść, tym większa satysfakcja odwiedzających. Jeśli jednak wiele Twoich treści ma postać tekstową, niektórzy użytkownicy mogą czuć się trochę zniechęceni – ściany tekstu są notorycznie nieatrakcyjne. Możesz uciekać się do dodawania obrazów, ale to tylko jedno z narzędzi w twoim przyborniku.
Możesz również sprawić, że Twój tekst będzie trochę mniej przerażający, dzięki podkreślanie ważnych bitów i zwrócenie uwagi odwiedzających na specjalną ofertę, zniżkę, zaskakującą datę lub cokolwiek innego. Mało tego: podświetlony tekst jest łatwiejszy do przeanalizowania, pod warunkiem, że podświetlanie jest używane oszczędnie i poprawnie. Podświetlanie jest również wykorzystywane przy tworzeniu zawartości możliwej do skanowania. Podświetlenie tekstu w WordPressie nie jest trudne i można to zrobić na kilka sposobów. Oto, co pokażemy:
To rozwiązanie, powinno być oczywiste, jest przeznaczone dla użytkowników Elementora. Elementor jest jednym z najczęściej używanych programów do tworzenia stron i nie bez powodu – jest wszechstronny, szybki, intuicyjny, wizualny i całkowicie darmowy, przynajmniej w swojej podstawowej wersji, która wciąż wystarcza do zbudowania strony internetowej od podstaw.
Jeśli używasz Elementora jako edytora stron, masz szczęście: nasza zastrzeżona wtyczka, Dodatki Qi do Elementora, to mnóstwo przydatnych, elastycznych widżetów które znacznie poprawiają domyślny zestaw Elementora. Wśród 60 zaawansowanych elementów, które wtyczka ma do zaoferowania, znajdziesz podświetloną funkcjonalność tekstową.
Wszystko, co musisz zrobić, to zainstalować i aktywować najnowszą wersję Elementora (wystarczy darmowa wersja), a następnie zainstaluj i aktywuj dodatki Qi dla Elementora jak każda inna wtyczka. Dodatki Qi do Elementora są całkowicie bezpłatne.
Podobnie jak w przypadku pozostałych 59 widżetów w pakiecie, możesz ustawić podświetlony tekst tak, jak lubisz w ciągu kilku minut, jak pokazano w naszym przydatnym samouczku wideo:
Ale jeśli wolisz, możemy Cię tam zaprowadzić krok po kroku.
Dodanie sekcji z podświetlonym tekstem działa tak samo, jak dodawanie dowolnego innego widżetu Elementora: przewiń w dół lub zacznij wpisywać jego nazwę, aby ją znaleźć, a następnie po prostu przeciągnij ją w żądane miejsce z menu po lewej stronie.
Przekonasz się, że jest skonfigurowany z wersją Lorem ipsum, której fragmenty są już podświetlone. Również domyślnie Ogólny karta powinna być otwarta. Tam znajdziesz Klasa niestandardowa pole, którego nie potrzebujemy do tej demonstracji. Znajdziesz również Tekst pole, w którym należy wpisać całą treść fragmentów tekstu, które chcesz wyróżnić, oraz Podświetl pozycję tekstu kontrolki, co jest istotne: tutaj wybierasz, które słowa mają być podświetlone.
Formatowanie tej kontrolki jest proste. Jeśli chcesz podświetl jedno słowo, po prostu wpisz jego numer pozycji. Jeśli chcesz uzyskać zakres, wpisz numery słów oddzielone myślnikiem. A jeśli jest więcej niż jedno miejsce, które chcesz podświetlić, oddziel wszystkie te wartości przecinkiem, jak w przykładzie zastępczym.
I oczywiście to, co widzisz, to domyślna wersja ustawień kolorów. Co oznacza, że tylko drapiemy powierzchnię.
Aby pokazać, co naprawdę potrafi ten widżet, zastąpiliśmy tekst zastępczy, ustawiliśmy zakres podświetlonych słów na 3-7, a następnie przełączyliśmy się na Styl zakładkę, aby dostosować wygląd.
Tutaj możesz zmienić wyrównanie całego tekstu. Przenieśliśmy go do środek ustawienie.
ten Znacznik tekstowy Kontrola jest dostępna, jeśli chcesz zmienić stan tekstu z domyślnego P (dla ustęp; „normalny” tekst) do nagłówka, od H1 do H6. Tutaj poszliśmy odważnie z H1. Pamiętaj, że ze względu na dostępność nie jest to ustawienie rozmiaru, chociaż zmiana rozmiarów czcionek w WordPressie również nie jest wielkim problemem. ten Kolor tekstu oraz Typografia tekstu ustawienia są tym, na co musisz zwrócić uwagę, jeśli chcesz zmienić takie rzeczy, jak czcionka Rodzina, czcionka Rozmiar, Waga (grubość lub pogrubienie), Styl (kursywa lub ukośny) i Dekoracja (podkreślenie, przekreślenie itp.). Możesz również zmienić Wysokość linii oraz Odstępy między literami w tej sekcji. Na potrzeby tej demonstracji pozostawimy wszystkie kontrolki w ich domyślnych wartościach.
Dalej w dolnej części Styl przechodzimy do opcji stylizacji highlight. Możesz użyć Podświetl kolor tekstu zmienić kolor podświetlonego tekstu, ale zostawimy go bez zmian. To, co zmienimy, to Podświetl kolor tła tekstu od czerni do wartość szesnastkowa z #b7d4b5 – stonowana zieleń paproci. Zwróć uwagę, jak kolor podświetlonego tekstu zmienił się na biały, aby jak najlepiej wykorzystać kontrast. Możesz to zmienić za pomocą Podświetl kolor tekstu kontroli, ale zostawimy to tak, jak jest.
Dwie końcowe kontrole to Podświetl górne przesunięcie i Podświetl dolne przesunięcie. Te kontrolki określają położenie paska podświetlenia w stosunku do góry i dołu linii. Pozostawienie ich pustych sprawi, że widżet podświetli całą wysokość linii. Aby uzyskać efekt widoczny poniżej, zmieniliśmy Podświetl kolor tekstu kontrola do #000000 (czarny), the Podświetl górne przesunięcie do 36 i Podświetl dolne przesunięcie do 14.
To oczywiście tylko jedna z nieskończonych możliwości Qi Addons, jeśli chodzi o podświetlanie tekstu. Jak pokazaliśmy, ustawienia są na tyle wszechstronne, że pasują do każdego układu lub stylu.
Elementor nie twoja filiżanka herbaty? Nie martw się, możesz także użyć domyślnego edytora stron WordPress, Gutenberg, aby podświetlić tekst w bloku akapitu. Zaczniemy od postu i bloku akapitowego z tekstem zastępczym.
Wybierając blok akapitu, znajdź Ustawienia kolorów w menu po prawej stronie. Pod Kolor tła, wybierz kolor z listy lub wprowadź a Niestandardowy kolor. Pojedziemy z białym.
Teraz cały twój blok ma białe tło. Gutenberg obecnie nie pozwala jednak na wyróżnianie konkretnych słów.
Pozwala na zmianę koloru określonych słów. Aby to zrobić, po prostu zaznacz słowa, których kolor chcesz zmienić, a następnie wybierz Kolor tekstu z menu rozwijanego akapitu.
Następnie możesz wybrać z oferowanego wyboru lub wybrać Niestandardowy kolor z selektora. Poszliśmy z jaskrawą czerwienią.
Jak widać, nie ma możliwości podświetlenia poszczególnych słów w ustawieniach bloku akapitu Gutenberga. Mimo to możesz używać bloków akapitów z różnymi kolorami tła, aby uwydatnić akapity.
Wreszcie istnieje prosty sposób na podkreślenie określonych słów za pomocą znaczników HTML. Tagi, których potrzebujesz, to
Następnie umieść w ramkach słowa, które chcesz wyróżnić, tagami:
Dokładny efekt tych tagów może się różnić w zależności od motywu i (prawdopodobnie) innych ustawień, ale w większości przypadków będzie to wyglądać jak żółte podświetlenie.
I oto to, prawdopodobnie najszybszy sposób, w jaki możesz wyróżnić tekst w WordPressie – choć bez żadnych opcji stylizacji.
Na zakończenie
Jak widać, istnieją co najmniej trzy proste sposoby wyróżniania tekstu w WordPressie. Nie musimy mówić, który jest preferowany – dzięki dodatkom Qi do Elementora masz zdecydowanie najwięcej opcji i ustawień stylu. Możesz podświetlić tekst, nawet jeśli nie chcesz używać Elementora ani instalować żadnego nowego oprogramowania. Wybór metody zależy ostatecznie od Ciebie.
Wesprzyj naszą pracę ❤️
Jeśli spodobał Ci się ten artykuł, rozważ pozostawienie napiwku, aby pomóc nam dalej publikować wartościowe treści.
