โมดูลแผนที่แบบเต็มหน้าจอบน Divi ช่วยอำนวยความสะดวกในการผสานรวม 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
ก่อนที่คุณจะสามารถเพิ่มโมดูลแผนที่แบบเต็มหน้าจอลงในเพจของคุณ คุณต้องข้ามไปที่ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบนเว็บไซต์ของคุณ คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม เปิดใช้ Visual Builder เมื่อคุณเรียกดูเว็บไซต์ของคุณในเบื้องหน้าหากคุณเชื่อมต่อกับแผงควบคุม WordPress ของคุณ
เมื่อคุณเข้าสู่ Visual Builder แล้วคุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ในเพจของคุณ โมดูลเต็มความกว้างใหม่สามารถเพิ่มได้เฉพาะในส่วนเต็มความกว้าง
หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มส่วนเต็มความกว้างให้กับเพจของคุณก่อน
ค้นหาโมดูลการ์ดแบบเต็มความกว้างในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "แผนที่แบบเต็มหน้าจอ" จากนั้นคลิก Enter เพื่อค้นหาและเพิ่มโมดูลแผนที่แบบเต็มความกว้างโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .
ใช้กรณีตัวอย่าง: เพิ่มโมดูลแผนที่แบบเต็มความกว้างไปยังหน้าผู้ติดต่อ
โมดูลแผนที่แบบเต็มความกว้างเป็นวิธีที่ยอดเยี่ยมในการแสดงที่ตั้งธุรกิจของคุณบนหน้าติดต่อของคุณ และความสามารถในการเพิ่มหมุดหลายอันลงในแผนที่ของคุณเพื่อเน้นตำแหน่งต่างๆ และข้อมูลทางธุรกิจเป็นคุณลักษณะที่มีประโยชน์และน่าสนใจ
สำหรับตัวอย่างนี้ ฉันจะเพิ่มโมดูลแผนที่แบบเต็มความกว้างเพื่อแสดงตำแหน่งและข้อมูลทางธุรกิจโดยการเพิ่มหมุดที่กำหนดเองลงในแผนที่
สำคัญ : ตรวจสอบให้แน่ใจว่าได้ป้อนคีย์ Google API ที่ถูกต้องในแผงตัวเลือกของ ธีม Divi. โมดูลแผนที่จะไม่ทำงานหากไม่มีมัน
ใช้ Visual Builder เพิ่มส่วน Fullwidth ที่ด้านล่างของหน้าติดต่อ จากนั้นใส่โมดูลแผนที่แบบเต็มความกว้างในส่วนใหม่ของคุณ ในแท็บเนื้อหาของการตั้งค่าแผนที่แบบเต็มความกว้างให้ป้อนที่อยู่ บริษัท ของคุณภายใต้ตัวเลือกที่อยู่ศูนย์กลางแผนที่ ที่อยู่ศูนย์แผนที่คือจุดกึ่งกลางของแผนที่
จากนั้นคลิก + เพิ่มรายการใหม่ เพื่อสร้างพินแรกของคุณ อัปเดตสิ่งต่อไปนี้:
ชื่อเรื่อง: [ป้อนชื่อตำแหน่งของคุณ] เนื้อหา: [ป้อนเนื้อหาของพินของคุณ (ที่อยู่และหมายเลขโทรศัพท์)] ที่อยู่บนแผนที่: [ป้อนที่อยู่สำหรับตำแหน่งเฉพาะนี้]
บันทึกการตั้งค่า
นั่นคือทั้งหมด ตอนนี้คุณมีโมดูลแผนที่แบบไดนามิกเต็มความกว้างที่ด้านล่างของหน้าติดต่อพร้อมหมุดที่คลิกได้ซึ่งแสดงข้อมูล บริษัท
ตัวเลือกเนื้อหาของโมดูลแผนที่แบบเต็มความกว้าง
ในแท็บเนื้อหาคุณจะพบองค์ประกอบเนื้อหาทั้งหมดของโมดูลเช่นข้อความรูปภาพและไอคอน ทั้งหมดที่ควบคุม สิ่งที่ ปรากฏในโมดูลของคุณจะพบได้ในแท็บนี้เสมอ
คีย์ 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
