Как использовать новые эффекты анимации Divi

Добро пожаловать в первую часть этой серии из 6 частей, в которой вы узнаете, как использовать новые параметры анимации Divi для создания потрясающих разделов страницы. Я собираюсь рассказать вам, как создавать различные разделы нашей живой демонстрационной страницы, чтобы показать вам методы добавления анимации на ваш сайт. Функции анимации действительно забавны и просты в использовании. А с Visual Builder вы можете увидеть, как ваше творение оживает на каждом этапе. Приходите и присоединяйтесь ко мне, когда мы исследуем силу анимации Divi.

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

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

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

Давайте начнем.

Вот краткий обзор того, что мы построим в этой серии

Часть 1 из серии

Секция 1

Раздел 2

Часть 2 серии

Раздел 3

Раздел 4

Часть 3 из серии

Раздел 5

Часть 4 из серии

Раздел 6

Часть 5 из серии

Раздел 7

Часть 6 серии

Раздел 8

Раздел 9

Подготовка элементов дизайна

Для первого раздела вам понадобятся два изображения. Первый - это полноэкранное фоновое изображение размером около 1280 × 800. Вот тот, который я использую:

Второе изображение - это отредактированная версия того же изображения, которое было перевернуто по вертикали и затемнено к низу. Это второе изображение будет служить фоном для вашего основного заголовка и должно иметь размер около 800 × 400.

Чтобы создать перевернутое изображение, откройте изображение в режиме предварительного просмотра и выберите «Инструменты»> «Отразить по вертикали» или откройте изображение в Photoshop, выберите «Изображение»> «Поворот изображения»> «Отразить холст по вертикали». Чтобы добавить эффект затемнения в нижнюю часть изображения, я использовал инструмент «Ластик» в режиме кисти с размером 800 пикселей и жесткостью 0%. Затем, удерживая Shift, перетащил кисть по нижнему краю.

Обязательно экспортируйте его как файл png.

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

Для второго раздела вам понадобятся два изображения. Первый должен иметь размер 730 × 490, как этот.

А второй должен иметь размер 525 × 660, как показано ниже.

Понимание терминологии анимации

Если вы еще этого не сделали, прочтите сообщение об обновлении функции, в котором представлены расширенные анимации. В конце поста Ник дает полезное определение / описание каждой из функций анимации, которые вы найдете в конструкторе. Понимание того, что на самом деле делают эти функции анимации, важно для процесса создания.

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

Как использовать новые эффекты анимации Divi

Подпишитесь на наш канал Youtube

Добавьте настройки новой страницы

На панели управления WordPress перейдите на Страницы> Добавить новый. Затем добавьте заголовок на свою страницу. Затем найдите «Настройки страницы Divi» в поле в правом верхнем углу страницы и выберите «Вкл.» Для точечной навигации. В поле «Атрибуты страницы» выберите «Пустая страница» для шаблона страницы. Наконец, нажмите кнопку «Использовать Divi Builder» и разверните Visual Builder, чтобы начать создание макета.

Раздел здания 1: Дизайн и анимация полноэкранного заголовка

Этот раздел заголовка будет вести себя так же, как модуль полноэкранного заголовка, настроенный на полноэкранный режим. Другими словами, когда сайт загружается, раздел заполняет всю ширину и высоту окна браузера независимо от размера окна. Но вместо использования модуля заголовка полной ширины мы собираемся использовать стандартный раздел и установить высоту 100vh. Таким образом, мы можем добавить в него текстовый модуль.

Используя Visual Builder, щелкните, чтобы изменить настройки раздела стандартного раздела, уже отображаемого по умолчанию при запуске построителя. Обновите следующее:

На вкладке "Содержание"…

Фоновое изображение: [введите свое фоновое изображение 1280 × 800]
Использовать эффект параллакса: ДА
Метод параллакса: истинный параллакс

На вкладке "Дизайн"…

Пользовательские отступы: 5% сверху, 0 пикселей справа, 5% снизу, 0 пикселей слева.

На вкладке "Дополнительно"…

Добавьте следующий настраиваемый CSS в поле Main Element:

min-height: 100vh

Эта одна строка css сообщает разделу, что нужно отображать 100% высоты области просмотра.

Сохранить настройки

Затем вставьте структуру с одним столбцом в вашу строку и добавьте текстовый модуль в столбец. Обновите настройки текстового модуля следующим образом:

На вкладке Content ...

Просто добавьте слово «Divi» в поле содержимого.

На вкладке "Дизайн"…

Шрифт текста: Освальд, прописные буквы (TT)
Размер шрифта текста: 14 пикселей
Цвет текста: # 08408e
Расстояние между буквами текста: 1.5em (вам нужно будет ввести это)
Ориентация текста: по центру
Специальная маржа: 2%
Стиль анимации: флип
Повтор анимации: один раз
Направление анимации: вправо
Продолжительность анимации: 2000 мс
Задержка анимации: 1100 мс
Интенсивность анимации: 100%
Начальная непрозрачность анимации: 0%
Кривая скорости анимации: легкость выхода

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

Вот HTML-код со встроенным стилем, необходимый для анимации:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

А вот CSS, необходимый для анимации:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

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

Теперь продолжим обновление настроек нашего текстового модуля:

На вкладке "Дополнительно"…

Добавьте следующую строку Custom CSS в поле Main Element:

text-indent: 1.5em

Сохранить настройки

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

На вкладке "Содержание"…

Добавьте следующий HTML-код в текстовую вкладку поля содержимого:

<p><span>Believing</span><br />is  Seeing</p>

На вкладке "Дизайн"…

Цвет текста: светлый
Шрифт текста: Освальд, прописные буквы (TT)
Размер шрифта текста: 8vw (вы должны ввести это; это делает размер шрифта 8% от ширины области просмотра)
Цвет текста текста: rgba (255,255,255,0,79)
Высота текстовой строки: 1,4 мкм
Ориентация текста: по центру
Стиль анимации: сложить
Направление анимации: вверх
Продолжительность анимации: 1800 мс
Задержка анимации: 0 мс
Интенсивность анимации: 60%

Сохранить настройки

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

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

На вкладке "Содержание"…

Фоновое изображение: [вставьте изображение 800 × 440]
Размер фонового изображения: По размеру
Расположение фонового изображения: вверху по центру
Повтор фонового изображения: без повтора

На вкладке "Дизайн"…

Использовать нестандартную ширину: ДА
Ед. изм: %
Специальная ширина: 50%
Пользовательское заполнение: 12% сверху, 0% справа, 5% снизу, 0% слева
Стиль анимации: слайд
Направление анимации: вверх
Задержка анимации: 300 мс
Интенсивность анимации: 20%

Этот эффект анимации сдвигает изображение вверх, как если бы оно поднималось из-за гор.

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

Три анимированных элемента здесь включают строку (которая скользит вверх), текстовый модуль с текстом «Верить - значит видеть» (который складывается из центра) и текстовый модуль с текстом «Divi» (который задерживается открыть вправо после того, как другие элементы остановятся). Комбинация действительно привлекает посетителя, целенаправленно и своевременно раскрывая различные фрагменты контента.

Строительная секция 2

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

Чтобы построить второй раздел, добавьте обычный раздел под предыдущим разделом. В разделе добавьте строку из двух столбцов (половина-половина).

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

На вкладке "Содержание"…

Введите следующий HTML-код в текстовую вкладку поля содержимого:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

На вкладке "Дизайн"…

Цвет текста: светлый
Шрифт текста: Монтсеррат
Размер шрифта текста: 18 пикселей
Высота текстовой строки: 1,8 м
Шрифт заголовка: Montserrat, полужирный (B), прописные (TT)
Размер шрифта заголовка: 39 пикселей (рабочий стол)
Высота строки заголовка: 2.2em
Нижнее поле: 50 пикселей
Стиль анимации: слайд
Направление анимации: вверх
Интенсивность анимации: 10%

Этот эффект анимации покажет блок текста, сдвинув его вверх.

Сохранить настройки

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

На вкладке "Содержание"…

Текст кнопки: Подробнее
URL кнопки: # (или как хотите)

На вкладке "Дизайн"…

Расположение кнопок: влево
Цвет текста: светлый
Использовать собственные стили для кнопки: ДА
Размер текста кнопки: 15 пикселей
Радиус границы кнопки: 0
Расстояние между буквами кнопки: 3 пикселя
Шрифт кнопок: Montserrat, жирный (B), прописные (TT)
Показать значок кнопки: ДА
Пользовательские отступы: 10 пикселей сверху, 30 пикселей справа, 10 пикселей снизу, 30 пикселей слева
Стиль анимации: слайд
Направление анимации: вниз
Задержка анимации: 100 мс
Интенсивность анимации: 10%

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

Вы пока не видите свой текст и кнопку, потому что в настоящее время это белый текст на белом фоне. Это нормально. Скоро мы добавим наш фон.

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

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

На вкладке "Дизайн"…

Высота: 260 пикселей

