Творческие способы комбинировать эффекты прокрутки вращения с круговыми элементами в Divi

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

Наслаждаться!

Sneak Peek

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

Загрузите макет рекламного объявления с вращающимися круговыми элементами БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл JSON в Divi Builder.

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

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

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

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

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

Создание макета Blurb с вращающимися круговыми элементами при прокрутке в Divi

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

Сначала добавьте в раздел три ряда столбцов.

Маржа временного раздела

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

Создание дизайна рекламного ролика с вращающимся круговым элементом №1

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

Вот как это построить.

Добавить модуль Blurb

В столбце 1 добавьте модуль аннотации.

Blurb 1 Content

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

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

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

Настройки дизайна Blurb 1

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

• Цвет фона: # 121212
• Цвет значка: # 41828d
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 75 пикселей
• Выравнивание текста: по центру
• Шрифт заголовка: Oswald
• Стиль шрифта заголовка: TT
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 22 пикс.
• Цвет основного текста: #ffffff

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

• Ширина: 300 пикселей
• Максимальная ширина: 300 пикселей
• Отступ: 25 пикселей сверху, 25 пикселей снизу, 25 пикселей слева, 25 пикселей справа
• Закругленные углы: 50%

Комбинация одинаковой ширины и высоты в сочетании с закругленными углами - вот что делает рекламное объявление круглым.

Затем обновите позицию со смещением.

• Должность: Родственник
• Вертикальное смещение: 25 пикселей
• Горизонтальное смещение: 25 пикселей
• Индекс Z: 1

Это поместит объявление по центру разделителей, которые мы добавим позже. Индекс Z гарантирует, что рекламное объявление находится над другими разделителями.

Затем добавьте к рекламному объявлению эффект вращающейся прокрутки.

На вкладке "Эффекты вращения"…

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

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

Добавить круговой разделитель # 1

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

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

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

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

• Показать разделитель: НЕТ
• Цвет фонового градиента слева: # 311847
• Правый цвет градиента фона: # ec4067
• Стартовая позиция: 50%
• Конечная позиция: 50%

А теперь делаем его круговым следующим образом:

• Ширина: 350 пикселей
• Максимальная ширина: 350 пикселей
• Высота: 350 пикселей
• Закругленные углы: 50%

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

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

Если ваш разделитель находится в верхней части аннотации, убедитесь, что вы обновили z-индекс аннотации до 1.

Затем добавьте к разделителю следующие эффекты прокрутки:

На вкладке Эффект вращения…

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

Добавить круговой разделитель 2

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

Обновить настройки дизайна разделителя 2

Для этого разделителя зададим другой цвет фона градиента следующим образом:

• Цвет фона градиента слева: rgba (160,26,125,0,5)
• Цвет фона градиента справа: rgba (255,255,255,0)

ПРИМЕЧАНИЕ. Здесь важно использовать полупрозрачные цвета, чтобы обнажить задний фон. Это создает красивое сочетание цветов.

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

На вкладке "Эффекты вращения"…

• Средний поворот: 90 градусов (при 50% области просмотра)
• Конечное вращениеg: 180 градусов (при 100% области просмотра)

Добавить круговой разделитель 3

Продолжите тот же процесс, чтобы создать третий и последний разделитель, продублировав разделитель 2.

Обновить настройки дизайна разделителя 3

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

• Цвет фона градиента слева: rgba (255,255,255,0)
• Правый градиент фона: rgba (41,196,169,0,5)

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

На вкладке "Эффекты вращения"…

• Среднее вращение: 180 градусов (при 50% области просмотра)
• Конечное вращениеg: 360 градусов (при 100% области просмотра)

На вкладке «Увеличение и уменьшение масштаба»…

• Включить масштабирование вверх и вниз: ДА
• Начальный масштаб: 110% (при 0% области просмотра)
• Средний масштаб: 110% (при 50% области просмотра)
• Конечный масштаб: 100% (при 100% области просмотра)

Создание дизайна рекламного ролика с вращающимся круговым элементом №2

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

Обновить дизайн модуля Blurb

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

Вот как это сделать.

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

• Справочная информация: #ffffff

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

• Цвет текста заголовка: # 000000
• Цвет основного текста: # 000000

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

• Режим наложения: Экран

Обновить эффекты прокрутки разделителя 1

Откройте настройки модуля разделителя непосредственно под модулем рекламного сообщения в столбце 2 и обновите следующие эффекты прокрутки:
На вкладке эффектов увеличения и уменьшения масштаба…

• Включить масштабирование вверх и вниз: ДА
• Начальный масштаб: 100% (при 0% области просмотра)
• Средний масштаб: 120% (при просмотре 40% -60%)
• Конечный масштаб: 100% (при 100% области просмотра)

Это приведет к увеличению разделителя на 20% от исходного размера на полпути, когда пользователь прокручивает страницу вниз.

Создание дизайна рекламного ролика с вращающимся круговым элементом №3

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

Вот как это сделать.

Повторяющийся столбец 1

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

Обновить настройки модуля Blurb

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

• Режим наложения: несколько

Затем также измените цвет значка на белый.

• Цвет значка: #ffffff

Обновить настройки делителя 3

Теперь давайте уберем эффект масштабирующей прокрутки на последнем (третьем) делителе в столбце 3.
Откройте настройки третьего делителя и обновите следующее:

На вкладке «Эффекты увеличения и уменьшения масштаба»…

• Включить масштабирование вверх и вниз: НЕТ

Отрегулируйте положение столбца 2 на мобильном устройстве

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

Откройте настройки для столбца 2 и обновите следующее:

Масштаб трансформации по оси X: 40% (на планшете), 15% (на телефоне)

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

Вот и все! Давайте проверим окончательный результат на живой странице.

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

Вот дизайн на планшете.

И вот оно по телефону.

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

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

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

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