Некоторые люди не хотят показывать цены на свои услуги на своих Веб-сайт. Но как бы это ни пугало некоторых посетителей, это также показывает уверенность и опыт. Прозрачность вашего ценообразования позволяет вам привлекать нужных клиентов с бюджетом, с которым вы можете работать. В сегодняшнем уроке мы покажем вам, как создать потрясающий дизайн расчета цены, который вы можете использовать для своего следующего проекта Divi. Вы также можете скачать файл JSON бесплатно!
Пойдем.
обследование
Прежде чем мы углубимся в руководство, давайте быстро посмотрим, как он выглядит на экранах разных размеров.
Давайте начнем воссоздание!
Добавить раздел 1
Фоновый цвет
Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела и измените цвет фона.
- Цвет фона: # f8c5ac
Нижний разделитель
Добавьте нижний разделитель к следующему разделу.
- Стиль разделения: Поиск по списку
- Flip Divider: Вертикальный
расстояние
Также добавьте немного отступов.
- Нижняя обивка: 130px
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
Добавить текстовый модуль # 1 в столбец
Добавить контент H2
Добавьте первый текстовый модуль в ваш столбец и вставьте содержимое H2 на ваш выбор.
Настройки текста H2
Перейдите на вкладку Дизайн и измените настройки текста H2 соответственно:
- Заголовок 2 Шрифт: Монтсеррат
- Название 2 шрифт: полужирный
- Заголовок 2 Выравнивание текста: по центру
- Заголовок 2 Цвет текста: # 0f1c4d
- Заголовок 2 Размер текста: 57 пикселей (рабочий стол), 35 пикселей (планшет), 30 пикселей (телефон)
- Заголовок 2 Межбуквенный интервал: -2px
Добавить текстовый модуль # 2 в столбец
Добавить контент
Добавьте еще один текстовый модуль чуть ниже предыдущего и вставьте содержимое по вашему выбору.
Настройки текста
Перейдите на вкладку Дизайн и соответствующим образом измените настройки текста:
- Текст шрифта: Монтсеррат
- Выравнивание текста: центр
- Цвет текста: #0f1c4d
- Размер текста: 22px (рабочий стол), 18px (планшет), 16px (телефон)
Добавить модуль деления в столбец
видимость
Следующий и последний модуль, необходимый в этом столбце, - это модуль деления. Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: да
Линия
Перейдите на вкладку «Дизайн» и измените цвет линии на белый.
- Цвет линии: #ffffff
калибровка
Также измените ширину разделителя.
- Ширина: 12%
Добавить раздел 2
Фоновый цвет
Переходим к розыгрышу! Добавьте новый раздел и измените цвет фона.
- Цвет фона: #0f1c4d
расстояние
Затем добавьте некоторые пользовательские отступы вверх и вниз.
- Верхняя обивка: 70px
- Нижняя обивка: 130px
Добавить строку 1
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки и измените ширину экрана на меньший размер.
- Ширина: 80% (рабочий стол), 90% (планшет и телефон)
расстояние
Добавьте немного пользовательского пухового наполнения дальше.
- Обивка внизу: 70px (рабочий стол), 20px (планшет), 0px (телефон)
Граница
Также добавьте нижнюю границу к линии.
- Ширина нижней границы: 1px
- Цвет нижней границы: #ffffff
afficher
Наконец, чтобы убедиться, что все столбцы отображаются рядом друг с другом, мы добавим строку кода CSS к основному элементу строки.
дисплей: гибкий;
Добавьте модуль Blurb в столбец 1
Выберите значок
Пришло время начать добавлять модули! Добавьте модуль Blurb в столбец 1 и выберите значок по вашему выбору.
Настройки значка по умолчанию
Перейдите на вкладку Дизайн и соответствующим образом измените настройки значка:
- Цвет значка: # f7f7f7
- Значок круга: да
- Значок круга: # f8c5ac
- Значки позиционирования: верх
- Использовать размер шрифта значка: Да
- Размер шрифта значка: 96 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
Наведите курсор на настройки значка
Измените цвет значка наведения.
- Цвет значка: # 000000
Идентификатор CSS
Также вставьте идентификатор CSS.
- CSS-идентификатор: цена-элемент-клик-1
Добавить текстовый модуль # 1 в столбец 2
Добавить контент H3
На втором столбце! Добавьте первый текстовый модуль и вставьте содержимое H3.
Настройки текста H3
Перейдите на вкладку Дизайн и измените настройки текста H3 соответственно:
- Заголовок 3 Шрифт: Монтсеррат
- Название Шрифты 3: Полужирный
- Заголовок 3 Цвет текста: # f8c5ac
- Заголовок 3 Размер текста: 40 пикселей (рабочий стол), 25 пикселей (планшет), 18 пикселей (телефон)
- Интервал между заголовками 3: -1px
- Заголовок 3 Высота строки: 1.1em
Добавить текстовый модуль # 2 в столбец 2
Добавить контент
Добавьте другой текстовый модуль в столбец 2 с содержимым по вашему выбору.
Настройки текста
Перейдите на вкладку Дизайн и измените настройки текста.
- Текст шрифта: Монтсеррат
- Вес шрифта текста: ультра легкий
- Цвет текста: #f8c5ac
- Размер текста: 23px (рабочий стол), 18px (планшет), 14px (телефон)
- Интервал между буквами: -1px
- Высота строки текста: 1.1em
Добавить текстовый модуль в столбец 3
Добавить цену к содержанию
Давайте перейдем к третьему столбцу! Добавьте текстовый модуль и разместите цену в области содержимого.
Настройки текста
Перейдите на вкладку Дизайн и соответствующим образом измените настройки текста:
- Текст шрифта: Монтсеррат
- Вес шрифта текста: тяжелый
- Выравнивание текста: центр
- Цвет текста: #ffffff
- Размер текста: 40px (рабочий стол), 25px (планшет), 18px (телефон)
Идентификатор и класс CSS
Перейдите на вкладку «Дополнительно» и добавьте идентификатор CSS и класс CSS.
- CSS-идентификатор: price-1
- Класс CSS: цена-сначала-скрыть
Дублируйте строку столько раз, сколько необходимо
После завершения строки и всех модулей, которые она содержит, вы можете дублировать ее столько раз, сколько захотите.
Изменить CSS-идентификаторы модуля Blurb
Измените CSS ID каждого нового модуля Blurb соответственно:
- Модуль Blurb 1: цена-элемент-клик-1
- Модуль Blurb 2: цена-элемент-клик-2
- Модуль Blurb 3: цена-элемент-клик-3
- ...
Изменить цену дубликата текстового модуля и идентификаторов CSS
Сделайте то же самое для текстового модуля цены в третьем столбце каждой строки.
- Цена 1: Цена 1
- Цена 2: Цена 2
- Цена 3: Цена 3
- ...
Добавить новую строку
Структура столбца
Добавьте еще одну строку в ваш раздел, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки и измените ширину экрана на меньший размер.
- Ширина: 80% (рабочий стол), 90% (планшет и телефон)
afficher
Чтобы все столбцы отображались рядом на экранах меньшего размера, мы также добавим одну строку кода CSS в основной элемент строки.
дисплей: гибкий;
Добавьте модуль кода в столбец 1
Вставьте код CSS
Продолжите, добавив модуль кода в первый столбец строки и вставив следующие строки кода CSS:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Добавить текстовый модуль в столбец 2
Добавить контент
Перейдите во второй столбец и добавьте новый текстовый модуль с содержимым по вашему выбору.
Настройки текста
Измените настройки текста соответственно:
- Текст шрифта: Монтсеррат
- Вес шрифта текста: ультра легкий
- Цвет текста: # f8c5ac
- Размер текста: 23px (рабочий стол), 18px (планшет), 14px (телефон)
- Интервал между буквами: -1px
- Высота строки текста: 1.1em
Добавьте пустой текстовый модуль в столбец 3
Оставьте содержимое пустым
Давайте перейдем к последнему столбцу. Добавьте текстовый модуль и убедитесь, что область содержимого остается пустой.
Настройки текста
Перейдите на вкладку Дизайн и измените настройки текста следующим образом:
- Текст шрифта: Монтсеррат
- Вес шрифта текста: тяжелый
- Выравнивание текста: центр
- Цвет текста: #ffffff
- Размер текста: 40px (рабочий стол), 25px (планшет), 18px (телефон)
Идентификатор CSS
Заполните параметры модуля, добавив идентификатор CSS.
- CSS-идентификатор: total-price-cal
Добавить опции темы JQuery в Divi
Перейдите на вкладку интеграции
Теперь, когда дизайн готов, пришло время заставить его работать с кодом JQuery. Если вы хотите добавить расчет цен на одну страницу, вы можете поместить код в модуль кода. Однако, если вы используете его на нескольких страницах, перейдите к опции Divi Theme и выберите вкладку Интеграция.
Добавить код JQuery в теги Head
Вставьте следующие строки кода JQuery между тегами сценария и все готово
jQuery (function ($) {$ ('[id * = "price-item-click"]'). click (function () {var selector = $ (this) .attr ('id'). replace ('- элемент-щелчок ',' '); var $ price = $ (' # '+ selector); var sum = 0; $ price.toggle (); $ price.toggleClass (' price-active '); $ (this) .toggleClass ('price-item-active'); $ ('. price-active'). each (function () {sum + = parseFloat ($ (this) .text (). replace (/ D / g, '). '));}); if (sum> 0) {$ ("# total-price-cal"). show (); $ ("# total-price-cal"). text ("$" + sum + "k");} else {$ ("# total-price-cal"). hide ();}});});
обследование
Теперь, когда все шаги выполнены, давайте в последний раз посмотрим, что произошло с экранами разных размеров.
Заключительные мысли
В этой статье мы показали вам, как создать исключительный шаблон расчета цены с помощью Divi. Это отличный способ показать свою посетителей по какой цене начинаются ваши услуги и привлекать нужную аудиторию. Вы можете использовать этот подход для любого расчета стоимости вашего следующего проекта Divi! Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже.
