Встроенные возможности преобразования Divi зарекомендовали себя как чрезвычайно полезный инструмент дизайна, позволяющий с легкостью изменять размер, поворачивать, наклонять или размещать любой элемент на странице. И вы даже можете превратить элементы в состояние наведения для потрясающих эффектов наведения. Итак, сегодня мы собираемся показать вам, как развернуть эти анимации в один клик.
Этот метод требует использования jQuery. Самое замечательное в этой технике то, что вы можете использовать встроенные параметры проектирования Divi для стилизации свойств преобразования, а затем включите (или отключите) эти свойства преобразования щелчком мыши. Это откроет массу уникальных возможностей для раскрытия содержание скрывается путем перемещения элементов при нажатии, а не при наведении курсора. И это также помогает уменьшить необходимость знать много CSS.
Давайте начнем.
Что нужно для начала
Для этого урока все, что вам нужно, это Divi. Чтобы начать, перейдите в панель управления WordPress. Создайте новую страницу, дайте ей название и продолжайте разработку в конструкторе Divi на переднем плане. Выберите вариант «Создать с нуля». Теперь вы готовы к работе!
Основная идея объяснена
Прежде чем я углублюсь в подробности этого урока, я в нескольких словах расскажу, как работает эта техника.
Каждый раз, когда вы настраиваете элемент (раздел, строку или модуль) в Divi, вы добавляете собственный CSS к этому элементу в фоновом режиме. Например, используя встроенные настройки Divi, вы можете добавить свойство поворота преобразования к модулю рекламного объявления, чтобы он поворачивал модуль по оси Z на 20 градусов.
Но за кулисами вы создаете собственный CSS, который добавляется в этот текстовый модуль и выглядит так:
.et_pb_text_0 {transform: rotateZ (20deg); }
Достаточно просто. Допустим, вы хотели добавить ту же опцию преобразования при наведении курсора. Вам просто нужно применить свойство преобразования для состояния наведения в настройках Divi Builder.
И код будет выглядеть примерно так:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Однако, если вы хотите развернуть свойство преобразования по щелчку, все должно работать немного по-другому. Вам нужно будет ввести некоторый код javascript, чтобы вызвать событие щелчка на элементе (или текстовом модуле).
В нашем текущем примере наша основная цель состоит в том, чтобы включать и выключать свойство преобразования "transform: rotateZ (20deg)" при нажатии. Легкий способ сделать это - создать собственный класс CSS со свойством transformer: none! Важно »в настройках страницы (или внешней таблицы стилей). Это выглядело бы примерно так.
.toggle-transform-animation {transform: none! важный; }
С этим CSS на месте. Мы можем добавить CSS-класс «toggle-transform-animation» к элементу модуля blurb, у которого есть свойство transform.
Это отключит (переопределит) свойство преобразования и предотвратит его первоначальную активацию, даже если к нему уже добавлен стиль свойства преобразования.
Теперь все, что вам нужно сделать, это активировать (добавить и удалить) этот пользовательский класс CSS, когда вы щелкаете элемент. Итак, каждый раз, когда мы щелкаем элемент, класс будет удален, а свойства преобразования (те, которые вы добавили с помощью Divi) будут развернуты.
Вот простой пример того, как это сделать. Сначала добавьте еще один класс CSS в модуль рекламного сообщения с именем «transform_target».
Затем перейдите в Divi > Параметры темы > Интеграция и добавьте следующий скрипт jQuery в заголовок ваш блог:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Вот и все ! Теперь каждый раз, когда вы нажимаете на модуль презентации, свойство преобразования, которое вы добавили в презентацию в Divi, будет включено или отключено.
Давайте теперь создадим пример, чтобы вы могли увидеть, как это может быть полезно для ваших собственных проектов.
Как поменять свойства трансформации на Click для отображения контента в Divi
В этом примере мы будем придерживаться простого примера аннотации, использованного выше. Далее мы добавим за ним дополнительную рекламу, чтобы при нажатии на верхнюю рекламу она отодвигалась в сторону, открывая содержание дополнительная реклама, расположенная позади документа.
Создание модулей Blurb спереди и сзади
Затем добавьте модуль представления в столбец 1.
Обновите содержание рекламное объявление, чтобы включить только заголовок (удалить содержимое основного текста по умолчанию), затем добавьте значок аннотации.
Затем обновите параметры проекта следующим образом:
Цвет фона: #4c5866
Цвет значка: #ffffff
Ориентация текста: центр
Цвет текста
: Легкая пользовательская маржа: 0px внизу
Пользовательские отступы: 15% вверху, 15% внизу, 10% слева, 10% справа
Мы вернемся к этому модулю позже, но сейчас нам нужно создать наш второй модуль Blurb, который будет служить «возвратным» модулем с дополнительным контентом.
Для этого продублируйте созданный вами модуль презентации.
Затем во втором модуле удалите значок презентации (и изображение по умолчанию) и снова добавьте основной контент в модуль. Затем обновите параметры проекта следующим образом:
Цвет фона: rgba (76,88,102,0.3)
Цвет текста: черный
Пользовательские отступы: 20% top
Поместите модуль перед Сводкой
Теперь, когда у наших двух рекламных объявлений есть стили, нам нужно вернуться к нашему переднему (верхнему) рекламному объявлению и расположить его над задним (нижним) рекламным объявлением. Для этого мы дадим ему абсолютное положение с высотой 100% и шириной 100%.
Сначала откройте настройки модуля верхней / передней презентации и обновите следующее:
высота: 100%;
ширина: 100%;
Затем добавьте следующий пользовательский код CSS к основному элементу:
позиция: абсолютная! важная; переход: все .5s;
Затем обновите индекс z следующим образом:
Z индекс: 2000
Абсолютное положение в сочетании со 100% высотой и шириной и индексом z гарантирует, что модуль рекламного объявления остается над модулем рекламного сообщения позади него. Свойство перехода на самом деле является продолжительностью перехода параметров преобразования, которые мы развернем при следующем щелчке. А «курсор: указатель» предназначен для изменения курсора так, чтобы элемент казался интерактивным для пользователя.
Добавление параметров преобразования и пользовательских классов в переднюю панель
Пришло время добавить наши свойства преобразования к переднему объявлению. Затем мы добавим пользовательские классы CSS, необходимые для нашего jQuery, чтобы переключать эти свойства при нажатии.
Под параметрами дизайна передней аннотации добавьте следующие свойства преобразования:
Шкала преобразования X и Y: 20%
Источник преобразования: верхний центр
Помните, что дизайн преобразования, который вы видите в этот момент, будет запускаться при щелчке. Мы просто используем конструктор Divi, чтобы получить желаемый дизайн. В этом случае передняя реклама сжимается и становится центрированной вверху, как значок, на который можно щелкнуть.
Как только вы закончите, добавьте два CSS-класса, необходимых для нацеливания на переднюю панель с помощью jQuery, следующим образом:
Класс CSS: toggle-transform-animation transform_target
(обязательно разделяйте каждое имя класса пробелом)
Затем добавьте следующий пользовательский фрагмент кода CSS, который будет использоваться для включения и отключения свойств преобразования с помощью jQuery.
.toggle-transform-animation {преобразование: нет! важно; }
Вы заметите, что ранее добавленные свойства преобразования blurb были отключены, потому что этот класс был применен к нему.
Теперь перейдите в Divi> Параметры темы> Интеграция и добавьте следующий скрипт jQuery в заголовок блога:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Давайте посмотрим на конечный результат.
Вы можете использовать этот пример для создания еще более впечатляющих дизайнов. Не стесняйтесь делиться своим мнением в разделе комментариев.
