Хотите узнать, как использовать модуль Divi Icon для создания собственных иконок?
Кнопки-иконки стали незаменимыми в мире веб-дизайна. Иконки предоставляют лаконичные визуальные призывы к действию, которые отлично подходят для мобильных устройств, поскольку не занимают много места. Они также хорошо работают в качестве переключателей или всплывающих окон, которые пользователи интуитивно распознают без необходимости в тексте.
В сегодняшнем уроке мы покажем вам, как создавать кнопки с иконками. Divi. Создание кнопки-значка в Divi — довольно простое и увлекательное занятие.
С помощью модуля «Иконки» мы можем выбирать из сотен иконок и использовать бесчисленные встроенные параметры дизайна Divi Builder для создания практически любого типа кнопок с иконками, который только можно себе представить.
Мы надеемся, что эта статья поможет вам начать создавать потрясающие кнопки с иконками для вашего следующего проекта.
Давайте начнем!
обследование
Вот краткий обзор кнопок с иконками, которые мы будем создавать в этом уроке.
Создайте новую страницу с помощью Divi Builder
Смотрите также: Divi: Как настроить иконки корзины и поиска модуля "Полноширинное меню"
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Создавайте кнопки с иконками с помощью модуля Divi Icons.
Часть 1: Создание кнопки с иконкой
Для начала давайте добавим строку с одним столбцом в обычный раздел по умолчанию.
Затем добавьте новый модуль Значок к колонке.
Значок, URL-адрес ссылки и цвет фона
Под вкладкой Контент в настройках модуля значков обновите следующее:
- Значок: стрелка вправо (см. скриншот)
- URL ссылки на иконку: # (пока только заглушка)
- Фон: #3e22ff
Граница и радиус границы
Под вкладкой Дизайн, обновите следующее:
- Закругленные углы: 10 пикселей
- Ширина границы: 2 пикселя
- Цвет границы: #7272ff
Shadow box
- Тень от рамки: см. скриншот.
- Цвет тени: rgba(62,34,255,0.48)
Согласование области, на которую можно нажать, с размером кнопки-иконки.
В настоящее время модуль значка занимает всю ширину родительского контейнера (или колонки). Это означает, что область, по которой можно кликнуть, больше, чем сама кнопка-значок.
Чтобы размер кликабельного пространства соответствовал размеру кнопки-иконки, мы можем задать модулю максимальную ширину, равную ширине кнопки-иконки.
В этом примере общая ширина кнопки составляет 94 пикселя.
На вкладке «Дополнительно» добавьте следующий пользовательский CSS-код к основному элементу:
max-width: 94px
Voici le résultat.
Часть 2: Создание кнопки с квадратным значком
Чтобы создать нашу квадратную кнопку со значком, продублируйте строку, содержащую первую кнопку со значком, которую мы только что создали. Это даст нам дублирующую кнопку в строке для работы.
Задайте иконке одинаковую высоту и ширину, но при этом выровняйте её по центру.
В обширной коллекции значков, доступных для использования в модуле «Значки», представлены значки как из Divi, так и из Font Awesome. Однако не все значки имеют одинаковую высоту и ширину. Это несколько затрудняет определение точной ширины и высоты кнопки со значком.
Чтобы создать идеально квадратную кнопку, которая активирует иконку при наведении курсора, мы можем добавить пользовательский CSS-код, определяющий высоту и ширину иконки, а также центрировать иконку с помощью свойства CSS Flex.
Вот как.
Сначала откройте настройки дублирующегося значка. Затем замените значок новым, выбрав его в меню выбора значков.
Удалите отступы из модуля иконки. Это не потребуется, поскольку мы собираемся задать высоту и ширину для иконки.
На вкладке «Дополнительно» добавьте следующий пользовательский CSS-код: Элемент значка :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Теперь иконка кнопки будет иметь высоту и ширину 90 пикселей, что сделает её идеальным квадратом. Кроме того, свойство `flex` выравнивает иконку по центру модуля. Это позволяет легко изменять размер иконки внутри модуля иконок.
Чтобы завершить эту кнопку, давайте зададим ей фоновый градиент и белый цвет границы следующим образом:
- Остановки градиента:
- 0%: #3e22ff
- 100%: #ff2000
- Цвет границы: #fff
Вот окончательный результат.
Создайте круглую кнопку с иконкой.
Если кнопка-иконка имеет форму идеального квадрата, то сделать её круглой очень просто. Но прежде чем показать вам этот простой трюк, давайте продублируем предыдущую строку, чтобы начать создавать нашу круглую кнопку-иконку.
Теперь откройте настройки нашего нового двойного значка и во вкладке Дизайн, обновите радиус границы (или закругленные углы) следующим образом:
- Закругленные углы: 50%
И точно так же у нас есть круглая кнопка со значком!
Чтобы немного изменить дизайн, давайте зададим модулю значков другой цвет значка и фона следующим образом:
- Значок: см. скриншот
- Фон: #121212
Voici le résultat.
Создайте горизонтальное меню с кнопками-иконками.
Популярная тенденция — использовать иконки для создания меню с иконками, которое обычно состоит из нескольких кнопок, расположенных рядом. Для этого можно использовать свойство `flex`.
Вот как это сделать.
Сначала добавьте новую строку в столбец на странице.
Откройте настройки линии и обновите ширину желоба до 1.
- Ширина желоба: 1
Далее откройте настройки столбца внутри строки и добавьте следующий пользовательский CSS-код к основному элементу столбца:
display:flex;
align-items:center;
Добавить новый модуль Значок к колонке.
Под вкладкой Контент В настройках значка выберите значок и добавьте URL-адрес ссылки на него.
Под вкладкой Дизайн, обновите следующее:
- Цвет значка: #3e22ff
- Размер значка: 40px
- Поле (слева и справа): 10 пикселей
- Ширина границы: 2 пикселя
- Цвет границы: #3e22ff
НОТА : Поле создаст пространство между соседними кнопками, когда мы добавим больше позже.
Под вкладкой Фильтр, добавьте следующий пользовательский CSS в поле Элемент значка (как мы делали ранее для кнопки с квадратным значком):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Отныне при добавлении новых кнопок-иконок они будут отображаться рядом друг с другом. Для наглядности давайте трижды продублируем существующую кнопку-иконок, чтобы в горизонтальном меню получилось четыре кнопки-иконки.
После этого мы можем вернуться и обновить значки по мере необходимости.
Voici le résultat.
Добавлены эффекты при наведении курсора на кнопку-иконку.
Трудно обсуждать дизайн кнопок с иконками, не упоминая эффекты при наведении курсора. Они просто слишком забавны, чтобы их игнорировать.
Измените цвет фона и цвет значков при наведении курсора.
Изменение цвета кнопок — популярный и эффективный эффект при наведении курсора. Например, можно одновременно изменить цвет фона и цвет значка, когда пользователь наводит курсор на кнопку.
Для этого откройте настройки модуля значка, включите параметры наведения для цвета фона и выберите другой цвет для состояния наведения. Затем проделайте то же самое для значка.
В этом примере мы меняем цвет фона с белого на синий, а цвет значка — с синего на белый.
Изменить значок при наведении курсора
Ещё один эффект при наведении курсора, который вам может понравиться, — это полная смена значка. Для этого вы можете выбрать другой значок для состояния при наведении курсора при выборе значка в настройках значка.
Значок кнопки масштабируется при наведении курсора.
Один из эффектов наведения курсора, который трудно игнорировать, — это эффект масштабирования. Он увеличивает или масштабирует значок кнопки. Лучший способ добавить такой эффект — использовать параметры трансформации Divi. Это позволит кнопке увеличиваться в размерах, не затрагивая окружающие элементы.
Чтобы добавить эффект масштабирования при наведении курсора на кнопку-значок, откройте настройки значка и на вкладке... ДизайнНайдите параметры преобразования. Включите параметры при наведении курсора, затем назначьте следующее масштабирование преобразования для состояния при наведении курсора:
- Трансформация Y: 118%
- Преобразование X: 118%
Это увеличит размер кнопки-значка на 18% при наведении на неё курсора.
Поворачивайте кнопку-значок при наведении курсора
Вращение объектов при наведении курсора — это всегда забавное микро-взаимодействие. Чтобы повернуть кнопку-иконку при наведении курсора, можно использовать опцию трансформации вращения. Но прежде чем это сделать, давайте сделаем кнопку круглой, чтобы вращалась только иконка.
Чтобы сделать иконку круглой (предполагая, что кнопка квадратная), просто измените параметр «Закругленные углы» на 50% для всех четырех углов.
Далее обновите параметры преобразования, добавив следующее значение поворота при наведении курсора:
- Преобразование Поворот Z: 180 градусов
Давайте посмотрим, как работают наши 4 эффекта при наведении курсора.
Конечный результат
Давайте посмотрим на окончательные результаты нашего урока.
Читайте также: Divi: как выделить модуль «Вставка» при наведении и размыть остальные
Вот три наши кнопки с иконками (стандартная, квадратная и круглая).
А вот и горизонтальное меню кнопки-иконки с эффектами при наведении курсора.
Скачайте DIVI прямо сейчас!!!
Заключение
Умение создавать иконки для кнопок на веб-сайте крайне важно. И, как мы видели в этом уроке, с Divi это не так уж и сложно. Модуль иконок Divi имеет множество встроенных опций, которые открывают возможности для креативного дизайна иконок для кнопок.
Надеюсь, методы, описанные в этой статье, помогут вам раскрыть часть волшебства ваших собственных дизайнов кнопок с иконками.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...