Использование анимации складывания Divi для создания цветущих пятен
Опубликовано: 2017-10-16Добро пожаловать в четвертую часть этой серии из 6 частей, в которой вы узнаете, как использовать новые параметры анимации Divi для создания потрясающих разделов страницы. Я собираюсь рассказать вам, как создавать различные разделы нашей живой демонстрационной страницы, чтобы показать вам методы добавления анимации на ваш сайт. Функции анимации действительно забавны и просты в использовании. А с Visual Builder вы можете увидеть, как ваше творение оживает на каждом этапе. Приходите и присоединяйтесь ко мне, когда мы исследуем возможности анимации Divi.
В нашем последнем посте я показал вам несколько творческих способов разработки и анимации 4 модулей аннотации, организованных для пошагового процесса.
Сегодня мы собираемся создать Раздел 6 нашей демонстрационной страницы анимации. В этом разделе демонстрируется отличный дизайн и анимация для отображения избранных продуктов или загружаемых материалов. Использование цвета и эффект цветения анимации в этих модулях аннотации действительно выделяют этот раздел.
Давайте нырнем!
Вот краткий обзор того, что мы будем строить в сегодняшнем посте
Использование анимации складывания Divi для создания цветущих пятен
Подпишитесь на наш канал Youtube
Строительная секция 6
Добавьте и настройте свой раздел
Используя Visual Builder, давайте начнем с добавления еще одного обычного раздела в наш макет. Затем добавьте в свой раздел строку из трех столбцов (половина, одна четвертая, одна четвертая).
Прежде чем мы добавим наш первый модуль, перейдите в настройки раздела и обновите следующее:
На вкладке "Содержание"…
Цвет фона: # 00252d
На вкладке "Дизайн"…
Пользовательские отступы: 80 пикселей сверху, 80 пикселей снизу
Сохранить настройки
Добавить заголовок с помощью текстового модуля
Теперь вернемся к нашему ряду из трех столбцов и добавим текстовый модуль в левый столбец. Обновите настройки текста следующим образом:
На вкладке "Содержание"…
Добавьте следующий заголовок h1 в текстовую вкладку поля содержимого:
<h1>Build Like You Mean It</h1>
На вкладке "Дизайн"…
Шрифт заголовка: латинский, полужирный (B)
Размер шрифта заголовка: 38 пикселей
Цвет текста заголовка: #ffffff
Высота строки заголовка: 1,3 мкм
Пользовательское поле: нижнее 20 пикселей
Стиль анимации: слайд
Направление анимации: влево
Интенсивность анимации: 16%
Сохранить настройки
Добавить текст с помощью другого текстового модуля
Обычно вы, вероятно, просто добавите остальной текст под заголовком h1 в том же текстовом модуле. Но поскольку мы хотим добавить другой эффект анимации к заголовку h1 и тексту под ним, нам нужно будет создать еще один текстовый модуль. Идите вперед и добавьте текстовый модуль под тем, который вы только что создали, и обновите настройки следующим образом:
На вкладке "Содержание"…
Содержание: «Lorem ipsum dolor sit amet, conctetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl ».
На вкладке "Дизайн"…
Цвет текста: светлый
Размер шрифта текста: 18 пикселей
Цвет текста текста: rgba (255,255,255,0,66)
Высота текстовой строки: 1.9em
Пользовательское поле: 40 пикселей снизу
Стиль анимации: слайд
Направление анимации: влево
Интенсивность анимации: 8%
Сохранить настройки
Добавить кнопку
Теперь давайте добавим кнопочный модуль под двумя текстовыми модулями в левом столбце. Затем обновите настройки следующим образом:
На вкладке "Содержание"…
Buttom Text: Загрузить все
URL кнопки [введите URL]
На вкладке "Дизайн"…
Использовать собственные стили для кнопки: ДА
Размер текста кнопки: 15 пикселей
Цвет текста кнопки: # 01254c
Цвет фона кнопки: # ffcd1c
Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 65 пикселей
Расстояние между буквами кнопки: 1 пиксель
Шрифт кнопок: полужирный (B), прописные (TT)
Пользовательские отступы: 10 пикселей сверху, 30 пикселей справа, 10 пикселей снизу, 30 пикселей слева
Стиль анимации: слайд
Направление анимации: влево
Интенсивность анимации: 16%
Не забудьте добавить этот замечательный эффект свечения, используя свойство css тени блока. Найдите поле Main Element в Custom CSS и добавьте следующее:
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);
Сохранить настройки
Добавьте свой первый модуль Blurb
Это все для нашей левой колонки. Теперь давайте добавим модуль Blurb в средний столбец (это первая четверть столбца).
Обновите настройки следующим образом:
На вкладке "Содержание"…
Название: Divi
Значок использования: ДА
Значок: [выберите значок]
Цвета градиента фона: # 8b56ff, # 5d3dff
Тип градиента: линейный
Направление градиента: 140 градусов
На вкладке "Дизайн"…
Цвет значка: #ffffff
Цвет текста: светлый
Ориентация текста: по центру
Шрифт заголовка: полужирный (B), прописные (TT)
Расстояние между буквами заголовка: 10 пикселей
Специальная маржа: минимум 12%
Пользовательские отступы: 40 пикселей сверху, 30 пикселей справа, 30 пикселей снизу, 30 пикселей слева
Стиль анимации: сложить
Направление анимации: влево
Задержка анимации: 200 мс
На вкладке "Дополнительно"…
Здесь мы можем добавить этот эффект свечения к нашему модулю и немного отступить от заголовка.
Добавьте следующий CSS в поле Main Element:
border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);
Добавьте следующий CSS в поле Заголовок объявления:
text-indent: 10px;
Сохранить настройки
Дублируйте модуль Blurb, чтобы построить следующие три Blurbs
Теперь, когда у нас спроектирован и анимирован наш первый модуль Blurb, мы можем продублировать его, чтобы создать оставшиеся размытия.
Наведите указатель мыши на модуль Blurb и щелкните значок дублирующего модуля. В новом дублированном модуле, который появляется ниже, обновите настройки следующим образом:
На вкладке "Содержание"…
Название: Bloom
Значок: [выберите новый значок]
Цвета градиента фона: # ff56f9, # c43dff
На вкладке "Дизайн"…
Направление анимации: вниз
На вкладке "Дополнительно"…
Замените CSS в поле Main Element следующим:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);
Сохранить настройки
Сделайте еще одну копию модуля рекламного объявления и перетащите ее в крайний правый столбец. Затем обновите этот модуль Blurb со следующими настройками:
На вкладке "Содержание"…
Название: Extra
Значок: [выберите новый значок]
Цвета градиента фона: # 56ffda, # 38d5ea.
На вкладке "Дизайн"…
Направление анимации: вверх
На вкладке "Дополнительно"…
Замените CSS в поле Main Element следующим:
border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);
Сделайте еще одну копию модуля рекламного объявления, который вы только что обновили, в правом столбце, чтобы он отображался непосредственно под ним. Затем обновите этот модуль Blurb со следующими настройками:
На вкладке "Содержание"…
Название: Монарх
Значок: [выберите новый значок]
Цвета градиента фона: # f2743a, # ff5656
На вкладке "Дизайн"…
Направление анимации: вправо
На вкладке "Дополнительно"…
Замените CSS в поле Main Element следующим:
border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
Сохранить настройки
Теперь давайте исправим интервалы, обновив настройки строки следующим образом:
На вкладке "Дизайн"…
Использовать нестандартную ширину: ДА
Настраиваемая ширина: 1366 пикселей
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 2
Пользовательские отступы: 80 пикселей сверху, 0 пикселей справа, 160 пикселей снизу, 0 пикселей слева
Coumn 1 Custom Padding: верх 140 пикселей
Постройте второй ряд
Теперь мы готовы создать следующую строку для нашего раздела. Чтобы ускорить процесс, мы собираемся дублировать и копировать элементы дизайна из наших ранее разработанных строк и модулей.
Сначала давайте добавим в наш раздел новую строку из одного столбца. Затем обновите настройки строки следующим образом:
Использовать нестандартную ширину: ДА
Настраиваемая ширина: 1366 пикселей
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 2
Сохранить настройки
Затем скопируйте первый текстовый модуль в первой созданной вами строке, который содержит заголовок h1. Затем обновите настройки следующим образом:
На вкладке "Содержание"…
Замените текущий тег h1 следующим:
<h1>Don't Settle for Less</h1>
На вкладке "Дизайн"…
Ориентация текста: по центру
Стиль анимации: флип
Интенсивность анимации: 70%
Сохранить настройки
Затем скопируйте модуль кнопок из предыдущей строки и вставьте его под текстовый модуль, который вы только что закончили обновлять, во второй строке. Затем обновите модуль кнопок следующим образом:
На вкладке "Содержание"…
Текст кнопки: Присоединяйтесь сегодня
На вкладке "Дизайн"…
Расположение кнопок: по центру
Стиль анимации: флип
Интенсивность анимации: 70%
Сохранить настройки
Теперь последний ряд. Создайте новую строку со структурой "половина-половина-половина столбца". Перед добавлением модулей обновите настройки строки следующим образом:
На вкладке "Дизайн"…
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 2
Сохранить настройки
Затем скопируйте фиолетовый модуль Blurb «Divi» из предыдущей строки и вставьте его в левый столбец новой строки. Затем обновите следующие настройки:
На вкладке "Содержание"…
Название: Строитель
Значок: [выберите новый значок]
Цвета градиента фона: # ff568e, # ff3d5d
На вкладке "Дополнительно"…
Замените CSS в поле Main Element следующим:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);
Сохранить настройки
Затем скопируйте сине-зеленый модуль рекламного сообщения «Extra» в верхнюю часть крайнего правого столбца в первой созданной вами строке. Затем вставьте его в правый столбец вашей новой третьей строки.
Затем обновите настройки рекламного сообщения следующим образом:
На вкладке "Содержание"…
Название: Serene
Значок: [выберите новый значок]
Цвета градиента фона: # 3da4ff, # 385eea.
На вкладке "Дополнительно"…
Замените CSS в поле Main Element следующим:
border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);
Сохранить настройки
Вот и все.
Бонус: загрузите эти разделы для удобного импорта
В качестве дополнительного бонуса мы упаковали разделы, построенные в сегодняшнем руководстве, в бесплатную загрузку, которую вы можете получить, используя форму подписки по электронной почте ниже. Просто введите свой адрес электронной почты, и появится кнопка загрузки. Не беспокойтесь о «повторной подписке», если вы уже являетесь участником нашего информационного бюллетеня Divi. Повторный ввод адреса электронной почты не приведет к появлению новых писем или дубликатов. Он просто откроет загрузку.
Наслаждаться!
Загрузить пакет макетов
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы использовать эти загрузки, сначала найдите заархивированный файл Animation_Effects_Part_4.zip в нашей папке загрузок. Разархивируйте его, чтобы увидеть следующие импортированные файлы.
Эффекты анимации, часть 4 (раздел 1) .json
Эффекты анимации, часть 4 (раздел 2) .json
Перейдите в админке WordPress к Divi> Библиотека Divi> Импорт и экспорт. Когда появится модальное окно переносимости, щелкните вкладку импорта и кнопку с надписью «Выбрать файл».
Выберите предпочитаемый файл json и нажмите «Импортировать макеты Divi Builder». После завершения импорта перейдите к сообщению или странице, в которую вы хотите добавить один из указанных выше разделов.
Активируйте визуальный конструктор. Перейдите к той части страницы, в которую вы хотите добавить один из указанных выше разделов. Когда вы щелкните значок добавления нового раздела, вам будет предложена опция «Добавить из библиотеки». Выберите этот вариант и выберите нужный макет.
Заключение
Надеюсь, вам понравилось вместе создавать этот потрясающий раздел. Сочетание цвета, светящихся теней и креативной анимации делает этот макет выдающимся для демонстрации ваших собственных загрузок или продуктов.
Скоро
В части 5 я собираюсь показать вам, как успешно включить стиль анимации Roll на мобильные телефоны в ваши разделы.
Я с нетерпением жду вашего ответа в комментариях ниже.
Ваше здоровье!