วิธีสร้างการคำนวณราคาอัตโนมัติด้วย Divi (โดยใช้ JQuery)

บางคนลังเลที่จะเสนอราคาบริการบนเว็บไซต์ แต่ถึงแม้จะทำให้ผู้เข้าชมบางคนหวาดกลัว แต่ก็ยังแสดงความมั่นใจและความเชี่ยวชาญ ความโปร่งใสในการกำหนดราคาช่วยให้คุณดึงดูดลูกค้าที่เหมาะสมด้วยงบประมาณที่คุณสามารถใช้ได้ ในบทช่วยสอนวันนี้ เราจะแสดงวิธีสร้างการออกแบบการคำนวณราคาที่น่าทึ่งซึ่งคุณสามารถใช้สำหรับโปรเจ็กต์ Divi ถัดไปของคุณ คุณจะสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน!

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงการคำนวณราคาฟรี

ในการวางเค้าโครงการคำนวณราคาฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

อย่าลืมเพิ่มโค้ด JQuery ลงในเว็บไซต์ของคุณด้วย! คุณสามารถหาโค้ดได้ที่ส่วนท้ายของบทช่วยสอนนี้

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตรา #1

สีพื้นหลัง

เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่ เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #f8c5ac

ตัวแบ่งด้านล่าง

เพิ่มตัวแบ่งด้านล่างในส่วนถัดไป

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• พลิกตัวแบ่ง: แนวตั้ง

ระยะห่าง

เพิ่มแผ่นรองด้านล่างด้วย

• ช่องว่างภายในด้านล่าง: 130px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

เพิ่มเนื้อหา H2

เพิ่มโมดูลข้อความแรกในคอลัมน์ของคุณและแทรกเนื้อหา H2 ที่คุณเลือก

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H2 ตามลำดับ:

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 2 น้ำหนักแบบอักษร: กึ่งหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #0f1c4d
• ขนาดข้อความของหัวเรื่อง 2: 57px (เดสก์ท็อป), 35px (แท็บเล็ต), 30px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -2px

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าและแทรกเนื้อหาบางส่วนที่คุณเลือก

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #0f1c4d
• ขนาดตัวอักษร: 22px (เดสก์ท็อป), 18px (แท็บเล็ต), 16px (โทรศัพท์)

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

โมดูลถัดไปและโมดูลสุดท้ายที่จำเป็นในคอลัมน์นี้คือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

เส้น

ไปที่แท็บออกแบบและเปลี่ยนสีเส้นเป็นสีขาว

• สีเส้น: #ffffff

ขนาด

แก้ไขความกว้างของตัวแบ่งด้วย

• ความกว้าง: 12%

เพิ่มส่วน #2

สีพื้นหลัง

สู่ส่วนต่อไปของการออกแบบ! เพิ่มส่วนใหม่และเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #0f1c4d

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 70px
• ช่องว่างภายในด้านล่าง: 130px

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนความกว้างตามขนาดหน้าจอที่เล็กลง

• ความกว้าง: 80% (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

เพิ่ม padding ด้านล่างแบบกำหนดเองต่อไป

• ช่องว่างภายในด้านล่าง: 70px (เดสก์ท็อป), 20px (แท็บเล็ต), 0px (โทรศัพท์)

ชายแดน

เพิ่มเส้นขอบด้านล่างให้กับแถวด้วย

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #ffffff

แสดง

และสุดท้าย เพื่อให้แน่ใจว่าคอลัมน์ทั้งหมดจะแสดงติดกัน เราจะเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว

display: flex;

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เลือกไอคอน

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูล Blurb ในคอลัมน์ 1 และเลือกไอคอนที่คุณต้องการ

การตั้งค่าไอคอนเริ่มต้น

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าไอคอนตามลำดับ:

• สีไอคอน: #f7f7f7
• ไอคอนวงกลม: ใช่
• ไอคอนวงกลม: #f8c5ac
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 96px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)

การตั้งค่าไอคอนโฮเวอร์

แก้ไขสีไอคอนเมื่อวางเมาส์ไว้

• ไอคอนสี: #000000

CSS ID

ใส่ CSS ID ด้วย

• CSS ID: ราคา-รายการ-คลิก-1

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2

เพิ่มเนื้อหา H3

ต่อคอลัมน์ที่สอง! เพิ่มโมดูลข้อความแรกและแทรกเนื้อหา H3 บางส่วน

การตั้งค่าข้อความ H3

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H3 ตามลำดับ:

• หัวข้อ 3 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 3 น้ำหนักแบบอักษร: กึ่งหนา
• หัวเรื่อง 3 สีข้อความ: #f8c5ac
• หัวเรื่อง 3 ขนาดข้อความ: 40px (เดสก์ท็อป), 25px (แท็บเล็ต), 18px (โทรศัพท์)
• หัวเรื่อง 3 ระยะห่างตัวอักษร: -1px
• ส่วนหัว 3 ความสูงของบรรทัด: 1.1em

