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

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

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

Sneak Peek

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

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

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

Подпишитесь на наш канал Youtube

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

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

1. Тема Divi установлена ​​и активна
2. Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)

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

Создание дизайна вращающегося колеса меню в Divi

Основная мысль

Колесо создается путем превращения ряда в круглый элемент, придавая ему высоту и ширину 500 пикселей и 50% закругленных углов. Каждая ссылка меню создается в отдельном текстовом модуле и выравнивается по периметру круглого ряда путем поворота каждого текстового модуля по радиусу (центру) строки. Эта настройка аналогична тому, как вы создаете изогнутый текст в Divi.

Создайте сечение и строку 1

Создайте обычный раздел с строкой в ​​одну колонку.

Затем добавьте текстовый модуль в строку со следующим содержимым.

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

Шрифт текста: Share Tech
Расстояние между буквами текста: 1 пикс.
Размер текста заголовка 2: 8vw

Добавьте строку 2, чтобы построить колесо

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

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

Цвет фона: # 02366b
Цвет фона градиента слева: rgba (0,0,0,0.45)
Правый цвет градиента фона: # 02366b
Тип градиента: радиальный
Радиальное направление: центр
Стартовая позиция: 36%
Конечная позиция: 0%

Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1
Ширина: 500 пикселей
Макс. Ширина: 500 пикселей (компьютер), авто (планшет и телефон)
Высота: 500 пикселей (рабочий стол), авто (планшет и телефон)
Padding (рабочий стол): 0px вверху, 0px внизу
Отступ (планшет и телефон): 20 пикселей сверху, 20 пикселей снизу, 20 пикселей слева.
Маржа (телефон): -10% справа

Нам нужно установить высоту и ширину строки на 500 пикселей, чтобы получился идеальный квадрат. Это позволит нам придать ему идеальную круглую форму, используя параметр закругленных углов (радиус границы) в Divi.

Закругленные углы: 50%

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

Box Shadow: см. Снимок экрана
Сила размытия тени коробки: 0 пикселей
Сила распространения тени коробки: 210 пикселей
Цвет тени: rgba (2,54,107,0.66)

Затем мы собираемся добавить небольшой фрагмент CSS, чтобы сделать содержимое нашей строки вертикально центрированным. На вкладке «Дополнительно» добавьте следующий настраиваемый CSS в основной элемент.

display:flex;
align-items:center;

На данный момент это касается настроек строки. Мы вернемся, чтобы добавить наш вращающийся эффект наведения позже.

Добавление ссылок

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

Начните с создания нового текстового модуля.

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

Содержание тела: «Элемент ссылки»

Шрифт текста: Share Tech
Цвет текста текста: #ffffff
Размер текста: 16 пикселей (по умолчанию), 20 пикселей (при наведении)
Расстояние между буквами текста: 1 пикс.
Высота текстовой строки: 60 пикселей
Ширина: 250 пикселей (рабочий стол), авто (планшет и телефон)
Высота: 60 ​​пикселей
Отступ: 20 пикселей слева

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

Размещение ссылок / текстовых модулей

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

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

Ссылка 1

Мы начнем с редактирования ссылки 1. Откройте настройки текстового модуля для ссылки 1 и обновите следующее:

Transform Translate Axis Y: 120 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
Transform Rotate Z Axis: 60deg (рабочий стол), 0px (планшет и телефон)
Преобразовать исходную точку: 50% 100% (справа в центре)

Ссылка 2

Откройте настройки текстового модуля для ссылки 2 и обновите следующее:

Transform Translate Axis Y: 60 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
Transform Rotate Z Axis: 30deg (рабочий стол), 0px (планшет и телефон)
Преобразовать исходную точку: 50% 100% (справа в центре)

Ссылка 3

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

Ссылка 4

Откройте настройки текстового модуля для ссылки 2 и обновите следующее:

Transform Translate Axis Y: -60px (рабочий стол), 0px (планшет и телефон)
Transform Rotate Z Axis: -30deg (рабочий стол), 0px (планшет и телефон)
Преобразовать исходную точку: 50% 100% (справа в центре)

Ссылка 5

Откройте настройки текстового модуля для ссылки 2 и обновите следующее:

Transform Translate Axis Y: -120 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
Transform Rotate Z Axis: -60deg (рабочий стол), 0px (планшет и телефон)
Преобразовать исходную точку: 50% 100% (справа в центре)

Теперь давайте проверим результат. Обратите внимание, как ссылки / текст в текстовых модулях идеально вращаются по периметру круга.

Добавление метки меню

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

Затем обновите содержимое тела следующим образом:

<p>menu</p>

Убедитесь, что метка меню заключена в тег ap. Это обеспечит распознавание высоты строки в настройках текста.

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

Затем обновите следующее:

Высота линии: 300 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
Высота: восстановить настройку по умолчанию (авто)

Высота строки должна быть 300 пикселей, чтобы она равнялась высоте столбца содержимого, который также составляет 300 пикселей (5 текстовых модулей каждый с высотой 60 пикселей равны 300 пикселей). Это гарантирует, что текст останется вертикально по центру.

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

Transform Rotate Z Axis: 180deg (рабочий стол), 0deg (планшет и телефон)
Преобразовать исходную точку: 50% 100% (справа в центре)

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

position: absolute !important;

А теперь посмотрите на результат. Вы должны увидеть, что пункт меню перевернут справа от колеса.

Добавление эффекта вращающегося наведения на строку / колесо

Чтобы добавить к строке эффект вращающегося наведения, обновите настройки строки следующим образом:

Преобразование Поворот оси Z: 180 градусов (рабочий стол), 0 градусов (при наведении курсора, 0 градусов (планшет и телефон)

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

Продолжительность перехода: 450 мс
Кривая скорости перехода: легкость входа-выхода

Теперь посмотрим, как колесо вращается при наведении курсора.

Создание макета из двух столбцов для раздела

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

Откройте настройки раздела и добавьте в основной элемент следующий кастомный CSS:

display:flex;

Обновить интервал строки 1

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

Ширина: 40% (рабочий стол), 100% (планшет и телефон)
Маржа (десктоп): осталось 5%
Маржа (планшет): 5% слева, 5% справа
Маржа (телефон): 5% справа

Последние штрихи

На дисплее планшета и телефона вам нужно будет добавить верхнее поле в текстовый модуль ссылки 1.

Поля (планшет): сверху 30 пикселей

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

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

Теперь посмотрим на окончательный результат.

Альтернативный дизайн полуколеса

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

Ширина: 70% (рабочий стол)

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

Поле: -250 пикселей справа

Нам нужно использовать -250 пикселей, потому что общая ширина колеса составляет 500 пикселей, и мы хотим скрыть ровно половину строки.

Затем установите скрытую видимость раздела следующим образом:

Вот окончательный дизайн.

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

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

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

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