Хотите узнать, как использовать модуль Icon для Divi создавать собственные значки?
Кнопки со значками стали основным продуктом в мире веб-дизайна. Значки представляют собой краткие визуальные призывы к действию, которые отлично подходят для мобильных устройств, поскольку они не занимают много места. Они также хорошо работают в качестве кнопок-переключателей или всплывающих окон, которые пользователи интуитивно распознают без необходимости вводить текст.
В сегодняшнем уроке мы покажем вам, как создавать кнопки со значками с помощью Divi. Создайте кнопку со значком в Divi довольно просто и весело сделать.
Используя модуль «Иконки», мы можем выбирать из сотен значков и использовать бесчисленное множество встроенных вариантов дизайна. Divi Конструктор для создания практически любого типа кнопки со значком, который вы только можете придумать.
Мы надеемся, что эта статья поможет вам приступить к созданию удивительных иконок-кнопок для вашего следующего проекта.
Давайте начнем!
обследование
Вот краткий обзор кнопок со значками, которые мы будем создавать в этом уроке.
Создайте новую страницу с помощью 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, так и значки Fontawesome. Однако не все значки будут иметь одинаковую высоту и ширину. Это немного усложняет определение точной ширины и высоты кнопки со значком.
Чтобы создать идеально квадратную кнопку, которая задействует значок при наведении, мы можем добавить пользовательский 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
