При разработке страницы услуг вы хотите убедиться, что ваш посетителей обратите внимание на все различные услуги, которые вы предоставляете. Во многих случаях это будет только одна конкретная услуга, которую они ищут, но если вы обеспечиваете упрощенную структуру своей службы, более вероятно, что ваша посетителей разобраться с ними всеми.
В этом уроке мы покажем вам, как проявить творческий подход к эффектам прокрутки 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! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
