Jak dodać nakładkę tekstową do obrazów w WordPressie?

Obrazy z nakładką tekstową świetnie wyglądają, dostarczają wiadomości i są szczególnie przydatne w nagłówkach. Ale spójrzmy prawdzie w oczy, nikt nie chce zakodować tej funkcji w edytorze, ani nikt nie miałby czasu na zaprojektowanie tekstu w samym obrazie. Na szczęście istnieje kilka bardzo prostych procesów, które nie wymagają niestandardowego kodowania i można je łatwo osiągnąć za pomocą edytora bloków Gutenberga, wbudowanego narzędzia edytora treści WordPress. W tym samouczku omówimy kilka z tych metod, a na koniec będziesz mógł dodawać tekst nakładki na obrazy w całej witrynie WordPress.

Nakładanie tekstu na obrazy

Po pierwsze, czym jest nakładka tekstowa? Nakładka tekstowa to dowolny rodzaj treści pisanej, która zakrywa powierzchnię treści wizualnych, takich jak filmy i obrazy. Nakładki tekstowe są najczęściej używane w nagłówkach i banerach w sekcji bohaterów stron internetowych. Zamiast prostego tekstu jako nagłówka, zawierającego obraz z tekstem i nakładką, strona wygląda znacznie lepiej z profesjonalnego i estetycznego punktu widzenia. Ponadto możesz połączyć nakładany tekst z odpowiednim produktem lub stroną w swojej witrynie, aby zwiększyć ruch.

Jak dodać nakładkę tekstową do obrazów w WordPressie?

Przed wersją 5.0 WordPress używał prostego edytora klasycznego do tworzenia postów i stron. W edytorach klasycznych nie można było dodawać przycisków, tabel lub dekoracji, takich jak nakładki tekstowe. Dlatego musiałeś użyć niestandardowej wtyczki lub wtyczki do tworzenia stron od zewnętrznych programistów. Jednak możesz zrobić wiele rzeczy za pomocą edytora bloków Gutenberga bez dodatkowej wtyczki. Na przykład istnieje więcej niż jeden sposób na dodanie nakładki tekstowej do obrazów w WordPressie za pomocą edytora bloków Gutenberga. Ten post poprowadzi Cię przez wszystkie kroki i metody, które musisz wykonać, aby dodać nakładkę tekstową na obrazy w swojej witrynie WordPress.

Na co więc czekamy? Zacznijmy!!

Uwaga: jak wyjaśniamy z Gutenbergiem, upewnij się, że używasz domyślnego edytora bloków Gutenberg w swojej witrynie, a nie starego edytora z wtyczką Classic Editor.

1. Dodawanie nakładki tekstowej za pomocą bloku obrazu

• Gdy jesteś w edytorze postów lub stron, kliknij ikonę wstawiania bloku (+) i wybierz blok obrazu , aby dodać nowy obraz. Inną opcją jest wpisanie /image i naciśnięcie klawisza Enter.
• Masz wiele możliwości wstawienia obrazu. Wybierz Prześlij, aby dodać obraz z komputera lub skorzystaj z opcji Biblioteki multimediów , jeśli chcesz wybrać istniejący obraz w witrynie WordPress. Możesz również użyć opcji Wstaw z adresu URL, jeśli chcesz bezpośrednio dodać obraz z linku.
• Kliknij obraz, w którym chcesz dodać nakładkę tekstową.
• Na górnym pasku narzędzi kliknij przycisk „Dodaj tekst nad obrazem” , jak pokazano na zrzucie ekranu poniżej.

• Po kliknięciu zauważysz pewne zmiany w edytorze bloków po prawej stronie strony (zwanym panelem dokumentu). Przewiń w dół na panelu, aż dojdziesz do sekcji „Nakładka”, jak pokazano na poniższym obrazku. Tutaj masz możliwość wykonania dowolnej z następujących czynności:
  • Dodaj jednolity kolor nakładki lub gradient jako tło, aby tekst był bardziej widoczny. W przypadku obu opcji masz możliwość wybrania jednego z gotowych kolorów z menu, wybrania niestandardowego koloru z palety lub dodania określonego kodu koloru. Możesz zrobić to samo dla opcji koloru gradientu. Gradient to w zasadzie schemat kolorów składający się z co najmniej dwukolorowych kombinacji. Innymi słowy, kolor nakładki będzie stopniowo i odpowiednio zmieniał się z pierwszego na drugi i więcej (jeśli dotyczy).
  • Zmień poziomy krycia w zależności od tego, jak dużą część obrazu chcesz widzieć. Zalecamy poziomy krycia od 30 do 60%, ponieważ wszystko poniżej 30% może sprawić, że nakładka będzie prawie nie do odróżnienia, podczas gdy przekroczenie 60% spowoduje, że nakładka będzie zbyt ciemna, co utrudni wyraźne zobaczenie obrazu tła.

