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

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

Вы хотите изменить стиль нескольких элементов Дива при наведении или после клика?

В этом уроке мы покажем вам, как изменить стиль нескольких элементов при наведении или нажатии. Дива

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

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

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

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

обследование

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

Изменение элементов при наведении на кнопку

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

Модификация элементов после нажатия на кнопку

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

Начнем с создания страницы с помощью Divi Builder.

Смотрите также: Divi: Как создать меню с вращающимся колесом при наведении

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

Линии Divi преобразованы во вкладки

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

Затем нажмите Начать строительство (Построить с нуля)

Линии Divi преобразованы во вкладки

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

Часть 1: Дизайн макета раздела

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

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

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

  • Фон: #ffffff

Добавим разделитель разделов

  • Разделитель (сверху)
    • Стиль: см. скриншот
    • Цвет: #ffffff
    • Высота: 5vw
  • Разделитель (Нижний)
    • Стиль: см. захват
    • Цвет: #ffffff
    • Высота: 5vw
    • Прокладка (сверху и снизу): 6vw

Изображение (до наведения)

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

Затем загрузите изображение, которое хотите выделить. 

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

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

Изображение (при наведении или после клика)

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

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

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

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

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

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

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

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

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

Добавьте текстовый модуль

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

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

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

Обратите внимание, что некоторые слова в тексте окружены тегами пролет. Вот как мы можем настроить эти слова позже с помощью пользовательского CSS.

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

  • Заголовок 3:
    • Шрифт: Монтсеррат
    • Толщина шрифта Толщина шрифта: очень жирный
    • Стиль: ТТ
    • Размер текста: 60 ​​пикселей (компьютер и планшет), 40 пикселей (телефон)
    • Расстояние между буквами: 0,06em
    • Высота строки: 2 см

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

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

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

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

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

В колонку добавить новый модуль Пуговичка.

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

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

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

Читайте также: Divi: как добавить значок гамбургера в модуль меню

  • Расстояние между буквами кнопки: 4 пикселя
  • Шрифт: Монтсеррат
  • Вес шрифта: полужирный
  • Стиль шрифта кнопки: TT
  • Поле (снизу): 0px
  • Прокладка (сверху и снизу): 1.5 см
  • Прокладка (слева и справа): 4em

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

Вы хотите продавать свою продукцию в Интернете?

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавьте класс CSS в модуль Text.

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

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

Добавьте класс CSS в модуль Button.

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

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

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

Часть 3. Добавьте пользовательский код для изменения стилей при наведении или нажатии

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

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

Чтобы добавить код, добавьте модуль «Код» под кнопкой в ​​нижней части.

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

Затем вставьте следующий JQuery. Не забудьте заключить код в теги script, поскольку мы добавляем код в документ 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

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

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

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

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

Затем вставьте остальную часть 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 используют ту же концепцию для изменения стиля элемента, когда раздел (или кнопка) имеет новый класс.

Элементы Divi при наведении

Окончательный результат (обзор)

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

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

Меняйте стили по клику

Чтобы добавить функцию щелчка, замените текущий 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('Précédent...');
            } else {
                $this.text('Suite...');
            }
        });
    });
})( jQuery );

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

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

Скачайте DIVI прямо сейчас!!!

Заключение

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

Вы можете использовать эту технику для различных вариантов использования (до и после, CTA и т. д.).

Конечно, полезно немного знать CSS и JS/JQuery. Но, как вы видели в этом уроке, вам не нужны глубокие знания программирования, чтобы получить потрясающие результаты!

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

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

%d блоггеры, как этой странице: