Кнопки стиля с новыми опциями фона Divi (в комплекте 6 дизайнов)

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

Сегодня я собираюсь показать вам, как применить те же мощные функции дизайна фона к кнопкам стиля. Этот дизайнерский трюк накладывает фон строки и столбца за кнопочным модулем, чтобы предоставить вам 3 уровня возможностей дизайна. С такой силой все может стать опасным. Лучше сначала сохранять спокойствие и не торопиться

Пойдем.

Sneak Peek

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

Кнопки стиля с новыми опциями фона Divi (в комплекте 6 дизайнов)

Подпишитесь на наш канал Youtube

Установка

Используя Visual Building, добавьте обычный раздел с строкой в ​​одну колонку.

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

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

Параметры содержимого

Текст кнопки: [введите текст]
URL кнопки: [введите URL]

Варианты дизайна

Выравнивание кнопок: по центру
Цвет текста: светлый
Использовать собственные стили для кнопки: ДА
Размер текста кнопки: 48 пикселей

Расширенные настройки

Нам нужна ширина 100%, которая понадобится для заполнения ширины столбца. Для этого введите следующий настраиваемый CSS в поле «Главный элемент»:

Width: 100%;

Сохранить настройки

Прямо сейчас вы ничего не видите на странице, потому что рамка кнопки и текст белые. Вместо того, чтобы стилизовать цвет фона кнопки с помощью настроек модуля кнопки, мы собираемся настроить цвет фона строки / столбца за кнопкой, используя более продвинутые параметры фона. Мы вернемся к настройкам модуля кнопок, как только начнем делать более конкретный дизайн кнопок. Но пока закончим настройку строки.

Перейдите в настройки строки , в которых находится ваша новая кнопка, и обновите следующее:

Параметры содержимого

Выберите вкладку « Градиент фона столбца 1 » и нажмите серую круглую кнопку с белым символом «плюс».

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

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

Варианты дизайна

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

Использовать нестандартную ширину: ДА
Настраиваемая ширина: 500 пикселей (максимальная ширина кнопки устанавливается равной 500 пикселей)
Пользовательские отступы: 0 пикселей сверху, 0 пикселей справа, 0 пикселей снизу, 0 пикселей слева

Расширенные настройки

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

border-radius: 10px;

Введите тот же CSS в поле « Основной элемент столбца»:

border-radius: 10px;

Сохранить настройки

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

Всего 3 фоновых слоя (кнопка, столбец, строка), которые мы могли бы использовать для стилизации позже.

Вот иллюстрация того, как кнопка построена в настоящее время.

Довольно круто, правда?

Это все, что касается базовой настройки. Пришло время заняться забавной частью создания потрясающих дизайнов для ваших кнопок.

Создание потрясающих дизайнов кнопок

Кнопка # 1 фонового видео

Чтобы создать эту кнопку, вы собираетесь использовать все 3 слоя, фон строки для видео, фон столбца для градиента и фон кнопки для небольшого синего наложения.

Для параметров строки обновите следующие параметры содержимого :

Фоновое видео: [загрузить видео]
Столбец 1 Цвета градиента фона: rgba (12,113,195,0,41), rgba (131,0,233,0,18)

Сохранить настройки

Для параметров модуля кнопок обновите следующее:

Параметры содержимого

Текст кнопки: «Проверить это»

Варианты дизайна

Цвет фона кнопки: rgba (12,113,195,0,25)
Цвет границы кнопки: # 0c71c3

Сохранить настройки

Теперь единственная оставшаяся проблема - это радиус границы видеофона. Мы должны добавить некоторый собственный CSS, чтобы придать видео радиус границы, соответствующий кнопке. Этот дополнительный код необходим только для кнопки фонового видео.

Чтобы добавить собственный CSS, перейдите к настройкам страницы из Visual Builder и щелкните вкладку «Дополнительно». Затем обновите поле ввода Custom CSS следующим CSS:

.et_pb_section_video_bg {

border-radius: 10px;

}

Сохранить настройки

Совет : Еще один интересный вариант дизайна - показать видео при наведении курсора. Просто придайте модулю кнопок сплошной цвет фона и измените его на прозрачный при наведении курсора.

Вот и все! Теперь у вас есть кнопка с видео-фоном.

# 2 клетчатая пуговица