• Aby dodać tekst, kliknij sekcję „Wpisz / wybierz blok” nałożoną na obraz. Spowoduje to teraz zmianę edytora bloku tak, aby wyświetlał ustawienia edycji specyficzne dla tekstu nakładki.
• Wpisz tekst, który chcesz wyświetlić nad obrazem, jak widać na poniższym zrzucie ekranu.

• Aby zmienić kolor tekstu, przejdź do sekcji „Kolor” edytora bloków. Tutaj możesz dokonać następujących zmian koloru tekstu nakładki.
  • Zmień kolor tekstu. Zalecamy wybranie koloru tekstu, który pasuje do koloru nakładki i wybranego poziomu krycia.
  • Dodaj kolor tła i/lub kolor łącza, jeśli połączyłeś tekst z inną stroną za pomocą hiperłącza.
• Aby zmienić typografię tekstu nakładki, przewiń w dół edytora bloków, aż dojdziesz do ustawień „Typografia” . Tutaj możesz wybrać jeden z gotowych rozmiarów tekstu z listy rozwijanej lub ręcznie wprowadzić określony rozmiar, klikając przycisk „Rozmiar niestandardowy” . Wybraliśmy rozmiar tekstu jako „Ogromny”, który jest jednym z dostępnych wstępnie ustawionych rozmiarów tekstu. Możesz wybrać rozmiar tekstu, który najbardziej Ci odpowiada.

• Jeśli chcesz zmienić wyrównanie tekstu nakładki, pogrubić go lub dodać do niego link, możesz to łatwo zrobić, wybierając opcje na górnym pasku narzędzi, jak pokazano na poniższym obrazku.
• Wreszcie w edytorze bloków znajdziesz kartę Zaawansowane , która pozwala dodać klasę CSS do bloku, co daje możliwość napisania niestandardowego CSS i stylizacji obrazu oraz nałożenia na blok obrazu zgodnie z Twoimi konkretnymi potrzebami. Jeśli jednak nie masz wystarczającej wiedzy i know-how w zakresie programowania front-end, użycie gotowych funkcji dostarczonych przez edytor bloków powinno wystarczyć, aby nadać styl bloku obrazu według własnego uznania.

Uwaga: kolory gradientowe nadają żywy i artystyczny wygląd obrazom, treściom i całej witrynie internetowej. Dlatego, aby w pełni wykorzystać tę funkcję nakładki koloru w edytorze bloków WordPress, zalecamy nauczenie się sztuki mieszania i dopasowywania różnych kombinacji kolorów, aby zobaczyć, co najlepiej działa z Twoją marką i treściami, które już masz w swojej witrynie. Inną opcją byłaby współpraca z projektantem, ponieważ będzie on w stanie przedstawić artystyczne rekomendacje, które są specyficzne dla układu wizualnego, do którego ma dążyć Twoja witryna.

Powiązane: Dowiedz się, jak dodać nakładkę graficzną w witrynie Weebly?

2. Dodawanie nakładki tekstowej za pomocą bloku okładki

Podczas dodawania nakładki tekstowej za pomocą bloku obrazu można zauważyć, że okruszek dokumentu (widoczny na dolnym pasku stanu edytora) zmienia się w blok „Okładka”. Ponieważ WordPress oferuje również blok okładki, możesz go użyć do dodania nakładki tekstowej. W rzeczywistości zalecamy użycie bloku „Cover”, który jest odpowiedni do tworzenia sekcji nagłówka o pełnej szerokości.

• Rozpocznij, klikając ikonę (+) „ Dodaj blok” i wybierając okładkę, aby dodać blok okładki. Możesz także wpisać /cover i nacisnąć klawisz Enter.

