Як додати текст поверх зображення у WordPress (3 способи)

Додавання тексту поверх зображення є популярною технікою для підвищення візуальної привабливості їхнього контенту чи веб-сайту. Також це чудовий спосіб зробити ваші зображення більш інформативними та захоплюючими.

У цій статті ми знайшли три простих способи додати текст поверх зображення у WordPress. Чи ви віддаєте перевагу використанню Block Editor, плагіна або спеціального коду. Давайте дізнаємось!

Чому важливо додавати текст поверх зображень

Перш ніж перейти до методів, вам потрібно знати причину, чому додавання тексту поверх зображень є важливим.

1. Приверніть увагу

Якщо користувачі швидко прокручують контент, додавання лише зображень може бути недостатнім, щоб привернути їхню увагу. Саме тому вам потрібно додати текст поверх зображення, щоб допомогти привернути увагу користувачів і ефективніше передати ваше повідомлення.

2. Покращуйте користувацький досвід

Це правда, що зображення можуть надавати велику цінність самі по собі, однак додавання тексту поверх них, такого як підписи, цитати чи інший текстовий контент, може зробити їх ще більш корисними. Більше того, користувачі можуть зрозуміти контекст зображення та те, як воно пов'язане з вашим контентом.

3. Покращення доступності

Ви також можете допомогти покращити доступність для користувачів, які можуть мати труднощі з переглядом самого зображення. Надаючи текстовий альтернативний варіант, ви можете забезпечити доступність вашого контенту для більш широкого кола користувачів.

4. Підвищення SEO

Додавання відповідних ключових слів до підписів зображень або альтернативного тексту може допомогти покращити позицію веб-сайту у пошукових системах. Це відбувається тому, що пошукові системи використовують цю інформацію, щоб зрозуміти зміст вашого веб-сайту та визначити, наскільки він відповідає запитам користувачів.

3 способи додавання тексту поверх зображення у WordPress

1. Використовуйте редактор блоків WordPress

Спочатку перейдіть на сторінку або допис, до якого ви збираєтеся додати текст поверх зображення.

Виберіть Накрити, щоб написати текст поверх зображення.

Після цього воно почне відображатися на вашому екрані. Відображається зображення за замовчуванням, але ви можете змінити зображення як забажаєте.

Ви також можете замінити стандартне зображення вашим власним зображенням. Натисніть на кнопку заміни і потім завантажте зображення або просто виберіть з бібліотеки медіа

Буде виглядати ось так, потім ви можете написати текст поверх зображення як забажаєте.

Двічі клацніть на тексті, ви отримаєте можливість редагувати текст. Ви можете регулювати розмір, колір та багато іншого відповідно до ваших вимог.

Нарешті, натисніть кнопку оновлення, або якщо ви додали новий пост чи сторінку, то натисніть кнопку публікації.

2. Використовуйте CSS

Відкрийте редактор блоків WordPress і виберіть блок зображення, де ви хочете додати текст. У правій бічній панелі натисніть на вкладку Додатково.

У полі Додатковий клас CSS додайте спеціальний клас для блоку зображення.

Збережіть зміни та опублікуйте або оновіть сторінку чи публікацію.

