Полное руководство по созданию гибких дизайнов кнопок в Divi

Гибкий дизайн кнопки - это процесс создания кнопки, которая плавно масштабируется в зависимости от размера окна вашего браузера (или области просмотра). Он включает в себя применение практик гибкого веб-дизайна ко всем свойствам дизайна кнопки. Это делает дизайн кнопки предсказуемым и единообразным на всех устройствах. И это освежающая альтернатива традиционным методам адаптивного дизайна, которые включают в себя многочисленные корректировки дизайна в определенных точках останова.

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

• Анатомия кнопки Divi
• Как сделать плавную кнопку в Divi
• Понимание единицы длины em
• Использование плавного (или масштабирующего) шрифта для кнопки
• Анатомия жидкой кнопки Divi
• Создание гибких дизайнов кнопок в Divi (5 примеров дизайна)
• Плавные кнопки с использованием зажима () для размера шрифта

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

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

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

А вот код, демонстрирующий эту гибкую концепцию дизайна кнопок.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

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

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Анатомия кнопки Divi

По умолчанию кнопка Divi будет иметь встроенные стили, которые включают единицы длины в пикселях и em (см. Иллюстрацию выше). К свойствам, использующим единицу длины в пикселях, относятся:

• Размер шрифта: 20 пикселей
• Закругленные углы: 3 пикселя
• Ширина границы: 3 пикселя
• Размер шрифта значка: наследуется размером шрифта (20 пикселей)

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

К свойствам, использующим единицу длины em, относятся:

• Заполнение: 0.3em сверху, 0.3em снизу, 0.7em слева, 2em справа
• Высота линии: 1,7 эм
• Левое поле значка: 0.3em

Эти значения em относятся к размеру шрифта элемента (или кнопки) и будут изменяться (масштабироваться) при изменении размера шрифта.

Как сделать плавную кнопку в Divi

Понимание единицы длины em

Ключом к созданию плавной кнопки в Divi является понимание того, как работают единицы длины em. Единица длины em определяется размером шрифта элемента (каким бы он ни был). По сути, значение em кратно размеру шрифта элемента. Например, если размер шрифта элемента 20 пикселей, 2em совпадает с 2 (20 пикселей). Это означает, что единица длины em будет изменяться всякий раз, когда изменяется размер шрифта элемента. Однако единица длины в пикселях не изменится.

Продолжая наш пример по умолчанию, правый отступ по умолчанию для кнопки равен 2em (или 2 кратным em). Поскольку размер шрифта кнопки составляет 20 пикселей, размер правого отступа составляет 2 раза по 20 пикселей (что составляет 40 пикселей). Верхнее и нижнее отступы - 0,3 мкм. Таким образом, верхний и нижний отступы составляют 6 пикселей (0,3 умножить на 20 пикселей равно 6 пикселям).

См. Иллюстрацию ниже, чтобы понять фактическое значение единиц длины em в зависимости от размера шрифта.

Использование плавного (или масштабирующего) шрифта для кнопки

При разработке плавной кнопки с использованием единиц длины em все зависит от размера шрифта кнопки. Другими словами, размер шрифта будет применен к значению всех свойств с использованием единицы длины em для кнопки. Итак, если вы хотите, чтобы стили кнопок стали плавными, вы должны придать кнопке плавный (или масштабирующий) размер шрифта. Наиболее распространенная единица длины жидкости - это единица длины vw, которая зависит от ширины окна просмотра браузера. Другими словами, единица длины vw изменяется при изменении ширины браузера.

Чтобы сделать кнопку плавной, замените размер шрифта 20px на что-то вроде 2.4vw. Поскольку это значение изменяется в зависимости от ширины браузера, все свойства кнопки, использующие единицу длины em, также будут масштабироваться вместе с шириной браузера.

Анатомия жидкой кнопки Divi

Проще говоря, создание гибкой кнопки Divi Button включает два ключевых принципа:

1. Используйте единицу длины (vw) для размера шрифта.
2. Используйте значения единиц длины em для всех свойств стиля кнопки

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

Вот иллюстрация плавной кнопки, которая включает плавный размер шрифта (2,4vw) и единицы длины em для всех свойств стиля.

Фактические значения каждого свойства, использующие единицы длины em, будут наследовать постоянное значение размера шрифта и масштаб относительно ширины области просмотра браузера (vw).

Создание гибкого дизайна кнопок в Divi

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

# 1 Базовый пример

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

В Divi Builder создайте новую строку из одного столбца.

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

• Размер текста кнопки: 2.4vw (настольный компьютер и планшет), 18.4px (телефон)

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

• Ширина границы кнопки: 0,15 мкм
• Радиус границы кнопки: 1,3 м
• Расстояние между буквами кнопки: 0,05 м
• Заполнение: 0.3em сверху, 0.3em снизу, 1em слева, 2em справа
• Box Shadow: см. Снимок экрана
• Положение прямоугольной тени по вертикали: 0,15 м

Вот окончательный результат.

Жидкая кнопка # 2 с закругленными углами и тенью коробки

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

