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

Istnieje wiele sytuacji, w których trzeba dodać nakładkę tekstową do obrazka w WordPress.

Być może tworzysz przyciągający wzrok baner na twoją stronę główną. A może chcesz dodać chwytliwy tytuł do twojego wyróżniającego się obrazka. Sami spotkaliśmy się z taką sytuacją, a dodanie nakładki tekstowej to świetny sposób na uczynienie twoich obrazków bardziej pouczającymi i angażującymi.

Jeśli potrzebujesz pomocy w dodaniu tekstu na wierzchu twojego obrazka w WordPress, to jesteś we właściwym miejscu. Znaleźliśmy 3 proste sposoby na dodanie tekstu na wierzchu obrazków w WordPress, bez konieczności posiadania umiejętności projektowania.

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:

Metoda 1: Dodawanie tekstu na wierzchu obrazka przy użyciu bloku okładki

Jednym ze sposobów dodawania tekstu na wierzchu obrazu w WordPress jest użycie bloku Okładka. Za pomocą tego bloku można wyświetlić dowolny obraz, a następnie wpisać na nim tekst. Dzięki temu blok Cover jest idealny do tworzenia obrazó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.

Tutaj możesz wybrać domyślny blok okładki. Możesz także wybrać opcję szablonu z obrazkiem zastępczym i tekstem. W przypadku drugiej opcji możesz po prostu zastąpić istniejący obrazek i tekst twoim własnym.

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

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

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.

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.

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.

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.

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

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.

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

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.

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.

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.

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

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

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

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

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

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

Spowoduje to wyświetlenie podglądu szablonu.

Jeśli podoba ci się wygląd 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 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ść”.

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.

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.

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

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.

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

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.

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

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.

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

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

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.

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.

Dodatkowe wskazówki dotyczące zarządzania obrazkami i plikami w WordPressie

Dodawanie tekstu do obrazków to tylko jeden ze sposobów na poprawienie wyglądu twojej witryny. Chcesz zrobić więcej z twoimi zdjęciami? Sprawdź te proste przewodniki:

• Jak łatwo wczytywać obrazki w WordPressie?
• Jak dodać wiele galerii we wpisach i na stronach WordPressa?
• Jak prawidłowo dodać pokaz slajdów w WordPressie?
• Jak dodać obramowanie wokół obrazka w WordPress?
• Jak przycinać i edytować miniaturki wpisów WordPress
• Jak łatwo dodać interaktywne obrazki 360 stopni 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 zbiorczej edycji wyróżniających się obrazków oraz wyborem najlepszych wtyczek do WordPressa typu slider.

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.