Jak dodać tekst na górze obrazu w WordPress (3 metody)

Dodanie tekstu na górze obrazu jest popularną techniką zwiększania atrakcyjności wizualnej treści lub strony internetowej. Ponadto, jest to świetny sposób na uczynienie obrazów bardziej informacyjnymi i angażującymi.

W tym artykule znaleźliśmy trzy proste sposoby na dodanie tekstu na górze obrazu w WordPress. Niezależnie od tego, czy wolisz używać Edytora Bloków, wtyczki, czy niestandardowego kodu. Dowiedzmy się!

Dlaczego ważne jest dodanie tekstu u góry obrazów

Zanim przejdziesz do metod, musisz wiedzieć, dlaczego dodanie tekstu na górze obrazów jest ważne.

1. Przyciągnij uwagę

Jeśli użytkownicy szybko przewijają treść, dodanie samych obrazów może nie być wystarczające, aby zwrócić ich uwagę. Dlatego musisz dodać tekst na górze obrazu, aby pomóc w przyciągnięciu uwagi użytkowników i przekazaniu Twojej wiadomości bardziej efektywnie.

2. Popraw doświadczenie użytkownika

To prawda, że obrazy mogą same w sobie zapewnić wiele wartości, jednak dodanie tekstu na ich górze, takiego jak podpisy, cytaty lub inne treści oparte na tekście, może sprawić, że staną się jeszcze bardziej użyteczne. Ponadto użytkownicy mogą zrozumieć kontekst obrazu i jego związek z Twoją treścią.

3. Poprawa dostępności

Możesz również pomóc w poprawie dostępności dla użytkowników, którzy mogą mieć trudności z wyświetleniem samego obrazu. Dostarczając alternatywny tekst, możesz zapewnić, że Twoje treści są dostępne dla szerszego grona użytkowników.

4. Poprawa SEO

Dodanie odpowiednich słów kluczowych do podpisów pod obrazami lub tekstu alternatywnego może pomóc w poprawie pozycji witryny w wyszukiwarkach. Dzieje się tak, ponieważ wyszukiwarki wykorzystują te informacje do zrozumienia zawartości witryny i określenia, jak istotna jest ona dla zapytań użytkowników.

3 metody: Jak dodać tekst na górze obrazu w WordPress

1. Użyj edytora bloków WordPress

Najpierw przejdź do strony lub posta, na którym chcesz dodać tekst nad obrazem.

Wybierz Okładka, aby napisać tekst na obrazie.

Następnie zacznie się pojawiać na ekranie. Pokazuje domyślny obraz, ale możesz go zmienić według własnego uznania.

Możesz również zastąpić domyślny obraz swoim niestandardowym obrazem. Kliknij przycisk zamiany i następnie prześlij obraz lub po prostu wybierz z biblioteki multimediów

Wyglądać to będzie tak, a następnie możesz napisać tekst na górze obrazu, jak chcesz.

Podwójne kliknięcie na tekście spowoduje wyświetlenie opcji edycji tekstu. Możesz dostosować rozmiar, kolor i wiele innych elementów zgodnie z wymaganiami.

Następnie kliknij przycisk aktualizacji, lub jeśli dodałeś nowy post lub stronę, kliknij przycisk publikowania.

2. Użyj CSS

Otwórz Edytor Bloków WordPress i wybierz blok obrazu, gdzie chcesz dodać tekst. W prawym panelu bocznym kliknij na Zaawansowanezakładkę.

W Dodatkowa klasa CSS pole, dodaj niestandardową klasę dla bloku obrazu.

Zapisz zmiany i opublikuj lub zaktualizuj stronę lub wpis.

