Как создать кнопки с иконочным шрифтом с помощью Divi

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

Некоторые из основных моментов этого урока включают в себя:

• Как использовать элегантный шрифт для добавления значка в качестве текста кнопки
• Как добавить отступ и радиус границы, чтобы кнопка имела форму идеального квадрата или круга
• Как заменить значок кнопки другим значком при наведении курсора
• Как разместить значок кнопки так, чтобы он перекрывал изображение
• и более…

Sneak Peek

Вот краткий обзор того, что будет дальше…

Что вам нужно

В этом уроке я буду использовать следующее:

• Тема Divi (очевидно)
• Элегантные значки шрифтов - после того, как вы загрузите zip-файл из сообщения в блоге, мы перетащим файл шрифта eleganticons.ttf, который будет использоваться в качестве настраиваемого шрифта для нашего модуля кнопок.
• Макет домашней страницы Bed & Breakfast (доступен бесплатно в Divi Builder)

Давайте начнем!

Добавление шрифта Elegant Icon в модуль кнопок

Добавить кнопочный модуль

Для начала создайте новую страницу и разверните визуальный конструктор. Выберите «Создать с нуля», а затем, после развертывания визуального построителя, добавьте строку из одного столбца в раздел, а затем добавьте модуль кнопки в строку.

Перетащите шрифт Elegant Icon

Чтобы получить шрифт Elegant Icon, перейдите в сообщение блога Elegant Icon Font и загрузите файл шрифта. Извлеките содержимое zip-файла и найдите файлы элегантных значков шрифтов, перейдя в Elegant_font> HTML CSS> fonts. Затем перетащите файл ElegantIcons.ttf из файла на вашем компьютере в визуальный конструктор.

Это автоматически вызовет модальное окно «Загрузить шрифт». Просто нажмите кнопку загрузки, чтобы загрузить шрифт в Divi Builder.

Теперь у вас будет доступ к элегантному шрифту Icon Font при настройке шрифта любого модуля в визуальном конструкторе.

Перейдите в настройки модуля кнопок и обновите шрифт кнопки с новым шрифтом Elegant Icon, который вы только что загрузили. Он появится в списке значков в разделе «Пользовательские шрифты».

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

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

Иконки кнопок обмена при наведении

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

Размер текста кнопки: 30 пикселей
Значок кнопки: см. Снимок экрана (это будет значок, который заменит шрифт значка, используемый для кнопки)
Цвет значка кнопки: # 0c71c3 (он должен соответствовать цвету, используемому для текста кнопки)
Расположение значка кнопки: слева
Цвет текста при наведении курсора на кнопку: rgba (255,255,255,0) (это полностью прозрачно, чтобы скрыть шрифт значка кнопки при наведении)
Пользовательские отступы: 1em влево, 1em вправо (это отступы переопределят отступы по умолчанию для кнопки и не будут расширяться при наведении курсора)

Теперь все, что нам нужно сделать, это переопределить маржу для элемента before в настраиваемом CSS. Перейдите на вкладку Advanced и введите следующий CSS в поле перед:

margin-left: 0 !important;

Теперь значок вашей кнопки будет заменен значком наведения при наведении.

Создание идеально круглых кнопок со значками, которые масштабируются с размером текста кнопки

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

Хитрость заключается в том, чтобы разместить пуговицу на расстоянии, используя единицу длины «em». Эта единица длины соответствует размеру текста вашей кнопки. Итак, если размер текста кнопки 30 пикселей, 1em также будет 30 пикселей (2em будет 60 пикселей и так далее…). Зная это, нам просто нужно убедиться, что наши отступы вокруг нашей кнопки будут одинаковыми со всех четырех сторон. Но вы, возможно, не учли, что высота строки текста кнопки по умолчанию равна 1.7em. Это означает, что нам нужно учитывать это при добавлении значений верхнего и нижнего отступов.

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

Для левого и правого отступов установите для них оба значения 1em. Это означает, что общая ширина кнопки будет 90 пикселей (или 3 мкм), потому что…

30 пикселей левого отступа + 30 пикселей шрифта значка + 30 пикселей правого отступа = всего 90 пикселей

Высота строки текста кнопки составляет 1,7 em, что эквивалентно 170% размера текста кнопки (30 пикселей), что равно 51 пикселю.

Для верхнего и нижнего отступов установите для них значение 0,65em. 0,65em эквивалентно 65% размера текста кнопки (30 пикселей), что составляет 19,5 пикселей.

