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

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

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

обследование

Вот предварительный просмотр того, что будет ...

кнопки со значком шрифта

изменить размер кнопки divi image.gif

демонстрационная кнопка divi list delements.png

Что вам нужно?

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

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

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

Добавьте шрифт Elegant Icons в свой кнопочный модуль

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

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

добавить кнопку divi builder.jpg

Перетащите стильный значок шрифта

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

извлеките zip-файл divi.jpg

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

положить онлайн divi.jpg

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

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

кнопка font divi.jpg

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

использование значка button.jpg

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

значок кнопки divi 5.jpg

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

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

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

кнопка настройки divi.jpg

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

margin-left0 !important;

добавьте маркер кнопки diiv.png

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

демонстрационная кнопка заменена на hover.gif

Креативные значки кнопок с кругом, масштабируемые с размером текста кнопки

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

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

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

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

Заполнение 30px слева + 30px для font-icon + Заполнение 30px справа = всего 90px

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

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

Так что ...

Верхнее заполнение 19.5px + Высота строки 51px + Нижнее заполнение 19.5px = 90px всего

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

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

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

Кнопка Rorder Radius: 50%
Пользовательская обивка: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left

изменить кнопку button.png

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

настройте размер кнопки.gif

Добавление кнопок на Divi

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

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

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

выберите макет divi.png

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

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

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

Кнопка divi.png

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

Текст кнопки divi.png

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

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

вставьте модуль style.jpg

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

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

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

Custom Padding: 0.65em Top, 0.65em Bottom, 1em Left, 1em Right

кнопки со значком шрифта

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

настройка кнопки button.png

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

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

Пользовательская маржа: -60px Top

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

изменить выравнивание кнопки divi.png

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

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

Увеличить изображение style.jpg

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

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

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

кнопка окончательного дизайна divi.png

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

кнопка предварительного просмотра на mobile.png

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

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

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

список доступных иконок divi.png

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

Заключительные мысли

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

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