Как добавить стилизованный и перевернутый курсор на страницу Divi

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

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Создать новую страницу / открыть существующую

Создать новую страницу или открыть существующую

Начните с создания новой страницы или открытия существующей.

Загрузить макет по вашему выбору

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

Добавить новый раздел в конец страницы

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

Интервал

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

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

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

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

Продолжите, добавив строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя модули, откройте настройки строки и удалите всю нестандартную ширину желоба в настройках размера.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Удалите также все стандартные верхние и нижние отступы.

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

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

Оставьте поле содержимого пустым

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

Размеры

Перейдите на вкладку дизайна и сформируйте модуль, используя нестандартную ширину и высоту для разных размеров экрана:

• Ширина:
  • Рабочий стол: 100 пикселей
  • Таблетка: 60 ​​пикселей
  • Телефон: 40 пикселей
• Рост:
  • Рабочий стол: 100 пикселей
  • Таблетка: 60 ​​пикселей
  • Телефон: 40 пикселей

Граница

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

• Все углы: 100%
• Ширина границы: 3 пикселя
• Цвет границы: #ffffff

Режим смешивания

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

• Режим наложения: разница

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

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

transition: all .1s linear;
pointer-events: none;

Позиция

Мы также будем использовать фиксированное положение для модуля.

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

CSS-класс

И мы завершим настройку модуля, назначив собственный класс CSS на вкладке «Дополнительно».

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

2. Добавить функциональность

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

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

Добавить теги стиля и сценария

Мы объединим немного кода CSS и JQuery, так что продолжайте и добавьте теги стиля и сценария в свой модуль кода.

Открытие кода JQuery

Затем скопируйте и вставьте следующие открывающие строки кода JQuery между тегами скрипта:

jQuery(document).ready(function($){
});

Модуль изменения положения курсора

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

$('.cursor').insertAfter('.et_builder_inner_content');

Удалить курсор страницы по умолчанию

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

body {
cursor: none;
}

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

Затем мы позволим курсору отслеживать движения посетителей, используя следующие строки кода JQuery:

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

Эффект переключения при наведении курсора на конкретный модуль

Добавить класс увеличения CSS

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

.increase-size {
transform: scale(5);
background-color: white;
}

Все кнопочные модули

Мы переключим этот класс CSS с помощью некоторого кода JQuery. Приведенный ниже код нацелен на все кнопочные модули на вашей странице Divi один за другим.

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Специальный кнопочный модуль

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

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

Затем замените класс CSS в коде, который вы использовали на предыдущем шаге. Вот и все!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Предварительный просмотр

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

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как создать собственный курсор для вашей страницы Divi. Мы также показали вам, как использовать этот настраиваемый курсор, чтобы вызвать эффект наведения, когда кто-то наводит на вашу страницу призыв к действию. Как только вы научитесь создавать собственный курсор, вы сможете создавать любой дизайн или эффект! Вы также смогли бесплатно скачать файл JSON. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

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