4 bezproblemowe sposoby dodawania tekstu nad obrazem w WordPress

Opublikowany: 2022-05-24

Nakładka tekstowa odnosi się do pisanej treści wyświetlanej na powierzchni Twoich obrazów lub filmów. Jest używany głównie w albumach ślubnych lub galerii zdjęć.

Nakładany tekst pomaga stworzyć profesjonalny i estetyczny wygląd zdjęć i galerii w witrynie. Umożliwia również tworzenie linków do powiązanych stron/produktów, aby wydłużyć czas odwiedzających w witrynie.

Możesz być zaskoczony, jak łatwo jest ustawić suwak obrazu WordPress z tekstem. Oto 4 różne opcje, które pozwolą Ci dodawać nakładki tekstowe do obrazów w podróży.

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

WordPress nie jest wyposażony w domyślną funkcję wstawiania nakładki tekstowej do obrazów w klasycznym edytorze. Na szczęście możesz to osiągnąć na więcej niż jeden sposób. Możesz użyć bloków obrazu lub bloków okładek w edytorze WordPress Gutenberg. Od Ciebie zależy, czy użyjesz wtyczki, aby uprościć cały proces.

Metoda 1: Dodaj nakładkę tekstową za pomocą WordPress Gutenberg Image Block

Gutenberg zapewnia blok obrazu do wstawiania obrazów na stronę lub publikowania treści. W przeciwieństwie do klasycznego edytora, istnieje wiele opcji dostosowywania stylów multimediów, w tym wyświetlanie nakładającego się tekstu.

Najpierw otwórz stronę lub post, w którym chcesz, aby tekst nakładał się na obrazy. Teraz kliknij ikonę Plus (+) i wybierz blok obrazu z listy.

Gdy blok obrazu jest gotowy, prześlij obrazy z komputera, wybierz je z Biblioteki multimediów lub wstaw tam ich adresy URL.

pda-dodaj-blok-obrazu

Po dodaniu obrazu po prostu kliknij ikonę „ Dodaj tekst nad obrazem ” u góry zdjęcia. Następnie zobaczysz wiersz z napisem „ Wpisz /, aby wybrać blok ” w wyrównaniu obrazu po lewej stronie, aby wprowadzić tekst.

pda-dodaj-tekst-na-obraz-opcja

Sekcja Blokuj po prawej stronie daje wiele możliwości stylizacji tekstu i upewnienia się, że wyróżnia się na obrazie.

Przewiń w dół do poziomu Opacity , zalecamy zmianę z 30% na 60%. Niższe lub wyższe te liczby spowodują, że obraz będzie zbyt jasny lub zbyt ciemny, co utrudni użytkownikom przeglądanie treści wizualnych.

Możesz ustawić niestandardowy kolor tekstu, a także nakładki i zmienić rozmiar czcionki. Tak wygląda Twoje zdjęcie z nałożonym tekstem.

obraz-pda-z-nakładką-tekstową

Wystarczy kilka prostych czynności, aby nałożyć tekst na obrazy.

Metoda 2: Wstaw nakładkę tekstową z blokiem okładki

Innym rozwiązaniem wyświetlania tekstu na obrazach jest zastosowanie bloku Cover do edytora Gutenberga.

Możesz zacząć od kliknięcia ikony Plus (+) i dodania bloku Okładka do treści strony w dokładnie taki sam sposób, jak w poprzedniej metodzie.

pda-dodaj-blok-okładki

Następnie prześlij swój obraz z urządzenia lub wybierz jeden z Biblioteki multimediów. Następnie wpisz tekst, który zostanie nałożony na obraz.

Możesz łatwo nadać nowy wygląd tekstowi, zmieniając jego kolor i rozmiar w sekcji Ustawienia kolorów i typografii .

pda-tekst-nakładka-przy-okładce-blok

Metoda 3: Wyświetlaj tekst na obrazach z galerii

Dwie powyższe trasy mają na celu wstawienie tekstu na pojedynczym obrazie. Jeśli szukasz rozwiązania umożliwiającego dodanie nakładającego się tekstu do wszystkich zdjęć w galerii, zapoznaj się z tą sekcją i przejrzyj poniższy przewodnik krok po kroku.

Edytor Gutenberg ma wbudowany blok galerii, aby utworzyć podstawowy suwak lub galerię obrazów w Twojej witrynie. Poza tym masz też mnóstwo potężnych wtyczek galerii WordPress, aby tworzyć wspaniałe galerie.

Na razie skoncentruj się na umieszczaniu nakładek tekstowych na galeriach obrazów, które zapewnia domyślna funkcja galerii WordPress.

  1. Kliknij przycisk Plus (+), jak zawsze, i wybierz blok Galeria
    pda-gutenberg-galeria-blok
  2. Prześlij swoje zdjęcia lub wybierz je z Biblioteki mediów
    pda-upload-images-gallery
  3. Edytuj swoją galerię i dodaj nakładający się tekst w polu podpisu pod każdym obrazem
    pda-edit-gallery-image-caption
  4. Wstaw galerię

Metoda 4: Umieść tekst nad obrazami za pomocą wtyczki Modula

Bez wątpienia Modula jest obecnie jedną z najbardziej znanych wtyczek do galerii i sliderów WordPressa, otrzymując ponad 100 tysięcy aktywnych instalacji. Oprócz podstawowych funkcji, takich jak 42 efekty najechania na obraz, różne opcje ochrony suwaka i 4 rodzaje siatek, warto wspomnieć o możliwości dodania przez wtyczkę suwaka obrazu z animacją tekstu.

Krok 1: Zainstaluj wtyczkę Modula

Aby dodać suwak obrazu nakładki tekstowej, musisz najpierw zainstalować wtyczkę dla swojej witryny. Rozpoczęcie korzystania z Modula nic nie kosztuje, ponieważ można ją pobrać bezpośrednio z repozytorium WordPressa.

  1. Zaloguj się do panelu administracyjnego WordPress
  2. Przejdź do wtyczek i kliknij Dodaj nowy
  3. Wpisz „Modula” w polu słów kluczowych
  4. Naciśnij przyciski Zainstaluj teraz i Aktywuj
    pda-install-modula-plugin

Otóż ​​to.

Krok 2: Dodaj nową galerię zdjęć

Teraz przejdź do sekcji Modula w menu administratora i wybierz Galerie. Kliknij Dodaj nowy , aby utworzyć swoją pierwszą galerię.

pda-dodaj-nową-galerię-moduł

Nadaj swojej nowej galerii nazwę, a następnie naciśnij Prześlij pliki obrazów, aby dodać zdjęcia do tej galerii. Tak wygląda Twoja galeria po wybraniu zdjęć z galerii.

pda-modula-galeria przykład

Krok 3: Dostosuj swój suwak WordPress, dodając tekst

Aby wyświetlić tekst na suwaku obrazu lub galerii, musisz wcześniej wybrać odpowiedni typ galerii. W Modula możesz przejść do Ustawienia > Ogólne > Typ galerii > Suwak .

pda-select-gallery type

Następnie dostosuj swoją galerię za pomocą nakładającego się tekstu, dostosowując rozmiar obrazu, umożliwiając przycinanie, edycję rynny, ustawiając szerokość itp. Co ważniejsze, włącz opcję Podpisy suwaka na dole strony ustawień.

pda-enable-slide-caption

Pozostała część procesu polega na powrocie do wygenerowanej przez siebie galerii i dodaniu podpisów do poszczególnych obrazów w galerii. Po prostu najedź na zdjęcie, kliknij ikonę edycji i podaj swój tekst w polu tekstowym podpisu. Możesz tam edytować tytuł obrazu, wyrównanie i adres URL.

Po zakończeniu pamiętaj, aby zapisać i zamknąć, a następnie przejść do następnego zdjęcia w galerii.

Dodaj tekst nad obrazem w WordPressie jak profesjonalista

Przeszedłeś przez 4 sposoby umieszczania tekstu na obrazie w WordPressie, korzystając z domyślnej funkcji WordPressa lub korzystając z bezpłatnej wtyczki.

Jeśli używasz edytora Gutenberga i chcesz szybko utworzyć galerię z tekstem, pobierz bloki Obraz, Okładka i Galeria Gutenberga. Szukasz potężnego rozwiązania do zbudowania imponującej galerii z nakładającym się tekstem, rozważ zainstalowanie wtyczki Modula.

Czy myślałeś kiedyś o galerii wideo dla swojej witryny WordPress? Sprawdź nasz artykuł na temat dodawania galerii wideo w Elementorze.