Хотите создать оригинальное меню Divi в виде вращающегося колеса при наведении?
Создание вращающегося колеса меню при наведении — это интересный способ продемонстрировать полезные ссылки на вашем сайте. Веб-сайт. Это был бы отличный способ разместить в заголовке несколько призывов к действию, чтобы направлять пользователей туда, куда им нужно идти. А еще это было бы классное меню подкатегорий для ваш блог.
В этом уроке мы покажем вам, как создать вращающееся колесо меню при наведении в Divi. Это можно сделать, используя комбинацию встроенных параметров Divi и некоторых пользовательских фрагментов CSS.
обследование
Прежде чем перейти к этому уроку, давайте взглянем на результат, которого мы хотим достичь.
Скачайте DIVI прямо сейчас!!!
Создайте новую страницу с помощью Divi Builder
Для начала вам понадобится следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Дизайн вращающегося колеса меню в Divi
Создать раздел и строку 1
В разделе, представленном по умолчанию, добавьте строку со следующей структурой столбцов.
Затем добавьте в строку текстовый модуль со следующим содержимым.
Затем обновите текстовый дизайн следующим образом:
- Текстовый шрифт: Share Tech
- Интервал между текстовыми буквами: 1px
- Размер текста заголовка 2: 8vw
Добавьте строку 2, чтобы построить колесо
Далее нам нужно добавить новую строку в столбец ниже строки 1.
Прежде чем мы начнем добавлять наши текстовые модули для наших ссылок, нам нужно спроектировать нашу линию в виде колеса. Будет много оптимизаций, необходимых на ряду, чтобы сделать наш дизайн колеса.
Читайте также: Как показать контент в разделителе раздела при наведении в Divi
Для начала откройте настройки строки 2 и обновите следующее:
- Цвет фона: #02366b
- Цвет градиента левого фона: rgba(0,0,0,0.45)
- Цвет градиента правого фона: #02366b
- Тип градиента: круговой
- Радиальное направление: центр
- Стартовая позиция: 36%
- Конечное положение: 0%
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 500 пикселей
- Максимальная ширина: 500 пикселей (настольный компьютер), автоматически (планшет и телефон)
- Высота: 500 пикселей (на компьютере), автоматически (на планшете и телефоне)
- Отступы (рабочий стол): 0px (сверху и снизу)
- Отступы (планшет и телефон): 20 пикселей (сверху, снизу и слева)
- Маржа (телефон): -10% (справа)
Нам нужно установить высоту и ширину линии на 500 пикселей, чтобы она была идеальным квадратом. Это позволит нам придать ему идеальную круглую форму, используя параметр Divi с закругленными углами (радиус границы).
- Закругленные углы: 50%
Затем мы можем добавить еще один уровень дизайна круга, используя тень блока следующим образом:
- Сила размытия тени коробки: 0px
- Box Shadow Spread Strength: 210px
- Цвет тени: rgba (2,54,107,0.66)
Далее мы добавим небольшой фрагмент CSS, чтобы центрировать содержимое нашей строки по вертикали. Под вкладкой Фильтр, добавьте следующий пользовательский CSS в основной элемент.
display:flex;align-items:center;
Добавление ссылок
Каждая ссылка в колесе будет создана с модулем Текст. Всего мы создадим шесть модулей. Текст. Пять модулей Текст будет содержать ссылки для колеса, а другой будет содержать название меню.
Начните с создания нового модуля «Текст».
Затем обновите настройки текста следующим образом:
- Боди: «Элемент 1»
- Текстовый шрифт: Share Tech
- Цвет текста: #ffffff
- Размер: 16 пикселей (по умолчанию), 20 пикселей (при наведении)
- Расстояние между буквами: 1px
- Высота текстовой строки: 60 пикселей
- Ширина: 250 пикселей (на компьютере), автоматически (на планшете и телефоне)
- Высота: 60 пикселей
- Отступ (слева): 20 пикселей
Сохраните настройки на данный момент. Затем продублируйте текстовый модуль 4 раза, чтобы создать в общей сложности 5 текстовых модулей.
Позиционирование текстовых ссылок/модулей
Теперь мы готовы расположить наши звенья по периметру колеса. Для этого мы обновим каждый модуль Текст с параметрами преобразования, которые перемещают/перемещают и вращают модуль на месте.
Узнайте также: Как создать сетку столбцов жидкости при наведении в divi
Чтобы облегчить это, разверните режим отображения каркаса и пометьте текстовые модули, начиная со ссылки 1 вверху и заканчивая ссылкой 5 внизу.
Лянь 1
Мы начнем с редактирования ссылки 1. Откройте настройки текстового модуля для ссылки 1 и обновите следующее:
- Transform Translate (ось Y): 120 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
- Преобразование поворота (ось Z): 60 градусов (рабочий стол), 0 пикселей (планшет и телефон)
- Происхождение: 50% (в центре справа)
Лянь 2
Откройте настройки текстового модуля для ссылки 2 и обновите следующее:
- Transform
- Перевод (ось Y): 60 пикселей (настольный компьютер), 0 пикселей (планшет и телефон)
- Вращение по оси Z: 30 градусов (рабочий стол), 0 пикселей (планшет и телефон)
- Происхождение: 50% (в центре справа)
Лянь 3
Поскольку модуль Text для ссылки 3 находится посередине, мы можем оставить его на месте.
Лянь 4
Откройте настройки текстового модуля для ссылки 2 и обновите следующее:
- Преобразовать:
- Перевести ось Y: -60px (рабочий стол), 0px (планшет и телефон)
- Вращение по оси Z: -30 градусов (рабочий стол), 0 пикселей (планшет и телефон)
- Происхождение: 50% (в центре справа)
Лянь 5
Откройте настройки текстового модуля для ссылки 2 и обновите следующее:
- Преобразовать:
- Перевести ось Y: -120px (рабочий стол), 0px (планшет и телефон)
- Вращение по оси Z: -60 градусов (рабочий стол), 0 пикселей (планшет и телефон)
- Происхождение: 50% (в центре справа)
Теперь давайте посмотрим на результат. Обратите внимание, как ссылки/тексты в текстовых модулях идеально проходят по периметру круга.
Добавлен ярлык меню
Чтобы добавить метку меню, нам нужно добавить еще один текстовый модуль поверх пяти текстовых модулей, которые у нас уже есть. Идите вперед и добавьте новый текстовый модуль над ссылкой 1.
Затем обновите содержимое тела следующим образом:
Menu
Затем, чтобы ускорить дизайн, скопируйте стили модуля «Текст» для ссылки 3 и вставьте эти стили модуля в новый модуль «Текст».
Затем обновите следующее:
- Высота текстовой строки: 300 пикселей (для настольных компьютеров), 20 пикселей (для планшетов и телефонов)
- Высота: восстановить настройки по умолчанию (авто)
- Преобразование вращения (ось Z): 180 градусов (рабочий стол), 0 градусов (планшет и телефон)
- Преобразование источника: 50% (в центре справа)
Сделав это, нам нужно указать модуль текста метки меню в абсолютной позиции. Для этого добавьте к основному элементу следующий пользовательский CSS:
position: absolute!important;
Теперь узнайте результат. Вы должны увидеть, что пункт меню перевернут справа от колеса.
Добавлен эффект вращения при наведении на линию/колесо.
Чтобы добавить к строке эффект вращающегося наведения, обновите настройки строки следующим образом:
- Преобразование поворота (ось Z): 180 градусов (рабочий стол), 0 градусов (наведение), 0 градусов (планшет и телефон)
Затем обновите настройки перехода следующим образом:
- Продолжительность перехода: 450 мс
- Переход кривой скорости: Ease-in-Out
Теперь посмотрите, как вращается колесо при наведении на него курсора.
Создание двухколоночного макета для раздела
В настоящее время макет состоит из двух рядов по одному столбцу, расположенных друг над другом. Однако мы можем использовать свойство flex css для выравнивания двух строк по горизонтали.
Для этого мы можем добавить в раздел небольшой фрагмент пользовательского CSS. Как только это будет сделано, нам нужно немного отрегулировать интервал, чтобы все было правильно.
Откройте настройки раздела и добавьте к основному элементу следующий пользовательский css:
display:flex;
Обновить интервал между строками 1
Затем обновите размер и интервал строки 1 следующим образом:
- Ширина: 40 % (рабочий стол)
- Маржа (рабочий стол): осталось 5%
Конечный результат
Теперь посмотрим на конечный результат.
Скачайте DIVI прямо сейчас!!!
Альтернативная конструкция полуколеса
Интересный альтернативный дизайн — скрыть правую половину колеса за пределами секции, чтобы ссылки были скрыты, а затем открывались при наведении.
Для этого скопируйте всю секцию, содержащую только что созданный рисунок.
В дублирующем разделе обновите параметры в строке 1 следующим образом:
- Ширина: 70% (рабочий стол)
Затем обновите параметры в строке 2, чтобы вытолкнуть колесо из секции следующим образом:
- Поле: -250 пикселей справа
Нам нужно использовать -250 пикселей, потому что общая ширина колеса составляет 500 пикселей, и мы хотим скрыть ровно половину линии.
Затем установите видимость раздела на скрытый следующим образом:
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Вот окончательный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
Поворотное колесо — один из тех стильных элементов дизайна, который может заинтересовать посетителей с тонким и уникальным эффектом наведения. Удивительно, как легко этот дизайн можно реализовать с помощью встроенных настроек дизайна Divi.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