Следовательно…

19,5 пикселей верхнего отступа + 51 пиксель высоты строки + 19,5 пикселя нижнего отступа = всего 90 пикселей

Это означает, что когда текст кнопки установлен на 30 пикселей, общий размер кнопки будет 90 пикселей на 90 пикселей (идеальный квадрат). Фактически, вы можете думать об этом так. Независимо от того, что вы установили в качестве размера текста кнопки, общий размер кнопки будет в 3 раза больше этого значения. Итак, текст кнопки 40 пикселей создаст кнопку размером 120 на 120 пикселей и так далее.

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

Вот что вам нужно, чтобы превратить вашу кнопку в круглую:

Радиус границы кнопки: 50%
Пользовательские отступы: 0,65 мкм сверху, 0,65 мкм снизу, 1 мкм справа, 1 мкм слева

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

Добавление кнопок со значками в макет Divi

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

В этом примере я покажу вам, как добавить кнопку с одним значком в макет домашней страницы Bed & Breakfast.

Чтобы добавить макет на свою страницу, откройте меню настроек, щелкнув фиолетовый значок внизу страницы (убедитесь, что визуальный конструктор включен). Затем щелкните значок «Загрузить из библиотеки». Выберите макет домашней страницы «постель и завтрак» и нажмите кнопку «Использовать этот макет», чтобы развернуть макет на странице.

Добавление кнопки со значком к изображению

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

Найдите раздел «О нас» на макете домашней страницы. Затем добавьте модуль кнопок непосредственно под одним из изображений, используемых для показа «Двухместный номер» (он первый в первом столбце трехстороннего ряда).

Затем откройте настройки кнопки и введите заглавную букву «P» в текстовое поле кнопки. Он превратится в наш значок, как только вы выберете шрифт Elegant в качестве шрифта кнопки.

Чтобы быстро согласовать дизайн кнопки с макетом, сохраните настройки кнопки и найдите кнопку «Забронировать» в верхней части макета. Откройте настройки кнопок и скопируйте стили кнопок, щелкнув правой кнопкой мыши на кнопке «Переключить заголовок» и выбрав из списка опцию «Копировать стили кнопок».

Теперь щелкните правой кнопкой мыши модуль кнопок, который вы добавили под изображением, и выберите «Вставить стили кнопок».

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

Шрифт кнопки: Элегантный шрифт
Ширина границы кнопки: 0 пикселей
Показать значок кнопки: НЕТ

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

Пользовательские отступы: 0,65 мкм сверху, 0,65 мкм снизу, 1 мкм слева, 1 мкм справа

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

Теперь нам нужно потянуть кнопку вверх над изображением, используя настраиваемое отрицательное значение поля, равное высоте кнопки. Для этого нам нужно определить высоту нашей кнопки. Как упоминалось ранее в этом посте, с помощью настраиваемого отступа мы можем узнать точный размер нашей кнопки на основе текущего размера текста кнопки. Поскольку размер текста кнопки составляет 20 пикселей, мы знаем, что высота нашей кнопки составляет 3em (в 3 раза больше размера текста кнопки), что составляет 60 пикселей. Следовательно, нам нужно установить настраиваемое поле для нашей кнопки следующим образом:

Пользовательское поле: -60 пикселей сверху

А затем мы можем расположить нашу кнопку вправо, отрегулировав выравнивание кнопки вправо.

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

Поскольку мы удалили нижнее поле изображения, мы можем легко применить это изменение ко всем изображениям в разделе, используя стили расширения. Щелкните изображение правой кнопкой мыши и выберите «Расширить стили изображения».

Во всплывающем окне «Расширить стили» выберите «Этот раздел» для параметра «На всем протяжении» и нажмите кнопку «Расширить». Теперь все изображения имеют нижнее поле 0 пикселей.

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

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

И поскольку мы использовали правильную технику интервалов, кнопка останется на месте и на мобильном устройстве ...

Значки, доступные с помощью кнопочного модуля

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

Вот снимок экрана с символами и соответствующим значком шрифта:

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

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

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

Есть множество применений для кнопок со значками. Надеюсь, рассмотренный мной пример использования добавит немного вдохновения для ваших собственных проектов.

Для получения дополнительных идей ознакомьтесь с тем, как использовать шрифт Elegant Icon или как встроить шрифт значка на свой веб-сайт.

Я хотел бы поделиться с вами некоторыми идеями в комментариях ниже.

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