Загрузите 9 БЕСПЛАТНЫХ оверлеев изображений для Divi

То, как вы показываете изображения на своем веб-сайте, действительно может повлиять на общий дизайн, который вы создаете. Благодаря встроенным параметрам Divi вы уже можете применять различные настройки дизайна, которые помогут вам отображать изображения потрясающим образом, например, подумайте о границах и тенях блоков. Но если вы хотите придать своим изображениям более уникальную форму, этот пост вам поможет. Мы собираемся поделиться 9 БЕСПЛАТНЫМИ наложенными изображениями, которые вы можете загрузить и использовать на любом веб-сайте, который вы создаете. После того, как мы поделимся этими наложенными изображениями, мы также собираемся показать вам, как использовать их в своих интересах при создании веб-сайта с Divi. Мы надеемся, что этот урок вдохновит вас на создание собственных оверлеев изображений.

Давайте приступим к делу!

Предварительный просмотр

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

Рабочий стол

Телефон

Скачайте БЕСПЛАТНО наложения Shaped Image Overlays

Чтобы получить доступ к наложенным изображениям с фигурными изображениями, вам сначала нужно загрузить их, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждые понедельник и пятницу! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Подход

• Наложения фигурных изображений, которые вы можете найти в папке загрузки, готовы к использованию, если вы комбинируете их с белым цветом фона строки и / или раздела.
• Если вы хотите настроить оверлеи фигурных изображений в соответствии с другим цветом фона, вам необходимо экспортировать оверлеи фигурных изображений другого цвета, используя файл иллюстратора, который включен в загрузку выше.
• Мы покажем вам, как изменить цвет наложения фигурного изображения в первой части урока (с помощью Adobe Illustrator).
• Затем мы перейдем к Divi и загрузим одно из оверлеев фигурных изображений в модуль изображения.
• Мы также добавим фоновое изображение и градиентный фон в модуль изображения, который будет отображаться через оверлей фигурного изображения.

Изменение наложений фигурных изображений на цвет фона раздела с помощью Adobe Illustrator

Откройте файл Illustrator в папке загрузки

Как упоминалось в разделе подходов этого сообщения, если вы хотите использовать оверлеи в форме изображения на белом фоне, вы готовы к работе, просто используя файлы PNG, которые вы можете найти в папке загрузки. Однако, если вы хотите использовать наложения фигурных изображений на другой цвет фона строки и / или раздела, вам нужно будет изменить цвет вручную, используя файл Adobe Illustrator, который также находится в папке загрузки. Изменение цвета занимает немного времени и позволяет использовать оверлеи фигурных изображений буквально на любом веб-сайте, который вы создаете, поэтому давайте рассмотрим шаги. Прежде всего, вам нужно открыть файл Adobe Illustrator.

Выберите вариант наложения формы изображения

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

Изменить цвет в соответствии с цветом фона раздела

Продолжите, изменив цвет фигуры на тот же цвет фона, который вы планируете использовать для своей строки и / или раздела.

Выберите монтажную область

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

Сохранение наложения изображений в форме PNG для Интернета

И сохраните его как файл изображения PNG для Интернета, выбрав « Файл»> «Экспорт»> «Сохранить для Интернета» .

Начнем творить!

Подпишитесь на наш канал Youtube

Добавить новый раздел

Пора переключиться на Divi и создать результат! Создайте новую страницу или откройте существующую и добавьте новый регулярный раздел.

Добавить новую строку

Структура столбца

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

Добавить модуль изображения в столбец 1

Загрузить накладываемое изображение в форме

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

Градиентный фон

Далее, добавьте градиентный фон по вашему выбору.

• Цвет 1: # aa2bff
• Цвет 2: # 09f7eb

Фоновая картинка

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

• Размер фонового изображения: обложка
• Положение фонового изображения: внизу по центру
• Повтор фонового изображения: без повтора

Размеры

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

• Принудительная полная ширина: Да

Добавить модуль текста заголовка в столбец 2

Добавить содержимое

Перейдем ко второму столбцу. Здесь первый модуль, который нам понадобится, - это текстовый модуль заголовка. Добавьте контент по выбору.

Настройки текста

Затем перейдите к настройкам текста заголовка и внесите некоторые изменения.

• Шрифт заголовка 2: Antic Didone
• Толщина шрифта заголовка 2: полужирный
• Размер текста заголовка 2: 45 пикселей
• Интервал между буквами заголовка 2: -2 пикселя

Интервал

Также добавьте настраиваемое верхнее поле.

• Верхнее поле: 100 пикселей

Добавить текстовый модуль описания в столбец 2

Добавить содержимое

Второй модуль, который нам понадобится, - это текстовый модуль описания. Введите какой-нибудь контент по выбору.

Настройки текста

Затем перейдите в настройки текста и измените ориентацию текста модуля.

• Ориентация текста: по ширине

Размеры

Измените также ширину в настройках размера.

• Ширина: 63%

Добавить модуль кнопок в столбец 2

Добавить копию

Следующий и последний модуль, который нам понадобится, - это кнопочный модуль. Введите какой-нибудь контент по выбору.

Настройки кнопок

Продолжите, перейдя к настройкам кнопки и изменив внешний вид кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 17 пикселей
• Цвет текста кнопки: #ffffff
• Цвет градиента 1: # aa2bff
• Цвет градиента 2: # 09f7eb
• Направление градиента: 111 градусов

• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей
• Расстояние между буквами кнопки: -2 пикселя
• Плотность шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

Также добавьте дополнительные пользовательские отступы к кнопке.

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Коробка Тень

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

• Сила размытия тени коробки: 50 пикселей
• Сила распространения тени коробки: -5 пикселей

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Телефон

Последние мысли

В этом посте мы поделились 9 БЕСПЛАТНЫМИ наложениями изображений для Divi, которые вы можете использовать для любого типа веб-сайта, который вы создаете. Мы надеемся, что этот урок вдохновил вас на создание собственных наложений изображений уникальной формы, которые вы можете постоянно использовать повторно. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!