Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Chcesz dodać tekst na wierzchu obrazka w WordPress?

Nakładka tekstowa to świetny sposób na dostarczenie dodatkowych informacji o obrazku. To także szybki i łatwy sposób na tworzenie banerów, nagłówków, a nawet reklam online.

W tym artykule pokażemy, jak dodać tekst na wierzchu obrazka w WordPress.

How to add text on top of an image in WordPress

Kiedy dodawać tekst nad obrazkami w WordPress?

Obrazki mogą sprawić, że twoja witryna internetowa WordPress będzie wyglądać bardziej interesująco i pomóc rozbić duże akapity tekstu.

Czasami jednak twoje obrazki mogą wymagać więcej wyjaśnień. Na przykład, możesz dodać tekst na górze obrazka, aby wyjaśnić, co przedstawia obrazek i dlaczego dodałeś go do swojego wpisu.

Wiele blogów WordPress dodaje również tekst na wierzchu obrazka, aby stworzyć przyciągające wzrok i informacyjne banery i nagłówki.

W tym wpisie przedstawiamy trzy przyjazne dla początkujących sposoby dodawania tekstu na wierzchu obrazka w WordPressie. Jeśli wolisz od razu przejść do konkretnej metody, możesz skorzystać z poniższych odnośników:

Jednym ze sposobów dodawania tekstu na wierzchu obrazka w WordPress jest użycie bloku Cover. Za pomocą tego bloku można wyświetlić dowolny obrazek, a następnie wpisać nad nim rodzaj tekstu. Dzięki temu blok Cover jest idealny do tworzenia obrazków bohaterów, nagłówków i banerów.

Aby dodać blok okładki do strony lub wpisu, wystarczy kliknąć przycisk plusa „+ Dodaj blok” w edytorze bloków Gutenberg.

Możesz teraz wpisać „Cover” i wybrać odpowiedni blok, gdy się pojawi.

The WordPress Cover block

Domyślnie blok okładki zawiera obrazek zastępczy i tekst zastępczy.

Aby zastąpić domyślny obrazek, wystarczy kliknąć, aby go wybrać. Gdy to zrobisz, kliknij przycisk „Zastąp”.

How to add text on top of an image in WordPress

Jeśli chcesz użyć obrazka, 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 obrazek.

Jeśli chcesz przesłać nowy obrazek, kliknij „Prześlij”.

Uploading an image to the WordPress Cover block

Spowoduje to otwarcie okna, w którym można wybrać dowolny plik z twojego komputera.

Po wybraniu obrazka można użyć ustawień bloku, aby stworzyć ciekawe i przyciągające wzrok efekty. Na przykład, obrazek można naprawiono w miejscu, gdy odwiedzający przewija stronę lub dodać kolorową nakładkę na obrazek.

A colored cover overlay

Jeśli używasz nakładki, możesz zmienić jej krycie za pomocą pokazu slajdów „Krycie”. Ustawienie krycia kontroluje przezroczystość obrazka tła.

Gdy jesteś zadowolony z wyglądu obrazka, możesz dodać tekst.

Domyślnie blok okładki zawiera nagłówek i akapit, do których można dodać tekst nad obrazkiem.

How to add text on top of an image in WordPress

Aby dodać tekst, wystarczy kliknąć i wybrać blok Nagłówek lub Akapit. Następnie wpisz rodzaj tekstu, którego chcesz użyć.

Po dodaniu tekstu na obrazku, tekst ten może być czasami trudny do odczytania. Jest to szczególnie prawdziwe w przypadku odwiedzających, którzy mają słaby wzrok. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat poprawy dostępności na twojej witrynie WordPress.

Biorąc to pod uwagę, możesz stylizować swój tekst, aby był łatwiejszy do odczytania.

Jeśli pracujesz z blokiem nagłówka, możesz także wypróbować różne style nagłówków, aby sprawdzić, który z nich jest najłatwiejszy do odczytania.

Styling the text on top of a WordPress image

Możesz również pomóc twojemu tekstowi wyróżnić się, używając kontrastującego koloru.

Aby wybrać inny kolor, wybierz kartę „Blok” w menu po prawej stronie. Następnie kliknij „Kolor”, aby rozwinąć tę sekcję.

Gdy to zrobisz, kliknij „Tekst”. Spowoduje to otwarcie wyskakującego okienka, w którym można wybrać nowy kolor dla całego tekstu w bloku.

Changing the color of text on top of an image

Zazwyczaj większy tekst jest łatwiejszy do odczytania.

Aby powiększyć twój tekst, kliknij pole obok „Rozmiar”, a następnie wpisz w nie większą liczbę.

Adding text on top of an image in WordPress

Gdy będziesz zadowolony z wyglądu bloku okładki, możesz normalnie opublikować lub zaktualizować twoją stronę. Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz swój tekst na górze obrazka.

Metoda 2: Dodawanie tekstu na wierzchu obrazka przy użyciu bloku obrazu

