Создание уникального дизайна кнопок Divi с помощью текстового модуля

Возможно, вам уже приходило в голову создание уникального дизайна кнопок Divi с использованием текстового модуля. Если да, то вы более креативны, чем думаете! С выпуском опций наведения в Divi все модули можно сделать кликабельными. Это открывает двери для использования любого модуля (со всеми его встроенными настройками дизайна) в качестве интерактивного CTA или кнопки. Например, текстовый модуль позволяет вам добавлять в модуль столько текста, сколько вы хотите, в различных форматах. Кроме того, текстовый модуль также имеет несколько надежных вариантов дизайна для настройки закругленных углов для создания уникальных форм.

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

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

Sneak Peek

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

Это кнопка с текстом на двух строках…

Это кнопка, использующая элемент списка…

Это кнопка с творческими углами…

Создание уникального дизайна кнопок Divi с помощью текстового модуля

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

# 1 Создание кнопки с несколькими строками текста

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

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

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

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

Для текстового содержимого используйте вкладку html и введите следующее:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Есть много разных стилей фона, которые мы можем добавить в наш модуль, но в этом примере tet добавляет простой градиентный фон:

Цвет фонового градиента слева: # FEE140
Правый цвет градиента фона: # FA709A

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

Толщина шрифта заголовка 3: Ультра полужирный
Стиль шрифта заголовка 3: TT
Цвет текста заголовка 3: #ffffff
Стиль шрифта заголовка 4: TT
Цвет текста заголовка 4: #ffffff
Размер текста заголовка 4: 16 пикселей

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

Ширина: 230 пикселей
Пользовательские отступы: 1em сверху, 0.5em снизу, 2em слева, 2em справа

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

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

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

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей (по умолчанию), 230 пикселей (при наведении)
Вертикальное положение тени блока: 0 пикселей
Цвет тени: rgba (0,0,0,0) (по умолчанию), # fee140 (при наведении)

Вот как это выглядит при наведении.

# 2 Создание кнопки элемента списка

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

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

Затем добавьте следующий HTML-код на текстовую вкладку в настройках содержимого:

<ol><li><h3>Contact Us</h3></li></ol>

Важно заключить текст элемента списка в тег заголовка, чтобы мы могли стилизовать маркер / номер элемента списка отдельно от текста.

Теперь перейдите на вкладку дизайна и завершите создание текстового модуля как кнопки:

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

Шрифт упорядоченного списка: Exo 2
Толщина шрифта упорядоченного списка: Light
Цвет текста упорядоченного списка: # 000000
Размер текста упорядоченного списка: 20 пикселей
Расстояние между буквами упорядоченного списка: 5 пикселей
Тип стиля упорядоченного списка: десятичный-ведущий-ноль
Положение стиля упорядоченного списка: снаружи
Отступ элемента упорядоченного списка: 2em

В категории "Текст заголовка" перейдите на вкладку H3 и обновите следующее:

Шрифт заголовка 3: Exo 2
Толщина шрифта заголовка 3: полужирный
Стиль шрифта заголовка 3: TT
Цвет текста заголовка 3: # 0c71c3
Размер текста заголовка 3: 26 пикселей
Высота строки заголовка 3: 0,3 м

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

Ширина (модуля): 262px
Выравнивание модуля: по центру
Пользовательские отступы: 2em сверху, 0px снизу, 2em слева, 2em справа
Закругленные углы: 10px2em
Ширина границы: 1 пикс.
Цвет границы: # 000000
Стиль границы: сплошной

И не забудьте добавить ссылку на свой модуль на указанный вами URL-адрес.

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

Не стесняйтесь изучать новые типы стилей списков (например, Upper Roman) для уникального дизайна кнопок списка.

# 3 Создание кнопки с креативными углами (как лист)

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

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

Откройте настройки текстового модуля и введите следующий HTML-код в текстовой вкладке поля содержимого:

<h3>grow</h3>
<h4>with us</h4>

Это позволяет нам разместить текст кнопки на двух строках (с уменьшением ширины по вертикали) и стилизовать их независимо.

Затем добавьте градиентный фон более «листового» цвета.

Цвет фона градиента слева: # 7cda24
Правый цвет градиента фона: # 26e051
Направление градиента: 90 градусов

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

Ориентация текста: по центру
Шрифт заголовка 3: Oswald
Толщина шрифта заголовка 3: светлый
Стиль шрифта заголовка 3: TT
Цвет текста заголовка 3: #ffffff
Размер текста заголовка 3: 27 пикселей
Шрифт заголовка 4: Oswald
Стиль шрифта заголовка 4: TT
Цвет текста заголовка 4: #ffffff

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

Ширина: 178 пикселей
Выравнивание модуля: по центру
Пользовательские отступы: 2em сверху, 2em снизу, 1em слева, 1em справа

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

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

Верхний левый угол: 100 пикселей
Нижний правый угол: 100 пикселей

Затем добавьте тень блока…

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 25 пикселей
Вертикальное положение тени блока: -4 пикселя
Сила распространения тени коробки: -12 пикселей
Цвет тени: rgba (0,0,0,0.25)

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

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

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

А вот как выглядит эффект наведения.

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

Всегда приятно время от времени мыслить нестандартно, когда дело доходит до разработки веб-сайтов с помощью Divi. Надеюсь, этот урок поможет придумать новый и креативный дизайн кнопок divi с использованием текстового модуля. Фактически, я бы посоветовал изучить другие модули (например, Blurb Module), чтобы найти еще больше вариантов дизайна.

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

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