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

Добавление текста поверх изображения является популярной техникой для улучшения визуальной привлекательности контента или сайта. Кроме того, это отличный способ сделать изображения более информативными и привлекательными.

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

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

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

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; } 

В коде выше, замените "custom-class" на пользовательский класс, который вы добавили к блоку изображения. Вы также можете настроить размер шрифта, цвет и другие параметры стиля в соответствии со своими предпочтениями.

3. Используйте плагин WordPress

Если вы хотите иметь свободу создавать полностью индивидуальные дизайны страниц, вам понадобится плагин для создания страниц. Одним из плагинов для создания страниц WordPress является SeedProd, который позволяет добавлять текст поверх любого изображения на всём вашем сайте.

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

После этого скопируйте ключ в разделе Лицензионный ключ.

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

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

Далее перейдите к SeedProd » Целевые страницы и нажмите Добавить новую целевую страницу.

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

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

Как только вы найдете шаблон, наведите на него указатель мыши. Затем вы можете нажать на иконку предпросмотра.

Если вас устраивает этот шаблон, нажмите кнопку Выбрать этот шаблон.

В поле Название страницы введите имя страницы.

Если вы хотите изменить автоматически созданный URL-адрес, отредактируйте текст в поле URL страницы.

Нажмите на Сохранить и начать редактирование страницы кнопку. Это откроет шаблон в редакторе SeedProd с функцией перетаскивания.

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

Если вы не используете пустой шаблон, ваша страница SeedProd уже будет содержать некоторые блоки и разделы. Чтобы редактировать любой из этих материалов, нажмите, чтобы выбрать блок или раздел.

Меню SeedProd слева теперь покажет все настройки, которые вы можете использовать для настройки этого блока или раздела.

Самый простой способ добавить текст поверх изображения — использовать один из готовых разделов Hero от SeedProd.

Эти разделы имеют фоновое изображение на всю ширину с добавленным поверх него текстом-заглушкой. Вы можете просто заменить стандартное фоновое изображение и текст своим собственным содержимым.

Нажмите на вкладку Раздел в меню слева.

Затем нажмите Hero, чтобы просмотреть все готовые разделы Hero, которые вы можете добавить на свою страницу.

Чтобы добавить эту секцию героя в ваш дизайн, просто нажмите на кнопку "Выбрать этот раздел".

Нажмите на изображение-заглушку, чтобы выбрать его, если вы хотите заменить стандартное изображение шаблона своим собственным.

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

Далее нажмите на Использовать собственное изображение. Затем вы можете либо выбрать изображение из медиатеки WordPress, либо использовать стоковое изображение.

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

Нажмите, чтобы выбрать текстовый блок. Затем в текстовой области просто введите текст, который хотите использовать.

Некоторые героические шаблоны SeedProd содержат дополнительный контент, например, кнопки призыва к действию.

Если вы хотите изменить этот контент, нажмите, чтобы выбрать блок, а затем внесите изменения в левом меню SeedProd.

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

Чтобы сделать это, нажмите, чтобы выбрать блок и затем нажмите на иконку корзины.

Если вы удовлетворены дизайном своей страницы, нажмите кнопку Сохранить.

Отсюда вы можете опубликовать страницу или сохранить ее как шаблон.

Вывод

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

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