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

Всегда здорово иметь дополнительные ресурсы, которые можно использовать при создании нового веб-сайта для себя или для клиента. Вот почему мы заботимся о том, чтобы вы получали новые пакеты макетов каждую неделю. Но есть и другие ресурсы, которые также могут пригодиться, такие как «изображения границ» или изображения, которые вы можете использовать вдоль одной или другой стороны элемента дизайна Divi, чтобы добавить стилистического изящества. Использование встроенных параметров Divi вместе с этими изображениями границ может дать потрясающие результаты. В этом посте мы предоставили вам 5 различных изображений границ, которые вы можете бесплатно скачать ниже. Мы собираемся объяснить, как вы можете использовать эти образы границ в своих интересах и создать потрясающий конечный результат.

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

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

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

Загрузите файлы изображений БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Подход

• После того, как вы загрузите и разархивируете папку, содержащую все 5 изображений границ, вы найдете 4 подпапки: верхняя граница, нижняя граница, левая граница и правая граница.
• Это означает, что вы можете использовать в общей сложности 20 файлов изображений.
• Позже в этом посте вы найдете сопутствующие настройки, соответствующие каждой из сторон границы.
• В довершение всего, вы можете комбинировать изображения границ с наложениями градиента.
• Эти цветные наложения помогут вам сделать изображения такими яркими или нежными, как вы хотите.
• Вы можете использовать эти образы границ без каких-либо ограничений, даже в коммерческих целях.

Создание общего дизайна

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

Интервал

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

• Верхний отступ: 300 пикселей
• Нижний отступ: 300 пикселей

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки, перейдите в настройки размера и сделайте строку полной шириной.

• Сделать эту строку полной шириной: Да

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

Добавить окно содержимого H2

Приступим к добавлению модулей! Первый необходимый модуль - это текстовый модуль. Добавьте один в первый столбец и добавьте выбранную копию H2 в поле содержимого.

Настройки текста заголовка

Затем внесите некоторые изменения в настройки текста H2 на вкладке «Дизайн».

• Шрифт заголовка 2: Abril Fatface
• Размер текста заголовка 2: 80 пикселей (рабочий стол), 70 пикселей (планшет), 50 пикселей (телефон)

Интервал

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

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

Добавить модуль текста ссылки в столбец 1

Добавить ссылку в поле содержимого

Прямо под заголовком «Текстовый модуль», который вы только что добавили, добавьте новый текстовый модуль. Мы используем этот текстовый модуль в качестве кнопки, поэтому не забудьте добавить ссылку на CTA.

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

Затем измените настройки текста ссылки на вкладке «Дизайн».

• Толщина шрифта ссылки: Ультра полужирный
• Стиль шрифта ссылки: прописные
• Цвет текста ссылки: # 000000
• Размер текста ссылки: 21px

Интервал

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

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

Граница

Наконец, добавьте тонкую нижнюю границу к текстовому модулю ссылки.

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 333333

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

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

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

• Размер текста: 22 пикселей (рабочий стол), 20 пикселей (планшет), 18 пикселей (телефон)
• Высота текстовой строки: 2.6em
• Ориентация текста: по ширине

Размеры

Сделайте так, чтобы настройки размера соответствовали разным размерам экрана:

• Ширина: 82% (рабочий стол), 100% (планшет и телефон)

Интервал

И, наконец, добавьте верхнее и нижнее поле.

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

Добавление форм границы

Настройки фона левой границы

Теперь, когда мы завершили общий дизайн, мы можем начать добавлять изображения границ! Начнем с левой границы. Найдите желаемое изображение границы в папке «Левая граница» и загрузите его в качестве фонового изображения раздела. Затем примените следующие настройки фонового изображения:

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

Настройки фона правой границы

Или вы можете найти желаемое изображение границы в папке «Правая граница» и добавить его в качестве фона раздела, используя следующие настройки:

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

Настройки фона верхней границы

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

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

Настройки фона нижней границы

Или, наконец, что не менее важно, вы можете найти изображения нижней границы в папке 'Bottom Border' и объединить их с этими настройками фона раздела:

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

Смешивание цветов с помощью полупрозрачного наложения

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

• Цвет 1: #ffffff
• Цвет 2: rgba (255,255,255,0,36)
• Направление градиента: 141 град.
• Поместите градиент над фоновым изображением: Да

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

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

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

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