Пропустить

Как создать прокручивающуюся карусель члена команды с помощью Divi

Divi: самая простая тема WordPress для использования

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Создавая страницу «О нас», вы, вероятно, также захотите представить членов своей команды. Таким образом, вы позволяете посетителям взаимодействовать с людьми, стоящими за вашим бизнесом. Если вы ищете способ оживить раздел членов вашей команды на свитке, это руководство может быть для вас. Мы создадим карусель для членов команды с автоматической прокруткой, которая перемещается по мере того, как ваши посетители прокручивают страницу. 

демонстрация

Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.

Член команды Scroll Divi

Начало зачатия

Добавить новый раздел

расстояние

Начните с добавления нового обычного раздела на страницу, над которой вы работаете. Откройте настройки раздела и добавьте пользовательские отступы на экранах разных размеров.

  • Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
  • Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
Конфигурация параметров

переполнение

Чтобы убедиться, что в нашем дизайне не появляется горизонтальная полоса прокрутки, мы скроем переполнение разделов на вкладке «Дополнительно».

  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый
Конфигурация переполнения

Добавить строку № 1

Структура столбца

Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:

Выберите макет divi

калибровка

Еще не добавляя никаких модулей, откройте настройки строк, перейдите на вкладку дизайна и измените ширину и максимальную ширину в настройках размеров.

  • Ширина: 90%
  • Максимальная ширина: 1580 пикселей
Параметр линии Divi

расстояние

Мы также добавляем пользовательские верхний и нижний отступы.

  • Верхняя обивка: 100px
  • Нижняя обивка: 100px
Конфигурация межстрочного интервала divi

Добавить текстовый модуль в столбец

Добавить контент H2

Пришло время добавить модули, начиная с первого текстового модуля. Введите содержание H2 по вашему выбору.

Встретить команду

Настройки текста H2

Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:

  • Название шрифта 2: Зыбучие пески
  • Название шрифта 2: полужирный
  • Цвет текста элемента 2: # 000000
  • Заголовок 2 Размер текста: 70px (рабочий стол), 50px (планшет), 40px (телефон)
Расстояние между текстом Divi

Добавьте модуль разделения в столбец

видимость

Затем добавьте модуль разделения. Убедитесь, что опция «Показать разделитель» включена.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

  • Показать разделитель: Да
Показать разделитель divi

Линия

Затем внесите некоторые изменения в настройки линии.

  • Цвет линии: # edf000
  • Стиль линии: сплошная
  • Положение линии: сверху
Стиль интервала Divi

калибровка

И заполните параметры модуля, соответственно изменив параметры размеров:

  • Вес делителя: 20px
  • Ширина: 11%
  • Выравнивание модуля: слева
  • Высота: 20px
Калибровка модуля divi line

Добавить строку № 2

Структура столбца

В следующий ряд! Используйте следующую структуру столбцов:

Конфигурация столбца Divi

калибровка

Не добавляя больше модулей, откройте параметры линии и измените параметры размеров следующим образом:

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 2
  • Ширина: 100%
  • Максимальная ширина: 100%
Конфигурация ширины желоба

расстояние

Затем добавьте левый и правый отступ только на меньших экранах.

  • Левый отступ: 5% (только планшет и телефон)
  • Правый отступ: 5% (только планшет и телефон)
Конфигурация стиля межстрочного интервала

Параметры столбца (5x)

Теперь, в следующих трех шагах этого урока, мы собираемся внести некоторые изменения в столбцы. Примените три шага к каждому столбцу в строке.

Конфигурация строки параметров Divi

Градиентный фон

Сначала добавьте градиентный фон в каждый столбец.

  • 1 цвет: rgba (255,255,255,0)
  • 2 цвет: rgba (0,0,0,0,84)
  • Тип градиента: линейный
  • Начальная позиция: 25%
  • Конечная позиция: 86%
  • Поместите градиент над фоновым изображением: Да
Конфигурация задней стойки Divi

Фоновое изображение

