Пропустить

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

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

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

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

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

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

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

Член команды 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

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

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

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

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

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

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

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

ширина: 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 акции
доля
чирикать
Регистрация