При разработке страницы с описанием ваших услуг важно, чтобы посетители обратили внимание на все предоставляемые вами услуги. Во многих случаях они будут искать только одну конкретную услугу, но если вы представите информацию в упорядоченном виде, ваши посетители с большей вероятностью будут взаимодействовать со всеми услугами.
В этом уроке мы покажем вам, как проявить творческий подход к эффектам прокрутки Divi и создать плавный переход между сервисами. Вы также можете скачать JSON-файл бесплатно!
Пойдем.
Возможный результат
Прежде чем приступить к уроку, давайте посмотрим на результат на экранах разных размеров.
1, воссоздать структуру элементов
Добавить раздел № 1
расстояние
Для начала добавьте на страницу, над которой работаете, новый раздел. Откройте настройки раздела и отрегулируйте значения отступов для разных размеров экрана.
- Верхний отступ: 80px (рабочий стол и планшет), 0px (телефон)
- Нижняя обивка: 80px
Добавить новую строку
Структура столбца
Продолжите добавлять новую строку, используя следующую структуру столбцов:
калибровка
Пока не добавляете модули, откройте параметры линии и примените следующие изменения к параметрам измерения:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Ширина: 90%
- Максимальная ширина: 1580 пикселей
расстояние
Затем добавьте пользовательский верхний и нижний поля.
- Верхнее поле: 200px
- Нижнее поле: 200px
Добавить текстовый модуль в столбец 1
Добавить контент H2
Пришло время добавить модули, начиная с текстового модуля в столбце 1. Введите содержимое заголовка H2 по вашему выбору.
Настройки текста H2
Перейдите на вкладку «Дизайн» модуля и измените настройки текста H2 следующим образом:
- Название 2 Полиция: ежеквартально
- Заголовок 2 Размер текста: 80px (рабочий стол), 50px (планшет), 40px (телефон)
- Высота линии 2 головы: 1.2em
расстояние
Затем добавьте нижнее поле для планшета и телефона.
- Нижнее поле: 50 пикселей (только для планшета и телефона)
Добавить текстовый модуль в столбец 2
Добавить контент
Перейдем ко второму столбцу. Там первый модуль, который нам нужен, — это текстовый модуль с каким-то описательным содержимым.
Настройки текста
Перейдите на вкладку «Дизайн» модуля и измените параметры текста соответствующим образом:
- Шрифт текста: кабина
- Стиль шрифта текста: заглавные
- Цвет текста: # 000000
- Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
- Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
- Высота строки текста: 3em
Добавьте модуль разделения в столбец 2
видимость
Следующий и последний модуль, который нам понадобится в этой колонке, — это модуль разделителя. Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: Да
Линия
Затем измените цвет линии модуля.
- Цвет линии: # 000000
калибровка
Затем внесите некоторые изменения в параметры размеров.
- Вес делителя: 3px
- Ширина: 28%
расстояние
Мы также добавляем верхнее поле.
- Верхнее поле: 10px
Добавить раздел № 2
расстояние
Переходим к следующему регулярному разделу. Удалите верхнее заполнение по умолчанию из раздела.
- Верхняя обивка: 0px
переполнение
Также скрыть переполнения.
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Добавить новую строку
Структура столбца
Продолжайте добавлять первую строку, используя следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии, получите доступ к параметрам определения размера и внесите следующие изменения:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Выровнять высоту столбца: Да
- Ширина: 90%
- Максимальная ширина: 1580 пикселей
расстояние
Затем удалите все верхние и нижние отступы по умолчанию.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Настройки столбца 1
Фоновый цвет
Далее откройте настройки в столбце 1 и измените цвет фона.
- Цвет фона: #f7f7f7
расстояние
Завершите настройку столбцов, добавив пользовательские значения заливки для разных размеров экрана.
- Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
- Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
- Левый отступ: 8%
- Правый отступ: 8%
Настройки столбца 2
расстояние
Далее откройте настройки для столбца 2. Перейдите на вкладку «Дополнительно» и добавьте пользовательские значения заливки для разных размеров экрана.
- Верхнее заполнение: 100px (рабочий стол), 50px (планшет и телефон)
- Нижняя обивка: 200px
- Отступ слева: 150 пикселей (стол), 0 пикселей (планшет и телефон)
Добавьте модуль разделения в столбец 1
видимость
В первом столбце нам понадобится модуль-разделитель. Убедитесь, что включена опция "Показать разделитель".
- Показать разделитель: Да
Линия
Затем измените цвет линии модуля.
- Цвет линии: # 000000
калибровка
Также внесите изменения в параметры размеров.
- Вес делителя: 3px
- Ширина: 50%
Добавить текстовый модуль в столбец 1
Добавить контент H3
Следующий модуль, который нам нужен в столбце 1, — это текстовый модуль с содержимым H3.
Настройки текста H3
Перейдите на вкладку «Дизайн» модуля и отредактируйте настройки текста H3:
- Название 3 Полиция: ежеквартально
- Цвет текста элемента 3: # 000000
- Элемент 3 Размер текста: 50px (рабочий стол), 40px (планшет), 35px (телефон)
- Высота линии 3 головы: 1.1em
Добавить текстовый модуль в столбец 2
Добавить контент
Во втором столбце первый модуль, который нам нужен, это текстовый модуль с некоторым содержанием описания.
Настройки текста
Измените настройки текста модуля следующим образом:
- Шрифт текста: кабина
- Стиль шрифта текста: заглавные
- Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
- Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
- Высота строки текста: 3em
Добавить модуль кнопки в столбец 2
Добавить копию
Следующий и последний необходимый нам модуль - это кнопочный модуль. Введите копию по вашему выбору.
Настройки кнопок
Затем стиль кнопки.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 20 пикселей
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: #000000
- Ширина границы кнопки: 0 пикселей
- Шрифт кнопки: ежеквартально
- Вес шрифта кнопки: жирный
расстояние
Также добавьте пользовательские отступы.
- Верхняя обивка: 50px
- Нижняя обивка: 50px
- Левый отступ: 100px
- Правый отступ: 100 пикселей
Позиция
И переместите кнопку соответственно:
- Позиция: Абсолют
- Расположение: внизу слева
Клонируйте линию столько раз, сколько необходимо
После завершения всей строки и всех ее модулей вы можете клонировать всю строку три раза.
Изменить весь контент
Не забудьте отредактировать все содержимое в двух строках.
2. Применить эффекты прокрутки
Эффекты прокрутки первого ряда
Горизонтальное движение
После того, как вы закончите все строки в своем разделе, пришло время добавить эффекты прокрутки. Откройте первую строку раздела и добавьте горизонтальное движение.
- Активировать горизонтальное движение: Да
- Начальное смещение: -5
- Среднее смещение: 0 (при 26%)
- Конечное смещение: 0
- Триггер эффекта движения: середина элемента
Исчезать и исчезать
Также используйте входящий и исходящий эффект затухания.
- Активировать постепенное исчезновение: Да
- Начальная непрозрачность: 100%
- Средняя непрозрачность: 100% (при 50%)
- Конечная непрозрачность: 0% (до 53%)
- Триггер эффекта движения: середина элемента
Эффекты прокрутки среднего ряда
Вертикальное движение
Далее добавим эффекты прокрутки ко всем строкам между первой и последней строками раздела. Сначала используем вертикальную прокрутку:
- Активировать вертикальное движение: Да
- Начальное смещение: -4
- Среднее смещение: 0 (при 26%)
- Конечное смещение: 0
- Эффект запуска движения: элемент посередине
Исчезать и исчезать
Также активируйте эффект затухания.
- Активировать постепенное исчезновение: Да
- Начальная непрозрачность: 0%
- Средняя непрозрачность: 100% (от 27% до 50%)
- Конечное смещение: 0 (при 53%)
- Триггер эффекта движения: середина элемента
Эффекты прокрутки последней строки
Вертикальное движение
Затем откройте последнюю строку раздела и добавьте следующее вертикальное движение:
- Активировать вертикальное движение: Да
- Начальное смещение: -4
- Среднее смещение: 0 (при 26%)
- Конечное смещение: 0
- Триггер эффекта движения: середина элемента
Исчезать и исчезать
С входящим и исходящим эффектом исчезновения, и все готово!
- Активировать постепенное исчезновение: Да
- Начальная непрозрачность: 0%
- Средняя непрозрачность: 100% (от 27% до 50%)
- Конечная непрозрачность: 100% (до 53%)
- Триггер эффекта движения: середина элемента
Конечный результат
Теперь, когда мы прошли все этапы, давайте еще раз взглянем на результат на экранах разных размеров.
Заключительные мысли
В этой статье мы показали, как создать красивый переход между сервисами, используя эффекты прокрутки Divi. Прежде чем один сервис исчезнет, следующий начнет появляться, что создает визуально приятный эффект перехода. Такой подход поможет вам выделить каждый сервис по отдельности. Вы также могли бесплатно скачать JSON-файл! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.