เพิ่มโมดูลข้อความ #2 ลงในคอลัมน์ 2

เพิ่มเนื้อหา

เพิ่มโมดูลข้อความอื่นในคอลัมน์ 2 พร้อมเนื้อหาบางส่วนที่คุณเลือก

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความ

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: Ultra Light
• สีข้อความ: #f8c5ac
• ขนาดตัวอักษร: 23px (เดสก์ท็อป), 18px (แท็บเล็ต), 14px (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: -1px
• ความสูงของบรรทัดข้อความ: 1.1em

เพิ่มโมดูลข้อความในคอลัมน์ 3

เพิ่มราคาในกล่องเนื้อหา

ต่อแถวที่สาม! เพิ่มโมดูลข้อความและใส่ราคาในกล่องเนื้อหา

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: หนัก
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 40px (เดสก์ท็อป), 25px (แท็บเล็ต), 18px (โทรศัพท์)

CSS ID & คลาส

ไปที่แท็บขั้นสูงและเพิ่มคลาส CSS ID และ CSS

• CSS ID: ราคา-1
• CSS Class: ราคาซ่อนก่อน

โคลนแถวหลาย ๆ ครั้งตามต้องการ

เมื่อคุณสร้างแถวและโมดูลทั้งหมดในแถวเสร็จแล้ว คุณสามารถโคลนแถวได้มากเท่าที่คุณต้องการ

เปลี่ยนรหัส CSS ของโมดูล Blurb ที่ซ้ำกัน

เปลี่ยน CSS ID ของแต่ละโมดูล Blurb ใหม่ตามลำดับ:

• Blurb Module 1: ราคารายการคลิก-1
• Blurb Module 2: price-item-click-2
• Blurb Module 3: ราคารายการคลิก-3
• …

เปลี่ยนราคาโมดูลข้อความซ้ำ & รหัส CSS

ทำเช่นเดียวกันสำหรับโมดูลข้อความราคาในคอลัมน์ที่สามของแต่ละแถว

• ราคา 1: ราคา-1
• ราคา 2: ราคา-2
• ราคา 3: ราคา-3
• …

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

เพิ่มแถวอื่นในส่วนของคุณโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนความกว้างตามขนาดหน้าจอที่เล็กลง

• ความกว้าง: 80% (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์)

แสดง

เพื่อให้แน่ใจว่าคอลัมน์ทั้งหมดปรากฏติดกันบนหน้าจอขนาดเล็ก เราจะเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถวด้วย

display: flex;

เพิ่มโมดูลโค้ดลงในคอลัมน์ 1

ใส่โค้ด CSS

ดำเนินการต่อโดยเพิ่ม Code Module ลงในคอลัมน์แรกของแถวและแทรกโค้ด CSS ต่อไปนี้:

<style>
.price-hide-first {
display: none;
}

.price-item-active .et-pb-icon {
color: black !important;
}
</style>

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

ไปที่คอลัมน์ที่สองและเพิ่มโมดูลข้อความใหม่พร้อมเนื้อหาบางส่วนที่คุณเลือก

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: Ultra Light
• สีข้อความ: #f8c5ac
• ขนาดตัวอักษร: 23px (เดสก์ท็อป), 18px (แท็บเล็ต), 14px (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: -1px
• ความสูงของบรรทัดข้อความ: 1.1em

เพิ่มโมดูลข้อความเปล่าลงในคอลัมน์ 3

เว้นช่องเนื้อหาว่างไว้

ไปยังคอลัมน์ถัดไปและคอลัมน์สุดท้าย เพิ่มโมดูลข้อความและตรวจดูให้แน่ใจว่ากล่องเนื้อหายังคงว่างเปล่า

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความดังนี้:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: หนัก
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 40px (เดสก์ท็อป), 25px (แท็บเล็ต), 18px (โทรศัพท์)

CSS ID

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่ม CSS ID

• CSS ID: ราคารวม-cal

เพิ่ม JQuery ให้กับตัวเลือกธีม Divi

ไปที่แท็บการรวม

หลังจากที่เราออกแบบเสร็จแล้ว ก็ถึงเวลาที่จะทำให้ฟังก์ชันทำงานโดยใช้โค้ด JQuery บางส่วน หากคุณต้องการเพิ่มการคำนวณราคาในหน้าเดียวเท่านั้น คุณสามารถวางโค้ดในโมดูลโค้ดได้ อย่างไรก็ตาม หากคุณใช้งานหลายหน้า ให้ไปที่ตัวเลือกธีม Divi และเลือกแท็บการรวม

เพิ่มรหัส JQuery ไปที่แท็กส่วนหัว

แทรกบรรทัดต่อไปนี้ของรหัส JQuery ระหว่างแท็กสคริปต์ และทำเสร็จแล้ว:

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    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 ถัดไปของคุณ! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับ Divi และรับ Divi freebies เพิ่มเติม อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้เป็นหนึ่งในคนกลุ่มแรกๆ ที่รู้จักและรับประโยชน์จากเนื้อหาฟรีนี้เสมอ