На вкладке "Дополнительно"…

Отключить видимость на рабочем столе

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

Сохранить настройки

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

На вкладке "Содержание"…

Цвета градиента фона столбца 1: # fe8840, rgba (238,78,78,0.9)
Столбец 1 Направление градиента: 135 градусов
Фоновое изображение столбца 2: [введите свое изображение 730 × 490]
Столбец 2 Расположение фонового изображения: вверху слева
Столбец 2: повторение фонового изображения: без повтора

На вкладке "Дизайн"…

Использовать нестандартную ширину: ДА
Настраиваемая ширина: 1366 пикселей
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1
Выровнять высоту столбца: ДА
Пользовательские отступы: 0 пикселей сверху, 0 пикселей справа, 0 пикселей снизу, 0 пикселей слева
Пользовательское заполнение столбца 1: 5% сверху, 7% справа, 5% снизу, 7% слева
Стиль анимации: сложить
Направление анимации: вверх
Продолжительность анимации: 800 мс

Этот эффект анимации раскроет весь ряд, сложив (или поставив) его на вид.

На вкладке "Дополнительно"…

Добавьте следующий настраиваемый CSS в поле Main Element:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Сохранить настройки

Затем добавьте строку из двух столбцов (от одной трети до двух третей) под строкой, которую вы только что закончили.

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

На вкладке "Дизайн"…

Высота: 400 пикселей

На вкладке "Дополнительно"…

Отключить видимость на рабочем столе

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

Сохранить настройки

Чтобы сэкономить время, щелкните правой кнопкой мыши и скопируйте текстовый модуль в левом столбце строки выше, содержащий текст «Время - деньги». Затем вставьте его в правый (две трети) столбца в строке ниже.

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

На вкладке "Содержание"…

Измените текст заголовка h1 на «Commute Like a Pro» в поле содержимого.

На вкладке "Дизайн"…

Цвет текста текста: # a8a8a8
Цвет текста заголовка: # 414159
Стиль анимации: слайд
Направление анимации: вниз
Интенсивность анимации: 10%

Этот эффект анимации показывает блок текста, сдвигая его вниз.

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

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

Цвет текста кнопки: # ff4823
Цвет границы кнопки: # ff4823
Цвет текста при наведении курсора на кнопку: # ff2323

Сохранить настройки

На последнем этапе отредактируйте настройки строки, обновив следующее:

На вкладке "Содержание"…

Цвет фона: #ffffff
Фоновое изображение столбца 1: [вставьте изображение 525 × 660]
Столбец 1 Расположение фонового изображения: вверху слева
Столбец 1: повторение фонового изображения: без повтора
Цвета градиента фона столбца 2: rgba (255,255,255,0.91), #ffffff
Столбец 2 Направление градиента: 135 градусов

На вкладке "Дизайн"…

Использовать нестандартную ширину: ДА
Настраиваемая ширина: 1040 пикселей
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1
Выровнять высоту столбца: ДА
Пользовательские отступы: 0 пикселей сверху, 0 пикселей справа, 0 пикселей снизу, 0 пикселей слева
Пользовательское заполнение столбца 2: 5% сверху, 7% справа, 5% снизу, 7% слева.
Стиль анимации: сложить
Направление анимации: вниз
Продолжительность анимации: 800 мс

Этот эффект анимации раскроет весь ряд, свернув его вниз.

На вкладке "Дополнительно"…

Добавьте следующий настраиваемый CSS под полем Main Element:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

Это все для этого раздела. Проверьте свои результаты.

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

Бонус: загрузите эти разделы для удобного импорта

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

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

Загрузить пакет макетов

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

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

СКАЧАТЬ

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

Чтобы использовать эти загрузки, сначала найдите заархивированный файл Animation_Effects_Part_1.zip в нашей папке загрузок. Разархивируйте его, чтобы увидеть следующие импортированные файлы.

Эффекты анимации, часть 1 (раздел 1) .json

Эффекты анимации, часть 1 (раздел 2) .json

Перейдите в админке WordPress к Divi> Библиотека Divi> Импорт и экспорт. Когда появится модальное окно переносимости, щелкните вкладку импорта и кнопку с надписью «Выбрать файл».

Выберите предпочитаемый файл json и нажмите «Импортировать макеты Divi Builder». После завершения импорта перейдите к сообщению или странице, в которую вы хотите добавить один из указанных выше разделов.

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

Заключение

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

Скоро

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

Вот что вы можете ожидать.

Раздел 3:

Раздел 4:

Пожалуйста, оставьте свои комментарии ниже.

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