โมดูลแผนที่ทำให้ง่ายต่อการรวม Google แผนที่ที่กำหนดเองไว้ที่ใดก็ได้บนหน้าของคุณ คุณสามารถเพิ่มหมุดลงในแผนที่ได้ไม่ จำกัด และกำหนดตำแหน่งเริ่มต้นที่กำหนดเอง ตัวดัดแปลงการ์ดยังมาในรูปแบบความกว้างเต็มดังนั้นอย่าลืมตรวจสอบด้วย!
คีย์ Google Maps API
รหัส API คือ ความต้องการ เพื่อใช้โมดูลแผนที่ ในการรับคีย์ API ให้เข้าสู่ระบบ Google Developers Consoleซึ่งจะแนะนำคุณตลอดกระบวนการและเปิดใช้งาน Google Maps JavaScript API และบริการที่เกี่ยวข้องทั้งหมดโดยอัตโนมัติ สิ่งแรกที่คุณจะถูกถามคือสร้างโครงการใหม่
ถัดไป คุณจะถูกขอให้ตั้งชื่อโครงการของคุณ คุณสามารถตั้งชื่อโครงการอะไรก็ได้ที่คุณต้องการ ในตัวอย่างนี้ ผมเรียกมันว่า “แผนที่” คุณยังสามารถเข้าสู่ ชื่อโดเมน ของเว็บไซต์ของคุณ (ใส่ * นำหน้าหากคุณอนุญาตการเข้าถึงจาก www.domain.com และ domain.com) เพื่อให้แน่ใจว่าคีย์ API ของคุณได้รับอนุญาต
หลังจากสร้างโปรเจ็กต์ที่ตั้งชื่อแล้วคุณจะเห็นคีย์ API ที่ใช้งานได้
หลังจากรับคีย์ API คุณต้องคัดลอก / วางลงในแผงตัวเลือกชุดรูปแบบโดยไปที่: Divi >> ตัวเลือกธีม >> การตั้งค่าทั่วไป >> คีย์ Google Maps API
วิธีเพิ่มโมดูลแผนที่ในหน้าของคุณ
ก่อนที่คุณจะเพิ่มโมดูลแผนที่ลงในเพจได้ คุณต้องข้ามไปที่ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบนเว็บไซต์ของคุณ คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม ใช้ Visual Builder เมื่อคุณเรียกดูเว็บไซต์ของคุณในเบื้องหน้าหากคุณเชื่อมต่อกับแผงควบคุม WordPress ของคุณ
เมื่อคุณเข้าสู่ Visual Builder คุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ลงในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน
ค้นหาโมดูลแผนที่ในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "แผนที่" จากนั้นคลิก Enter เพื่อค้นหาและเพิ่มโมดูลแผนที่โดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .
ตัวอย่างการใช้งาน: เพิ่มโมดูลแผนที่ไปยังหน้าผู้ติดต่อ
โมดูลแผนที่เป็นวิธีที่ยอดเยี่ยมในการแสดงที่ตั้งธุรกิจของคุณบนหน้าติดต่อของคุณ และความสามารถในการเพิ่มหมุดหลายอันลงในแผนที่ของคุณเพื่อเน้นตำแหน่งต่างๆ และข้อมูลทางธุรกิจเป็นคุณลักษณะที่มีประโยชน์และน่าสนใจ
สำหรับตัวอย่างนี้ ฉันจะเพิ่มโมดูลแผนที่เพื่อแสดงตำแหน่งและข้อมูลธุรกิจโดยการเพิ่มหมุดที่กำหนดเองลงในแผนที่
สำคัญ : ตรวจสอบให้แน่ใจว่าได้ป้อนคีย์ Google API ที่ถูกต้องในแผงตัวเลือกของ ธีม Divi. โมดูลแผนที่จะไม่ทำงานหากไม่มีมัน
ใช้ Visual Builder เพิ่มส่วนมาตรฐานที่ด้านล่างของหน้าติดต่อ จากนั้นใส่โมดูลแผนที่ในส่วนใหม่ของคุณ ในแท็บเนื้อหาของการตั้งค่าการ์ดให้ป้อนที่อยู่ บริษัท ของคุณภายใต้ตัวเลือกที่อยู่ศูนย์บัตร ที่อยู่ศูนย์แผนที่คือจุดกึ่งกลางของแผนที่
จากนั้นคลิก + เพิ่มรายการใหม่ เพื่อสร้างพินแรกของคุณ อัปเดตสิ่งต่อไปนี้:
ชื่อเรื่อง: [ป้อนชื่อสถานที่ของคุณ]
เนื้อหา: [ป้อนเนื้อหาของพินของคุณ (ที่อยู่และหมายเลขโทรศัพท์)]
ที่อยู่แผนที่: [ป้อนที่อยู่สำหรับตำแหน่งเฉพาะนี้]
บันทึกการตั้งค่า
นั่นคือทั้งหมด ตอนนี้คุณมีโมดูลแผนที่แบบไดนามิกที่ด้านล่างของหน้าติดต่อพร้อมหมุดที่คลิกได้ซึ่งแสดงข้อมูล บริษัท
ตัวเลือกเนื้อหาโมดูลแผนที่
ในแท็บเนื้อหาคุณจะพบองค์ประกอบเนื้อหาทั้งหมดของโมดูลเช่นข้อความรูปภาพและไอคอน ทั้งหมดที่ควบคุม สิ่งที่ ปรากฏในโมดูลของคุณจะพบได้ในแท็บนี้เสมอ
+ เพิ่มบทความใหม่
นี่คือที่ที่คุณจะเพิ่มพิน (หรือสล็อต) ใหม่ให้กับโมดูลบอร์ดของคุณ การคลิกที่ "เพิ่มรายการใหม่" จะเปิดรายการการตั้งค่าการออกแบบใหม่ทั้งหมด (รวมถึงเนื้อหาการออกแบบขั้นสูง) สำหรับพินใหม่ของคุณ ดูด้านล่างสำหรับการตั้งค่าพินแต่ละรายการ
หลังจากคุณเพิ่มพินแรกของคุณแล้วคุณจะเห็นแถบสีเทาปรากฏขึ้นพร้อมกับชื่อพินของคุณเป็นแท็ก แถบสีเทายังมีปุ่มสามปุ่มเพื่อให้คุณแก้ไขทำซ้ำหรือลบหมุดได้
คีย์ Google API
โมดูลแผนที่ใช้ Google Maps API และต้องใช้คีย์ Google API ที่ถูกต้องในการทำงาน ก่อนที่จะใช้โมดูลแผนที่ ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มคีย์ API ของคุณในแผงตัวเลือกของ ธีม Divi.
ที่อยู่ศูนย์แผนที่
ป้อนที่อยู่สำหรับจุดกึ่งกลางของแผนที่จากนั้นที่อยู่จะถูกเข้ารหัสและแสดงบนแผนที่ด้านล่าง สิ่งนี้มีประโยชน์หากคุณมีหมุดหลายอันและคุณต้องการให้แผนที่ขยายในตำแหน่งที่เจาะจงและแม่นยำยิ่งขึ้น คุณสามารถพิมพ์ที่อยู่ในรูปแบบมาตรฐานเช่น "1235 Sunny Road, Some City, State, 88343"
ป้ายกำกับผู้ดูแลระบบ
สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder
ตัวเลือกการออกแบบโมดูลแผนที่
ในแท็บออกแบบคุณจะพบตัวเลือกสไตล์โมดูลทั้งหมดเช่นแบบอักษรสีขนาดและระยะห่าง นี่คือแท็บที่คุณจะใช้เพื่อเปลี่ยนรูปลักษณ์ของโมดูลของคุณ โมดูล Divi แต่ละโมดูลมีรายการการตั้งค่าการออกแบบมากมายที่คุณสามารถใช้เพื่อเปลี่ยนแปลงสิ่งที่คุณต้องการได้
ล้อเมาส์ซูม
ที่นี่คุณสามารถเลือกได้ว่าจะควบคุมระดับการซูมโดยล้อเลื่อนของเมาส์หรือไม่ บ่อยครั้งที่ดีที่สุดที่จะปิดตัวเลือกนี้เพื่อไม่ให้ผู้เข้าชมถูกรบกวนขณะที่พวกเขาเลื่อนหน้าลงและติดล้อเลื่อนของเมาส์ใน iframe โดยเฉพาะอย่างยิ่งสำหรับโมดูลการ์ดความกว้างเต็ม
ซูมแบบลากได้
คุณสามารถเลือกที่นี่หากสามารถย้ายการ์ดบนอุปกรณ์มือถือ
ใช้ตัวกรองสีเทา
การเปิดใช้งานตัวเลือกนี้จะทำให้แผนที่ของคุณกลายเป็นภาพระดับสีเทา
ตัวเลือกแผนที่ขั้นสูง
ในแท็บขั้นสูงคุณจะพบตัวเลือกที่นักออกแบบเว็บที่มีประสบการณ์มากกว่าอาจพบว่ามีประโยชน์เช่นแอตทริบิวต์ CSS และ HTML ที่กำหนดเอง ที่นี่คุณสามารถใช้ CSS ที่กำหนดเองกับองค์ประกอบต่างๆของโมดูลได้ คุณยังสามารถใช้คลาส CSS และ ID ที่กำหนดเองกับโมดูลซึ่งสามารถใช้เพื่อปรับแต่งโมดูลในไฟล์ style.css ของธีมลูกของคุณ
รหัส CSS
ป้อน CSS ID ทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้ ID เพื่อสร้างสไตล์ CSS ที่กำหนดเองหรือเพื่อเชื่อมโยงไปยังส่วนเฉพาะของเพจของคุณ
ชั้น CSS
ป้อนคลาส CSS ที่เป็นทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้คลาส CSS เพื่อสร้างสไตล์ CSS ที่กำหนดเองได้ คุณสามารถเพิ่มหลายชั้นเรียนโดยคั่นด้วยช่องว่าง สามารถใช้คลาสเหล่านี้ในธีมลูก Divi ของคุณหรือในสไตล์ชีต CSS แบบกำหนดเองที่คุณเพิ่มลงในเพจหรือในเว็บไซต์ของคุณโดยใช้ตัวเลือกธีม Divi หรือการตั้งค่าในหน้า Divi Builder
CSS ที่กำหนดเอง
CSS ที่กำหนดเองยังสามารถนำไปใช้กับโมดูลและภายในของโมดูลได้ ในส่วน CSS ที่กำหนดเองคุณจะพบช่องข้อความที่คุณสามารถเพิ่มสไตล์ชีต CSS ที่กำหนดเองให้กับแต่ละองค์ประกอบได้โดยตรง รายการ CSS ในการตั้งค่าเหล่านี้รวมอยู่ในแท็กสไตล์แล้ว ดังนั้นเพียงป้อนกฎ CSS โดยคั่นด้วยอัฒภาค
ความชัดเจน
ตัวเลือกนี้ช่วยให้คุณควบคุมอุปกรณ์ที่โมดูลของคุณปรากฏ คุณสามารถเลือกที่จะปิดใช้งานโมดูลของคุณบนแท็บเล็ตสมาร์ทโฟนหรือเดสก์ท็อปทีละเครื่อง สิ่งนี้มีประโยชน์หากคุณต้องการใช้ม็อดต่างๆบนอุปกรณ์ต่าง ๆ หรือหากคุณต้องการลดความซับซ้อนของการออกแบบอุปกรณ์เคลื่อนที่โดยการลบองค์ประกอบบางอย่างออกจากหน้า
ตัวเลือกบัตรบัตรส่วนบุคคล
ชื่อเรื่อง
เมื่อสร้างพินใหม่คุณสามารถกำหนดชื่อเรื่องได้ ชื่อนี้จะปรากฏในช่องเมื่อวางเมาส์เหนือหมุดบนแผนที่
เนื้อหา
เมื่อสร้างพินใหม่คุณสามารถกำหนดบล็อกข้อความเนื้อหาได้ ข้อความนี้จะปรากฏในช่องเมื่อวางเมาส์เหนือหมุดบนแผนที่
ที่อยู่แผนที่
นี่คือจุดที่แน่นอนบนแผนที่ที่หมุดใหม่ของคุณจะปรากฏ คุณสามารถป้อนที่อยู่ในรูปแบบมาตรฐาน
[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
บทแนะนำ Divi อื่น ๆ
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
- วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
- วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
- วิธีการใช้ Divi Builder ใน WordPress
- วิธีใช้โมดูลเลื่อนภาพ Divi
- วิธีการใช้โมดูล Divi Builder Flip
- วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
- วิธีใช้โมดูลข้อความ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้ Divi
- วิธีใช้โมดูล Divi Social Media
- วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
- วิธีใช้โมดูลด้านข้าง Divi
- วิธีการใช้โมดูลตารางราคา Divi
- วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
- วิธีเพิ่มโมดูลวิดีโอของ Divi
- วิธีใช้โมดูลการนำทางบทความ
- วิธีการใช้โมดูลค้นหา Divi
- วิธีใช้โมดูลกระเป๋าสตางค์ Divi
- วิธีการใช้โมดูลคนบน Divi Builder
- วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
- วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
- วิธีใช้โมดูล Divi Builder Image
- วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
- วิธีการใช้โมดูลคลังภาพ
- วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
- วิธีใช้โมดูล Divi Full Width Portfolio
- วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
- วิธีใช้โมดูล Divi Counter
- วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
- วิธีใช้โมดูล Divi Email Optin