На вкладке дизайна обновите следующее:

• Использовать собственные стили для кнопки: ДА
• Размер текста кнопки: 2.4vw (настольный компьютер и планшет), 18.4px (телефон)
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #ffffff (рабочий стол), # d9f9e9 (при наведении)
• Ширина границы кнопки: 0,15 мкм
• Цвет границы кнопки: # d9f9e9
• Радиус границы кнопки: 1,3 м

• Расстояние между буквами кнопки: 0,05 м
• Шрифт кнопки: Джура
• Толщина шрифта кнопок: полужирный
• Значок кнопки: стрелка вправо
• Цвет значка кнопки: # 000000
• Показывать только значок при наведении курсора на кнопку: НЕТ

• Заполнение: 0.2em сверху, 0.2em снизу, 1em слева, 2em справа
• Box Shadow: см. Снимок экрана
• Положение прямоугольной тени по вертикали: 0.3em
• Сила размытия тени коробки: 0.5em
• Сила распространения тени коробки: -0.3em

Вот результат.

Плавная кнопка №3 с уникальной тенью и расположением значков

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

Для начала продублируйте предыдущий пример №2. Затем откройте настройки дублирующей кнопки, чтобы обновить дизайн.

На вкладке дизайна обновите следующее:

• Радиус границы кнопки: 0 пикселей
• Цвет значка кнопки: #ffffff
• Box Shadow: см. Снимок экрана
• Положение прямоугольной тени по горизонтали: -1.75em
• Вертикальное положение тени блока: 0 пикселей
• Цвет тени: # 000000

На вкладке Advanced добавьте следующий настраиваемый CSS в элемент After:

margin-right: .3em;
right: 0;

Вот результат.

# 4 Жидкая кнопка с трехцветным градиентом фона

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

Чтобы создать кнопку, продублируйте ранее созданный пример кнопки №3.

Затем откройте настройки кнопки, чтобы обновить стили.

На вкладке «Дополнительно» удалите настраиваемый CSS внутри элемента «После».

На вкладке «Дизайн» обновите следующее:

• Цвет текста кнопки: #ffffff
• Цвет фона градиента кнопки слева: # f475ee
• Цвет градиента фона кнопки справа: # 9694fc
• Направление градиента: 90 градусов
• Конечное положение: 2.5em
• Ширина границы кнопки: 0 пикселей
• Box Shadow: см. Снимок экрана
• Положение тени бокса по горизонтали: -2,5 м
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 1.5em
• Сила распространения тени коробки: -1em
• Цвет тени: # 85c6f2

И вот результат.

Кнопка подачи жидкости №5 с настраиваемой шириной жидкости

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

Чтобы создать кнопку, продублируйте ранее созданный пример кнопки №2.

На вкладке «Дизайн» обновите «Выравнивание кнопок» на «По центру».

На вкладке Advanced добавьте следующий настраиваемый CSS к основному элементу:

Рабочий стол

display:block;
width: 100%;
max-width: 15em;

Вот результат.

Окончательные результаты

Теперь посмотрим на окончательные результаты наших 4-х гибких кнопок.

Плавные кнопки с использованием зажима () для размера шрифта

Если вам нужен больший контроль над минимальным и максимальным размером вашей плавной кнопки, вы можете использовать функцию CSS Clamp (), чтобы установить минимальный размер шрифта, размер шрифта масштабатора и максимальный размер шрифта.

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

Затем на вкладке «Дополнительно» добавьте следующий CSS-код к основному элементу каждой кнопки.

Это гарантирует, что размер шрифта будет иметь минимальный размер 20 пикселей, размер масштабатора (или жидкости) 4vw и максимальный размер 40 пикселей.

Основное преимущество использования clip () заключается в том, что вы можете предотвратить слишком большое или слишком маленькое масштабирование кнопки, сохраняя при этом гибкий дизайн.

Окончательные результаты с зажимом ()

Окончательные результаты снова

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

Использование размера шрифта vw length (настольный компьютер и планшет) и единицы длины px (телефон)

Использование clip () для установки минимального, масштабного и максимального размера шрифта

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

Создание гибких кнопок в Divi основывается на двух основных принципах: (1) использовать гибкие единицы длины (например, vw) для размера шрифта кнопки и (2) использовать значения единиц длины em для всех свойств стиля кнопки. Как только вы это поймете, важно найти правильный размер гибкого шрифта (используя vw, clamp () и т. Д.) И отрегулировать, а затем использовать различные значения em для остальной части дизайна кнопок. Это обеспечит плавное масштабирование кнопки при настройке ширины области просмотра вашего браузера.

Иметь ввиду. Гибкие кнопки на самом деле не работают, когда их родительские контейнеры также не являются плавными. Например, если у вас есть плавная кнопка внутри строки размером 400 пикселей, у кнопки не будет места для масштабирования, и дизайн сломается. Ширина ряда 80% или 90vw больше подходит для гибких кнопок.

Я с нетерпением жду вашего ответа в комментариях.

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