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

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

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

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

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

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

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

2. Покращення досвіду користувачів

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

3. Поліпшення доступності

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

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

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

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

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

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

Виберіть Обкладинку , щоб записати текст над зображенням.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Після закінчення скопіюйте ключ у ліцензійного ключа.

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

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

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

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

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

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

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

У Ім'я сторінки введіть ім'я для сторінки.

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

Клацніть на збереження та почніть редагувати кнопку сторінки . Це відкриє шаблон у редакторі перетягування та краху насіння.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для цього натисніть, щоб вибрати блок , а потім натисніть на значок сміття .

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

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

Висновок

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

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