Chcesz dodać tekst do swoich obrazów w WordPressie? Te atrakcyjne tytuły i cytaty widoczne na zdjęciach mogą sprawić, że Twoje treści naprawdę się wyróżnią. Nazywa się to nakładką tekstową i jest świetnym sposobem na uczynienie obrazów bardziej angażującymi.
Jeśli zastanawiałeś się, jak tworzyć te nakładki tekstowe, możesz pomyśleć, że potrzebujesz specjalnego oprogramowania lub umiejętności projektowych. Dobra wiadomość – nie potrzebujesz!
Przetestowaliśmy wszelkiego rodzaju metody i znaleźliśmy kilka prostych sposobów na dodawanie tekstu do obrazów bezpośrednio w WordPress. Nie potrzebujesz doświadczenia w projektowaniu ani dodatkowego oprogramowania do kupienia.
Gotowy do nauki? Pokażemy Ci trzy proste sposoby dodawania tekstu na obrazie w WordPress. Po zakończeniu tego poradnika będziesz z pewnością tworzyć profesjonalnie wyglądające nakładki tekstowe dla swojej strony internetowej.

Kiedy dodać tekst na obrazach w WordPress
Obrazy mogą znacznie zwiększyć atrakcyjność Twojej witryny WordPress, czyniąc ją bardziej interesującą wizualnie i pomagając przełamać długie sekcje tekstu.
Istnieją jednak sytuacje, gdy sam obraz nie opowiada całej historii. W takich przypadkach dodanie nakładek tekstowych może zapewnić dodatkowy kontekst, pomagając odbiorcom zrozumieć, dlaczego obraz jest istotny dla treści.
Niezależnie od tego, czy prowadzisz bloga WordPress, czy sklep internetowy, nakładki tekstowe mogą przekształcić zwykłe obrazy w przyciągające wzrok nagłówki lub banery.
W tym poście przedstawiamy trzy przyjazne dla początkujących sposoby dodawania tekstu na obrazie w WordPressie. Jeśli wolisz przejść bezpośrednio do konkretnej metody, możesz skorzystać z poniższych linków:
- Metoda 1: Dodaj tekst na obrazie za pomocą bloku okładki
- Metoda 2: Dodaj tekst na obrazku za pomocą bloku obrazka
- Method 3: Create a Custom Page Layout with Text on Top of an Image
Metoda 1: Dodaj tekst na obrazie za pomocą bloku okładki
Jednym ze sposobów dodania tekstu na obrazku w WordPressie jest użycie bloku Okładka. Możesz użyć tego bloku, aby wyświetlić dowolny obraz, a następnie wpisać tekst na obrazku. To sprawia, że blok Okładka jest idealny do tworzenia obrazów nagłówkowych, nagłówków i banerów.
Aby dodać blok Pokrycie do strony lub wpisu, po prostu kliknij przycisk plus „+ Dodaj blok” w edytorze bloków Gutenberg.
Możesz teraz wpisać „Cover” i wybrać odpowiedni blok, gdy się pojawi.

Tutaj możesz wybrać domyślny blok Okładka.
Ale możesz też wybrać opcję szablonu z obrazem zastępczym i tekstem. W przypadku drugiej opcji możesz po prostu zastąpić istniejący obraz i tekst własnymi.
Aby zastąpić domyślny obraz, po prostu kliknij, aby go zaznaczyć. Gdy to zrobisz, kliknij przycisk „Zastąp”.

Jeśli chcesz użyć obrazu, który znajduje się już w Twojej bibliotece multimediów WordPress, po prostu kliknij „Otwórz bibliotekę multimediów”. Następnie możesz wybrać istniejący obraz.
Jeśli chcesz przesłać nowy obraz, kliknij zamiast tego „Prześlij”.

Otworzy to okno, w którym możesz wybrać dowolny plik z komputera.
Po wybraniu obrazka możesz użyć ustawień bloku, aby stworzyć ciekawe i przyciągające wzrok efekty.
Na przykład, możesz sprawić, że obraz będzie stał w miejscu podczas przewijania strony przez odwiedzającego lub dodać nakładkę kolorystyczną na obraz.

Jeśli użyjesz nakładki, możesz zmienić jej krycie za pomocą suwaka „Krycie”. Ustawienie krycia kontroluje przezroczystość obrazu tła.
Gdy będziesz zadowolony z wyglądu obrazu, możesz dodać tekst.
Domyślnie blok nagłówka zawiera blok nagłówka i blok akapitu, w którym można dodać tekst na obrazie.

Aby dodać tekst, po prostu kliknij, aby wybrać blok Nagłówek lub Akapit. Następnie wpisz tekst, którego chcesz użyć.
Dodając tekst na obrazach, upewnij się, że tekst jest czytelny dla wszystkich odwiedzających. Dobry kontrast między tekstem a tłem pomaga wszystkim łatwiej czytać Twoje treści. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat jak poprawić dostępność na Twojej stronie WordPress.
Mimo to, możesz chcieć stylizować tekst, aby był łatwiejszy do odczytania.
Jeśli pracujesz z blokiem nagłówka, możesz również wypróbować różne style nagłówków, aby zobaczyć, który jest najłatwiejszy do odczytania.

Możesz również sprawić, że Twój tekst będzie się wyróżniał, używając kontrastującego koloru.
Aby wybrać inny kolor, wybierz zakładkę „Blok” w menu po prawej stronie. Następnie kliknij „Kolor”, aby rozwinąć tę sekcję.
Po wykonaniu tej czynności kliknij „Tekst”. Otworzy się wyskakujące okienko, w którym możesz wybrać nowy kolor dla całego tekstu w bloku.

Zazwyczaj większy tekst jest łatwiejszy do odczytania.
Aby powiększyć tekst, kliknij pole obok opcji „Rozmiar”, a następnie wpisz w tym polu większą liczbę.

Gdy będziesz zadowolony z wyglądu swojego bloku Okładka, możesz opublikować lub zaktualizować swoją stronę jak zwykle. Teraz, jeśli odwiedzisz swoją stronę WordPress, zobaczysz swój tekst na obrazku.
Metoda 2: Dodaj tekst na obrazku za pomocą bloku obrazka
Blok okładki świetnie nadaje się do tworzenia banerów i nagłówków. Możesz jednak dodać tekst na standardowym bloku obrazu WordPress.
Aby rozpocząć, musisz dodać blok Obraz do swojej strony lub wpisu. Aby to zrobić, po prostu kliknij przycisk plus „+ Dodaj blok” w edytorze bloków WordPress.
Następnie możesz wpisać „Obrazek” i wybrać odpowiedni blok, aby dodać go do swojego wpisu.

Następnie możesz przesłać obraz z komputera lub kliknąć „Biblioteka mediów”, aby wybrać obraz z biblioteki mediów WordPress.
Po wybraniu obrazu możesz zmienić jego punkt ostrości, dodać nakładkę i zmienić przezroczystość, postępując zgodnie z tym samym procesem opisanym powyżej.
Możesz również wypróbować różne suwaki „Stałe tło” i „Powtarzające się tło”, aby zobaczyć, co najlepiej działa dla Twojego bloku Obraz.
Gdy będziesz zadowolony z wyglądu swojego obrazu, po prostu kliknij przycisk „Dodaj tekst nad obrazem”.

Dodaje to obszar, w którym można wpisać tekst.
W zależności od obrazu odwiedzający mogą mieć trudności z odczytaniem tekstu nakładki. Tutaj może pomóc pogrubienie tekstu lub zmiana jego koloru zgodnie z tym samym procesem opisanym powyżej.

Możesz również powiększyć tekst.
Aby to zrobić, znajdź sekcję „Rozmiar” w menu po prawej stronie. Następnie możesz klikać różne liczby, aby powiększyć lub zmniejszyć tekst.

Gdy będziesz zadowolony z wyglądu tekstu i obrazu, przejdź dalej i wyświetl podgląd swojej witryny. Następnie kliknij „Zapisz wersję roboczą”, „Aktualizuj” lub „Opublikuj”, aby zapisać zmiany.
Jeśli używasz motywu blokowego WordPress, możesz użyć Metod 1 i 2, aby dodać tekst na obrazku w dowolnej części motywu za pomocą Edytora Całej Witryny WordPress (FSE).
Więcej o FSE dowiesz się z naszego kompletnego przewodnika dla początkujących po edycji pełnej strony WordPress.
Metoda 3: Utwórz niestandardowy układ strony z tekstem na obrazie
Wbudowane bloki WordPress to szybki i łatwy sposób na dodanie tekstu na obrazku w WordPress. Jednak jeśli chcesz mieć swobodę tworzenia całkowicie niestandardowych projektów stron, będziesz potrzebować wtyczki do tworzenia stron.
SeedProd to najlepsza wtyczka do tworzenia stron WordPress na rynku. Pozwala ona na dodawanie tekstu na dowolnym obrazku na całej Twojej stronie internetowej.
Uwaga: Istnieje darmowa wersja SeedProd, ale w tym przewodniku użyjemy wersji Pro, ponieważ ma ona więcej funkcji.
Naszą pełną recenzję SeedProd możesz przeczytać, aby uzyskać więcej szczegółów.
Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat instalacji wtyczki WordPress.
Po aktywacji będziesz musiał wprowadzić swój klucz licencyjny SeedProd. Klucz ten możesz uzyskać, logując się na swoje konto SeedProd. Następnie kliknij zakładkę „Pobrane”.
Po wykonaniu tej czynności możesz skopiować klucz z sekcji „Klucz licencyjny”.

Możesz teraz wkleić ten klucz w obszarze administracyjnym WordPress, przechodząc do strony SeedProd » Ustawienia.
Gdy już tu będziesz, wklej swój klucz w pole „Klucz licencyjny”.

Następnie wystarczy kliknąć „Zweryfikuj klucz”.
Następnie przejdziemy do SeedProd » Strony docelowe i klikniemy „Dodaj nową stronę docelową”.

Ten pierwszy krok jest potrzebny, zanim będziesz mógł dodać tekst na swoich obrazach.
Twoim następnym zadaniem jest wybór szablonu, który będzie punktem wyjścia Twojej strony.
Niezależnie od tego, który szablon SeedProd wybierzesz, możesz dostosować każdą część szablonu, aby idealnie pasował do Twojej strony internetowej i marki. Jeśli wolisz zacząć od pustego płótna, kliknij „Pusty szablon”.

We wszystkich naszych obrazach używamy szablonu Tasty Squeeze Page, który jest idealny do kampanii zbierania większej liczby subskrybentów.
Gdy znajdziesz szablon, którego chcesz użyć, najedź na niego kursorem myszy. Następnie możesz kliknąć ikonę „Podgląd”.

To pokaże podgląd szablonu.
Jeśli jesteś zadowolony z wyglądu tego szablonu, kliknij przycisk „Wybierz ten szablon”.

W polu „Nazwa strony” wpisz nazwę strony.
Domyślnie SeedProd użyje tej nazwy jako adresu URL strony. Jeśli chcesz zmienić ten automatycznie utworzony adres URL, po prostu edytuj tekst w polu „Adres URL strony”.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij przycisk „Zapisz i zacznij edytować stronę”. Spowoduje to otwarcie szablonu w edytorze typu „przeciągnij i upuść” w SeedProd.
W lewym pasku bocznym zobaczysz wszystkie bloki i sekcje, które możesz przeciągnąć i upuścić na swoją stronę.

Chyba że używasz szablonu Pusty szablon, Twoja strona SeedProd będzie już zawierać niektóre bloki i sekcje. Aby edytować którąkolwiek z tych treści, po prostu kliknij, aby zaznaczyć blok lub sekcję.
Menu po lewej stronie SeedProd będzie teraz wyświetlać wszystkie ustawienia, których możesz użyć do dostosowania tego bloku lub sekcji. Jak widać na poniższym obrazku, możesz zmienić tekst wyświetlany w bloku nagłówka.

Najprostszym sposobem dodania tekstu na obrazie jest użycie jednej z gotowych sekcji Hero od SeedProd.
Te sekcje mają zastępczy, pełnoekranowy obraz tła z dodanym na wierzchu tekstem zastępczym. Możesz po prostu zastąpić domyślny obraz tła i tekst własną treścią.
Aby rozpocząć, kliknij zakładkę „Sekcje” w menu po lewej stronie SeedProd.
Następnie możesz kliknąć „Hero”, aby zobaczyć wszystkie gotowe sekcje nagłówkowe, które możesz dodać do swojej strony.

Aby wyświetlić podgląd któregokolwiek z tych szablonów sekcji, po prostu najedź na szablon, a następnie kliknij ikonę lupy.
Aby dodać tę sekcję nagłówkową do swojego projektu, kliknij „Wybierz tę sekcję”.

Następnie będziesz chciał zastąpić zdjęcie stockowe szablonu własnym obrazem. Aby to zrobić, po prostu kliknij zdjęcie stockowe, aby je zaznaczyć.
Następnie, w menu po lewej stronie SeedProd, najedź kursorem na podgląd „Obraz tła”, aż pojawi się ikona kosza.
Następnie możesz kliknąć tę ikonę, aby usunąć obraz zastępczy.

Następnie kliknij na „Użyj własnego obrazu”. Możesz wtedy wybrać obraz z biblioteki mediów WordPress lub użyć obrazu z zasobów.
SeedProd zapewnia łatwy dostęp do tysięcy bezpłatnych zdjęć stockowych. Aby przejrzeć bibliotekę zdjęć stockowych SeedProd, kliknij „Użyj zdjęcia stockowego”.
W pasku wyszukiwania wpisz słowo lub frazę opisującą obraz, którego szukasz, i kliknij przycisk „Szukaj”.

SeedProd wyświetli teraz wszystkie obrazy z zasobów pasujące do Twojego terminu wyszukiwania.
Kiedy znajdziesz obraz, który chcesz dodać do swojego projektu, po prostu kliknij go.

Po dodaniu obrazu jesteś gotowy do zastąpienia tekstu zastępczego.
Aby to zrobić, kliknij, aby zaznaczyć blok Tekst. Następnie w obszarze „Tekst” po prostu wpisz tekst, którego chcesz użyć.

Niektóre szablony nagłówków SeedProd mają dodatkową zawartość, taką jak przyciski wezwania do działania.
Chcesz zmienić tę treść? Następnie po prostu kliknij, aby wybrać blok, a następnie dokonaj zmian w menu po lewej stronie SeedProd.

Inną opcją jest usunięcie bloku z szablonu nagłówka.
Aby to zrobić, po prostu kliknij, aby zaznaczyć blok, a następnie kliknij ikonę kosza.

Gdy będziesz zadowolony z projektu strony, możesz kliknąć przycisk „Zapisz”.
Stąd możesz opublikować stronę lub zapisać ją jako szablon.

Aby uzyskać więcej informacji na temat tworzenia niestandardowych układów stron za pomocą SeedProd, zapoznaj się z naszym przewodnikiem na temat tworzenia strony docelowej w WordPress.
Dodatkowe wskazówki dotyczące zarządzania obrazami i plikami w WordPress
Dodawanie tekstu do obrazów to tylko jeden ze sposobów na poprawę wyglądu Twojej witryny. Chcesz zrobić więcej ze swoimi zdjęciami? Sprawdź te łatwe przewodniki:
- Jak łatwo leniwie ładować obrazy w WordPressie
- Jak dodać wiele galerii do wpisów i stron WordPress
- Jak prawidłowo dodać suwak wyróżnionych treści w WordPress
- Jak dodać ramkę wokół obrazu w WordPress
- Jak przycinać i edytować miniatury postów w WordPress
- Jak łatwo dodać interaktywne obrazy 360 stopni w WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać tekst na obrazku w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat masowej edycji obrazów wyróżniających oraz naszymi rekomendacjami najlepszych wtyczek suwaków 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.

Ben
Świetny samouczek. W przypadku metody 1, gdzie możemy dodać nakładkę tekstową do obrazu, jak sprawić, aby zarówno obraz, jak i tekst nakładki były klikalnymi linkami. co oznacza, że po najechaniu na obrazek jest on klikalny. do tej pory próbowaliśmy wielu metod, ale udało nam się sprawić, że klikalny jest tylko tekst nakładki. proszę o podzielenie się swoimi uwagami.
Wsparcie WPBeginner
Blok okładki nie jest zaprojektowany z myślą o tej funkcjonalności. Aby to osiągnąć, użyłbyś bloku obrazu i stylizował obraz do pożądanego projektu.
Admin
Jiří Vaněk
Chciałbym zapytać o responsywność strony internetowej. Kiedy umieszczam tekst na obrazku w określonej pozycji na komputerze, ląduje on w zupełnie innej pozycji na urządzeniu mobilnym. Jak w tym kontekście obsługiwana jest responsywność? Utrzymanie tego samego projektu na komputerze i urządzeniach mobilnych jest dla mnie dość trudne, ponieważ obrazek dostosowuje się ze względu na mniejszy rozmiar ekranu. Czy to bardziej problem z wybranym motywem?
Wsparcie WPBeginner
Zależałoby to od używanej metody i konkretnego motywu, którego używasz w tym problemie i jak go rozwiązać.
Admin
Jiří Vaněk
Dziękuję za odpowiedź. Używam motywu GeneratePress. Myślałem, że może istnieć rozwiązanie, być może przy użyciu CSS lub innej metody, aby wszystko naprawić. Będę postępować zgodnie z Twoją radą i spróbuję uzyskać więcej informacji od twórców motywu. Odpowiadają bardzo szybko i są bardzo pomocni. Dziękuję za Twój czas.
Viktorija
Cześć, próbuję dodać tytuł, a po kliknięciu na niego prowadzi do obrazka.
Wsparcie WPBeginner
Z tego, co brzmi, chciałbyś użyć metody 2 i dodać link do tego bloku.
Admin
Trish
Witaj Zespole Redakcyjny,
Jestem trochę rozczarowany blokiem Okładka w WordPress, ponieważ nakładka tekstowa NIE jest responsywna w widoku mobilnym, co niestety sprawia, że tekst jest całkowicie nieczytelny.
Pomyślałem, że powinieneś wiedzieć o tym problemie.
Wsparcie WPBeginner
Dziękujemy za informację, że blok nie jest obecnie responsywny.
Admin