Превращение негабаритных персонажей в фоновые маски с помощью Divi (бесплатная загрузка!)

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

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

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

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

Пример # 1

Пример # 2

Скачать The Hero Sections БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Воссоздать пример №1

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

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

Фоновый цвет

Начнем с первого примера! Добавьте новый обычный раздел на новую или существующую страницу и добавьте фон в этот раздел:

• Цвет фона: # 000000

Интервал

Затем перейдите к настройкам интервалов и удалите все верхние и нижние отступы по умолчанию.

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

Переполнение

Перейдите на вкладку «Дополнительно» и скройте переполнения раздела. Это станет важным позже в этом уроке, когда мы изменим положение текстового модуля, содержащего негабаритный символ.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Добавить строку №1

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

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

Цвет фона столбца 1

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона в первый столбец.

• Цвет фона столбца 1: # 848484

Фоновое изображение столбца 1

Также добавьте цвет фона. Чтобы объединить цвет фона и изображение, мы собираемся применить режим наложения.

• Наложение фонового изображения столбца: умножение

Размеры

Перейдите на вкладку дизайна и позвольте строке занять всю ширину экрана, применив следующие настройки размера:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Мы также избавляемся от всех настраиваемых полей сверху и снизу строки.

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

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

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

Пора добавить текстовый модуль, содержащий крупный символ. Добавьте букву «о» в поле содержимого.

Фоновый цвет

Перейдите к настройкам фона и добавьте черный цвет фона.

• Цвет фона: # 000000

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

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

• Шрифт текста: Поппинс
• Размер текста: 100vw
• Ориентация текста: по центру

Интервал

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

• Верхняя маржа: -6vw
• Верхняя обивка: 15vw
• Нижняя обивка: 49vw

Фильтры

Пора творить волшебство! Перейдите в настройки фильтров модуля и соответствующим образом измените режим наложения:

• Режим наложения: Умножение

Добавить строку №2

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Удалите также все стандартные верхние и нижние отступы.

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

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

Добавить контент H1

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

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

Перейдите на вкладку дизайна и измените настройки текста H1.

• Шрифт заголовка: Playfair Display
• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 6vw

Интервал

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

• Верхняя маржа: -47vw
• Левое поле: 1vw
• Правое поле: 1vw

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

Видимость

Следующий необходимый нам модуль - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

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

• Цвет: #ffffff

Размеры

Измените также настройки размера.

• Вес разделителя: 13 пикселей
• Ширина: 16%
• Выравнивание модуля: по центру

Интервал

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

• Верхняя маржа: 16vw

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

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

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

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

Перейдите в настройки текста и внесите следующие изменения:

• Шрифт текста: Open Sans
• Цвет текста: #ffffff
• Размер текста: 1vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
• Высота текстовой строки: 1.9em
• Ориентация текста: по центру

Интервал

Также добавьте несколько значений пользовательского интервала.

• Верхняя маржа: 3vw
• Нижнее поле: 3vw (рабочий стол), 10vw (планшет и телефон)
• Левое поле: 27vw (рабочий стол), 10vw (планшет), 8vw (телефон)
• Правое поле: 27vw (рабочий стол), 10vw (планшет), 8vw (телефон)

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

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

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

Выравнивание

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

• Расположение кнопок: по центру

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

Перейдите к настройкам кнопки и задайте стиль для кнопки, как хотите.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Ширина границы кнопки: 1 пиксель
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Open Sans
• Толщина шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

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

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

Воссоздать пример №2

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

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

Переполнение

Скрыть переполнение раздела в расширенной вкладке.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Добавить строку №1

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

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

Цвет фона столбца 1

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона в первый столбец.

• Цвет фона столбца 1: #dddddd

Фоновое изображение столбца 1

Также добавьте фоновое изображение и объедините цвет фона с изображением, используя режим наложения.

• Наложение фонового изображения столбца: экран

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите верхнюю и нижнюю прокладку.

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

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

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

Пора добавить текстовый модуль, содержащий символы большого размера! Скопируйте следующие символы: «◊◊◊» и добавьте их в поле содержимого. Вы можете использовать любой символ, который хотите, перейдя на карту символов (Windows) или палитру символов (Mac) на своем компьютере.

Фоновый цвет

Измените цвет фона этого модуля на белый.

• Цвет фона: #ffffff

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

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

• Шрифт текста: Поппинс
• Цвет текста: # 0c0c0c
• Размер текста: 80vw
• Ориентация текста: по центру

Интервал

Измените также значения верхнего и нижнего отступов.

• Верхняя обивка: 27,8 Вт
• Нижняя обивка: 27,8 МВт

Фильтры

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

• Режим наложения: Экран

Добавить строку №2

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхняя обивка: 1vw
• Нижняя обивка: 1vw
• Левый отступ: 3vw
• Правое заполнение: 3vw

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

Добавить контент H1

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

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

Перейдите на вкладку дизайна и измените настройки текста H1.

• Шрифт заголовка: Poppins
• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 5vw

Интервал

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

• Верхняя маржа: -38vw

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

Видимость

Следующий необходимый нам модуль - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

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

• Цвет: # 000000

Размеры

Измените также настройки размера.

• Вес разделителя: 13 пикселей
• Ширина: 16 пикселей
• Выравнивание модуля: по центру

Интервал

Наряду со значениями отступов в настройках интервала.

• Верхняя маржа: 2vw
• Нижняя маржа: 2vw

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

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

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

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

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

• Шрифт текста: Open Sans
• Цвет текста: # 000000
• Размер текста: 1vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
• Высота текстовой строки: 1.9em
• Ориентация текста: по центру

Интервал

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

• Верхняя маржа: 3vw
• Нижнее поле: 3vw (рабочий стол), 10vw (планшет и телефон)
• Левое поле: 27vw (рабочий стол), 10vw (планшет), 8vw (телефон)
• Правое поле: 27vw (рабочий стол), 10vw (планшет), 8vw (телефон)

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

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

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

Выравнивание

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

• Расположение кнопок: по центру

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

Создайте для кнопки стиль, чтобы она выглядела именно так, как вы хотите.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 50 пикселей
• Шрифт кнопки: Open Sans
• Толщина шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

И завершите дизайн, добавив к кнопке некоторые настраиваемые значения полей и отступов.

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

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

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

Пример # 1

Пример # 2

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

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

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