Как наложить изображение в WordPress

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

Все еще не знаете, что это такое? Просто не торопитесь, и позвольте нам отвезти вас!

Что такое наложение?

Как видите, в качестве заголовка я использовал изображение с текстом и наложением; это сильно отличалось от написания простого текстового заголовка. Выглядит намного более стильно и привлекательно по сравнению с обычным, правда?

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

Уже взволнованы? Давайте начнем!

Как наложить изображение в WordPress

Есть два метода, которые вы можете попробовать наложить на изображение в WordPress: с помощью блока обложки Гутенберга и с помощью CSS. Хотя использование Gutenberg помогает вам создать сообщение / страницу, содержащую изображение с наложением даже с пустого листа, использование CSS поможет вам быстро настроить изображения на предварительно созданном сообщении / странице.

Оба эти метода в некотором смысле просты в использовании, и мы покажем вам, как использовать их один за другим.

Метод 1: использование прикрытия Гутенберга

Зайдите на страницу редактора Гутенберга.

Шаг 1. Вставьте изображение с помощью блока обложки.

Щелкните Добавить блок и выберите тип блока Обложка .

Затем выберите фоновое изображение для отображения на этом блоке обложки. Вы можете загрузить изображение или выбрать изображение из своей библиотеки.

При необходимости вы также можете изменить изображение, которое вы добавили ранее в изображение обложки. Щелкните изображение, выберите Изменить стиль или тип блока и выберите Обложка :

В моем случае я выберу эту шапку в качестве фона и напишу на ней произвольный текст.

Кроме того, я могу установить ширину своего изображения в настройках ниже. Я просто выровняю его по центру.

Теперь мой блок обложки готов с фоновым изображением и текстом. По умолчанию блок Cover уже имеет наложение черного цвета, поэтому мы увидим, как мы можем отредактировать его в следующей части:

Шаг 2. Настройте накладку блока обложки

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

Щелкните блок> нажмите кнопку « Параметры» (отображается в виде кнопки с тремя точками)> выберите « Показать дополнительные параметры» .

Теперь в правой части экрана должно быть готово меню настроек блока. Перейдите в раздел Overlay .

Он дает вам два варианта цвета: Solid и Gradient для наложения изображения на обложку:

Мы попробуем оба эти варианта. Сначала попробуем наложение сплошного цвета.

Наложение сплошного цвета

Теперь вы можете:

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

Я просто выбрала нежно-розовый цвет для своего оверлея. Кроме того, я также могу изменить непрозрачность (уровень прозрачности) наложения:

Норма непрозрачности от 30 до 60% является правильным значением. Если вы установите непрозрачность ниже или выше предложенного значения, наложение может быть почти невидимым или слишком жирным для просмотра фона. По умолчанию я оставлю непрозрачность 50%.

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

Теперь перейдем к варианту цвета градиента.

Наложение цвета градиента

Цвет градиента, как упоминалось выше, представляет собой схему как минимум двух выбранных цветов. Или, проще говоря, цвет наложения будет соответственно и постепенно меняться с первого выбранного цвета на второй (и так далее).

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

Сначала я изменил цветовой режим с Solid на Gradient. Кроме того, я выбрал набор цветов градиента из меню предложений. Вот как это выглядит:

Как видите, наложение состоит из 3-х контрольных точек. Каждый имеет сплошной цвет, и вы можете перемещать эти контрольные точки, чтобы настроить цветовую схему наложения.

Расположение цветов по умолчанию при выборе цвета градиента сбалансировано. Я постараюсь немного подправить его, и вот как это изменится:

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

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

Метод 2: Использование CSS

Если вы хотите добавить оверлей к изображению с помощью классического редактора, необходимо использовать CSS. Вам нужно добавить немного CSS. Перейдите в « Внешний вид»> «Настройка»> «Дополнительные CSS» .

Для наложения градиента

Добавьте этот код для наложения градиента:

 .background-gradient {
    положение: относительное;
}
.background-gradient :: before {
    содержание: '';
    фон: линейный градиент (135deg, # 0693e3, # 9b51e0);
    позиция: абсолютная;
    верх: 0;
    слева: 0;
    внизу: 0;
    справа: 0;
    z-индекс: 1;
    непрозрачность: .5;
}

Для сплошного наложения:

Добавьте этот код для сплошного наложения:

 .background-opacity {
    положение: относительное;
}
.background-opacity: before {
    содержание: '';
    позиция: абсолютная;
    верх: 0;
    слева: 0;
    внизу: 0;
    справа: 0;
    z-индекс: 1;
    непрозрачность: .5;
    цвет фона: # 000;
}

Примечание: этот код поможет вам добавить только оверлей, а не текст на изображение.

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

• Сплошной: <div class="background-opacity"> … </div>
• Градиент: <div class="background-gradient is-style-default"> … </div>

Например:

Вот как я это делаю!

Вердикт

Добавление оверлея к изображениям действительно помогает украсить ваши сообщения / страницы и произвести лучшее впечатление на посетителей. Стоит покопаться в том, как сделать идеальный оверлей, поэтому я настоятельно рекомендую вам сразу приступить к работе над ним. Вы также можете сделать свой веб-сайт более привлекательным с помощью ползунков, всплывающих баннеров, видео-фона… Я надеюсь, что мои инструкции достаточно понятны для вас, и, пожалуйста, не стесняйтесь оставлять вопросы и комментарии ниже, если таковые имеются. Пока!