كيفية عمل حاسبة تقدير التكلفة باستخدام Elementor و Element Pack
نشرت: 2022-01-11يمكن أن يوفر إنشاء آلة حاسبة لتقدير التكلفة باستخدام Elementor مفيدًا جدًا لموقع الويب الخاص بك ، خاصةً إذا كنت تدير موقع أعمال WooCommerce أو موقع ويب لتخطيط الحزم به الكثير من مجموعات المنتجات.
لقد رأينا مواقع إلكترونية للتكنولوجيا والقماش ومستحضرات التجميل والبقالة والمصرفية تقدم حاسبة تقدير التكلفة على صفحتها الرئيسية لمساعدة الزوار. إنه مفيد لإصلاح ميزانيتك بسرعة واختيار ما تشتريه من المتجر.
الآن ، ليس من الصعب إنشاء آلة حاسبة لتقدير التكلفة الخاصة بك باستخدام Elementor حيث تم تثبيت المكون الإضافي Element Pack Pro الخاص بنا. لدينا مكون إضافي خاص بالآلة الحاسبة يجعل من السهل تصميم الآلة الحاسبة الخاصة بك مع التخصيصات الكاملة.
في هذه المقالة ، سوف نوضح كيفية القيام بذلك. هيا نبدأ!
هل حاسبة تقدير التكلفة أي قيمة؟
بالنسبة إلى موقع ويب WooCommerce نموذجي ، يقضي الأشخاص عادةً وقتًا مناسبًا في التسوق.
أكثر من مرة ، وجدوا المنتجات التي يبحثون عنها ويريدون معرفة التكلفة التي سيكلفونها بما في ذلك ضريبة القيمة المضافة والشحن.
ما لم يكن لديك شيء مثل حاسبة تقدير التكلفة باستخدام Elementor ، فسيؤثر ذلك على المستخدمين الذين لم يجدوا طريقة مناسبة لتقدير أسعار المنتج.
لذلك ، من أجل تعزيز تجربة المستخدم الخاصة بك ، يمكنك استخدام المكوّن الإضافي المخصص لآلة حاسبة لتقدير التكلفة والذي يقدمه لك Element Pack Pro.
لذلك ، من أجل عمل حاسبة تقدير التكلفة ، يجب أن يكون لديك-
- موقع WordPress مثبت عليه Elementor page builder
- البرنامج المساعد Element Pack Pro
- أداة حاسبة متقدمة (ممكّنة من لوحة القيادة)
إذا تم الانتهاء من جميع الاستعدادات ، يمكننا المضي قدمًا نحو الهدف الرئيسي.
قم بعمل حاسبة تقدير التكلفة باستخدام Elementor و Element Pack
لنصمم الآلة الحاسبة يدويًا باستخدام الأداة من Element Pack. ستكون هذه عملية خطوة بخطوة ، لذا يُنصح بالمتابعة.
الآن ، لنبدأ-
الخطوة 1: أدخل الآلة الحاسبة المتقدمة وقم بإعداد حقول الآلة الحاسبة
لعمل حاسبة تقدير التكلفة باستخدام Elementor ، فإن أول شيء يتعين علينا القيام به هو الحصول على أداة حاسبة متقدمة داخل الصفحة الهدف.
في البداية
ببساطة ، اكتب اسم عنصر واجهة المستخدم الخاص بنا في قائمة عنصر واجهة المستخدم داخل محرر صفحة Elementor واسحبه داخل الصفحة. كما ترى ، قمنا بإنشاء قسم أولاً لعرض الآلة الحاسبة بشكل جيد على الصفحة.
بعد ذلك
لنقم ببناء حقول الآلة الحاسبة واحدة تلو الأخرى. يأتي أولاً المنتجات. انقر فوق الزر " إضافة عنصر " وابدأ في تخصيص الحقل.
هنا ، نختار نوع الحقل "تحديد" ، وقم بتعيين تسمية باسم "اسم المنتج" ، وإدراج منتجاتنا في حقل الخيارات.
لاحظ أن كل سطر جديد يعني خيارًا جديدًا هنا ويجب عليك استخدام "|" وقع قبل القيمة لإضافتها إلى الحساب.
خذ هذا باعتباره الحقل الأول في حاسبة تقدير التكلفة باستخدام Elementor.
ثم بالمثل
سنستخدم نفس الإعدادات بالضبط للحقلين الثاني والثالث. النوع ينتقل إلى "تحديد" وسنضع تسميات مختلفة لهم بمجموعات قيم مختلفة.
نقوم بتعيين عرض العمود على 33٪ ليناسب 3 حقول في صف واحد.
للتالي
لقد أخذنا 3 حقول أخرى أدناه لتلبية متطلباتنا لآلة تقدير التكلفة باستخدام Elementor.
هنا ، حقل الكمية هو حقل نوع الرقم الذي يتطلب منك اختيار رقم لمقدار المنتج الذي تريد شرائه.
مرة أخرى ، حقل ضريبة القيمة المضافة هو حقل آلة حاسبة من النوع المعطل لا يأخذ مدخلات من الطرف الثالث. هذا يعني أنها تكلفة ثابتة تضاف إلى التكلفة النهائية للمنتج.
سيكون عليك فقط الانتقال إلى القسم الفرعي Advanced لإدخال قيمة افتراضية سيتم إصلاحها لهذا الجزء من الآلة الحاسبة.
لا تنسى
انتقل إلى علامة تبويب المحتوى في أداة الحاسبة المتقدمة وقم بتعيين محاذاة المحتوى. نحافظ على محاذاة الجانب الأيسر للحصول على عرض كلاسيكي أفضل.
الخطوة 2: معادلة حساب تقدير التكلفة باستخدام Elementor
هذه الخطوة الأكثر أهمية.
من بداية تكوين حقول النموذج إلى هذه الخطوة هنا ، لا تزال الآلة الحاسبة غير جاهزة للعمل إلا إذا قمنا بتضمين صيغة.
يمكن أن تكون الصيغة أي معادلة منطقية من نطاق واسع من التحديد. فيما يلي قائمة بالصيغة المتاحة التي يمكنك العمل بها.
على أي حال.
لقد أدخلنا صيغة العمل لآلة حاسبة تقدير التكلفة التي صممناها للتو. بمجرد إدخال الصيغة ، ستعمل على الفور.
الخطوة 3: تخصيصات أخرى لحاسبة تقدير التكلفة
تم تحقيق هدفنا الرئيسي بالفعل. لكن الآلة الحاسبة تبدو عادية وباهتة مع عدم وجود ألوان على الإطلاق.
لذلك ، سنقوم الآن بتخصيص مظهر الآلة الحاسبة باستخدام الكثير من المتغيرات.
الى الان
انقر فوق قسم النتيجة وحدد الخيار " عند التغيير " لخيار إظهار النتيجة . هذا يعني أن النتيجة سيتم تشكيلها فقط باستخدام الآلة الحاسبة ، ولا داعي للضغط على أي زر.
ثم سنعرض النتيجة في الأسفل بمحاذاة الجانب الأيسر ونص مخصص لها.
بعد ذلك
سنضع بعض النص في الحقل السفلي لعرضه في حالة حدوث خطأ. قد يحدث الخطأ بسبب صيغة خاطئة أو إدخال خاطئ.
لقد وصلنا الآن إلى الجزء الأخير من إنشاء مكون إضافي لحساب التكلفة باستخدام Elementor.
الخطوة 4: دعونا نضيف الألوان
الآن كل ما عليك فعله هو الانتقال إلى جزء النمط من الأداة والبدء في إجراء تغييرات في المظهر وفقًا لاحتياجاتك.
في البداية
سنقوم بتغيير المعلمات من قسم نمط النموذج عن طريق تعديل مساحة الحقل ومساحة العمود.
بعد ذلك
يمكننا تغيير لون الملصق والطباعة من القسم التالي لحساب تقدير التكلفة باستخدام Elementor.
هنا ، يمكنك اختيار خط فريد للتسميات لجعل الأشياء مختلفة عن باقي السوق.
في الخطوة التالية
قمنا بتخصيص حقول الإدخال باستخدام لون نص ساطع ولون خلفية رقيق للغاية وحد رفيع وبعض الحشو.
قمنا أيضًا بتغيير الخط باستخدام خيار الطباعة لآلة تقدير التكلفة باستخدام Elementor.
ثم مرة أخرى
قمنا بإجراء تغييرات على النص الناتج عن طريق تطبيق نغمة لونية مماثلة للنص والطباعة.
تبدو سلسة جدًا حتى الآن ، أليس كذلك؟
و اخيرا
أصبح لنص الخطأ الآن لون تسمية جديد وتم طلاؤه باللون الأحمر للشعار.
أضفنا بعض الحشو حول النصوص وقمنا بتغيير الخط قليلاً لمطابقة البقية.
الآن ، حاسبة تقدير التكلفة الخاصة بك باستخدام Elementor جاهزة للعرض.
خاتمة
تهدف هذه المدونة إلى السماح لك باستخدام المكون الإضافي لـ Elementor page builder و Element Pack لبناء إضافات مناسبة للحاسبة وفقًا لمتطلباتك.
نأمل أن تكون قد تعلمت كل شيء.
شكرا لبقائك معنا إلى خط النهاية.
هذه المدونة مقدمة من BdThemes.