Затем загрузите фоновое изображение по вашему выбору. Это фоновое изображение представляет каждого члена команды, поэтому используйте разные изображения для каждого столбца.

  • Размер фонового изображения: обложка
  • Положение фонового изображения: Центр
Добавить фоновое изображение столбца divi

Главный элемент

Завершите настройку столбца, добавив собственный CSS к основному элементу планшета каждого столбца. Эти строки кода CSS помогут нам разместить столбцы на планшете один под другим, вместо того, чтобы располагать два рядом.

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

ширина: 100%! важно; поле: 50px 0px 50px 0px! важно;
Код столбца css divi

Добавить персональный модуль в столбец

Добавить контент

Чтобы поделиться информацией о членах команды, мы будем использовать модуль Person. Добавьте первый модуль Person в столбец 1 и используйте любое содержимое, которое хотите.

Divi имя человека

Удалить изображение

Затем удалите изображение. Вместо этого мы используем фоновое изображение столбца.

Удалить изображение divi

Фоновое изображение

Затем мы добавим наложение изображения в качестве фонового изображения модуля. Вы можете найти тот, который мы используем, загрузив папку в начале этого руководства.

  • Размер фонового изображения: обложка
  • Положение фонового изображения: Центр
Фоновая конфигурация модуля Person

Настройки текста заголовка

Перейдите на вкладку дизайна модуля и измените настройки текста заголовка следующим образом:

  • Уровень заголовка: H3
  • Заголовок шрифта
  • Вес шрифта заголовка: жирный
  • Цвет текста заголовка: #ffffff
  • Размер текста заголовка: 230%
Настройка названия модуля Divi

Настройки основного текста

Также измените настройки основного текста.

  • Шрифт для тела: Open Sans
  • Цвет основного текста: #ffffff
  • Высота линии тела: 2,2 em
Настройка тела Divi

Настройки текста положения

Затем внесите некоторые изменения в настройки текста позиции.

  • Положение шрифта: Open Sans
  • Цвет текста позиции: # edf000
Диви позиция

расстояние

И завершите настройки модуля, добавив пользовательские значения отступов в настройки интервала.

  • Верхняя обивка: 70%
  • Нижняя прокладка: 10%
  • Левый отступ: 10%
  • Правый отступ: 10%
Расстояние между модулями Divi Person

Дублировать модуль "Человек" 4 раза

После того, как вы завершили модуль Person, вы можете клонировать весь модуль четыре раза.

Поместите дубликаты в оставшиеся столбцы

Поместите повторяющиеся модули в оставшиеся четыре столбца ряда. Не забудьте также отредактировать контент.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Преврати ряд в карусель с автопрокруткой

Измените размер строки № 2

Теперь, чтобы превратить эту строку в карусель членов команды с автоматической прокруткой, нам нужно повторно открыть настройки строки и изменить ширину и максимальную ширину в настройках размера.

  • Ширина: 180%
  • Максимальная ширина: 220% (рабочий стол), 100% (планшет и телефон)
Межстрочный интервал модификации деления

Добавьте горизонтальное движение линии № 2

Завершите настройку линии, добавив горизонтальное движение к настройкам эффекта прокрутки на вкладке «Дополнительно», и все готово!

  • Активировать горизонтальное движение: Да
  • Начальное смещение:
    • Офис: 2,5
    • Планшет и телефон: 0
  • Среднее смещение: 0 (при 40%)
  • Конечное смещение:
    • Офис: -25 (на 62%)
    • Планшет и телефон: 0
  • Эффект движения триггера: середина элемента
Конфигурация анимации прокрутки Divi

обследование

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.

офис

Член команды Scroll Divi

Заключительные мысли

В этом уроке мы показали вам, как проявить творческий подход с помощью встроенных эффектов прокрутки Divi. В частности, мы воссоздали красивую карусель для членов команды с автоматической прокруткой. Когда посетители прокручивают страницу вниз, появляется другая часть карусели.

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация