ElementorとElementPackを使用してコスト見積もり計算機を作成する方法

公開: 2022-01-11

Elementorを使用してコスト見積もり計算機を作成すると、特にWooCommerceビジネスサイトや多くの製品の組み合わせを含むパッケージ計画Webサイトを運営している場合に、Webサイトに非常に役立ちます。

テクノロジー、布、化粧品、食料品、銀行のWebサイトでは、訪問者を支援するためにホームページにコスト見積もり計算ツールが用意されています。 予算をすばやく修正し、ストアで購入するものを選択すると便利です。

Element Pack Proプラグインがインストールされているので、Elementorを使用して独自のコスト見積もり計算機を作成するのは難しい作業ではありません。 特別な計算機プラグインがあり、完全にカスタマイズして独自の計算機をさらに簡単に設計できます。

この記事では、その方法を説明します。 さぁ、始めよう!

コスト見積もり計算機は価値がありますか?

典型的なWooCommerceWebサイトの場合、人々は通常、かなりの時間を買い物に費やします。

何度も、彼らは探している製品を見つけ、VATと送料を含めてどのようにかかるかを見たいと思っています。

Elementorを使用したコスト見積もり計算機のようなものがない限り、製品価格を見積もる適切な方法を見つけられなかったユーザーに影響します。

したがって、ユーザーエクスペリエンスを向上させるために、ElementPackProが提供するカスタムコスト見積もり計算プラグインを使用できます。

したがって、コスト見積もり計算機を作成するには、次のことが必要です。

  • ElementorページビルダーがインストールされたWordPressサイト
  • ElementPackProプラグイン
  • Advanced Calculatorウィジェット(ダッシュボードから有効)

すべての準備が整ったら、主な目標に向かって前進することができます。

ElementorとElementPackを使用してコスト見積もり計算機を作成する

Element Packのウィジェットを使用して、電卓を手動で設計してみましょう。 これは段階的なプロセスになるため、従うことをお勧めします。

さあ、始めましょう-

ステップ-1:高度な計算機の挿入と計算機の設定フィールド

Elementorを使用してコスト見積もり計算機を作成するには、最初に、ターゲットページ内にAdvancedCalculatorウィジェットを取得する必要があります。

初めに

Elementorを使用したコスト見積もり計算機

Elementorページエディタ内のウィジェットメニューにウィジェットの名前を入力し、ページ内にドラッグするだけです。 ご覧のとおり、電卓をページにうまく表示するために、最初にセクションを作成しました。

その後

電卓フィールドを1つずつ作成してみましょう。 最初に製品が登場します。 [アイテムの追加]ボタンをクリックして、フィールドのカスタマイズを開始します。

ここでは、フィールドタイプ「選択」を選択し、ラベルを「製品名」として設定して、オプションフィールドに製品を挿入します。

ここでは、新しい行はそれぞれ新しいオプションを意味し、「|」を使用する必要があることに注意してください。 値を計算に追加するには、値の前に署名します。

Elementorを使用したコスト見積もり計算機の最初のフィールドとしてこれを取り上げてください。

次に同様に

2番目と3番目のフィールドについてはまったく同じ設定を使用します。 タイプは「選択」になり、異なる値セットでそれらに異なるラベルを付けます。

1行に3つのフィールドを収めるために、列幅を33%に設定しています。

次のために

Elementorを使用したコスト見積もり計算機の要件を満たすために、以下の3つのフィールドを取得しました。

ここで、数量フィールドは、購入する製品の数量の番号を選択する必要がある番号タイプフィールドです。

繰り返しになりますが、VATフィールドは、サードパーティからの入力を受け取らない無効タイプの計算フィールドです。 つまり、製品の最終コストに追加されるのは固定コストです。

電卓のこの部分に固定されるデフォルト値を挿入するには、[詳細]サブセクションに移動する必要があります。

忘れないでください

Advanced Calculatorウィジェットの[コンテンツ]タブに移動し、コンテンツの配置を設定します。 よりクラシックなビューを実現するために、左側を揃えています。

ステップ2:Elementorを使用したコスト見積もり計算機の式

これが最も重要なステップです。

フォームフィールドの作成の開始からここでのこのステップまで、数式を含めない限り、電卓はまだ機能する準備ができていません。

数式は、幅広い選択肢の中から任意の論理方程式にすることができます。 使用できる数式のリストは次のとおりです。

ともかく。

設計したばかりのコスト見積もり計算機の作業式を挿入しました。 数式を挿入すると、すぐに機能します。

ステップ-3:コスト見積もり計算ツールのその他のカスタマイズ

私たちの主な目標はすでに達成されています。 しかし、電卓は色がまったくなく、無地でくすんで見えます。

そこで、多くの変数を使用して電卓の外観をカスタマイズします。

今のところ

[結果]セクションをクリックし、[結果の表示]オプションの[変更時]オプションを選択します。 これは、ボタンを押す必要がなく、計算機を使用するだけで結果が形成されることを意味します。

次に、左側の配置とそのカスタムテキストとともに結果を下部に表示します。

その後

エラーが発生した場合に表示するために、下部のフィールドにテキストを入力します。 数式や入力が間違っているためにエラーが発生する可能性があります。

これで、Elementorを使用したコスト計算プラグインの作成の最後の部分に到達しました。

ステップ-4:色を追加しましょう

これで、ウィジェットのスタイル部分に移動して、必要に応じて外観を変更するだけです。

初めに

フィールドスペースと列スペースを調整して、[フォームスタイル]セクションのパラメータを変更します。

その後

Elementorを使用したコスト見積もり計算機の次のセクションから、ラベルの色とタイポグラフィを変更できます。

ここでは、他の市場とは異なるものにするために、ラベルに独自のフォントを使用できます。

次のステップで

明るいテキストの色、非常に薄い背景色、薄い境界線、およびいくつかのパディングを使用して、入力フィールドをカスタマイズしました。

また、Elementorを使用したコスト見積もり計算機のタイポグラフィオプションを使用してフォントを変更しました。

また

テキストとタイポグラフィに同様の色調を適用することにより、結果のテキストに変更を加えました。

これまでのところかなりスムーズに見えますよね?

そして最後に

エラーテキストのラベルの色が新しくなり、バナーの色が赤で表示されます。

テキストの周りにいくつかのパディングを追加し、残りの部分と一致するようにフォントを少し変更しました。

これで、Elementorを使用したコスト見積もり計算機を表示する準備が整いました。

結論

このブログは、ElementorページビルダープラグインとElement Packを使用して、要件に応じて適切な計算機プラグインを作成できるようにすることを目的としています。

うまくいけば、あなたはすべてを学んだ。

フィニッシュラインに固執していただきありがとうございます。

このブログはBdThemesによって提供されています。