Как творчески использовать модуль переключения Divi для демонстрации тарифных планов

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

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

Давайте приступим к делу!

Предварительный просмотр

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

Начнем творить!

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

Добавить новый раздел

Интервал

Создайте новую страницу или откройте существующую с помощью Divi Visual Builder. Добавьте новый раздел на страницу, откройте настройки раздела и добавьте несколько настраиваемых полей сверху и снизу, чтобы освободить пространство вверху и внизу раздела.

• Верхний отступ: 160 пикселей
• Нижний отступ: 160 пикселей

Добавить строку №1

Структура столбца

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

Добавить текстовый модуль

Добавить содержимое

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

Настройки текста заголовка

Перейдите на вкладку «Дизайн» и измените настройки текста заголовка.

• Шрифт заголовка 2: Didact Gothic
• Толщина шрифта заголовка 2: Обычный
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 40 пикселей
• Интервал между буквами заголовка 2: -1px

Добавить модуль разделителя

Видимость

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

• Показать разделитель: Да

Цвет

Перейдите на вкладку дизайна и измените цвет разделителя.

• Цвет: # 000000

Размеры

Измените также ширину модуля в настройках размеров.

• Ширина: 39%
• Выравнивание модуля: по центру

Интервал

Также добавьте настраиваемое нижнее поле.

• Нижнее поле: 50 пикселей

Добавить строку №2

Структура столбца

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

Столбец 1 градиентный фон

Еще не добавляя никаких модулей, откройте настройки строки и добавьте градиентный фон в столбец 1.

• Цвет 1: # 00fff2
• Цвет 2: rgba (255,255,255,0)
• Столбец 1 Тип градиента: радиальный
• Столбец 1 Радиальное направление: Внизу справа
• Столбец 1 Начальная позиция: 30%
• Конечное положение в столбце 1: 30%

Столбец 2 градиентный фон

Сделайте то же самое для второго столбца.

• Цвет 1: # fce96f
• Цвет 2: rgba (255,255,255,0)
• Столбец 2 Тип градиента: радиальный
• Столбец 2 Радиальное направление: вверху справа.
• Столбец 2 Начальная позиция: 40%
• Конечное положение в столбце 2: 40%

Столбец 3 градиентный фон

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

• Цвет 1: # a659ff
• Цвет 2: rgba (255,255,255,0)
• Столбец 3 Тип градиента: радиальный
• Столбец 3 Радиальное направление: снизу
• Столбец 3 Начальная позиция: 30%
• Конечное положение в столбце 2: 30%

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2

Добавить модуль переключения в столбец 1

Добавить содержимое

Пора создавать разные тарифные планы! Добавьте новый модуль переключения в первый столбец и введите заголовок. Чтобы стилизовать различные элементы в поле содержимого, мы использовали несколько дополнительных HTML-тегов. Скопируйте следующие строки и добавьте их на вкладку Текст в поле содержимого:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Состояние

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

Фоновый цвет

Перейдите к настройкам фона модуля Toggle и добавьте белый цвет фона.

• Цвет фона: #ffffff

Настройки значков

Затем измените цвет значка на вкладке дизайна.

• Цвет значка: # 000000

Переключить настройки

И также измените цвет фона Open Toggle в настройках переключателя.

• Цвет фона открытого переключателя: rgba (255,255,255,0)

Настройки текста заголовка

Затем внесите некоторые изменения в настройки текста заголовка.

• Шрифт заголовка: Didact Gothic
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 3.5vw (рабочий стол), 60px (планшет), 40px (телефон)

Настройки основного текста

Измените также настройки основного текста.

• Шрифт: Didact Gothic
• Выравнивание основного текста: по левому краю
• Цвет основного текста: # 000000
• Размер основного текста: 18 пикселей
• Высота линии тела: 1.5em

Клонировать модуль переключения дважды и поместить в оставшиеся два столбца

После того, как вы закончите изменять модуль Toggle в столбце 1, вы можете дважды клонировать его и разместить дубликаты в двух оставшихся столбцах.

Изменить копию

Убедитесь, что вы изменили все копии дубликатов, и все готово!

Предварительный просмотр

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

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

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