Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
WPB Cup
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak dodać tekst na obrazie w WordPress (3 metody)

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.

Jak dodać tekst na obrazku w WordPress

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:

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.

Blok okładki WordPress

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”.

WordPress cover replace

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”.

Zastąpienie okładki przesłanym plikiem

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.

Nakładka kolorystyczna okładki

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.

Jak dodać tekst na obrazku w WordPress

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.

Stylizacja tekstu na obrazie WordPress

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.

Zmiana koloru tekstu na obrazku

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ę.

Dodawanie tekstu na obrazku w WordPress

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.

Blok obrazu WordPress

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”.

Dodaj tekst obraz

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.

Kolor bloku obrazu

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.

Mały duży 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”.

Strona pobierania SeedProd

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”.

Weryfikacja licencji SeedProd

Następnie wystarczy kliknąć „Zweryfikuj klucz”.

Następnie przejdziemy do SeedProd » Strony docelowe i klikniemy „Dodaj nową stronę docelową”.

Szablony projektów stron SeedProd

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”.

SeedProd wybierz 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”.

Profesjonalnie zaprojektowane szablony SeedProd

To pokaże podgląd szablonu.

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

Szablon do generowania leadów i stron typu squeeze

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”.

Tworzenie niestandardowego układu strony za pomocą SeedProd

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ę.

Dodawanie bloków do projektu SeedProd

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.

Dostosowywanie gotowego projektu strony SeedProd

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.

Szablon sekcji SeedProd

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ę”.

Szablon główny SeedProd

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.

Usuwanie obrazka tła w SeedProd

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”.

Wybieranie obrazu stockowego SeedProd

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.

Biblioteka zdjęć stockowych SeedProd

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ć.

Dodaj tekst na obrazie za pomocą SeedProd

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.

Edycja tekstu w 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.

Usuwanie sekcji i bloków w SeedProd

Gdy będziesz zadowolony z projektu strony, możesz kliknąć przycisk „Zapisz”.

Stąd możesz opublikować stronę lub zapisać ją jako szablon.

Publikowanie projektu SeedProd

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:

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz w niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak finansowany jest WPBeginner, dlaczego to ważne i jak możesz nas wesprzeć. Oto nasz proces redakcyjny.

Ostateczny zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi – kolekcji produktów i zasobów związanych z WordPress, które powinien mieć każdy profesjonalista!

Interakcje czytelników

9 CommentsLeave a Reply

  1. Ś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.

    • 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

  2. 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?

    • Zależałoby to od używanej metody i konkretnego motywu, którego używasz w tym problemie i jak go rozwiązać.

      Admin

      • 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.

  3. 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.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Prosimy NIE używać słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.