Загрузите БЕСПЛАТНЫЙ дизайн переключателя цен на месяц / год для Divi

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

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

Загрузите дизайн переключателя цен на месяц / год БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Начнем воссоздавать!

Добавить раздел # 1

Фоновый цвет

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

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

Нижний разделитель

Перейдите на вкладку дизайна и затем вставьте нижний разделитель.

• Стиль разделителя: найти в списке
• Высота разделителя: 10vw

Интервал

Также добавьте пользовательские отступы сверху и снизу.

• Верхняя обивка: 5vw
• Нижняя обивка: 10vw

CSS ID

И добавьте в раздел CSS ID.

• Идентификатор CSS: toggle-section

Добавить новую строку

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 30vw (настольный), 45vw (планшет), 50vw (телефон)
• Максимальная ширина: 100%

Интервал

Затем избавьтесь от верхнего и нижнего отступов по умолчанию.

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

Граница

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

• Закругленные углы: 50vw (все углы)
• Ширина границы: 1 пикс.
• Цвет границы: # e8e8e8

Отображать

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

display: flex;

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

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

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

Настройки текста

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

• Шрифт текста: Монтсеррат
• Размер текста: 1vw (рабочий стол), 1.5vw (планшет), 2vw (телефон)
• Выравнивание текста: по центру
• Цвет текста: светлый

Интервал

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

• Верхняя прокладка: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Нижняя прокладка: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)

CSS ID и класс

И назначьте CSS ID и класс текстовому модулю.

• Идентификатор CSS: pricing-plan-item-1
• Класс CSS: цена-элемент-курсор

Клонировать текстовый модуль и поместить дубликат в столбец 2

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

Изменить содержимое

Убедитесь, что вы изменили содержимое.

Изменить идентификатор CSS

И используйте другой идентификатор CSS.

• Идентификатор CSS: pricing-plan-item-2

Добавить раздел # 2

Фоновый цвет

Переходим ко второму разделу. Добавьте следующий цвет фона:

• Цвет фона: # 6b63dd

Интервал

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

• Верхняя обивка: 7vw
• Нижняя обивка: 15vw
• Левое заполнение: 21vw (рабочий стол), 10vw (планшет и телефон)
• Правая прокладка: 21vw (рабочий стол), 10vw (планшет и телефон)

CSS ID

Также добавьте в раздел CSS ID.

• CSS ID: цена-1

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите все стандартные верхние и нижние отступы.

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

Граница

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

• Ширина правой границы: 1 пикс.
• Ширина левой границы: 1 пикс.
• Ширина верхней границы: 0 пикселей
• Ширина нижней границы: 0 пикселей
• Цвет границы: rgba (255,255,255,0)

Отображать

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

display: flex;

Столбец 2 Настройки

Интервал

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

• Верхняя обивка: 1vw
• Нижняя обивка: 4vw

Граница

Также используйте рамку в столбце 2.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: #ffffff

Столбец 3 Настройки

Интервал

Перейдите к настройкам третьего столбца и добавьте несколько значений пользовательского отступа.

• Верхняя обивка: 1vw
• Нижняя обивка: 4vw

Добавить разделитель в столбец 1

Видимость

Пора начинать добавлять модули! Первый модуль и единственный необходимый нам модуль в столбце 1 - это модуль разделения. Убедитесь, что вы отключили опцию «Показать разделитель». Этот модуль нужен нам только для того, чтобы остальная часть дизайна оставалась нетронутой.

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

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

Добавить контент H3

Перейдите к столбцу 2 и добавьте текстовый модуль с некоторым содержимым H3 по вашему выбору.

Настройки текста H3

Измените настройки текста H3 следующим образом:

• Шрифт заголовка 3: Montserrat
• Выравнивание текста заголовка 3: по центру
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 2vw (рабочий стол), 3vw (планшет), 3.5vw (телефон)
• Интервал между буквами заголовка 3: -1px

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

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

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

Настройки текста

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

• Шрифт текста: Монтсеррат
• Плотность шрифта текста: Ультра легкий
• Цвет текста: #ffffff
• Размер текста: 2vw (рабочий стол), 3vw (планшет), 3.5vw (телефон)
• Высота текстовой строки: 1em
• Выравнивание текста: по центру

Интервал

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

• Верхняя маржа: 0.5vw

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

Завершив модули в столбце 2, вы можете клонировать их оба и поместить дубликаты в столбец 3.

Изменить содержимое

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

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

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

Переходим ко второй строке раздела 2! Выберите следующую структуру столбцов:

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите верхнее и нижнее отступы по умолчанию.

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

