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