Кнопка в клетку требует использования двух слоев (строка и столбец) градиентов цвета фона.

Чтобы создать эту кнопку, вы собираетесь использовать 2 слоя: фон строки для первого уровня градиентов и фон столбца для последнего слоя цвета градиента.

Для параметров строки обновите следующие параметры содержимого :

Цвета градиента фона: # 8300e9, # 0c71c3
Направление градиента: 270 градусов
Стартовая позиция: 50%
Конечная позиция: 0%
Column1 Цвета градиента фона: rgba (224,11,0,0,39), rgba (255,255,255,0)
Направление градиента: 180 градусов
Стартовая позиция: 50%
Конечная позиция: 0%

Сохранить настройки

Теперь перейдите в настройки модуля кнопок и обновите следующие

Параметры содержимого

Текст кнопки: «Подписаться»

Варианты дизайна

Ширина границы кнопки: 0 пикселей
Расстояние между буквами кнопки: 10 пикселей
Шрифт кнопок: по умолчанию, полужирный (B), курсив (I)
Расстояние между буквами при наведении курсора: 10 пикселей

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

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

# 3 Кнопка радиального градиента

Чтобы создать эту кнопку, вы собираетесь использовать 2 слоя (строка и столбец) градиентов цвета фона.

Для параметров строки обновите следующие параметры содержимого :

Цвета градиента фона: # 8300e9, # 0c71c3
Тип градиента: радиальный
Радиальное направление: центр
Стартовая позиция: 50%
Конечное положение: 100%
Column1 Цвета градиента фона: rgba (224,11,0,0,39), rgba (255,255,255,0)
Тип градиента: радиальный
Радиальное направление: центр
Стартовая позиция: 50%
Конечное положение: 100%

Сохранить настройки

Теперь перейдите в Настройки модуля кнопок и обновите следующее:

Параметры содержимого

Текст кнопки: «свяжитесь со мной»

Варианты дизайна

Ширина границы кнопки: 0 пикселей
Шрифт кнопки: Crafty Girls

Значок кнопки: [выберите значок сердца]
Показывать значок только при наведении курсора на кнопку: НЕТ

Расширенные настройки

В качестве последнего штриха давайте добавим к кнопке тень слайда. В дополнение к предыдущему коду введите следующий Custom CSS в поле Main Element :

box-shadow: 0px 5px 10px 3px #ccc;

Вот и все! Вот ваш окончательный результат:

Кнопка # 4 яблочко

Чтобы создать эту кнопку, вы собираетесь использовать 2 слоя (строка и столбец) градиентов цвета фона. Кроме того, мы собираемся добавить несколько пользовательских CSS в модуль кнопок, чтобы создать всплывающий эффект нижней границы.

Для параметров строки обновите следующие параметры содержимого :

Цвета градиента фона: # 023500, # 008c02
Тип градиента: радиальный
Радиальное направление: центр
Стартовая позиция: 19%
Конечная позиция: 0%
Column1 Цвета градиента фона: rgba (0,206,72,0,43), rgba (255,255,255,0)
Тип градиента: радиальный
Радиальное направление: центр
Стартовая позиция: 32%
Конечная позиция: 0%

Теперь перейдите в Настройки модуля кнопок и обновите следующее:

Параметры содержимого

Текст кнопки: «Купить»

Варианты дизайна

Размер текста кнопки: 65 пикселей
Ширина границы кнопки: 0 пикселей
Шрифт кнопок: Roboto, полужирный (B), прописные (TT)

Расширенные настройки

Теперь последний штрих. Добавьте следующий настраиваемый CSS к существующему коду в поле ввода основного элемента :

box-shadow: 0px 5px 0px 0px #01771f;

# 5 Кнопка изображения

Чтобы создать эту кнопку, вы собираетесь использовать все 3 слоя, строку для фонового изображения, столбец для градиентного фона и фон кнопки для полупрозрачного синего цвета наложения.

Для параметров строки обновите следующие параметры содержимого :

На вкладке "Фоновое изображение"

Фоновое изображение: [загрузить изображение]
Размер фонового изображения: обложка
Положение фонового изображения: по центру
Повтор фонового изображения: без повтора
Смешивание фонового изображения: умножение

На вкладке "Градиент фона"

