วิธีสร้างเครื่องคำนวณต้นทุนโดยใช้ 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 แถว
สำหรับ Next
เราได้ดำเนินการเพิ่มเติมอีก 3 ฟิลด์ด้านล่างเพื่อตอบสนองความต้องการของเราสำหรับเครื่องคำนวณการประมาณต้นทุนโดยใช้ Elementor
ที่นี่ ฟิลด์ ปริมาณ คือฟิลด์ ชนิด ตัวเลข ที่คุณต้องเลือกหมายเลขสำหรับจำนวนสินค้าที่คุณต้องการซื้อ
อีกครั้ง ฟิลด์ VAT เป็นฟิลด์เครื่องคิดเลขประเภท ผู้พิการ ที่ไม่รับอินพุตจากบุคคลที่สาม นั่นหมายความว่า เป็นต้นทุนคงที่ที่จะเพิ่มเข้าไปในต้นทุนสุดท้ายของผลิตภัณฑ์
คุณจะต้องไปที่ส่วนย่อย ขั้นสูง เพื่อแทรกค่าเริ่มต้นที่จะได้รับการแก้ไขสำหรับส่วนนี้ของเครื่องคิดเลข
อย่าลืม
ไปที่แท็บเนื้อหาของวิดเจ็ต Advanced Calculator และตั้งค่าการจัดตำแหน่งสำหรับเนื้อหา เรากำลังจัดชิดซ้ายเพื่อให้มุมมองคลาสสิกดีขึ้น
ขั้นตอนที่ 2: สูตรสำหรับเครื่องคำนวณการประมาณต้นทุนโดยใช้ Elementor
นี่เป็นขั้นตอนที่สำคัญที่สุด
ตั้งแต่เริ่มต้นสร้างฟิลด์แบบฟอร์มจนถึงขั้นตอนนี้ที่นี่ เครื่องคิดเลขยังไม่พร้อมทำงาน เว้นแต่เราจะรวมสูตรไว้
สูตรนี้สามารถเป็นสมการตรรกะใดก็ได้จากการเลือกที่หลากหลาย นี่คือรายการของสูตรที่พร้อมใช้งานซึ่งคุณสามารถใช้งานได้
อย่างไรก็ตาม.
เราได้แทรกสูตรการทำงานสำหรับเครื่องคำนวณการประมาณราคาที่เราเพิ่งออกแบบไว้ เมื่อคุณใส่สูตรเข้าไป มันจะทำงานทันที
ขั้นตอนที่ 3: การปรับแต่งอื่น ๆ ให้กับเครื่องคำนวณการประมาณต้นทุน
เป้าหมายหลักของเราสำเร็จแล้ว แต่เครื่องคิดเลขดูธรรมดาและน่าเบื่อไม่มีสีเลย
ตอนนี้เราจะปรับแต่งรูปลักษณ์ของเครื่องคิดเลขโดยใช้ตัวแปรมากมาย
สำหรับตอนนี้
คลิกที่ส่วนผลลัพธ์และเลือกตัวเลือก " ในการเปลี่ยนแปลง " สำหรับตัวเลือก การแสดงผลลัพธ์ ซึ่งหมายความว่าผลลัพธ์จะเกิดขึ้นเพียงแค่ใช้เครื่องคิดเลข ไม่จำเป็นต้องกดปุ่มใดๆ
จากนั้นเราจะแสดงผลที่ด้านล่างพร้อมการจัดตำแหน่งด้านซ้ายและข้อความที่กำหนดเอง
หลังจากนั้น
เราจะใส่ข้อความในช่องด้านล่างเพื่อแสดงในกรณีที่เกิดข้อผิดพลาด ข้อผิดพลาดอาจเกิดขึ้นเนื่องจากผิดสูตรหรือป้อนข้อมูลผิด
ตอนนี้เรามาถึงส่วนสุดท้ายของการสร้างปลั๊กอินเครื่องคิดเลขต้นทุนโดยใช้ Elementor
ขั้นตอนที่ 4: มาเพิ่มสีสันกันเถอะ
ตอนนี้ สิ่งที่คุณต้องทำคือ ไปที่ส่วนรูปแบบของวิดเจ็ต และเริ่มเปลี่ยนแปลงรูปลักษณ์ตามความต้องการของคุณ
ก่อนอื่นเลย
เราจะเปลี่ยนพารามิเตอร์จากส่วน รูปแบบฟอร์ม โดยการปรับพื้นที่ฟิลด์และพื้นที่คอลัมน์
หลังจากนั้น
เราสามารถเปลี่ยนสีฉลากและรูปแบบตัวอักษรได้จากส่วนถัดไปสำหรับเครื่องคำนวณการประมาณราคาโดยใช้ Elementor
ที่นี่ คุณสามารถเลือกแบบอักษรเฉพาะสำหรับป้ายกำกับเพื่อทำให้สิ่งต่างๆ แตกต่างไปจากส่วนที่เหลือของตลาด
ในขั้นตอนต่อไป
เราปรับแต่งช่องป้อนข้อมูลโดยใช้สีข้อความที่สว่าง สีพื้นหลังที่บางมาก เส้นขอบแบบบาง และช่องว่างภายในบางส่วน
เรายังเปลี่ยนแบบอักษรโดยใช้ตัวเลือกการพิมพ์สำหรับเครื่องคำนวณการประมาณราคาโดยใช้ Elementor
จากนั้นอีกครั้ง
เราทำการเปลี่ยนแปลงข้อความผลลัพธ์โดยใช้โทนสีที่คล้ายคลึงกันสำหรับข้อความและการพิมพ์
ดูเรียบเนียนมากใช่มั้ย?
และสุดท้าย
ข้อความแสดงข้อผิดพลาดมีสีป้ายกำกับใหม่และทาสีแดงสำหรับแบนเนอร์
เราได้เพิ่มช่องว่างภายในข้อความและเปลี่ยนแบบอักษรเล็กน้อยเพื่อให้เข้ากับส่วนที่เหลือ
ตอนนี้ เครื่องคำนวณการประมาณราคาของคุณโดยใช้ Elementor ก็พร้อมสำหรับการแสดงผลแล้ว
บทสรุป
บล็อกนี้มีจุดมุ่งหมายเพื่อให้คุณใช้ปลั๊กอินตัวสร้างหน้า Elementor และ Element Pack เพื่อสร้างปลั๊กอินเครื่องคิดเลขที่เหมาะสมตามความต้องการของคุณ
หวังว่าคุณจะได้เรียนรู้สิ่งทั้งหมด
ขอบคุณที่อยู่เคียงข้างเราจนถึงเส้นชัย
บล็อกนี้นำเสนอโดย BdThemes