Создание полноэкранного макета с переходами фонового изображения параллакса в Divi

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

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

Sneak Peek

Взгляните на некоторые проекты, которые мы создадим вместе.

Начиная

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

Для этого урока все, что вам нужно, - это Divi и набор изображений, которые можно использовать для различных изображений продуктов и фоновых изображений. Я использую изображения из нашего пакета макетов магазина сока. Вы можете загрузить zip-файл с этими изображениями в нижней части сообщения в блоге с этим пакетом макетов. Просто нажмите кнопку «Загрузить изображения в полном разрешении».

Подготовка вашей новой страницы

Как только у вас будут готовые изображения. Создайте новую страницу и дайте ей название. Затем разверните Divi Builder и выберите «Создать с нуля». Затем нажмите кнопку, чтобы построить интерфейс.

Теперь вы готовы к работе!

Основная мысль

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

Вот как это сделать.

Создание раздела заголовка полной ширины

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

Обновите настройки полноразмерного заголовка, добавив в него следующее:

Название: «Томатный сок»
Кнопка №1 Текст ссылки: «См. Рецепт»
Контент: «Здесь размещается ваш контент. Отредактируйте или удалите этот текст в строке или в настройках содержания модуля ».
Изображение логотипа: [см. Снимок экрана] (Размер изображения 240 на 300 пикселей)

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

Цвет фона: rgba (255,255,255,0.92)

Сделать полноэкранный режим: ДА

Показать кнопку прокрутки вниз: ДА
Значок: см. Снимок экрана
Цвет значка прокрутки вниз: # 222222

Цвет текста: темный

Заголовок уровня заголовка: H2
Шрифт заголовка: Raleway
Размер текста заголовка: 50 пикселей

Шрифт тела: Lato
Размер основного текста: 16 пикселей
Интервал между буквами основного текста: 1 пиксель

Размер текста кнопки One: 16 пикселей
Кнопка fOne Цвет текста: #ffffff
Цвет фона кнопки One: # 222222
Радиус границы кнопки One: 50 пикселей
Интервал между буквами кнопки: 2 пикселя
Стиль шрифта кнопки One: TT

Ширина: 45% (компьютер), 60% (планшет), 100% (смартфон)

Сохранить настройки.

Основными ключевыми элементами дизайна здесь являются опция «Сделать полноэкранный режим» и «Ширина: 45%». Это позволит секции всегда занимать всю ширину и высоту окна браузера. А настраиваемая ширина сжимает модуль заголовка, чтобы открыть фон раздела, который мы добавим дальше.

Добавление фона раздела

Теперь, когда у нас разработан модуль заголовка, мы можем добавить фоновое изображение раздела. Перейдите в настройки раздела полной ширины и добавьте фоновое изображение. Убедитесь, что он достаточно большой, чтобы охватить всю ширину и высоту окна браузера. Затем выберите использование метода CSS Parallax.

Дублирование разделов

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

Создание статического фонового изображения с использованием фонового изображения того же раздела с CSS Parallax

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

Посмотрите результат.

Использование различных фоновых изображений с переходами параллакса CSS

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

Если у вас есть другое фоновое изображение (с CSS Parallax) для каждого из четырех разделов, проверьте результат.

Использование различных фоновых изображений с истинными переходами параллакса

Если вы хотите изменить эффект перехода фонового изображения, вы можете изменить метод параллакса с CSS на True Parallax для всех четырех фоновых изображений раздела.

Откройте одну из настроек раздела и измените метод CSS на «True Parallax».

Затем вам нужно будет проделать то же самое с оставшимися тремя разделами. Или вы можете просто щелкнуть правой кнопкой мыши параметр «Метод параллакса» и выбрать «Расширить метод параллакса» для всех модулей заголовков с полной шириной страницы на всей странице.

После этого проверьте эффект перехода фонового изображения.

Изучение различных выравниваний модулей

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

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

Чтобы выровнять модуль по правому краю страницы, просто измените выравнивание модуля на выравнивание по правому краю.

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

Вот пример центрированного выравнивания со статическим фоном (одно и то же фоновое изображение для каждого с параллаксом CSS).

Вот пример центрированного выравнивания с различными фоновыми изображениями с использованием метода CSS Parallax.

Вот пример центрированного выравнивания с различными фоновыми изображениями с использованием метода True Parallax.

Вот пример выравнивания по правому краю с разными фоновыми изображениями с использованием комбинации CSS и истинного параллакса.

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!