Как создать плавные переходы фона между элементами Divi
Опубликовано: 2022-05-27Создание плавных переходов фонового дизайна между элементами Divi — отличный способ улучшить дизайн вашего веб-сайта Divi. Идея состоит в том, чтобы создать одинаковые фоновые рисунки (как для строки, так и для раздела), которые имеют одинаковый размер и положение в зависимости от ширины браузера (используя единицы длины vw). Это позволяет вам плавно переходить фоновый градиент, узор и маску между строкой и секцией творческим образом. Например, у вас может быть переход шаблона или маски в разные цвета без потери общего выравнивания и симметричного аспекта дизайна.
В этом уроке мы собираемся использовать встроенные параметры дизайна фона Divi, чтобы создать плавный переход дизайна фона между разделом Divi и строкой. Применение и универсальность этого дизайна безграничны, что выводит возможности дизайна фона Divi на совершенно новый уровень!
Давайте начнем.
Краткий обзор
Вот краткий обзор дизайна, который мы создадим в этом уроке.
Вот еще несколько примеров дизайна, которые возможны с помощью всего лишь нескольких простых изменений фоновых масок и узоров.
Скачайте макет БЕСПЛАТНО
Чтобы получить дизайн из этого урока, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на нашу рассылку Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше возможностей Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить». Вы не будете «переподписываться» или получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на информационный бюллетень Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевых страниц Divi, а также множество других удивительных и бесплатных ресурсов, советов и рекомендаций Divi. Следуйте вперед, и вы сразу же станете мастером Divi. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет раздела в вашу библиотеку Divi, сделайте следующее:
- Перейдите в библиотеку Divi.
- Нажмите кнопку Импорт в верхней части страницы.
- Во всплывающем окне переносимости выберите вкладку импорта.
- Выберите файл для загрузки со своего компьютера (не забудьте сначала разархивировать файл и использовать файл JSON).
- Затем нажмите кнопку импорта.
После этого макет раздела будет доступен в Divi Builder.
Давайте перейдем к учебнику, не так ли?
Что нужно для начала
Для начала вам нужно будет сделать следующее:
- Если вы еще этого не сделали, установите и активируйте тему Divi.
- Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
- Выберите вариант «Создать с нуля».
После этого у вас будет чистый холст для начала проектирования в Divi.
Создание плавного перехода фона между разделом Divi и строкой
Часть 1. Создание заголовка в качестве фиктивного содержимого
Прежде чем мы начнем создавать наши фоны, нам нужно добавить заголовок в качестве фиктивного содержимого. Для начала добавьте строку из одного столбца в раздел страницы по умолчанию.
Затем добавьте текстовый модуль в строку.
Добавьте заголовок H1 к содержимому тела.
На вкладке «Дизайн» обновите дизайн текста заголовка, как вам нравится. Для этого дизайна полезно добавить единицу длины VW для размера текста заголовка, чтобы он плавно масштабировался с остальной частью дизайна.
2. Дизайн фона раздела
Добавление заполнения VW в раздел
Как только фиктивный заголовок будет на месте, откройте настройки раздела и обновите интервал следующим образом:
- Набивка: верх 15vw, низ 15vw
Добавление фонового градиента к разделу
Теперь, когда у нас есть больше места для работы, мы готовы добавить наш фоновый дизайн в раздел. На вкладке градиента добавьте следующие точки градиента:
- Остановка градиента 1: #4f0f75 (при 0%)
- Остановка градиента 2: # 2843c9 (при 25%)
- Остановка градиента 3: #4ae2e0 (при 50%)
- Остановка градиента 4: # 3881ff (при 75%)
- Остановка градиента 5: #4f0f75 (при 100%)
Добавление фонового узора в раздел
На вкладке «Шаблон» обновите следующее:
- Узоры: диагональные полосы
- Цвет узора: rgba (79,15,117,0,23)
- Преобразование узора: поворот
- Размер узора: нестандартный размер
- Ширина узора: 7vw
- Высота узора: 5vw
- Происхождение повторения шаблона: Центр
Примечание. Убедитесь, что для ширины и высоты шаблона используются единицы длины VW. И также убедитесь, что для повторяющегося источника установлено значение «центр». Это сохранит фоновый узор в том же месте, что и фоновый узор, который мы добавим в строку позже.
Добавление фоновой маски к разделу
На вкладке «Маска» добавьте следующее:
- Фоновая маска: Слой-клякса
- Цвет маски: rgba(0,0,0,0,7)
- Размер маски: 100vw
- Положение маски: Центр
Примечание. Как и в случае с шаблоном, мы должны указать размер маски, используя единицу длины VW. Мы также должны придать маске центральное положение.
3. Создание фона строки
Скопируйте и вставьте фон раздела в фон строки
Чтобы ускорить процесс оформления фона строки, скопируйте настройки фона раздела.
Затем вставьте фон в существующую строку.
В этот момент вы уже можете видеть, как фоновый рисунок и маска на строке плавно переходят к фону раздела. Похоже, что у строки прозрачный фон, но на самом деле это тот же шаблон и маска, которые используются в разделе с тем же размером и положением.
Отрегулируйте размер и заполнение строки с помощью VW
Затем нам нужно придать нашей строке пользовательскую ширину, используя единицу длины VW. Обновите следующее:
- Ширина: 75vw
- Максимальная ширина: 75vw
- Набивка: 10vw вверху, 10vw внизу, 10vw слева, 10vw справа
Обзор интервалов и размеров в единицах длины VW
До сих пор мы добавляли значения интервала и положения в наш макет, используя единицу длины VW. Вот краткая иллюстрация значений, используемых в настоящее время.
На данный момент у нас есть плавный переход между фоном строки и фоном раздела для шаблонов и масок. Далее мы собираемся обновить фоновый градиент строки, чтобы он также был бесшовным.
Отрегулируйте остановки градиента в строке
Далее нам нужно настроить остановки градиента на фоне строки для плавного перехода к градиенту фона раздела. На вкладке «Градиент» мы сохраним три средних точки градиента, унаследованные от фона раздела, и удалим первую и последнюю точки градиента. Затем установите первую остановку на 0%, а третью остановку на 100%. После этого у вас должны получиться следующие градиенты.
- Остановка градиента 1: #2843c9 (при 0%)
- Остановка градиента 2: #4ae2e0 (при 50%)
- Остановка градиента 3: #3881ff (при 100%)
Добавить тень блока в строку
Чтобы придать дизайну немного возвышенности и подчеркнуть плавный переход фона, мы можем добавить к ряду тень блока.
- Box Shadow: см. снимок экрана
- Коробчатая тень по вертикали: 0px
- Box Shadow Blur Strength: 4vw
- Цвет тени коробки: rgba (0,0,0,0,5)
Настройка цвета фонового узора строки
Теперь, когда у нас есть все элементы фона на своих местах, мы можем приступить к настройке цветов для более креативного дизайна. В параметре шаблона для строки обновите следующее:
- Цвет узора: rgba (255 255 255, 0,23)
Настройка цвета фоновой маски строки
Мы также можем обновить цвет маски для строки, чтобы дизайн действительно выделялся! На вкладке маски обновите следующее:
- Цвет маски: #ffffff
- Преобразование Маски: Перевернуто
Конечный результат
Давайте проверим окончательный результат.
Больше возможностей
Вот еще несколько примеров дизайна, которые возможны с помощью всего лишь нескольких простых изменений фоновых масок и узоров.
Последние мысли
Ключом к созданию плавных переходов дизайна фона в Divi является разумное использование этих единиц длины VW. Во-первых, нам нужно создать дизайн фона раздела, который масштабируется с шириной области просмотра браузера (от центральной позиции на странице). После этого мы можем использовать один и тот же дизайн фона в строке. После этого нам просто нужно внести несколько корректировок в градиент и цвета для потрясающего дизайна. Надеюсь, эта техника добавит еще один полезный дизайнерский навык для будущих проектов.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!