Blok Cover świetnie nadaje się do tworzenia banerów i nagłówków. Można jednak również dodać tekst na wierzchu standardowego bloku obrazków WordPress.

Aby rozpocząć, musisz dodać blok z obrazkiem do swojej strony lub wpisu. Aby to zrobić, wystarczy kliknąć przycisk „+ Dodaj blok” w edytorze bloków WordPress.

Następnie możesz wpisać „Obrazek” i wybrać odpowiedni blok, aby dodać go do twojego wpisu.

The WordPress Image block

Następnie możesz przesłać obrazek z twojego komputera lub kliknąć „Biblioteka multimediów”, aby wybrać obrazek z biblioteki multimediów WordPress.

Po wybraniu twojego obrazka możesz zmienić jego punkt centralny, dodać nakładkę i zmienić krycie, wykonując ten sam proces opisany powyżej.

Możesz także wypróbować różne suwaki „Naprawiono tło” i „Powtarzające się tło”, aby zobaczyć, co najlepiej pasuje do twojego bloku obrazków.

Gdy będziesz zadowolony z wyglądu twojego obrazka, kliknij przycisk „Dodaj tekst nad obrazkiem”.

Adding text on top of an image in WordPress

Dodaje to obszar, w którym można wpisać twój rodzaj tekstu.

W zależności od twojego obrazka, odwiedzający mogą mieć trudności z odczytaniem tekstu nakładki. W tym przypadku pomocne może być pogrubienie tekstu lub zmiana jego koloru zgodnie z tym samym procesem opisanym powyżej.

Changing the text color in WordPress

Możesz również powiększyć swój tekst.

Aby to zrobić, znajdź sekcję „Rozmiar” w menu po prawej stronie. Następnie możesz kliknąć na różne liczby, aby powiększyć lub pomniejszyć twój tekst.

Increasing the text size

Gdy będziesz zadowolony z wyglądu twojego tekstu i obrazka, przejdź do podglądu witryny internetowej. Następnie kliknij „Zapisz wersję roboczą”, „Aktualizuj” lub „Opublikuj”, aby zapisać twoje zmiany.

Jeśli korzystasz z blokowego motywu WordPress, możesz użyć metod 1 i 2, aby dodać tekst na wierzchu obrazka w dowolnej części twojego motywu za pomocą WordPress Full Site Editor (FSE).

Możesz dowiedzieć się więcej o FSE w naszym kompletnym przewodniku dla początkujących na temat WordPress Full Site Editing.

Metoda 3: Tworzenie własnego układu strony z tekstem na obrazku

Wbudowane bloki WordPress to szybki i łatwy sposób na dodanie tekstu na obrazku w WordPress. Jeśli jednak chcesz mieć swobodę tworzenia całkowicie własnych projektów stron, będziesz potrzebować wtyczki do tworzenia stron.

SeedProd to najlepsza na rynku wtyczka do tworzenia stron WordPress. Umożliwia ona dodawanie tekstu do dowolnego obrazka na całej twojej witrynie internetowej.

Uwaga: Istnieje darmowa wersja SeedProd, ale na potrzeby tego przewodnika użyjemy wersji Pro, ponieważ ma ona więcej funkcji.

Więcej szczegółów można znaleźć w naszej pełnej recenzji SeedProd.

Najpierw należy zainstalować i włączyć wtyczkę SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Podczas włączania należy wpisz klucz licencyjny SeedProd. Klucz ten można uzyskać logując się na twoje konto SeedProd. Następnie kliknij kartę „Pliki do pobrania”.

Gdy już to zrobisz, możesz skopiować klucz w sekcji „Klucz licencyjny”.

The SeedProd Downloads page

Możesz teraz wkleić ten klucz do twojego obszaru administracyjnego WordPress, przechodząc do strony SeedProd ” Ustawienia.

Gdy już tu będziesz, wklej swój klucz w polu „Klucz licencyjny”.

Verifying your SeedProd license

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

Następnie przechodzimy do SeedProd Landing Pages i klikamy na „Utwórz nową stronę”.

SeedProd's page design templates

Twoim kolejnym zadaniem jest wybór szablonu, który będzie punktem wyjścia dla Twojej strony. Bez względu na to, jaki szablon SeedProd wybierzesz, możesz dostosować każdy jego fragment, aby idealnie pasował do Twojej witryny internetowej i brandingu.

Jeśli wolisz zacząć od pustego płótna, możesz kliknąć „Pusty szablon”.

The SeedProd ready-made templates

Na wszystkich naszych obrazkach używamy szablonu Tasty Squeeze Page, który doskonale nadaje się do kampanii pozyskiwania większej liczby subskrybentów.

Po znalezieniu szablonu, którego chcesz użyć, najedź na niego kursorem myszy. Następnie możesz kliknąć ikonkę „Podgląd”.

SeedProd's professionally-designed templates

Spowoduje to wyświetlenie podglądu szablonu.

Jeśli podoba ci się wygląd tego szablonu, kliknij przycisk „Wybierz ten szablon”.

