Как добавить текст поверх изображения в 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, которые вы можете добавить на свою страницу.

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

нажмите на него, чтобы выбрать Если вы хотите заменить стандартное изображение шаблона своим собственным,

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

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

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

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

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

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

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

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

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

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

Вывод

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

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