.custom-class { позиціонування: відносне; } .custom-class p { позиціонування: абсолютне; зверху: 50%; зліва: 50%; перетворення: translate(-50%, -50%); розмір шрифту: 24px; колір: #ffffff; тінь тексту: 2px 2px 2px #000000; } 

У коді вище замініть "користувацький-клас" на користувацький клас, який ви додали до блоку зображення. Ви також можете налаштувати розмір шрифту, колір та інші параметри стилю відповідно до ваших уподобань.

3. Використовуйте плагін WordPress

Якщо ви хочете мати свободу створювати повністю індивідуальні дизайни сторінок, вам знадобиться плагін для створення сторінок. Одним із плагінів для створення сторінок WordPress є SeedProd, який дозволяє додавати текст поверх будь-якого зображення на всьому вашому веб-сайті.

Спочатку встановіть і активуйте плагін SeedProd. Після активації вам потрібно буде ввести ключ ліцензії. Увійдіть до свого облікового запису SeedProd, потім натисніть на вкладку Завантажити.

Після завершення скопіюйте ключ у розділі Ключ ліцензії.

Тепер ви можете вставити цей ключ у свій адміністративний розділ WordPress, перейшовши на сторінку SeedProd » Налаштування.

Потрапивши сюди, продовжуйте й вставте свій ключ у поле Ліцензійний ключ. Потім вам просто потрібно натиснути на кнопку Перевірити ключ.

Далі, перейдіть до SeedProd » Цілі сторінки і натисніть Додати нову цільову сторінку.

Після цього оберіть шаблон. Незалежно від того, який шаблон SeedProd ви оберете, ви зможете налаштувати кожну частину шаблону відповідно до вашого веб-сайту та брендингу.

Однак, якщо ви бажаєте почати з чистого аркуша, тоді натисніть на Порожній шаблон.

Як тільки ви знайшли шаблон, наведіть на нього курсор миші. Потім ви зможете натиснути на значок попереднього перегляду.

Якщо вас влаштовує вигляд цього шаблону, то натисніть кнопку Обрати цей шаблон.

У полі Назва сторінки введіть ім'я для сторінки.

Якщо ви хочете змінити автоматично створену URL-адресу, відредагуйте текст у полі URL-адреса сторінки.

Натисніть на Зберегти та почати редагування сторінки кнопку. Це відкриє шаблон у редакторі SeedProd із функцією перетягування.

У лівій бічній панелі ви побачите всі блоки та розділи, які можна додати до сторінки за допомогою перетягування.

Якщо ви не використовуєте Порожній шаблон, ваша сторінка SeedProd вже міститиме деякі блоки та розділи. Щоб редагувати цей контент, натисніть, щоб вибрати блок або розділ.

Найпростіший спосіб додати текст поверх зображення - це використання однієї з готових розділів Hero від SeedProd.

Ці розділи мають заповнювач, фонове зображення на всю ширину, з деяким текстовим заповнювачем поверх нього. Ви можете просто замінити фонове зображення та текст за замовчуванням вашим власним вмістом.

Клацніть на вкладку Розділ у лівому меню.

Потім клацніть на Hero, щоб переглянути всі готові розділи Hero, які ви можете додати на свою сторінку.

Щоб продовжити та додати цей розділ Hero до вашого дизайну, просто натисніть на Вибрати цей розділ.

Клацніть на стокове зображення, щоб вибрати його, якщо ви хочете замінити стокове зображення шаблону вашим власним зображенням.

Наведіть курсор на попередній перегляд зображення у фоновому режимі, доки не з'явиться значок кошика. Після цього ви зможете клацнути на цей значок, щоб видалити зображення-заповнювач.

Далі натисніть на Використовувати власне зображення. Потім ви можете або вибрати зображення з медіатеки WordPress або використовувати запасне зображення.

Після додавання зображення ви готові замінити текст-заповнювач.

Клацніть, щоб вибрати текстовий блок. Потім у текстовій області просто введіть текст, який ви хочете використовувати.

Деякі шаблони SeedProd мають додатковий контент, такий як кнопки заклику до дії.

Якщо ви хочете змінити цей контент, натисніть, щоб вибрати блок і внесіть зміни у лівому меню SeedProd.

Інший варіант - видалити блок із шаблону героя.

Щоб зробити це, натисніть, щоб вибрати блок і потім натисніть на значок кошика

Якщо ви задоволені дизайном своєї сторінки, натисніть кнопку Зберегти.

Звідси ви можете опублікувати сторінку або зберегти її як шаблон.

Висновок

Ось усі три методи додавання тексту поверх зображення у WordPress. Легко, чи не так? Оберіть підхід, який найкраще відповідає вашому рівню навичок та дизайнерським уподобанням.

Крім того, організуйте, оптимізуйте та керуйте вашими медіафайлами як професіонал за допомогою WP Media Folder. Настав час попрощатися з безладними бібліотеками!