.custom-class { pozycja: względna; } .custom-class p { pozycja: absolutna; góra: 50%; lewo: 50%; przekształcenie: translate(-50%, -50%); rozmiar-czcionki: 24px; kolor: #ffffff; cień-tekstu: 2px 2px 2px #000000; } 

W powyższym kodzie zamień "niestandardowa-klasa" na klasę niestandardową, którą dodałeś do bloku obrazu. Możesz również dostosować rozmiar czcionki, kolor i inne opcje stylowania, aby dopasować je do swoich preferencji.

3. Użyj wtyczki WordPress

Jeśli chcesz mieć swobodę tworzenia całkowicie niestandardowych projektów stron, będziesz potrzebować wtyczki do budowy stron. Jedną z wtyczek do budowy stron WordPress jest SeedProd, która pozwala na dodanie tekstu na dowolnym obrazie na całej stronie internetowej.

Najpierw zainstaluj i aktywuj wtyczkę SeedProd. Po aktywacji będziesz musiał wprowadzić klucz licencyjny. Zaloguj się na swoje konto SeedProd, a następnie kliknij na Pobierz zakładkę.

Po zakończeniu skopiuj klucz w sekcji klucza licencyjnego.

Możesz teraz wkleić ten klucz do obszaru administracyjnego WordPress, przechodząc do SeedProd » strony ustawień.

Gdy już tu będziesz, śmiało i wklej swój klucz do pola Klucz licencyjny. Następnie wystarczy kliknąć na Weryfikuj klucz

Następnie przejdź do SeedProd » Strony docelowe i kliknij Dodaj nową stronę docelową.

Następnie wybierz szablon. Bez względu na to, który szablon SeedProd wybierzesz, możesz dostosować każdą część szablonu, aby idealnie pasował do Twojej strony internetowej i brandingu.

Jeśli jednak wolisz zacząć od pustego płótna, kliknij Szablon pusty.

Gdy już znajdziesz odpowiedni szablon, najedź na niego myszką. Następnie kliknij na ikonę Podgląd.

Jeśli jesteś zadowolony z wyglądu tego szablonu, kliknij przycisk Wybierz ten szablon

W polu Nazwa strony wpisz nazwę strony.

Jeśli chcesz zmienić automatycznie utworzony adres URL, edytuj tekst w polu URL strony

Kliknij Zapisz i rozpocznij edycję strony przycisk. To otworzy szablon w edytorze SeedProd typu "przeciągnij i upuść".

W lewym panelu bocznym zobaczysz wszystkie bloki i sekcje, które możesz dodać do swojej strony za pomocą funkcji "przeciągnij i upuść".

O ile nie używasz pustego szablonu, Twoja strona SeedProd będzie już miała kilka bloków i sekcji. Aby edytować tę zawartość, kliknij, aby wybrać blok lub sekcję.

Lewa strona menu SeedProd pokaże teraz wszystkie ustawienia, których możesz użyć do dostosowania tego bloku lub sekcji.

Najprostszym sposobem dodania tekstu na obrazku jest użycie jednej z gotowych sekcji Hero dostępnych w SeedProd.

Te sekcje posiadają obrazek tła na pełną szerokość oraz tekst zastępczy umieszczony na nim. Możesz łatwo zastąpić domyślny obrazek tła i tekst własną treścią.

Kliknij na zakładkę Sekcja w lewym menu.

Następnie kliknij na Hero, aby zobaczyć wszystkie gotowe sekcje Hero, które możesz dodać do swojej strony.

Aby dodać tę sekcję Hero do swojego projektu, po prostu kliknij Wybierz tę sekcję.

Kliknij obraz stockowy, aby go wybrać, jeśli chcesz zastąpić stockowy obraz z szablonu własnym obrazem.

Najeżdżając podgląd obrazu tła aż pojawi się ikona kosza. Następnie możesz kliknąć tę ikonę

Następnie kliknij Użyj własnego obrazu. Następnie możesz wybrać obraz z biblioteki mediów WordPress lub użyć obrazu ze stock.

Po dodaniu obrazu możesz zastąpić tekst zastępczy.

Kliknij, aby wybrać Blok Tekstowy. Następnie w obszarze tekstowym po prostu wpisz tekst, który chcesz użyć.

Niektóre szablony hero SeedProd zawierają dodatkową zawartość, taką jak przyciski call-to-action.

Jeśli chcesz zmienić tę zawartość, kliknij, aby wybrać blok

Inną opcją jest usunięcie bloku ze szablonu hero.

Aby to zrobić, kliknij, aby wybrać blok, a następnie kliknij ikonę kosza

Jeśli jesteś zadowolony z projektu strony, kliknij przycisk Zapisz.

Stąd możesz wybrać publikację strony lub zapisanie jej jako szablon.

Wniosek

To wszystko - trzy metody dodawania tekstu na obrazku w WordPress. Łatwe, prawda? Wybierz podejście, które najlepiej odpowiada Twojemu poziomowi umiejętności i preferencjom projektowym.

Co więcej, organizuj, optymalizuj i zarządzaj swoimi plikami multimedialnymi jak profesjonalista z WP Media Folder. To odpowiedni moment, aby pożegnać się z zagraconymi bibliotekami!