Пропустить

Как создать анимированные разделы, нажав на Divi Builder

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

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

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

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

Этот метод требует использования jQuery. Основным преимуществом этого метода является то, что вы можете использовать встроенные параметры дизайна Divi, чтобы назначить стиль свойствам преобразования, а затем включить (или отключить) эти свойства преобразования одним щелчком мыши. Это откроет массу уникальных возможностей для обнаружения скрытого контента, перемещая элементы одним щелчком мыши, а не на эстакаде. И это также помогает уменьшить необходимость много знать CSS.

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

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

Для этого урока все, что вам нужно, это Divi. Чтобы начать, перейдите на панель инструментов WordPress. Создайте новую страницу, дайте заголовок своей странице и продолжайте оформление генератора Divi на переднем плане. Выберите опцию «Построить с нуля». Теперь вы готовы к работе!

Основная идея объяснила

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

Всякий раз, когда вы настраиваете элемент (раздел, линию или модуль) в Divi, вы добавляете пользовательский CSS к этому элементу в фоновом режиме. Например, используя встроенные параметры Divi, вы можете добавить свойство поворота преобразования в модуль blurb, чтобы он поворачивал модуль вдоль оси Z градусов 20.

Но за кулисами вы создаете собственный CSS, который добавляется в этот текстовый модуль и выглядит так:

.et_pb_text_0 {transform: rotateZ (20deg); }

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

И код будет выглядеть примерно так:

.et_pb_text_0: hover {transform: rotateZ (20deg); }

Однако, если вы хотите развернуть свойство трансформации для click, все будет работать немного иначе. Вам нужно будет ввести код JavaScript, чтобы вызвать событие нажатия на элемент (или текстовый модуль).

В нашем текущем примере нашей главной целью является включение и отключение свойства преобразования «transform: rotateZ (20deg)» для щелчка. Простой способ сделать это - создать собственный класс CSS со свойством transform: none! Важно »в настройках страницы (или внешней таблице стилей). Это будет выглядеть примерно так.

.toggle-transform-animation {transform: none! важный; }

С этим CSS на месте. Мы можем добавить CSS-класс «toggle-transform-animation» к элементу модуля blurb, который имеет свойство трансформации.

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

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

Вот простой пример того, как действовать. Сначала добавьте еще один класс CSS в модуль blurb с именем «transform_target».

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

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

Свойства Divi Transform при клике

Затем перейдите в раздел Divi> Параметры темы> Интеграция и добавьте следующий скрипт jQuery в начало вашего блога:

<script> jQuery (document) .ready (function () {jQuery ('. transform_target'). click (function () {jQuery (this) .toggleClass ('toggle-transform-animation');});}); </ Script>

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

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

Как поменять свойства трансформации на Click для отображения контента в Divi

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

Создание модулей Blurb спереди и сзади

Затем добавьте модуль представления в столбец 1.

Обновите содержимое текста макета, включив в него только заголовок (удалите содержимое тела по умолчанию), и добавьте значок презентации.

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

Цвет фона: #4c5866
Цвет значка: #ffffff
Ориентация текста: центр
Цвет текста
: Легкая пользовательская маржа: 0px внизу
Пользовательские отступы: 15% вверху, 15% внизу, 10% слева, 10% справа

Мы вернемся к этому модулю позже, но сейчас нам нужно создать наш второй модуль Blurb, который будет служить «возвратным» модулем с дополнительным контентом.

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

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

Цвет фона: rgba (76,88,102,0.3)
Цвет текста: черный
Пользовательские отступы: 20% top

Поместите модуль перед Сводкой

Теперь, когда наши два текста презентации стильные, мы должны вернуться к нашему модулю передней презентации (вверху) и расположить его над модулем задней презентации (внизу). Для этого мы дадим ему абсолютную позицию с высотой 100% и шириной 100%.

Сначала откройте настройки модуля верхней / передней презентации и обновите следующее:

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

высота: 100%;
ширина: 100%;

Свойства Divi Transform при клике

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

позиция: абсолютная! важная; переход: все .5s;

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

Z индекс: 2000

Абсолютное положение в сочетании с высотой и шириной 100% и индексом z гарантирует, что модуль размытия остается над размытием позади него. Свойство transition на самом деле представляет собой продолжительность перехода параметров преобразования, которые мы развернем до следующего щелчка. И «курсор: указатель» предназначен для изменения курсора так, чтобы элемент казался пользователю кликабельным.

Добавление параметров преобразования и пользовательских классов в переднюю панель

Сейчас самое время добавить наши свойства преобразования в текст презентации раньше. Затем мы добавим пользовательские классы CSS, необходимые нашему jQuery для переключения этих свойств на click.

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

Шкала преобразования X и Y: 20%

Преобразование происхождения: верхний центр

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

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

Класс CSS: toggle-transform-animation transform_target

(обязательно разделяйте каждое имя класса пробелом)

Свойства Divi Transform при клике

Легко создайте свой интернет-магазин

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

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

.toggle-transform-animation {transform: none! важный; }

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

Теперь перейдите в раздел Divi> Параметры темы> Интеграция и добавьте следующий скрипт jQuery в заголовок блога:

<script> jQuery (document) .ready (function () {jQuery ('. transform_target'). click (function () {jQuery (this) .toggleClass ('toggle-transform-animation');});}); </ Script>

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

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля2
чирикать
Регистрация