A lead generation and squeeze template

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

Creating a custom page layout with SeedProd

Gdy jesteś zadowolony z informacji, które wpiszesz, kliknij przycisk „Zapisz i rozpocznij edycję strony”. Spowoduje to otwarcie szablonu w edytorze przeciągnij i upuść SeedProd.

W panelu bocznym po lewej stronie zobaczysz wszystkie bloki i sekcje, które możesz dodać do swojej strony za pomocą metody „przeciągnij i upuść”.

Adding blocks to your SeedProd design

O ile nie korzystasz z pustego szablonu, twoja strona SeedProd będzie już zawierać pewne bloki i sekcje. Aby edytować dowolną z tych treści, wystarczy kliknąć, aby wybrać blok lub sekcję.

Menu po lewej stronie SeedProd pokaże teraz wszystkie ustawienia, których można użyć, aby dostosować ten blok lub sekcję. Jak widać na poniższym obrazku, po kliknięciu bloku Nagłówek można zmienić tekst wyświetlany w tym bloku.

Customizing a ready-made SeedProd page design

Najprostszym sposobem na dodanie tekstu na wierzchu obrazka jest użycie jednej z gotowych sekcji Hero od SeedProd.

Sekcje te mają zastępczy obrazek tła o pełnej szerokości i tekst zastępczy dodany na górze. Możesz po prostu zastąpić domyślny obrazek tła i tekst twoją własną treścią.

Aby rozpocząć, kliknij kartę „Sekcje” w lewym menu SeedProd.

Następnie możesz kliknąć „Bohater”, aby zobaczyć wszystkie gotowe sekcje bohaterów, które możesz dodać do swojej strony.

A SeedProd section template

Aby wyświetlić podgląd dowolnego szablonu sekcji, wystarczy najechać kursorem na szablon, a następnie kliknąć ikonkę lupy.

Aby dodać tę sekcję bohatera do twojego projektu, po prostu kliknij „Wybierz tę sekcję”.

A SeedProd hero template

Następnie należy zastąpić stockowy obrazek szablonu twoim własnym obrazkiem. Aby to zrobić, wystarczy kliknąć na stockowy obrazek, aby go zaznaczyć.

Następnie, w lewym menu SeedProd, najedź kursorem na podgląd „Background Image”, aż pojawi się ikonka kosza.

Następnie możesz kliknąć tę ikonkę, aby usunąć obrazek zastępczy.

Deleting a background image in SeedProd

Następnie kliknij „Use Your Own Image”. Następnie możesz wybrać obrazek z biblioteki multimediów WordPress lub użyć obrazka stockowego.

SeedProd zapewnia łatwy dostęp do tysięcy obrazów stockowych bez tantiem. Aby przejrzeć bibliotekę obrazów stockowych SeedProd, kliknij „Użyj obrazu stockowego”.

W pasku wyszukiwania wpisz słowo lub frazę opisującą szukany obrazek i kliknij przycisk „Szukaj”.

Choosing a SeedProd stock image

SeedProd pokaże teraz wszystkie stockowe obrazki, które pasują do twojego wyszukiwanego terminu.

Gdy znajdziesz obrazek, który chcesz dodać do twojego projektu, po prostu kliknij go.

SeedProd's stock image library

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

Aby to zrobić, kliknij, aby wybrać blok Tekst. Następnie w obszarze „Tekst” wpisz rodzaj tekstu, którego chcesz użyć.

Add text on top of an image using SeedProd

Niektóre szablony bohaterów SeedProd zawierają dodatkowe treści, takie jak przyciski wezwania do działania.

Chcesz zmienić tę treść? Następnie wystarczy kliknąć, aby wybrać blok, a następnie wprowadzić twoje zmiany w lewym menu SeedProd.

Editing your SeedProd text

Inną opcją jest usunięcie bloku z szablonu bohatera.

Aby to zrobić, wystarczy kliknąć, aby zaznaczyć blok, a następnie kliknąć ikonkę kosza.

Deleting SeedProd sections and blocks

Gdy twój projekt strony będzie zadowalający, możesz kliknąć przycisk „Zapisz”.

Z tego miejsca można wybrać opcję opublikowania strony lub zapisania jej jako szablonu.

Publishing a SeedProd design

Więcej szczegółów na temat tworzenia własnych układów stron za pomocą SeedProd można znaleźć w naszym przewodniku na temat tworzenia stron docelowych w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać tekst na wierzchu obrazka w WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat masowej edycji wyróżniających się obrazków i wyborem najlepszego oprogramowania do projektowania stron internetowych.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

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

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

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

Reader Interactions

5 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      For what it sounds like you’re wanting, you would want to use method 2 and add a link to that block.

      Administrator

  2. Trish says

    Hi Editorial Staff,

    Am a bit disappointed with the WordPress Cover Block in that the text overlay is NOT responsive in Mobile view, sadly, making the text totally unreadable.

    Thought you should know of this issue.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.