Хотите ли вы, чтобы члены вашей команды были представлены в формате карусели с помощью 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 и используйте любой контент по своему усмотрению.
Лучшее изображение
Далее удалите изображение. Вместо него мы используем фоновое изображение колонки.
Изображение на заднем плане
Затем мы добавим изображение в качестве фонового изображения модуля.
- Размер фонового изображения: обложка
- Положение фонового изображения: по центру
Настройки текста заголовка
Перейдите на вкладку Дизайн модуль и измените настройки текста заголовка следующим образом:
- Уровень заголовка заголовка: H3
- Шрифт заголовка: зыбучие пески
- Вес шрифта: полужирный
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 230%
Настройки основного текста
Также измените настройки основного текста.
- Основной шрифт: Open Sans
- Цвет текста: #ffffff
- Высота строки: 2,2 см
Настройки текста сообщения участника команды
Далее внесите некоторые изменения в текстовые настройки должности, занимаемой членом команды.
- Позиционный шрифт: открыть без
- Цвет текста позиции: #edf000
расстояние
И завершите настройку модуля, добавив пользовательские значения отступов к параметрам интервала.
- Отступы: 70% (сверху), 10% (снизу, слева и справа)
Клонируйте модуль "Person" четыре раза.
После того, как вы завершили модуль Person, вы можете клонировать весь модуль четыре раза.
Поместите дубликаты в оставшиеся столбцы
Поместите повторяющиеся модули в оставшиеся четыре столбца ряда.
Также не забудьте отредактировать контент.
Превратите строку в карусель с автоматической прокруткой
См. Также: Divi: Как создать плавную сетку столбцов при наведении
Изменить размер строки #2
Теперь, чтобы превратить эту линию в карусель с автоматической прокруткой, нам нужно снова открыть настройки линии и изменить ширину и максимальную ширину в настройках размера.
- Ширина: 180%
- Максимальная ширина: 220% (настольный компьютер), 100% (планшет и телефон)
Добавьте горизонтальное движение к строке 2
Завершите настройку параметров линии, добавив горизонтальное движение к настройкам эффекта прокрутки на вкладке. Фильтр в рамках опции Эффекты прокрутки и вы сделали!
- Включить горизонтальное движение: Да
- Начальное смещение:
- Рабочий стол: 2,5
- Планшет и телефон: 0
- Среднее смещение: 0 (до 40%)
- Конечный сдвиг:
- Рабочий стол: -25 (до 62%)
- Планшет и телефон: 0
- Триггер эффекта движения: середина элемента
обследование
Теперь, когда мы прошли все этапы, давайте еще раз взглянем на результат на экранах разных размеров.
Настольный компьютер
Скачайте DIVI прямо сейчас!!!
Мобильный вид
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как проявить творческий подход, используя встроенные эффекты прокрутки Divi.
В частности, мы воссоздали красивую карусель с фотографиями членов команды, которая автоматически прокручивается. По мере того, как посетители прокручивают страницу вниз, появляется следующая часть карусели.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...