Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

เต็มความกว้าง-แผนที่ overview.png

คีย์ Google Maps API

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

สร้างคีย์ Google.jpg API

ถัดไประบบจะขอให้คุณตั้งชื่อโครงการของคุณ คุณสามารถตั้งชื่อโครงการตามที่คุณต้องการ ในตัวอย่างนี้ฉันตั้งชื่อมันว่า "การ์ด" คุณยังสามารถป้อนชื่อโดเมนเว็บไซต์ของคุณ (เพิ่ม * นำหน้าหากคุณอนุญาตให้เข้าถึงจาก www.domain.com และ domain.com) เพื่อให้แน่ใจว่าคีย์ API ของคุณได้รับอนุญาต

เพิ่มคีย์ API ลงใน project.jpg

หลังจากสร้างโปรเจ็กต์ที่ตั้งชื่อแล้วคุณจะเห็นคีย์ API ที่ใช้งานได้

เอกสารรูปภาพ

หลังจากรับคีย์ API คุณต้องคัดลอก / วางลงในแผงตัวเลือกชุดรูปแบบโดยไปที่: Divi >> ตัวเลือกธีม >> การตั้งค่าทั่วไป >> คีย์ Google Maps API

วิธีการเพิ่มโมดูลการ์ดเต็มหน้าจอ Divi

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

ใช้ divi builder

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

ส่วนเต็ม divi builder.png

หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มส่วนเต็มความกว้างให้กับเพจของคุณก่อน

full screen screen.png

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

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

ใช้กรณีตัวอย่าง: เพิ่มโมดูลแผนที่แบบเต็มความกว้างไปยังหน้าผู้ติดต่อ

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

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

เพิ่มแผนที่แบบเต็มความกว้าง divi builder.jpg

สำคัญ : ตรวจสอบให้แน่ใจว่าได้ป้อนคีย์ Google API ที่ถูกต้องในแผงตัวเลือกของธีม Divi โมดูลการ์ดจะไม่ทำงานหากไม่มี

ใช้ Visual Builder เพิ่มส่วน Fullwidth ที่ด้านล่างของหน้าติดต่อ จากนั้นใส่โมดูลแผนที่แบบเต็มความกว้างในส่วนใหม่ของคุณ ในแท็บเนื้อหาของการตั้งค่าแผนที่แบบเต็มความกว้างให้ป้อนที่อยู่ บริษัท ของคุณภายใต้ตัวเลือกที่อยู่ศูนย์กลางแผนที่ ที่อยู่ศูนย์แผนที่คือจุดกึ่งกลางของแผนที่

เพิ่มแผนที่ divi example.jpg

จากนั้นคลิก + เพิ่มรายการใหม่ เพื่อสร้างพินแรกของคุณ อัปเดตสิ่งต่อไปนี้:

ชื่อเรื่อง: [ป้อนชื่อตำแหน่งของคุณ] เนื้อหา: [ป้อนเนื้อหาของพินของคุณ (ที่อยู่และหมายเลขโทรศัพท์)] ที่อยู่บนแผนที่: [ป้อนที่อยู่สำหรับตำแหน่งเฉพาะนี้]

เพิ่มรายละเอียดแผนที่ความกว้างเต็ม divi.jpg

บันทึกการตั้งค่า

นั่นคือทั้งหมด ตอนนี้คุณมีโมดูลแผนที่แบบไดนามิกเต็มความกว้างที่ด้านล่างของหน้าติดต่อพร้อมหมุดที่คลิกได้ซึ่งแสดงข้อมูล บริษัท

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

ผลแผนที่เต็มความกว้าง divi.jpg

ตัวเลือกเนื้อหาของโมดูลแผนที่แบบเต็มความกว้าง

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

ตัวเลือกเนื้อหา divi builder full width map module.png

คีย์ Google API

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

ที่อยู่ศูนย์แผนที่

ป้อนที่อยู่สำหรับจุดกึ่งกลางของแผนที่จากนั้นที่อยู่จะถูกเข้ารหัสและแสดงบนแผนที่ด้านล่าง สิ่งนี้มีประโยชน์หากคุณมีหมุดหลายอันและคุณต้องการให้แผนที่ขยายในตำแหน่งที่เจาะจงและแม่นยำยิ่งขึ้น คุณสามารถพิมพ์ที่อยู่ในรูปแบบมาตรฐานเช่น "1235 Sunny Road, Some City, State, 88343"

ป้ายกำกับการดูแลระบบ

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

ตัวเลือกการออกแบบแผนที่แบบเต็มความกว้าง

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

ตัวเลือกการออกแบบโมดูล full width map.png

ล้อเมาส์ซูม

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

ซูมแบบลากได้

คุณสามารถเลือกที่นี่หากสามารถย้ายการ์ดบนอุปกรณ์มือถือ

ใช้ตัวกรองสีเทา

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

ตัวเลือกแผนที่แบบเต็มความกว้างขั้นสูง

ในแท็บขั้นสูงคุณจะพบตัวเลือกที่นักออกแบบเว็บที่มีประสบการณ์มากกว่าอาจพบว่ามีประโยชน์เช่นแอตทริบิวต์ CSS และ HTML ที่กำหนดเอง ที่นี่คุณสามารถใช้ CSS ที่กำหนดเองกับองค์ประกอบต่างๆของโมดูลได้ คุณยังสามารถใช้คลาส CSS และ ID ที่กำหนดเองกับโมดูลซึ่งสามารถใช้เพื่อปรับแต่งโมดูลในไฟล์ style.css ของธีมลูกของคุณ

โมดูลส่วนล่วงหน้าโมดูลความกว้างเต็มรูปแบบ divi.png

รหัส CSS

ป้อน CSS ID ทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้ ID เพื่อสร้างสไตล์ CSS ที่กำหนดเองหรือเพื่อเชื่อมโยงไปยังส่วนเฉพาะของเพจของคุณ

ชั้น CSS

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

CSS ที่กำหนดเอง

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

ความชัดเจน

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

ตัวเลือกเนื้อหาแผนที่แบบเต็มความกว้างเต็มรูปแบบ

โมดูลโมดูลพารามิเตอร์พิน full width.png

ชื่อเรื่อง

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

เนื้อหา

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

ที่อยู่แผนที่

นี่คือจุดที่แน่นอนบนแผนที่ที่หมุดใหม่ของคุณจะปรากฏ คุณสามารถป้อนที่อยู่ในรูปแบบมาตรฐาน

[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "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] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" 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 "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

บทแนะนำ Divi อื่น ๆ

18 หุ้น
หุ้น10
ทวีต3
Enregistrer5