Граница

И примените границу.

• Ширина верхней границы: 0 пикселей
• Ширина правой границы: 1 пикс.
• Ширина нижней границы: 1 пикс.
• Ширина левой границы: 1 пикс.
• Цвет границы: # 8882dd

Отображать

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

display: flex;

Столбец 1 Настройки

Интервал

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

• Верхняя подкладка: 3vw (рабочий стол), 5vw (планшет и телефон)
• Нижняя обивка: 3vw (рабочий стол), 5vw (планшет и телефон)

Граница

Также добавьте правую границу к столбцу.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: # 8882dd

Столбец 2 Настройки

Интервал

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

• Верхняя подкладка: 3vw (рабочий стол), 5vw (планшет и телефон)
• Нижняя обивка: 3vw (рабочий стол), 5vw (планшет и телефон)

Граница

Затем добавьте правую границу.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: #ffffff

Столбец 3 Настройки

Интервал

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

• Верхняя подкладка: 3vw (рабочий стол), 5vw (планшет и телефон)
• Нижняя обивка: 3vw (рабочий стол), 5vw (планшет и телефон)

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

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

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

Настройки текста

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

• Шрифт текста: Монтсеррат
• Цвет текста: #ffffff
• Размер текста: 1vw (рабочий стол), 1.5vw (планшет), 2vw (телефон)
• Выравнивание текста: по центру

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

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

Во втором столбце нам понадобится еще один текстовый модуль. Добавьте символ «✓» в поле содержимого.

Настройки текста

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

• Цвет текста: # ffad72
• Размер текста: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Высота текстовой строки: 1em
• Выравнивание текста: по центру

Клонировать текстовый модуль и поместить дубликат в столбец 3

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

Альтернативный цвет символа и текста

В зависимости от функции, которую вы демонстрируете, вы можете изменить символ на «✗». Также используйте другой цвет текста.

• Цвет текста: #ffffff

Clone Row столько раз, сколько хотел

После того, как вы заполнили всю строку, вы можете клонировать ее столько раз, сколько захотите, в зависимости от того, сколько функций вы хотите показать.

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите верхнее и нижнее отступы по умолчанию.

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

Граница

Также добавьте границу.

• Ширина верхней границы: 0 пикселей
• Ширина нижней границы: 0 пикселей
• Ширина правой границы: 1 пикс.
• Ширина левой границы: 1 пикс.
• Цвет границы: rgba (255,255,255,0)

Отображать

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

display: flex;

Параметры столбца 2 и 3

Интервал

Продолжите, добавив верхнее поле в столбцы 2 и 3.

• Верхняя обивка: 4vw

Граница столбца 2

Также добавьте правую границу к столбцу 2.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: #eaeaea

Клонировать модуль разделителя и поместить в столбец 1 новой строки

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

Добавить модуль кнопок в столбец 2

Добавить копию

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

Выравнивание

Измените выравнивание кнопки на вкладке дизайна.

• Расположение кнопок: по центру

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 1.5vw (планшет), 2vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # ffad72
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 50vw
• Шрифт кнопки: Montserrat

Интервал

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

• Верхняя подкладка: 1vw (рабочий стол), 1.5vw (планшет и телефон)
• Нижняя прокладка: 1vw (рабочий стол), 1.5vw (планшет и телефон)
• Левое заполнение: 4vw (рабочий стол), 6vw (планшет и телефон)
• Правая прокладка: 4vw (рабочий стол), 6vw (планшет и телефон)

Клонировать модуль кнопки и поместить дубликат в столбец 3

После того, как вы заполнили модуль кнопок в столбце 2, вы можете клонировать его и поместить дубликат в столбец 3.

Раздел клонирования # 2

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

Изменить идентификатор CSS и добавить класс CSS

Затем измените идентификатор CSS раздела и также добавьте класс CSS.

• CSS ID: цена-2
• Класс CSS: hide-section-2

Добавить новую строку из одной колонки в начало раздела №1

Осталось только добавить код CSS и jQuery, чтобы функциональность заработала. Для этого мы добавим новую строку в верхнюю часть раздела 1.

Добавить модуль кода # 1 с кодом CSS

Добавьте первый модуль кода и вставьте следующие строки кода CSS:

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Добавить модуль кода # 2 с кодом JQuery

Добавьте еще один модуль кода прямо под предыдущим, вставьте ниже код jQuery между тегами скрипта, и все готово!

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

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

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

Рабочий стол

Мобильный

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

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

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