Как развернуть изображения на скролле для продвижения галереи изображений в Divi

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

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

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Часть 1: Создание макета и макета содержимого

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

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

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

• Набивка: 10vw сверху, 10vw снизу
• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Добавление строки

Затем добавьте новую строку со структурой столбцов две трети одна треть.

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

Затем обновите настройки строки с помощью пользовательского фонового изображения. Я использую один из готовых макетов целевой страницы магазина канцелярских товаров. После этого обновите следующее:

• Размер фонового изображения: фактический размер
• Расположение фонового изображения: вверху слева
• Максимальная ширина: 900 пикселей

Добавление текстового модуля для создания заголовка

Когда строка будет готова, добавьте новый текстовый модуль в столбец 1, чтобы создать заголовок.

Текстовый контент

Добавьте в основной текст следующий заголовок H1:

<h1>Our Gallery</h1>

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

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

• Шрифт заголовка: Bellefair
• Выравнивание текста заголовка (планшет и телефон): справа
• Размер текста заголовка: 150 пикселей (компьютер и планшет), 110 пикселей (телефон)

Добавление кнопки

Под текстовым модулем добавьте новый модуль кнопок.

Текст кнопки

Обновите текст кнопки, указав «Просмотр галереи».

Настройки кнопок

На вкладке дизайна обновите следующее:

• Выравнивание (планшет и телефон): правое
• Размер текста кнопки: 14 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 121212
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 3 пикселя
• Шрифт кнопки: Montserrat
• Стиль шрифта кнопки: TT
• Маржа: максимум 7vw

Часть 2: Создание изображений с эффектом разветвленной прокрутки

Во второй части урока мы создадим изображения с эффектом разветвленной прокрутки. Начнем со среднего изображения. Я использую изображения из готового макета страницы галереи моды. Все они должны быть одного размера для единого дизайна. Те, которые я использую, имеют размер 400 на 600 пикселей.

Создание среднего образа

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

Затем загрузите изображение в модуль.

Настройки изображения

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

• Максимальная ширина (планшет и телефон): 200 пикселей
• Маржа (планшет и телефон): 0 пикселей слева

Создание среднего правого изображения

Чтобы создать второе изображение (или среднее правое изображение), продублируйте первый модуль изображения.

Настройки изображения

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

Позиция

• Позиция: Абсолютная

Преобразовать происхождение

• Преобразовать начало координат: внизу в центре

Эффекты прокрутки

В разделе «Движение по горизонтали» обновите следующее:

• Включить горизонтальное движение: ДА
• Начальное смещение: 0 (при 20%)
• Среднее смещение: 0,5 (при 50%)
• Конечное смещение: 0,5 (при 100%)

В разделе Вращение обновите следующее:

• Включить поворот: ДА
• Начальное вращение: 0 градусов (при 20%)
• Среднее вращение: 20 градусов (при 50%)
• Конечное вращение: 20 градусов (при 100%)

Создание правильного изображения

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

Обновить эффекты прокрутки

В разделе «Движение по горизонтали» обновите следующее:

• Среднее смещение: 1
• Конечное смещение: 1

В разделе Вращение обновите следующее:

• Среднее вращение: 40 градусов
• Конечное вращение: 40 градусов

Если вы не заметили, мы увеличиваем горизонтальное смещение на 0,5 шага, а вращающееся смещение на 20 градусов с каждым изображением. Это создаст равные интервалы между изображениями. А поскольку анимация с эффектом прокрутки основана на источнике преобразования внизу в центре, создается впечатление, что изображения расходятся веером, как игральные карты.

Пометка изображений в поле "Слои"

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

Создание среднего левого изображения

Чтобы создать среднее левое изображение, мы можем продублировать среднее правое изображение.

Затем перетащите его над средним изображением в верхнюю часть столбца.

Вы также можете обновить эту метку изображения.

Обновить эффекты прокрутки

Откройте настройки для среднего левого изображения и обновите следующие эффекты прокрутки:

Под горизонтальным движением…

• Среднее смещение: -0,5
• Конечное смещение: -0,5

ПРИМЕЧАНИЕ. Все, что мы делаем, это меняем значение смещения на отрицательное.

Под чередованием…

• Среднее вращение: -20 градусов
• Конечное вращение: -20 градусов

Создание левого изображения

Наконец, давайте создадим последнее левое изображение, продублировав правое изображение и перетащив его в самый верх столбца.

Вы также можете обновить этикетку.

Обновить эффекты прокрутки

Откройте настройки для левого изображения и обновите эффекты прокрутки:

При горизонтальном движении:

• Среднее смещение: -1
• Конечное смещение: -1

Под чередованием…

• Среднее вращение: -40 градусов
• Конечное вращение: -40 градусов

Столбец 1 Индекс Z

Прямо сейчас изображения в столбце до будут перекрывать содержимое столбца 1. Чтобы изменить это, откройте настройки для столбца 1 и обновите индекс z следующим образом:

• Индекс Z: 10

Добавление новых изображений и фильтров

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

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

• Насыщенность: 20%
• Непрозрачность: 85%

Результат

Вот результат ...

Вращение колонны

Чтобы немного изменить дизайн, мы можем повернуть коллекцию изображений, повернув родительский столбец.

Для этого откройте настройки для столбца 2 и добавьте следующую опцию преобразования:

• Трансформировать поворот оси Z: 40 градусов

Конечный результат

Вот окончательный результат.

Рабочий стол

Планшет

Телефон

Последние мысли

В этом уроке мы узнали, как разветвлять изображения с помощью эффектов прокрутки Divi, но вам не нужно останавливаться на достигнутом! Вы можете легко использовать ту же технику для разветвления любой коллекции модулей (я думаю, что это слова). Я ограничил расстояние смещения с помощью эффектов прокрутки каждого изображения, поэтому дизайн на самом деле не работает (т. Е. Вы не можете увидеть все изображение целиком). Но вы можете увеличить смещение, чтобы изображения были более заметными, если хотите.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!