• Wybierz Prześlij, aby dodać obraz z komputera lub biblioteki multimediów, jeśli chcesz wybrać istniejący obraz w witrynie WordPress.
• Wpisz tekst, który chcesz nałożyć na obraz, jak pokazano na zrzucie ekranu poniżej. Możesz zmienić kolor i rozmiar tekstu w ustawieniach Kolor i Typografia , jak wspomniano we wcześniejszej metodzie.

Uwaga: WordPress oferuje również kilka predefiniowanych wzorców sekcji nagłówka. Możesz kliknąć ikonę „Przełącz wstawianie bloku +” wyświetlaną w lewym górnym rogu edytora i wybrać „Wzory”. Wybierz "Nagłówki" z menu rozwijanego i wstaw wzór bloku okładki ze wstępnie zdefiniowaną konfiguracją. Jest to bardzo przydatne, ponieważ możesz edytować zawartość i szybko aktualizować zamiast tworzyć od zera.

3. Dodawanie nakładki tekstowej do obrazów z galerii

Łatwo jest również dodać nakładkę tekstową do obrazów w galerii WordPress przy użyciu domyślnego bloku „Galeria”.

• Kliknij przycisk wstawiania bloku (+), aby dodać nowy blok do swojej strony.
• Tym razem wybierz blok galerii . Alternatywnie możesz również wpisać /gallery i nacisnąć enter.

• Otrzymasz dwie opcje dodania obrazu, Prześlij i Bibliotekę multimediów. Podobnie jak w przypadku poprzednich metod wymienionych powyżej, wybierz Prześlij, jeśli chcesz dodać obraz z urządzenia, lub wybierz Bibliotekę multimediów, jeśli obraz, który chcesz dołączyć do sekcji galerii, już istnieje w Twojej witrynie.
• Po przesłaniu obrazów lub wybraniu obrazu z biblioteki multimediów możesz teraz dodać podpisy do każdego obrazu, które pojawią się jako nakładka tekstowa na obrazach galerii.

Uwaga: Ważną rzeczą, na którą należy zwrócić uwagę, jest to, że jeśli już dodałeś podpisy do obrazów w galerii multimediów przed dodaniem bloku galerii, podpisy pojawią się jako nakładka tekstowa na wspomnianym bloku galerii. Wręcz przeciwnie, jeśli dodasz podpisy do obrazów po utworzeniu bloku galerii, nie pojawią się one w bloku galerii. W takim przypadku będziesz musiał ręcznie dodać podpisy po utworzeniu bloku galerii lub usunąć blok galerii i dodać blok ponownie, aby dodane podpisy zostały użyte.

Inne opcje dodawania nakładki tekstowej

Wbudowane opcje nakładek tekstowych są proste i wyglądają prosto w opublikowanej witrynie. Możesz alternatywnie użyć jednego z następujących typów wtyczek do tworzenia nakładek.

• Wtyczki do suwaków, takie jak Slider Revolution lub Kreatura Slider.
• Wtyczki galerii
• Wtyczki do tworzenia stron

Jednak te wtyczki są ciężkie i mogą z łatwością spowolnić działanie Twojej witryny. Możesz także wypróbować niestandardowy CSS do tworzenia nakładek graficznych, jak pokazano na tej stronie demonstracyjnej. Ale musisz znać umiejętności kodowania i spędzać dużo czasu na rozwoju. Dlatego zalecamy użycie jednej z opisanych powyżej domyślnych metod dodawania nakładki tekstowej na obrazy w WordPress.

Ostatnie słowa

I masz to. Dodanie nakładki tekstowej do obrazów w WordPressie jest bardzo prostym i łatwym zadaniem przy użyciu wbudowanego edytora bloków Gutenberga. Ostatecznie dodanie nakładki tekstowej do obrazów poprawia prezentację, projekt, układ i ogólną estetykę witryny, pozostawiając pozytywne pierwsze wrażenie na odwiedzających. Jak zawsze, jeśli masz jakiekolwiek problemy lub wątpliwości związane z dodawaniem tekstu nad obrazami w WordPressie, zostaw komentarz poniżej, a my dołożymy wszelkich starań, aby Ci pomóc.