При создании страницы «О нас» вы, вероятно, также захотите представить там членов своей команды. Тем самым вы разрешаете посетителей взаимодействовать с людьми, стоящими за вашим бизнесом. Если вы ищете способ анимировать раздел членов вашей команды при прокрутке, это руководство может оказаться вам полезным. Мы собираемся создать карусель членов команды с автоматической прокруткой, которая перемещается, когда вы посетителей прокрутите страницу.
демонстрация
Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.
Начало зачатия
Добавить новый раздел
расстояние
Начните с добавления нового обычного раздела на страницу, над которой вы работаете. Откройте настройки раздела и добавьте пользовательские отступы на экранах разных размеров.
- Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
- Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
переполнение
Чтобы убедиться, что в нашем дизайне не появляется горизонтальная полоса прокрутки, мы скроем переполнение разделов на вкладке «Дополнительно».
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Добавить строку № 1
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строк, перейдите на вкладку дизайна и измените ширину и максимальную ширину в настройках размеров.
- Ширина: 90%
- Максимальная ширина: 1580 пикселей
расстояние
Мы также добавляем пользовательские верхний и нижний отступы.
- Верхняя обивка: 100px
- Нижняя обивка: 100px
Добавить текстовый модуль в столбец
Добавить контент H2
Пришло время добавлять модули, начиная с первого текстового модуля. Введите это содержание H2 на ваш выбор.
Настройки текста H2
Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:
- Название шрифта 2: Зыбучие пески
- Название шрифта 2: полужирный
- Цвет текста элемента 2: # 000000
- Заголовок 2 Размер текста: 70px (рабочий стол), 50px (планшет), 40px (телефон)
Добавьте модуль разделения в столбец
видимость
Затем добавьте модуль разделения. Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: Да
Линия
Затем внесите некоторые изменения в настройки линии.
- Цвет линии: # edf000
- Стиль линии: сплошная
- Положение линии: сверху
калибровка
И заполните параметры модуля, соответственно изменив параметры размеров:
- Вес делителя: 20px
- Ширина: 11%
- Выравнивание модуля: слева
- Высота: 20px
Добавить строку № 2
Структура столбца
В следующий ряд! Используйте следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии и измените параметры размеров следующим образом:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 2
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем добавьте левый и правый отступ только на меньших экранах.
- Левый отступ: 5% (только планшет и телефон)
- Правый отступ: 5% (только планшет и телефон)
Параметры столбца (5x)
Теперь, в следующих трех шагах этого урока, мы собираемся внести некоторые изменения в столбцы. Примените три шага к каждому столбцу в строке.
Градиентный фон
Сначала добавьте градиентный фон в каждый столбец.
- 1 цвет: rgba (255,255,255,0)
- 2 цвет: rgba (0,0,0,0,84)
- Тип градиента: линейный
- Начальная позиция: 25%
- Конечная позиция: 86%
- Поместите градиент над фоновым изображением: Да
Фоновое изображение
Затем загрузите фоновое изображение по вашему выбору. Это фоновое изображение представляет каждого члена команды, поэтому используйте разные изображения для каждого столбца.
- Размер фонового изображения: обложка
- Положение фонового изображения: Центр
Главный элемент
Завершите настройку столбца, добавив собственный CSS к основному элементу планшета каждого столбца. Эти строки кода CSS помогут нам разместить столбцы на планшете один под другим, вместо того, чтобы располагать два рядом.
ширина: 100%! важно; поле: 50px 0px 50px 0px! важно;
Добавить персональный модуль в столбец
Добавить контент
Чтобы поделиться информацией о членах команды, мы будем использовать модуль Person. Добавьте первый модуль Person в столбец 1 и используйте содержание де Votre Choix.
Удалить изображение
Затем удалите изображение. Вместо этого мы используем фоновое изображение столбца.
Фоновое изображение
Затем мы добавим наложение изображения в качестве фонового изображения модуля. Вы можете найти тот, который мы используем, загрузив папку в начале этого руководства.
- Размер фонового изображения: обложка
- Положение фонового изображения: Центр
Настройки текста заголовка
Перейдите на вкладку дизайна модуля и измените настройки текста заголовка следующим образом:
- Уровень заголовка: H3
- Заголовок шрифта
- Вес шрифта заголовка: жирный
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 230%
Настройки основного текста
Также измените настройки основного текста.
- Шрифт для тела: Open Sans
- Цвет основного текста: #ffffff
- Высота линии тела: 2,2 em
Настройки текста положения
Затем внесите некоторые изменения в настройки текста позиции.
- Положение шрифта: Open Sans
- Цвет текста позиции: # edf000
расстояние
И завершите настройки модуля, добавив пользовательские значения отступов в настройки интервала.
- Верхняя обивка: 70%
- Нижняя прокладка: 10%
- Левый отступ: 10%
- Правый отступ: 10%
Дублировать модуль "Человек" 4 раза
После того, как вы завершили модуль Person, вы можете клонировать весь модуль четыре раза.
Поместите дубликаты в оставшиеся столбцы
Разместите дублирующиеся модули в оставшиеся четыре столбца ряда. Обязательно измените также содержание.
Преврати ряд в карусель с автопрокруткой
Измените размер строки № 2
Теперь, чтобы превратить эту строку в карусель членов команды с автоматической прокруткой, нам нужно повторно открыть настройки строки и изменить ширину и максимальную ширину в настройках размера.
- Ширина: 180%
- Максимальная ширина: 220% (рабочий стол), 100% (планшет и телефон)
Добавьте горизонтальное движение линии № 2
Завершите настройку линии, добавив горизонтальное движение к настройкам эффекта прокрутки на вкладке «Дополнительно», и все готово!
- Активировать горизонтальное движение: Да
- Начальное смещение:
- Офис: 2,5
- Планшет и телефон: 0
- Среднее смещение: 0 (при 40%)
- Конечное смещение:
- Офис: -25 (на 62%)
- Планшет и телефон: 0
- Эффект движения триггера: середина элемента
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Заключительные мысли
В этом уроке мы показали вам, как проявить творческий подход со встроенными эффектами прокрутки Divi. В частности, мы воссоздали красивую карусель участников команды с автоматической прокруткой. Когда посетителей пролистните страницу, появится еще одна часть карусели.