Цвета градиента фона: rgba (12,113,195,0,33), # edf000
Тип градиента: линейный
Направление градиента: 63 град.
Стартовая позиция: 50%
Конечное положение: 100%

Теперь прокрутите вниз до параметров фона столбца 1 и выберите вкладку градиента.

Столбец 1 Цвета градиента фона: rgba (236,239,31,0.66), rgba (0,0,0,0.49)
Тип градиента столбца: линейный
Направление градиента столбца: 139 градусов
Начальная позиция столбца: 12%
Конечное положение столбца: 0%

Сохранить настройки

Это касается нашего второго уровня фонового дизайна. Остался еще один.

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

Варианты содержания

Текст кнопки: «Получить билеты»

Варианты дизайна

Цвет фона кнопки: rgba (12,113,195,0.16)
Цвет границы кнопки: # efef4f
Шрифт кнопки: Lato
Значок кнопки: [выберите значок билетов]
Показывать только значок при наведении курсора на кнопку: НЕТ

Цвет текста при наведении курсора на кнопку: # 023b7c
Цвет фона при наведении курсора кнопки: # 023b7c

Вот и все!. Проверьте кнопку с изображением.

# 6 Кнопка портрета

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

Для параметров строки прокрутите вниз до параметров фона столбца 1 и обновите следующее:

Фоновое изображение столбца: [загрузить портретное изображение]
Размер фонового изображения столбца: Подогнать (чтобы портрет всегда помещался в пределах кнопки)
Положение фонового изображения столбца: по центру слева (это выравнивает ваш портрет слева от кнопки)
Повторение фонового изображения столбца: без повтора
Смешение фонового изображения столбца: яркость (это создает красивое смешивание оранжевого цвета с портретом)

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

Теперь вы можете видеть оранжевую заливку на кнопке.

Сохранить настройки

Теперь перейдите в Настройки модуля кнопок и обновите следующее:

Параметры содержимого

Текст кнопки: «Давайте поговорим»

Варианты дизайна

Расположение кнопок: вправо
Цвет границы кнопки: # ff7b23
Расстояние между буквами кнопки: 3 пикселя
Шрифт кнопки: Счастливая обезьяна
Значок кнопки [добавить значок чата]
Показывать только значок при наведении курсора на кнопку: НЕТ
Расстояние между буквами при наведении курсора на кнопку: 3 пикселя

Все сделано! Мне нравится этот дизайн кнопки контакта в блоге. Я думаю, это добавляет приятный индивидуальный подход.

Создание кнопок на разных структурах столбцов

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

Например, предположим, что вы хотите добавить строку 1/2 1/2 столбца с кнопкой слева и текстом справа. Вот что бы вы сделали.

Начните с нового обычного раздела и выберите строчную структуру 1/2 1/2 столбца . Затем добавьте модуль кнопок в левый столбец.

В настройках модуля кнопок убедитесь, что вы вставили следующий CSS в поле ввода Main Element на вкладке Advanced:

Width: 100%;

Вы можете настроить остальную часть модуля кнопки позже.

Затем перейдите в настройки строки и прокрутите вниз до параметров фона столбца 1 и обновите настройки фона, как хотите.

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

Пользовательское заполнение столбца 1: 0 пикселей сверху, 0 пикселей справа, 0 пикселей снизу, 0 пикселей слева

Сохранить настройки

Теперь у вас есть кнопка в левом столбце, которая может использовать параметры фона столбца 1 для дизайна. Как только вы вернетесь и обновите стиль кнопки по своему вкусу, добавьте текст в правый столбец, и все готово!

Отзывчивый?

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

Кроссбраузерная поддержка

В настоящее время свойство CSS background-blend-mode не поддерживается Internet Explorer или Edge, а Safari имеет ограниченные возможности наложения. Однако, по моему опыту, в большинстве случаев откат не является значительным.

Вот как выглядят кнопки в IE:

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

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

Я должен признать, что лично для меня этот урок является новаторским. Раньше мне приходилось добавлять к моей дочерней теме кучу классов и дополнительный CSS, если я хотел творчески стилизовать кнопки. Но теперь, когда я могу использовать параметры фона Divi, моя жизнь стала намного проще. Я надеюсь, что вы сможете использовать этот дизайнерский трюк, чтобы вывести свои кнопки на новый уровень.

Будем рады услышать от вас в комментариях.

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