Когда дело доходит до фоновых масок, пользователи, как правило, используют программное обеспечение для редактирования изображений, кроме Divi, затем загрузите изображение в Веб-сайт что они создают. Хотя это довольно удобный способ настроить Веб-сайт, это не обязательно единственное решение. Вы также можете создавать фоновые маски внутри Divi, творчески сочетая различные элементы дизайна и параметры фильтров. Это именно то, что мы собираемся сделать в этом посте! Мы превращаем негабаритных персонажей в фоновые маски, которые отлично смотрятся на экране любого размера. Мы надеемся, что это руководство вдохновит вас на создание собственных дизайнов с использованием негабаритных персонажей и встроенных опций. Divi.
Давайте!
Предварительный просмотр образца
Прежде чем мы углубимся в урок, вот типы фона, которые вы можете получить с помощью этой техники.
Дизайн
Мы начнем дизайн с создания черного фона с буквой, в которой изображение имеет фон.
Добавить новый раздел
Цвет фона
Давайте начнем с первого примера! Добавьте новый обычный раздел на новую или существующую страницу и добавьте фон для этого раздела:
- Цвет фона: #000000
расстояние
Затем перейдите к настройкам интервалов и удалите все отступы по умолчанию сверху и снизу.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
переполнение
Перейдите на вкладку «Дополнительно» и скройте переполнение раздела. Это станет важным позже в этом уроке, когда мы изменим положение текстового модуля, содержащего негабаритный символ.
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Добавить строку 1
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
Цвет столбца 1
Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона в первый столбец.
- Цвет фона столбца 1: #848484
Колонка 1 Фоновое изображение
Также добавьте цвет фона. Чтобы совместить цвет фона и изображение, мы собираемся применить режим наложения.
- Наложение фонового изображения столбца: Умножение
калибровка
Переключитесь на вкладку Дизайн и позвольте строке заполнить всю ширину экрана, применив следующие настройки размера:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Мы также избавляемся от всех пользовательских подкладок вверх и вниз в ряду.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавить текстовый модуль в столбец
Добавить символ в область содержимого
Пришло время добавить текстовый модуль, содержащий слишком большой символ. Добавьте в поле букву «о». содержание.
Цвет фона
Продолжите, зайдя в настройки фона и добавив черный цвет фона.
- Цвет фона: #000000
Настройки текста
Перейдите на вкладку Дизайн и измените параметры текста. Обратите внимание, как мы используем большое значение для размера текста.
- Шрифт текста: Poppins
- Размер текста: 100vw
- Ориентация текста: Центр
расстояние
Затем перейдите к настройкам интервалов и добавьте настраиваемые значения полей и отступов.
- Верхнее поле: -6vw
- Лучший отступ: 15vw
- Нижняя обивка: 49vw
фильтры
Время творить чудеса! Получите доступ к настройкам фильтра модуля и измените режим слияния соответственно:
- Режим смешивания: умножение
- Яркость: вы можете изменить это значение по своему вкусу
Добавьте строку 2
Структура столбца
После того, как ваш негабаритный персонаж был добавлен в дизайн, вы можете продолжить, добавив оставшиеся модули, которые вы хотите отобразить в разделе, предпочтительно добавив новую строку:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки и дайте ей заполнить всю ширину экрана.
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Также удалите все отступы по умолчанию вверх и вниз
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавить текстовый модуль # 1 в столбец
Добавить контент H1
В этой новой строке вы можете добавлять модули по вашему выбору. Чтобы воссоздать точный пример, приведенный в предварительном просмотре этой публикации, начните с добавления текстового модуля, содержащего содержание H1.
H1 Настройки текста
Перейдите на вкладку Дизайн и измените настройки текста H1.
- Название шрифта: Playfair Display
- Вес шрифта: жирный
- Выравнивание текста заголовка: Центр
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 6vw
расстояние
Продолжите, перейдя к настройкам интервалов и позвольте текстовому модулю перекрывать слишком большой символ, добавляя отрицательное верхнее поле. Мы также следим за тем, чтобы слева и справа от модуля оставалось место, чтобы обеспечить оперативность.
- Верхнее поле: -47vw
- Левое поле: 1vw
- Правое поле: 1vw
Добавить модуль деления в столбец
видимость
Следующий необходимый нам модуль - это модуль деления. Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: да
Цвет
Затем перейдите на вкладку дизайна и измените цвет разделителя.
- Цвет: #ffffff
калибровка
Также измените параметры размеров.
- Вес делителя: 13px
- Ширина: 16%
- Выравнивание модуля: центр
расстояние
Также добавьте верхнее поле, чтобы создать пространство между текстовым модулем и модулем деления.
- Верхнее поле: 16vw
Добавить текстовый модуль # 2 в столбец
Добавить контент
Следующий модуль, который нам нужен, — это текстовый модуль с содержание пункта.
Настройки текста
Откройте настройки текста и внесите следующие изменения:
- Шрифт текста: Open Sans
- Цвет текста: #ffffff
- Размер текста: 1vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
- Высота строки текста: 1.9em
- Ориентация текста: Центр
расстояние
Также добавьте собственные значения интервала.
- Верхнее поле: 3vw
- Нижнее поле: 3vw (настольный компьютер), 10vw (планшет и телефон)
- Левое поле: 27vw (рабочий стол), 10vw (планшет), 8vw (телефон)
- Правое поле: 27vw (рабочий стол), 10vw (планшет), 8vw (телефон)
Добавить модуль кнопки в столбец
Добавить копию
На следующем и последнем модуле, который является модулем кнопок. Введите копию по вашему выбору.
Alignement
Продолжите, изменив выравнивание кнопки на вкладке «Дизайн».
- Выравнивание кнопок: центр
Настройки кнопок
Переключитесь на настройки кнопки и настройте кнопку по своему усмотрению.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 1vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)
- Цвет текста кнопки: #ffffff
- Ширина границы кнопки: 1px
- Радиус границы кнопки: 0px
- Кнопочный шрифт: Open Sans
- Вес шрифта: Ultra Bold
- Стиль шрифта: верхний регистр
расстояние
Наконец, мы также добавляем пользовательские поля и заполняем значения, чтобы получить желаемый результат.
- Нижнее поле: 10vw
- Обивка: 15px
- Нижняя обивка: 15px
- Левый отступ: 50px
- Обивка справа: 50px
Конечный результат
Это то, что похоже на то, что мы построили до сих пор.
Заключительные мысли
В этой статье мы показали вам, как использовать негабаритные символы для создания потрясающих фоновых масок с помощью Divi. Это отличный способ создать собственный веб-дизайн без использования программного обеспечения для редактирования изображений. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!
