Някои хора се колебаят да показват цените на услугите си на уебсайта си. Но колкото и това да може да отблъсне някои посетители, то също така демонстрира доверие и експертиза. Прозрачността относно цените ви позволява да привлечете правилните клиенти с бюджет, в рамките на който можете да работите. В днешния урок ще ви покажем как да създадете зашеметяващ дизайн на калкулатор за ценообразуване, който можете да използвате за следващия си Divi проект. Можете също така да изтеглите JSON файла безплатно!
Да вървим.
изследване
Преди да се потопим в урока, нека да разгледаме набързо как изглежда на различни размери на екрана.
Нека започнем да пресъздаваме!
Добавете раздел 1
Цвят на фона
Започнете с добавяне на нов раздел към страницата, върху която работите. Отворете настройките на раздела и променете цвета на фона.
- Цвят на фона: # f8c5ac
Долен разделител
Добавете долен разделител към следващия раздел.
- Стил на раздяла: Търсене в списъка
- Flip Divider: вертикален
разстояние
Добавете и малко подплънки надолу.
- Подложка отдолу: 130px
Добавете нов ред
Структура на колоната
Продължете да добавяте нов ред, като използвате следната структура на колоната:
Добавете текстов модул # 1 в колоната
Добавете H2 съдържание
Добавете първия текстов модул към вашата колона и вмъкнете H2 съдържание по ваш избор.
Настройки за текст на H2
Отидете в раздела Дизайн и променете съответно настройките на текста H2:
- Заглавие на шрифта 2: Монтсеррат
- Заглавие Шрифт 2: Полусмело
- Заглавие 2 Подравняване на текст: център
- Заглавие 2 Цвят на текста: # 0f1c4d
- Заглавие 2 Размер на текста: 57 пиксели (десктоп), 35 пиксели (таблет), 30 пиксели (телефон)
- Заглавие 2 Разстояние между буквите: -2px
Добавете текстов модул # 2 в колоната
Добавете съдържание
Добавете още един текстов модул точно под предишния и поставете съдържанието по ваш избор.
Текстови настройки
Преминете към раздела Дизайн и променете съответно настройките на текста:
- Текст на шрифта: Montserrat
- Подравняване на текста: център
- Цвят на текста: #0f1c4d
- Размер на текста: 22px (десктоп), 18px (таблет), 16px (телефон)
Добавете модул за разделяне в колоната
видимост
Следващият и последен модул, необходим в тази колона, е модул за разделяне. Уверете се, че опцията „Показване на разделител“ е активирана.
- Покажи разделител: Да
Ligne
Отидете в раздела Дизайн и променете цвета на линията на бял.
- Цвят на линията: #ffffff
оразмеряване
Променете също ширината на разделителя.
- Ширина: 12%
Добавете раздел 2
Цвят на фона
Да преминем към чертежа! Добавете нов раздел и променете цвета на фона.
- Цвят на фона: #0f1c4d
разстояние
След това добавете няколко персонализирани подплънки нагоре и надолу.
- Горна подложка: 70px
- Подложка отдолу: 130px
Добавете ред 1
Структура на колоната
Продължете да добавяте нов ред в секцията, като използвате следната структура на колоните:
оразмеряване
Без още да добавяте модове, отворете настройките на реда и променете ширината до по-малки размери на екрана.
- Ширина: 80% (десктоп), 90% (таблет и телефон)
разстояние
След това добавете малко потребителско попълване.
- Тапицерия в долната част: 70px (десктоп), 20px (таблет), 0px (телефон)
граница
Освен това добавете долна граница към линията.
- Ширина на долната граница: 1px
- Цвят на долната граница: #ffffff
показ
И накрая, за да сме сигурни, че всички колони се показват една до друга, ще добавим ред от CSS код към основния елемент на реда.
дисплей: Flex;
Добавете модула Blurb към колоната 1
Изберете иконата
Време е да започнете да добавяте модули! Добавете модул Blurb към колоната 1 и изберете иконата по ваш избор.
Настройки по подразбиране на иконата
Преминете към раздела Дизайн и променете съответно настройките на иконата:
- Цвят на иконата: # f7f7f7
- Икона на кръг: да
- Икона на кръг: # f8c5ac
- Икони за позициониране: отгоре
- Използвайте Размер на шрифта на иконата: Да
- Размер на шрифта на иконата: 96px (работен плот), 20px (таблет и телефон)
Задръжте курсора на мишката върху настройките на иконата
Променете цвета на иконата на мишката.
- Цвят на иконата: # 000000
CSS идентификатор
Поставете също CSS идентификатор.
- CSS идентификатор: цена-елемент-клик-1
Добавете текстов модул # 1 в колона 2
Добавете H3 съдържание
На втората колона! Добавете първия текстов модул и вмъкнете H3 съдържание.
Настройки за текст на H3
Отидете в раздела Дизайн и променете съответно настройките на текста H3:
- Заглавие на шрифта 3: Монтсеррат
- Заглавие 3 Шрифтове: Полусмели
- Заглавие 3 Цвят на текста: # f8c5ac
- Заглавие 3 Размер на текста: 40 пиксели (десктоп), 25 пиксели (таблет), 18 пиксели (телефон)
- Заглавие разстояние между букви 3: -1px
- Заглавие 3 Line Height: 1.1em
Добавете текстов модул # 2 в колона 2
Добавете съдържание
Добавете още един текстов модул в колоната 2 със съдържание по ваш избор.
Текстови настройки
Отидете в раздела Дизайн и променете настройките на текста.
- Текст на шрифта: Montserrat
- Тегло на шрифта на текста: Ултра лек
- Цвят на текста: #f8c5ac
- Размер на текста: 23px (десктоп), 18px (таблет), 14px (телефон)
- Разстояние между буквите: -1px
- Височина на реда на текста: 1.1em
Добавете текстов модул в колоната 3
Добавете цена към съдържанието
Да преминем към третата колона! Добавете текстов модул и поставете цената в областта на съдържанието.
Текстови настройки
Преминете към раздела Дизайн и променете съответно настройките на текста:
- Текст на шрифта: Montserrat
- Тегло на шрифта на текста: тежък
- Подравняване на текста: център
- Цвят на текста: #ffffff
- Размер на текста: 40px (десктоп), 25px (таблет), 18px (телефон)
Идентификатор и клас CSS
Превключете към разширения раздел и добавете CSS ID и CSS клас.
- CSS идентификатор: цена-1
- CSS клас: цена-скрий първо
Дублирайте линията толкова пъти, колкото е необходимо
След като завършите реда и всички модули, които съдържа, можете да го дублирате толкова пъти, колкото искате.
Промяна на CSS идентификатори на модула за размиване
Променете съответно CSS ID на всеки нов модул Blurb:
- Blurb 1 Модул: цена-елемент-щракване-1
- Модул за замъгляване 2: цена-елемент-клик-2
- Модул за замъгляване 3: цена-елемент-клик-3
- ...
Променете цената на дублиращия се текстов модул и идентификационните номера на CSS
Направете същото за текстовия модул за цена в третата колона на всеки ред.
- 1 цена: 1 цена
- 2 цена: 2 цена
- 3 цена: 3 цена
- ...
Добавете нов ред
Структура на колоната
Добавете още един ред към секцията си, като използвате следната структура на колоните:
оразмеряване
Без още да добавяте модове, отворете настройките на реда и променете ширината до по-малки размери на екрана.
- Ширина: 80% (десктоп), 90% (таблет и телефон)
показ
За да сме сигурни, че всички колони се показват една до друга на по-малки размери на екрана, ще добавим и един ред CSS код към елемента на основния ред.
дисплей: Flex;
Добавете кодов модул в колоната 1
Вмъкнете CSS код
Продължете, като добавите кодов модул към първата колона на реда и поставите следните редове от CSS код:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Добавете текстов модул в колоната 2
Добавете съдържание
Отидете във втората колона и добавете нов текстов модул със съдържанието по ваш избор.
Текстови настройки
Променете съответно текстовите настройки:
- Текст на шрифта: Montserrat
- Тегло на шрифта на текста: Ултра лек
- Цвят на текста: # f8c5ac
- Размер на текста: 23px (десктоп), 18px (таблет), 14px (телефон)
- Разстояние между буквите: -1px
- Височина на реда на текста: 1.1em
Добавете празен текстов модул в колоната 3
Оставете съдържанието празно
Да преминем към последната колона. Добавете текстов модул и се уверете, че областта на съдържанието остава празна.
Текстови настройки
Отидете в раздела Дизайн и променете настройките на текста, както следва:
- Текст на шрифта: Montserrat
- Тегло на шрифта на текста: тежък
- Подравняване на текста: център
- Цвят на текста: #ffffff
- Размер на текста: 40px (десктоп), 25px (таблет), 18px (телефон)
CSS идентификатор
Попълнете параметрите на модула, като добавите CSS идентификатор.
- CSS идентификатор: обща цена-кал
Добавете опции за тема JQuery към Divi
Отидете в раздела за интеграция
След като дизайнът е завършен, е време да го накарате да работи с jQuery код. Ако искате да добавите изчисленията на цените на една страница, можете да поставите кода в модул за код. Ако обаче го използвате на няколко страници, отидете на опцията Divi Theme и изберете раздела Integration.
Добавете JQuery код към Head Tags
Вмъкнете следните редове от JQuery кода между тагове за скриптове и сте готови:
jQuery (функция ($) {$ ('[id * = "price-item-click"]'). click (function () {var selector = $ (this) .attr ('id'). replace ('- щракване върху елемент ',' '); var $ price = $ (' # '+ селектор); 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 проект! Ако имате въпроси или предложения, не забравяйте да оставите коментар в секцията за коментари по-долу.
