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

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

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

Скачайте The Inline Parallax Layout БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Начнем воссоздавать

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

Начните с добавления нового обычного раздела на страницу, над которой вы работаете.

Добавить новую строку

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

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

Столбец 1 Настройки

Интервал

Добавьте верхнее значение заполнения к первому столбцу.

• Верхняя обивка:
  • Рабочий стол: 2vw
  • Планшет + Телефон: 6vw

Столбец 2 Настройки

Интервал

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

• Верхняя обивка:
  • Рабочий стол: 4vw
  • Планшет + Телефон: 6vw

Столбец 4 Настройки

Интервал

Пропустите столбец 3 и добавьте несколько значений интервала в столбец 4.

• Верхняя обивка
  • Рабочий стол: 19vw
  • Таблетка: 0vw
  • Телефон: 1vw
• Отступ слева и справа
  • Настольный компьютер и планшет: 1vw
  • Телефон: 0vw

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

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

Теперь добавьте первый текстовый модуль в столбец 1. Вставьте содержимое H2 по вашему выбору.

Текст заголовка

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

• Уровень текста заголовка: H2
• Шрифт H2: EB Garamond
• Стиль шрифта H2: TT
• Цвет текста H2: Черный #oooooo
• Размер текста H2:
  • Рабочий стол: 3.1vw
  • Таблетка: 5.4vw
  • Телефон: 10vw
• Высота линии H2:
  • Рабочий стол + планшет: 1.1em
  • Телефон: 1.3em

Интервал

Затем добавьте интервал к модулю.

• Верхняя обивка:
  • Рабочий стол: 4vw
  • Планшет + Телефон: 0vw
• Левый отступ:
  • Настольный компьютер и планшет: 1vw
  • Телефон: 2vw
• Правый отступ
  • Настольный компьютер и планшет: 1vw
  • Телефон: 0vw

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

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

Теперь добавьте второй текстовый модуль под первым. Вставьте содержимое абзаца.

Текст

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

• Шрифт текста: EB Garamond
• Цвет текста: темно-серый # 3d3d3d
• Размер текста:
  • Рабочий стол: 1vw
  • Таблетка: 2.2vw
  • Телефон: 3.8vw
• Высота текстовой строки: 1,8 м

Интервал

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

• Нижняя обивка:
  • Телефон: 4vw
• Левый отступ:
  • Рабочий стол + планшет: 1.4vw
• Правый отступ:
  • Рабочий стол: 1.3vw
  • Планшет + телефон: 1,7 ВВт

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

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

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

Добавить ссылку

Также добавьте ссылку на кнопку.

Кнопка

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

• Размер текста кнопки:
  • Рабочий стол: 1vw
  • Таблетка: 2vw
  • Телефон: 4vw
• Цвет текста кнопки: темно-серый # 3d3d3d
• Ширина границы кнопки: 1 пиксель
• Шрифт кнопки: EB Garamond

Интервал

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

• Верхнее поле:
  • Рабочий стол + планшет: 1vw
• Нижняя маржа:
  • Телефон: 5vw

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

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

К следующей колонке! Добавьте текстовый модуль с некоторым содержанием H4 по вашему выбору.

Фон

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

• Фон рабочего стола: изображение
  • Параллакс: CSS
• Планшет + телефон Фон: изображение

Фоновое наведение

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

• Фоновое наведение: Цветовой градиент
• Цветовой градиент 1: светло-золотисто-желтый # edba63
• Цветовой градиент 2: золотисто-желтый # ed9d12
• Направление градиента: 23 градуса
• Поместите градиент над фоновым изображением: Да

Текст заголовка

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

• Уровень заголовка текста: H4
• Шрифт H4: EB Garamond
• Цвет текста H4: белый #ffffff
• Размер текста H4:
  • Рабочий стол: 2.3vw
  • Таблетка: 4.5vw
  • Телефон: 8.5vw

Интервал

Затем отрегулируйте интервал.

• Верхнее поле:
  • Телефон: -6vw
• Верхняя обивка:
  • Рабочий стол: 15vw
  • Таблетка: 22vw
  • Телефон: 43vw
• Нижняя обивка:
  • Рабочий стол + планшет: 1vw
• Отступ слева и справа:
  • Настольный компьютер и планшет: 1,5 ВВт
  • Телефон: 5vw

Граница

Продолжайте стилизовать границы.

• Закругленные углы: 1vw все углы
• Стили границ: со всех сторон
• Ширина границы: 0.3vw
• Цвет границы: белый #ffffff

