Как изменить стиль нескольких элементов при наведении курсора или клике в Divi

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

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

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

Sneak Peek

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

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

А вот тот же дизайн макета раздела, который изменяется нажатием кнопки. Обратите внимание, что текст кнопки также изменяется при нажатии.

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

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

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

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

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

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

Часть 1: Разработка макета сечения

Для начала создайте новую строку из двух столбцов.

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

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

• Цвет фона: #ffffff

• Стиль верхнего делителя: см. Снимок экрана
• Цвет верхнего разделителя: #ffffff
• Высота верхнего разделителя: 5vw

• Стиль нижнего разделителя: такой же
• Цвет нижнего разделителя: #ffffff
• Высота нижнего разделителя: 5vw

• Набивка: 6vw сверху, 6vw снизу

Перед изображением

В левом столбце строки из двух столбцов добавьте новый модуль изображения.

Затем загрузите изображение, которое хотите продемонстрировать. В этом руководстве мы используем изображение из пакета макетов Learning Management (LMS) размером примерно 800 на 550 пикселей.

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

• Выравнивание изображения: по центру
• Принудительная полная ширина: ДА

После изображения

Затем мы собираемся создать еще одно изображение, которое мы будем показывать, когда мы наводим / нажимаем кнопку.

Чтобы создать изображение, продублируйте предыдущий модуль изображения.

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

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

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

На вкладке «Дизайн» измените прозрачность в параметрах фильтра, чтобы изображение было полностью невидимым.

• Непрозрачность: 0%

Добавить заголовок текста

В правом столбце добавьте новый текстовый модуль.

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

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Обратите внимание, что некоторые слова в тексте заключены в теги span. Это сделано для того, чтобы мы могли настроить таргетинг и стилизацию этих слов позже с помощью некоторого настраиваемого CSS.

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

• Шрифт заголовка 3: Montserrat
• Толщина шрифта заголовка 3: Ультра полужирный
• Стиль шрифта заголовка 3: TT
• Размер текста заголовка 3: 65 пикселей (компьютер и планшет), 40 пикселей (телефон).
• Интервал между буквами заголовка 3: 0,8 em
• Высота строки заголовка 3: 1,3 em

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

Создать раздел для кнопки

Создайте новый обычный раздел под текущим разделом.

Затем добавьте в раздел строку из одного столбца.

Добавить кнопку

В столбце добавьте новый модуль кнопок.

Измените текст кнопки на «Посмотреть после».

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

• Использовать собственные стили для кнопки: ДА
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: #ffffff
• Фон кнопки: # 4b4baf
• Фон кнопки (при наведении): # 67ddc1
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 4 пикселя
• Шрифт кнопки: Montserrat
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопки: TT

Часть 2: Добавление классов CSS к элементам

Теперь, когда наш дизайн готов, мы собираемся выполнить остальные изменения дизайна, используя собственный код (CSS и JQuery). Но прежде чем мы начнем добавлять наш собственный код, нам нужно добавить классы CSS ко всем элементам, которые мы хотим изменить при наведении / нажатии кнопки.

Добавить класс CSS в раздел

Чтобы добавить класс CSS в раздел, откройте настройки раздела и щелкните вкладку «Дополнительно». Затем введите следующий класс CSS:

• Класс CSS: et-change-style_section

Добавить класс CSS к изображениям

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

• Класс CSS: et-before-image

Это будет изображение, которое отображается «перед» наведением / щелчком кнопки.

Используя модальное окно слоев, откройте настройки для второго изображения (того, которое скрыто с помощью фильтра непрозрачности) и добавьте следующий класс CSS:

• Класс CSS: et-after-image

Это будет изображение, которое отображается «после» наведения / нажатия кнопки.

Добавить класс CSS в текст

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

• Класс CSS: et-style-text

Добавить класс CSS к кнопке

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

• Класс CSS: et-toggle-button

Нам нужен этот класс, чтобы нацелиться на кнопку для функциональности наведения / щелчка в коде позже.

Часть 3: добавление собственного кода для изменения стилей при наведении курсора или клике

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

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

Чтобы добавить код, добавьте модуль кода под кнопкой в ​​нижнем разделе.

Вставить код jQuery

Затем вставьте следующий JQuery. Обязательно заключите код в теги сценария, потому что мы добавляем код в документ HTML (а не в файл JS).

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

Если вы посмотрите на код, вы должны узнать классы CSS, которые мы добавили к кнопке и разделу.

Класс кнопки («.et-toggle-button») используется для нацеливания на элемент, который будет запускать функцию при наведении курсора.

При наведении указателя мыши функция найдет элемент с классом раздела «.et-change-style_section» и переключит / добавит новый класс («.et-change-style-active») при наведении курсора на кнопку.

Кнопка также используется (через «$ this») для переключения нового класса («.et-toggle-button_active») в состоянии наведения.

Ключом к изменению стилей этих элементов при наведении указателя мыши является добавление / переключение этих дополнительных новых классов CSS в раздел и кнопку.

Например, как только раздел с классом «.et-change-style_section» получает этот дополнительный класс («.et-change-style_active»), мы можем использовать Custom CSS, чтобы изменить стиль раздела, изначально предоставленного ему через встроенные опции Divi.

Изменение стиля элементов с помощью пользовательского CSS

Откройте модуль кода и вставьте следующий настраиваемый CSS над сценарием JQuery, не забудьте заключить его в необходимые теги стиля.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

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

Затем вставьте следующий дополнительный CSS в теги стиля.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Поскольку родительский раздел получает класс при наведении курсора, вы можете настроить таргетинг на дочерние элементы раздела (например, изображения), используя тот же класс CSS. Но поскольку это класс в родительском контейнере / разделе, класс CSS должен предшествовать классу элемента, который вы хотите изменить. В этом примере класс CSS («.et-change-style_active»), присвоенный родительскому разделу, идет перед классом, имеющим дочерние изображения («.et-after-image» и «.et-before-image»).

CSS для последующего изображения будет показывать изображение при наведении курсора. И CSS для предыдущего изображения будет скрывать изображение при наведении курсора на кнопку. В результате исходное изображение меняется на новое при наведении курсора на кнопку.

Затем вставьте остальную часть CSS в теги стиля:

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

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

Окончательный результат (при наведении)

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

Изменение стилей при нажатии вместо наведения

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

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

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Вот окончательный результат.

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

Возможность настраивать таргетинг и изменять стиль нескольких элементов на странице при наведении курсора или нажатии на что-либо - полезный навык в веб-дизайне. Вы можете использовать эту технику в различных случаях (до и после, призывы к действию и т. Д.). Конечно, это помогает немного знать CSS и JS / JQuery. Но, как вы видели в этом руководстве, вам не нужно знать тон кода, чтобы получить удивительные результаты!

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

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