Как сделать калькулятор оценки стоимости с помощью Elementor и Element Pack
Опубликовано: 2022-01-11Создание калькулятора оценки стоимости с помощью Elementor может оказаться весьма полезным для вашего веб-сайта, особенно если вы используете бизнес-сайт WooCommerce или веб-сайт планирования пакетов с большим количеством комбинаций продуктов.
Мы видели веб-сайты, посвященные технологиям, одежде, косметике, продуктовым магазинам и банкам, предлагающие калькулятор оценки стоимости на своей домашней странице, чтобы помочь посетителям. Это удобно, чтобы быстро зафиксировать свой бюджет и выбрать то, что вы покупаете в магазине.
Теперь несложно создать собственный калькулятор оценки стоимости с помощью Elementor, поскольку у вас установлен плагин Element Pack Pro. У нас есть специальный плагин для калькулятора, который еще больше упрощает разработку собственного калькулятора с полной настройкой.
В этой статье мы покажем, как это сделать. Давай начнем!
Стоит ли пользоваться калькулятором оценки стоимости?
Для типичного веб-сайта WooCommerce люди обычно тратят приличное количество времени на покупки.
Не раз они находили товары, которые искали, и хотели узнать, сколько они будут стоить с учетом НДС и доставки.
Если у вас нет чего-то вроде калькулятора оценки стоимости с использованием Elementor, это повлияет на пользователей, которые не нашли подходящего способа оценить цены на продукты.
Итак, чтобы повысить удобство работы с пользователем, вы можете использовать наш собственный плагин калькулятора оценки стоимости, предоставленный вам Element Pack Pro.
Итак, для того, чтобы сделать калькулятор оценки стоимости, вы должны иметь-
- Сайт WordPress с установленным компоновщиком страниц Elementor
- Плагин Element Pack Pro
- Виджет «Расширенный калькулятор» (включается на панели инструментов)
Если все приготовления сделаны, мы можем двигаться вперед к главной цели.
Сделайте калькулятор оценки стоимости, используя Elementor и Element Pack
Спроектируем калькулятор вручную с помощью виджета из Element Pack. Это будет пошаговый процесс, поэтому вам рекомендуется следовать ему.
Теперь начнем-
Шаг 1: Вставьте поля расширенного калькулятора и настройки калькулятора
Чтобы сделать калькулятор оценки стоимости с помощью Elementor, первое, что нам нужно сделать, это добавить виджет Advanced Calculator на целевую страницу.
Прежде всего
Просто введите имя нашего виджета в меню виджетов в редакторе страниц Elementor и перетащите его на страницу. Как видите, мы сначала сделали раздел, чтобы калькулятор красиво отображался на странице.
После этого
Давайте построим поля калькулятора одно за другим. Сначала идут продукты. Нажмите кнопку « Добавить элемент » и начните настройку поля.
Здесь мы выбираем тип поля «Выбрать», устанавливаем метку «Название продукта» и вставляем наши продукты в поле параметров.
Обратите внимание, что каждая новая строка означает новую опцию здесь, и вы должны использовать «|» знак перед значением, чтобы добавить его к вычислению.
Возьмите это как самое первое поле калькулятора оценки стоимости с использованием Elementor.
Затем аналогично
Мы будем использовать одни и те же настройки для 2-го и 3-го полей. Тип идет «Выбрать», и мы поместим для них разные метки с разными наборами значений.
Мы устанавливаем ширину столбца на 33%, чтобы разместить 3 поля в 1 строке.
Для следующего
Мы взяли еще 3 поля ниже, чтобы выполнить наши требования к калькулятору оценки стоимости с использованием Elementor.
Здесь поле количества — это поле типа « Число », которое требует, чтобы вы выбрали число для количества продукта, которое вы хотите приобрести.
Опять же, поле НДС является полем калькулятора отключенного типа, которое не принимает входные данные от третьих лиц. Это означает, что это фиксированная стоимость, которая добавляется к конечной стоимости продукта.
Вам просто нужно перейти в подраздел « Дополнительно », чтобы вставить значение по умолчанию, которое будет фиксированным для этой части калькулятора.
Не забудьте
Перейдите на вкладку содержимого виджета « Расширенный калькулятор » и установите выравнивание содержимого. Мы выровняли его по левому краю для лучшего классического вида.
Шаг 2: Формула для калькулятора оценки стоимости с использованием Elementor
Это самый важный шаг.
С начала создания полей формы до этого шага калькулятор все еще не готов к работе, если мы не включим формулу.
Формула может быть любым логическим уравнением из широкого диапазона выбора. Вот список доступных формул, с которыми вы можете работать.
В любом случае.
Мы вставили рабочую формулу для калькулятора оценки стоимости, который мы только что разработали. Как только вы вставите формулу, она сразу заработает.
Шаг 3: Другие настройки калькулятора оценки стоимости
Наша главная цель уже достигнута. Но калькулятор выглядит просто и скучно, без каких-либо цветов.
Итак, теперь мы настроим внешний вид калькулятора, используя множество переменных.
На данный момент
Нажмите на раздел «Результат» и выберите параметр « При изменении » для параметра « Показать результат» . Это означает, что результат будет сформирован только с помощью калькулятора, не нужно нажимать никакие кнопки.
Затем мы покажем результат внизу с выравниванием по левому краю и настраиваемым текстом для него.
После этого
Мы поместим текст в нижнее поле для отображения в случае ошибки. Ошибка может произойти из-за неправильной формулы или неправильного ввода.
Теперь мы подошли к последней части создания плагина калькулятора стоимости с использованием Elementor.
Шаг 4: Давайте добавим цвета
Теперь все, что вам нужно сделать, это перейти к части стиля виджета и начать вносить изменения во внешний вид в соответствии с вашими потребностями.
Прежде всего
Мы изменим параметры из раздела « Стиль формы» , отрегулировав пространство поля и пространство столбца.
После этого
Мы можем изменить цвет метки и типографику из следующего раздела калькулятора оценки стоимости с помощью Elementor.
Здесь вы можете выбрать уникальный шрифт для этикеток, чтобы они отличались от остального рынка.
В следующем шаге
Мы настроили поля ввода, используя яркий цвет текста, очень тонкий цвет фона, тонкую рамку и немного отступов.
Мы также изменили шрифт, используя параметр типографики для калькулятора оценки стоимости с помощью Elementor.
Тогда снова
Мы внесли изменения в результирующий текст, применив аналогичный цветовой тон к тексту и типографике.
Выглядит довольно гладко до сих пор, не так ли?
И наконец
Текст ошибки теперь имеет новый цвет метки и окрашен в красный цвет для баннера.
Мы добавили отступы вокруг текста и немного изменили шрифт, чтобы он соответствовал остальным.
Теперь ваш калькулятор оценки стоимости с использованием Elementor готов к отображению.
Заключение
Этот блог предназначен для того, чтобы вы могли использовать плагин конструктора страниц Elementor и Element Pack для создания достойных плагинов калькулятора в соответствии с вашими требованиями.
Надеюсь, вы все узнали.
Спасибо, что были с нами до финиша.
Этот блог представлен BdThemes.