Получить мгновенный хостинг с Plaseor и Premizer Pro

С CDN, SSL и резервными копиями.

Начните сегодня

Как превратить курсор в творческую кнопку при наведении курсора на элемент с помощью Divi

Rifat Divi Учебники Jul 8, 2021

Что, если вы наведете указатель мыши на элемент, и он станет кнопкой, и щелчок по ней перенаправит вас на другую страницу? Мы часто устанавливаем кнопку внизу или сбоку галереи изображений или плиток статей / продуктов, чтобы перейти на страницу с подробными сведениями об этом элементе. Что делать, если кнопка не выставлена визуально? Мы устанавливаем его с помощью эффекта наведения мыши, так что мышь становится кнопкой, как только она приземляется на плитки изображения или статьи и щелкает в любом месте определенной области, которая приведет нас на нужную страницу. Да! С Divi у нас есть много возможностей для настройки нашего веб-сайта и сегодняшнего урока о том, как превратить курсор в творческую кнопку при наведении курсора на элемент. Разве это не увлекательно?

Так что не будем ждать дальше и перейдем к уроку.

Скрытый пик

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

Часть первая: структура строительных элементов

Добавьте страницу из своей панели управления WordPress и откройте ее с помощью конструктора Divi. Двигайтесь вперед с «Строить с нуля».

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Добавление: Новый раздел

Фоновый цвет

Мы добавим белый цвет в качестве фона к нашему начальному разделу.

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

Интервал

Теперь на вкладке дизайна добавьте некоторый интервал в раздел.

  • Верхний отступ: 80 пикселей
  • Нижний отступ: 0 пикселей

Добавление: новая строка

Структура столбца

Теперь мы добавим в наш раздел строку из двух столбцов.

Размеры

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

  • Максимальная ширина: 2580 пикселей

Интервал

Теперь внесем некоторые изменения в интервал.

  • Верхний отступ: 0 пикселей
  • Нижний отступ: 0 пикселей

Добавление: модуль изображения в столбец 1

Добавить изображение

Теперь добавьте модуль изображения в столбец 1 и добавьте изображение по вашему выбору.

Добавить ссылку

Теперь добавьте ссылку на это изображение.

Масштаб наведения

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

  • Оба: 90%

CSS-класс

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

  • Класс CSS: изображение-курсор

Добавление: текстовый модуль 1 в столбец 1

H3 Content

Мы добавим текстовый модуль в столбец 1 и добавим контент H3 по мере необходимости.

Настройки контента H3

Измените настройки содержимого H3 на вкладке дизайна.

  • Шрифт заголовка 3: Актер
  • Цвет текста заголовка 3: # 000000
  • Размер текста заголовка 3: рабочий стол: 35 пикселей, планшет: 28 пикселей и телефон: 22 пикселей.
  • Высота строки заголовка 3: 1,4 em

Интервал

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

  • Нижнее поле: 15 пикселей

Добавление: текстовый модуль 2 в столбец 1

Текстовый контент

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

Настройки текстового содержимого

Измените настройки текстового содержимого на вкладке дизайна.

  • Шрифт заголовка 3: Актер
  • Цвет текста заголовка 3: # 75BAFF
  • Размер текста заголовка 3: рабочий стол: 22 пикселя, планшет: 18 пикселей и телефон: 15 пикселей.
  • Расстояние между буквами текста: 0,5 пикселей
  • Высота строки заголовка 3: 1,4 em

Добавление: кнопочный модуль в столбец 1

Текст кнопки

Наконец, добавьте модуль кнопок в столбец 1 и добавьте соответствующую копию.

Настройки текста кнопки

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

  • Использовать пользовательские стили для кнопки: Да
  • Цвет текста кнопки: # 000000
  • Ширина границы кнопки: 0 пикселей
  • Радиус границы кнопки: 1px
  • Шрифт кнопки: Актер
  • Показать значок кнопки: Да
  • Расположение значка кнопки: слева
  • Показывать значок только при наведении курсора на кнопку: Нет

Интервал

Отрегулируйте значения интервала.

  • Нижнее поле: 80 пикселей
  • Нижний отступ: 20 пикселей
  • Отступ справа: 30 пикселей

Коробка Тень

Завершите настройку модуля, применив следующие настройки тени блока:

  • Горизонтальное положение тени блока: 0 пикселей
  • Вертикальное положение тени блока: 2 пикселя
  • Цвет тени: # 000000

Дублировать контент

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

Теперь мы клонируем первый столбец.

Теперь продублируйте всю строку и измените ее содержимое.

Часть вторая: добавление курсора

Добавить новую строку

Структура столбца

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

Интервал

Откройте настройки строки и внесите некоторые изменения, как указано ниже.

  • Верхний отступ: 0 пикселей
  • Нижний отступ: 0 пикселей

Добавление: текстовый модуль для курсора

Добавить копию

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

Фоновый цвет

Затем добавьте цвет фона.

  • Цвет фона: # 47669b

Настройки текста

На вкладке «Дизайн» измените стиль текста.

  • Шрифт текста: Актер
  • Толщина шрифта текста: полужирный
  • Стиль шрифта текста: прописные.
  • Цвет текста: #ffffff
  • Расстояние между буквами текста: 2 пикселя
  • Выравнивание текста: по центру

Размеры

Сделайте некоторые изменения в разделе размеров.

  • Ширина: 150 пикселей
  • Высота: 150 пикселей

Граница

Мы изменим настройки границы, чтобы сделать этот круг.

  • Все углы: 100 пикселей

Коробка Тень

Мы также добавим тень от лайтбокса.

  • Сила размытия тени коробки: 0 пикселей
  • Сила распространения тени коробки: 20 пикселей
  • Цвет тени: rgba (7,213,255,0.14)

CSS-класс

Затем мы дадим нашему модулю класс CSS.

  • Класс CSS: курсор

Основной элемент CSS

Теперь добавьте код CSS в поле основного элемента.

transition: all .1s linear;
pointer-events: none;
 
display: flex;
justify-content: center;
align-items: center;

Должность

Теперь мы закончим этот модуль, внеся некоторые изменения в раздел положения на вкладке «Дополнительно».

  • Позиция: фиксированная
  • Расположение: вверху слева
  • Индекс Z: 2

Добавление: модуль кода

Теперь добавьте модуль кода под последним текстовым модулем. Добавьте теги Style и Scripts внутри модуля кода.

Добавить код CSS

Вставьте следующий код CSS в файл Style .

.hide-cursor {
cursor: none;
}
 
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
 
visibility: hidden;
opacity: 0;
}
 
.show-cursor {
visibility: visible !important;
opacity: 1;
}

Добавить код JQuery

Вставьте следующий код CSS в файл Script.

jQuery(document).ready(function($){
 
var cursor = $('.cursor');
 
$('.image-cursor').mousemove(function(e){
 
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
 
});
 
$('.image-cursor').mouseleave(function() {
 
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
 
});
 
});

Конечный результат

Вот как выглядит наш окончательный дизайн. Потрясающе!

Заключение

Сегодняшнее руководство было основано на том, как сделать свой веб-сайт более интерактивным. Divi дает вам прекрасную возможность привлечь больше внимания посетителей к вашему веб-сайту, сделав его чистым и красивым. Надеюсь, вам понравился сегодняшний урок, и если да, то поделиться будет УДИВИТЕЛЬНЫМ!