Как добавить фоновые маски в нижний колонтитул Divi

Rifat Divi Учебники Aug 31, 2022

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

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

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

Начните с дизайна

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

В этой статье мы будем использовать бесплатные шаблоны верхнего и нижнего колонтитула из пакета Consultant Layout Pack . Как только вы загрузите пакет, разархивируйте его. Затем перейдите на панель инструментов WordPress и перейдите к конструктору тем.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас
  • Нажмите кнопку «Импорт» в правом верхнем углу страницы.
  • Во всплывающем окне переносимости выберите вкладку импорта.
  • Выберите файл для загрузки со своего компьютера (не забудьте сначала разархивировать файл и использовать файл JSON).
  • Снимите флажки с параметров, которые будут переопределять ваши текущие шаблоны.
  • Затем нажмите кнопку импорта.
  • Выберите опцию “Импортировать их как статические макеты…”.
  • Затем снова нажмите кнопку импорта.

Как только шаблон будет загружен в Theme Builder, удалите заголовок шаблона (он нам для этого не понадобится) и нажмите, чтобы изменить нижний колонтитул шаблона.

Добавьте фоновую маску в нижний колонтитул Divi

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

Для этого перейдите в настройки раздела. Выберите вкладку «Маска» в настройках фона и примените фоновую маску к разделу следующим образом:

  • Маска: Треугольники
  • Цвет маски: #2c98ff
  • Преобразование маски: горизонтальное отражение, инвертирование

Вот так это выглядит на рабочем столе.

Мобильная отзывчивость

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

Выберите вкладку планшета после активации адаптивных настроек/вкладок для параметров фона. Затем отредактируйте настройки маски следующим образом:

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

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

Например, для Blade Mask вам нужно выбрать Blades в разделе Background.

И конструкция будет выглядеть так.

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

Чтобы создать более тонкую (и более темную) фоновую маску с помощью Honeycomb, примените следующие изменения:

  • Маска: Соты
  • Цвет маски: rgba (44 152 255, 0,18)
  • Преобразование маски: инвертировать

И вот результат.

Маску Corner Blob можно использовать для создания скромной рамки вокруг контактной формы в нижнем колонтитуле. Просто внесите следующие изменения:

  • Маска: угловая капля
  • Цвет маски: rgba (44 152 255, 0,18)
  • Преобразование маски: поворот, инвертирование

И вот окончательный вывод.

Окончание мыслей

Используя Theme Builder и встроенные параметры фона Divi , вы можете легко создать дизайн фоновой маски для нижнего колонтитула. Просто поиграйте с различными масками и трансформируйте варианты, чтобы найти лучший вариант для нижнего колонтитула. Не забудьте внести соответствующие мобильные изменения. Надеюсь, это пригодится для вашего собственного веб-сайта или вашей будущей работы. Не забудьте ознакомиться с другими уроками Divi и поделиться этим уроком с друзьями.