Преобразовать масштаб при наведении

Завершите настройки модуля, добавив эффект масштабирования при наведении.

• Масштаб трансформации при наведении: 102%

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

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

Добавьте второй модуль во второй столбец с некоторым содержимым H4 по вашему выбору.

Фон

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

• Фон рабочего стола: изображение
  • Параллакс: CSS
• Планшет + телефон Фон: изображение

Фоновое наведение

Также добавьте фон градиента при наведении.

• Фоновое наведение: Цветовой градиент
• Цветовой градиент 1: светло-пурпурный # 91463f
• Цветовой градиент 2: пурпурный # 910400
• Направление градиента: 23 градуса
• Поместите градиент над фоновым изображением: Да

Текст заголовка

Затем задайте стиль для параметров текста H4.

• Уровень заголовка текста: H4
• Шрифт H4: EB Garamond
• Цвет текста H4: белый #ffffff
• Размер текста H4:
  • Рабочий стол: 2.3vw
  • Таблетка: 4.5vw
  • Телефон: 8.5vw

Интервал

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

• Верхняя обивка:
  • Рабочий стол: 15vw
  • Таблетка: 21.1vw
  • Телефон: 43vw
• Нижняя обивка:
  • Рабочий стол + планшет: 1vw
• Отступ слева и справа:
  • Настольный компьютер и планшет: 1,5 ВВт
  • Телефон: 5vw

Граница

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

• Закругленные углы: 1vw все углы
• Стили границ: со всех сторон
• Ширина границы: 0.3vw
• Цвет границы: белый #ffffff

Преобразовать масштаб при наведении

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

• Масштаб трансформации при наведении: 102%

Повторяющиеся текстовые модули из столбца 2 в столбец 3

Дублируйте и перетащите текстовые модули

Клонируйте оба текстовых модуля и поместите их в третий столбец строки.

Настройте 1-й текстовый модуль в столбце 3

Изменить содержимое H4

Откройте первый дублирующий текстовый модуль в столбце 3 и измените его содержимое.

Изменить фон для планшета и телефона

Затем измените фоновое изображение на экранах меньшего размера.

Изменение цветового градиента при наведении курсора

Продолжайте, изменяя цвета при наведении градиента.

• Цветовой градиент 1: розово-розовый # cc9293
• Цветовой градиент 2: розовый # cc9293

Интервал

Наконец, отрегулируйте интервал следующим образом.

• Верхнее поле:
  • Таблетка: -6.4vw
  • Телефон: 0vw

Отрегулируйте 2-й текстовый модуль в столбце 3

Изменить содержимое H4

Сначала измените содержимое.

Изменить фон для планшета и телефона

Затем измените фоновое изображение на экранах меньшего размера.

Изменение цветового градиента при наведении курсора

Измените также градиентный фон.

• Цветовой градиент 1: Мягкая сосна # 5c755c
• Цветовой градиент 2: сосново-зеленый # 4D754D

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

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

Переходя к столбцу 4, добавьте текстовый модуль. Вставьте контент H3 по вашему выбору.

Текст заголовка

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

• Уровень текста заголовка: H3
• Шрифт текста H3: EB Garamond
• Стиль шрифта H3: TT
• Цвет текста H3: черный #oooooo
• Размер текста H3:
  • Рабочий стол: 3vw
  • Таблетка: 5vw
  • Телефон: 12vw
• Высота линии H3
  • Рабочий стол + планшет: 1em
  • Телефон: 1.1em

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

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

Добавьте еще один текстовый модуль под первым. Вставьте содержимое абзаца.

Текст

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

• Шрифт текста: EB Garamond
• Цвет текста: темно-серый # 3d3d3d
• Размер текста:
  • Рабочий стол: 1vw
  • Таблетка: 2.2vw
  • Телефон: 3.8vw
• Высота текстовой строки: 1,8 м

Интервал

Затем отрегулируйте интервал.

• Нижняя обивка:
  • Телефон: 4vw
• Левое заполнение: 0.9vw
• Правое заполнение: 2.2vw

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

Дублируйте и перетащите модуль кнопки

• Дублируйте модуль кнопок в столбце 1.
• Перетащите его в столбец 3 под текстовыми модулями.

Интервал

Отрегулируйте некоторые значения интервалов в дублированном кнопочном модуле, и все готово!

• Нижняя маржа: 0vw
• Левое поле:
  • Настольный компьютер + планшет: 0,7 Вт
  • Телефон: 0.9vw

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

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

Рабочий стол

Мобильный

Заключение

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