หยุดเสียเวลาและเงิน!

สร้างเว็บไซต์หรือบล็อก WordPress ของคุณได้ง่ายๆ วันนี้

Elementor เป็นเครื่องมือที่ง่ายที่สุดและสำคัญที่สุด เป็นเครื่องมือที่เร็วที่สุดในการสร้างเว็บไซต์หรือบล็อก WordPress ทุกประเภท ไม่มีความรู้ด้านเทคนิค จำเป็นและเหมาะสำหรับผู้เริ่มต้นหรือผู้ใช้มืออาชีพ คุณเองก็สามารถทำได้ ดังนั้น ลงมือทำเลย!

คุณต้องการสร้างแผนที่ที่มีหลายตำแหน่งใน WordPress ด้วย Elementor และส่วนเสริมที่จำเป็น?

สมมติว่าคุณมีธุรกิจที่มีสาขาหลายแห่งในเมือง และคุณต้องการสร้างแผนที่ดิจิทัลที่แสดงที่ตั้งของสาขาเหล่านั้น หากคุณมีเว็บไซต์ที่ใช้ WordPress คุณสามารถสร้างแผนที่ดังกล่าวได้อย่างง่ายดาย มีปลั๊กอินที่ยอดเยี่ยมที่คุณสามารถใช้เพื่อสร้างแผนที่หลายตำแหน่ง: ส่วนเสริมที่จำเป็น.

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

La Essential Addons รุ่นฟรี นอกจากนี้ยังมี อย่างไรก็ตาม วิดเจ็ตสำหรับสร้างแผนที่มีให้ใช้งานในเวอร์ชันที่ต้องชำระเงินเท่านั้น คุณสามารถดาวน์โหลด Essential Addons เวอร์ชันจ่ายได้ เว็บไซต์อย่างเป็นทางการ.

เราจะใช้แพลตฟอร์ม Google Maps เพื่อสร้างแผนที่บน WordPress ของคุณโดยใช้ Essential Addons ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าได้ติดตั้ง Elementor และ Essential Addons แล้ว

รวม Google Maps กับโมดูล Essential Addons

ก่อนที่คุณจะสามารถเพิ่มแผนที่ Google Maps ด้วย Essential Addons คุณต้องผสานรวมก่อน คุณต้องใช้คีย์ API เพื่อรวม Google Maps กับโมดูล Essential Addons

ขั้นแรกให้ไปที่ คอนโซล Google API และลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ สร้างโครงการใหม่โดยคลิกที่เมนูแบบเลื่อนลงที่ด้านบนแล้วคลิก โครงการใหม่.

ตั้งชื่อโครงการใหม่ของคุณแล้วคลิกปุ่ม CREATE .

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

เมื่อสร้างโครงการใหม่ของคุณแล้ว ให้เลือกจากเมนูแบบเลื่อนลงแล้วคลิก ห้องสมุด ที่แผงด้านซ้าย

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

Google แบ่ง Google Maps Platform API ออกเป็น 17 ประเภท คุณสามารถดูได้โดยคลิกที่ลิงค์ แสดงทั้งหมด ในส่วน แผนที่. คุณต้องเปิดใช้งาน API ขึ้นอยู่กับสิ่งที่คุณต้องการทำให้สำเร็จ

ค้นพบยัง: วิธีสร้างเทมเพลตผลิตภัณฑ์เดียวที่กำหนดเองใน WooCommerce ด้วย Elementor

ในกรณีของเรา คุณต้องเปิดใช้งาน API ต่อไปนี้เพื่อเพิ่มแผนที่จาก Google Maps โดยใช้ Essential Addons

  • ทิศทาง API
  • API การเข้ารหัสทางภูมิศาสตร์
  • แผนที่ JavaScript API
  • ที่นั่ง API

ในการเปิดใช้งาน API ให้เลือก API ที่คุณต้องการเปิดใช้งาน (โดยคลิกที่มัน) แล้วคลิกที่ปุ่ม เปิดใช้งาน.

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

เมื่อคุณเปิดใช้งาน API ที่จำเป็นเสร็จแล้ว ให้กลับไปที่แดชบอร์ดหลักของคอนโซล Google API แล้วคลิก ตัวบ่งชี้ ที่แผงด้านซ้าย คลิกที่ปุ่ม สร้างข้อมูลรับรอง และเลือก รหัส API. คัดลอกคีย์ API บนป๊อปอัปที่ปรากฏขึ้น

เข้าสู่ระบบแดชบอร์ด WordPress ของคุณและคลิก ส่วนเสริมที่จำเป็น ที่แผงด้านซ้าย คลิกที่แท็บ องค์ประกอบ และเลื่อนลงมาในส่วน แผนที่ Google ขั้นสูง. Cliquez sur การตั้งค่า และวางคีย์ API ที่คุณเพิ่งคัดลอก

คลิกที่ปุ่ม บันทึกการตั้งค่า เพื่อใช้การเปลี่ยนแปลงใหม่

เริ่มสร้างแผนที่

เมื่อรวม Google Maps และ Essential Addons แล้ว คุณสามารถเริ่มสร้างแผนที่ได้ ในการดำเนินการนี้ ให้สร้างหน้าใหม่ (หน้า – > เพิ่ม ) หรือบทความใหม่ (รายการ -> เพิ่ม) และแก้ไขด้วย Elementor

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor

ก่อนสร้างเพจ ให้ตั้งค่าเค้าโครงโดยคลิกไอคอนรูปเฟืองที่มุมล่างซ้ายเพื่อเปิดแผงการตั้งค่า ตั้งค่าเค้าโครงจากเมนูแบบเลื่อนลง

สร้างส่วนใหม่โดยคลิกปุ่มบวกในกล่องแก้ไข หากต้องการให้แผนที่มีพื้นที่กว้างขึ้น คุณสามารถเลือกโครงสร้างคอลัมน์เดียวได้ ลากวิดเจ็ต อีเอ Google Maps จากแผงด้านซ้ายไปยังพื้นที่แก้ไข

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

ไปที่แผงด้านซ้ายและตั้งค่าประเภทการ์ดเป็น หลายเครื่องหมาย.

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

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

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor

หากต้องการทราบละติจูดและลองจิจูดของสถานที่ ให้เปิด Google Maps แล้วค้นหาสถานที่ (สถานที่) ที่คุณต้องการรับละติจูดและลองจิจูด เมื่อพบแล้วให้คลิกด้วยการคลิกเมาส์ขวาและคลิกซ้ายที่ตัวเลขที่ปรากฏบนเมนูตามบริบท

การดำเนินการนี้ทำให้คุณสามารถคัดลอกละติจูด (ค่าแรก) และลองจิจูด (ค่าที่สอง)

เมื่อเพิ่มละติจูดและลองจิจูดของตำแหน่งแรกเสร็จแล้ว ให้คลิกปุ่ม เพิ่มองค์ประกอบ เพื่อเพิ่มสถานที่อื่นในแผนที่ของคุณ

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor

เปิด Google Maps อีกครั้งและค้นหาตำแหน่งใหม่ที่คุณต้องการเพิ่มลงในแผนที่ และคัดลอกลองจิจูดและลองจิจูดและวางลงในช่องที่เกี่ยวข้องเช่นเดียวกับด้านบน ทำซ้ำขั้นตอนข้างต้นเพื่อเพิ่มตำแหน่งอื่นๆ ลงในแผนที่

อ่าน: วิธีใช้วิดเจ็ตโพสต์ของ Elementor

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

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor

คุณยังสามารถเปิดบล็อก ธีมแผนที่ เพื่อเลือกธีม Google Maps ที่คุณต้องการใช้

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

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

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor

หากคุณต้องการแผนที่แบบเต็มความกว้าง ให้ตั้งค่าส่วนที่มีแผนที่เป็นแบบเต็มความกว้าง ในการทำเช่นนี้ ให้คลิกที่หมายเลขอ้างอิงของส่วน

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

ในแท็บและบล็อก แบบ กำหนดความกว้างของเนื้อหาเป็น เต็มความกว้างr และเปิดช่องว่างของคอลัมน์ ไม่มีการเบี่ยงเบน

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor

คลิกที่ปุ่ม ที่ตีพิมพ์ER ที่ด้านล่างของแผงด้านซ้ายเพื่อเผยแพร่เพจของคุณ

ฝังแผนที่ในเพจหรือโพสต์

หากด้วยเหตุผลบางอย่างที่คุณต้องการฝังแผนที่ของคุณบนหน้า/โพสต์ (หน้า/โพสต์ที่สร้างด้วยตัวแก้ไขเริ่มต้นของ WordPress — Gutenberg) คุณสามารถใช้ WordPress ปลั๊กอิน Elementor Blocks สำหรับ Gutenberg. ปลั๊กอินนี้จะแปลงเทมเพลต Elementor เป็นบล็อก Gutenberg

หากต้องการบันทึกแผนที่ที่คุณเพิ่งสร้างเป็นเทมเพลต Elementor ให้คลิกไอคอนลูกศรถัดจากปุ่ม เผยแพร่ / อัปเดต และเลือก บันทึกเป็นแม่แบบ.

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

ตั้งชื่อโมเดลของคุณและคลิกที่ปุ่ม ผู้ลงทะเบียน.

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor และ Essential Addons

จากนั้น สร้างหน้าหรือโพสต์ใหม่ (ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง ปลั๊กอินองค์ประกอบ บล็อกสำหรับ Gutenberg) เพิ่มบล็อกใหม่แล้วเลือก ไลบรารี Elementor แล้วเลือกเทมเพลตที่คุณเพิ่งสร้างขึ้น

สร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor

Remarque: หากคุณเห็นข้อความ 'เพื่อวัตถุประสงค์ในการพัฒนาเท่านั้น' เมื่อเพิ่มบัตร อย่าลืมเปิดใช้งานการเรียกเก็บเงินของ Google Cloud นโยบายใหม่ของ Google กำหนดให้นักพัฒนาเปิดใช้งานบัญชีสำหรับการเรียกเก็บเงิน (คุณยังคงสามารถใช้ Google Maps API ได้ฟรี)

รับ Elementor Pro ทันที!!!

สรุป

ดังนั้น ! สำหรับบทความนี้จะแสดงวิธีสร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor หากคุณมีข้อสงสัยเกี่ยวกับวิธีการเดินทาง โปรดแจ้งให้พวกเขาทราบใน ความเห็น.

อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...

%d บล็อกเกอร์ชอบหน้านี้: