การใช้ Divi Fullwidth Map กับ Map Module
เผยแพร่แล้ว: 2023-05-10การเพิ่มแผนที่ลงในเว็บไซต์ของคุณช่วยให้ผู้เยี่ยมชมเว็บไซต์เห็นที่ตั้งของธุรกิจหรือดูว่างานอีเวนต์อาจจัดขึ้นที่ใดได้ง่ายขึ้น Divi มาพร้อมกับสองตัวเลือกในตัวเพื่อฝัง Google Maps ในการออกแบบเพจของคุณ: โมดูลแผนที่แบบเต็มความกว้างและโมดูลแผนที่ปกติ ด้วยโมดูลแผนที่แบบเต็มความกว้าง คุณสามารถเพิ่มแผนที่ขนาดใหญ่ที่สะดุดตาซึ่งครอบคลุมความกว้างของหน้าเว็บของคุณ คุณสามารถปรับแต่งรูปลักษณ์ของโมดูลแผนที่แบบเต็มความกว้างได้โดยใช้การตั้งค่าโมดูลแบบเต็มความกว้าง และอาจเป็นองค์ประกอบการออกแบบที่ยอดเยี่ยมในการเพิ่มลงในเค้าโครงของคุณ คุณสามารถเพิ่มโมดูลแผนที่ปกติของ Divi ลงในส่วนปกติใดก็ได้ ตัวเลือกการออกแบบไม่มีที่สิ้นสุด เนื่องจากคุณสามารถรวมตัวเลือกโมดูล แถว และส่วนเข้าด้วยกันเพื่อสร้างเลย์เอาต์ที่ไม่ซ้ำใครสำหรับเว็บไซต์ของคุณ
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างเค้าโครงที่แตกต่างกันสองแบบโดยใช้โมดูลแผนที่แบบเต็มความกว้างและโมดูลแผนที่ปกติ
มาเริ่มกันเลย!
- 1 แอบดู
- 1.1 เค้าโครง 1 – โมดูลแผนที่แบบเต็มความกว้าง
- 1.2 รูปแบบที่ 2 – โมดูลแผนที่ปกติ
- 2 สิ่งที่คุณต้องการในการเริ่มต้น
- 3 การใช้ Divi Fullwidth Map กับ Map Module
- 3.1 สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า
- 3.2 เค้าโครง 1 – โมดูลแผนที่แบบเต็มความกว้าง
- 3.3 รูปแบบที่ 2 – โมดูลแผนที่ปกติ
- 4 ผลลัพธ์สุดท้าย
- 4.1 เค้าโครง 1 – โมดูลแผนที่แบบเต็มความกว้าง
- 4.2 รูปแบบที่ 2 – โมดูลแผนที่ปกติ
- 5 ความคิดสุดท้าย
แอบมอง
นี่คือตัวอย่างสิ่งที่เราจะออกแบบ
เค้าโครง 1 – โมดูลแผนที่แบบเต็มความกว้าง
เค้าโครง 2 – โมดูลแผนที่ปกติ
สิ่งที่คุณต้องการในการเริ่มต้น
ก่อนที่เราจะเริ่มต้น ให้ติดตั้งและเปิดใช้งานธีม Divi และตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุดบนเว็บไซต์ของคุณ
ตอนนี้คุณพร้อมที่จะเริ่มแล้ว!
การใช้ Divi Fullwidth Map กับ Map Module
สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า
เริ่มกันโดยใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับการออกแบบนี้ เราจะใช้ Conference About Page จากชุดโครงร่างการประชุม
เพิ่มหน้าใหม่ลงในเว็บไซต์ของคุณและตั้งชื่อ จากนั้นเลือกตัวเลือกเพื่อใช้ Divi Builder
เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือกเรียกดูเลย์เอาต์
ค้นหาและเลือกโครงร่าง Conference About Page
เลือก ใช้เค้าโครงนี้ เพื่อเพิ่มเค้าโครงในเพจของคุณ
ตอนนี้เราพร้อมที่จะสร้างการออกแบบของเราแล้ว
เค้าโครง 1 – โมดูลแผนที่แบบเต็มความกว้าง
สำหรับเลย์เอาต์แรก เราจะเพิ่มโมดูลแผนที่แบบเต็มความกว้างที่ส่วนท้าย เหนือส่วนท้ายสีดำพร้อมลิงก์ทั้งหมด แทนที่จะเพิ่มองค์ประกอบนี้ในหน้า เราจะใช้ตัวสร้างธีมในการตั้งค่าของ Divi เพื่อสร้างส่วนท้ายสำหรับหน้านี้ จากนั้นจึงเพิ่มแผนที่ มาเริ่มกันเลย.
ขั้นแรก ให้คลิกขวาที่ส่วนท้ายหรือคลิกที่จุดสามจุดในแถบเครื่องมือของส่วน จากนั้นคัดลอกส่วนนั้น
จากนั้น ลบส่วนออกจากหน้านี้
ออกแบบเลย์เอาท์ส่วนท้ายด้วย Theme Builder
จากแดชบอร์ด WordPress ให้ไปที่ส่วนสร้างธีมภายในการตั้งค่าของ Divi คลิกเพิ่มเทมเพลตใหม่
สำหรับการออกแบบนี้ ฉันเปิดใช้งานเฉพาะเทมเพลตสำหรับเพจที่มีเทมเพลต Conference About Page ของเราเท่านั้น
จากนั้นคลิก เพิ่มส่วนท้ายที่กำหนดเอง และเลือก สร้างส่วนท้ายแบบกำหนดเอง
เมื่อการตั้งค่าส่วนท้ายแบบกำหนดเองของคุณเปิดขึ้นในตัวสร้างธีมแล้ว ให้วางส่วนท้ายที่คุณคัดลอกมาจากเลย์เอาต์ดั้งเดิม
เพิ่มส่วนเต็มความกว้างใหม่เหนือเค้าโครงส่วนท้ายที่คุณวาง
จากนั้น เพิ่มโมดูลแผนที่แบบเต็มความกว้าง
การตั้งค่าโมดูลแผนที่แบบเต็มความกว้าง
เปิดการตั้งค่าโมดูลแผนที่ หากคุณยังไม่ได้ดำเนินการ ให้เพิ่มคีย์ Google API เพื่อให้สามารถแสดงแผนที่ได้ (เรียนรู้เพิ่มเติมเกี่ยวกับข้อกำหนดคีย์ Google Maps API ที่นี่)
เราจำเป็นต้องเพิ่มที่อยู่ศูนย์กลางแผนที่ภายใต้การตั้งค่าแผนที่บนแท็บเนื้อหา เพื่อให้แผนที่ของเราอยู่ในตำแหน่งที่จะแสดงตำแหน่งเฉพาะ เราจะจัดศูนย์กลางแผนที่ของเราที่ซานฟรานซิสโก แคลิฟอร์เนียสำหรับเลย์เอาต์นี้
เราต้องการเพิ่มหมุดลงในแผนที่ด้วย ภายใต้แท็บเนื้อหา ให้คลิกเพิ่มพินใหม่
ป้อนที่อยู่พิน
สุดท้าย ลบส่วนที่ว่างออกจากโครงร่างส่วนท้าย
การออกแบบขั้นสุดท้ายของโมดูลแผนที่แบบเต็มความกว้าง
นี่คือการออกแบบขั้นสุดท้ายด้วยโมดูลแผนที่แบบเต็มความกว้าง
เค้าโครง 2 – โมดูลแผนที่ปกติ
สำหรับเค้าโครงที่สอง เราจะใช้โมดูลแผนที่ปกติ เช่นเดียวกับการออกแบบล่าสุด เราจะรวมมันเข้ากับการออกแบบส่วนท้ายโดยใช้การตั้งค่าตัวสร้างธีม สำหรับการออกแบบนี้ เราจะเพิ่มแผนที่ในส่วน “ที่พัก”
ออกแบบเลย์เอาท์ส่วนท้ายด้วย Theme Builder
เราจะทำตามขั้นตอนเดียวกับเค้าโครงโมดูลแผนที่แบบเต็มความกว้างเพื่อสร้างการออกแบบส่วนท้ายแบบกำหนดเองในตัวสร้างธีม ในแท็บใหม่ ให้เปิดแดชบอร์ด WordPress และไปที่ส่วนตัวสร้างธีมภายในการตั้งค่าของ Divi คุณควรเปิดการออกแบบเลย์เอาต์ดั้งเดิมในแท็บอื่น
คลิกเพิ่มเทมเพลตใหม่
ขอย้ำอีกครั้งว่า ฉันเปิดใช้งานเทมเพลตสำหรับเพจด้วยเทมเพลต Conference About Page ของเราเท่านั้น
จากนั้นคลิก เพิ่มส่วนท้ายที่กำหนดเอง และเลือก สร้างส่วนท้ายแบบกำหนดเอง
เมื่อการตั้งค่าส่วนท้ายแบบกำหนดเองของคุณเปิดขึ้นในตัวสร้างธีมแล้ว ให้กลับไปที่แท็บที่มีเลย์เอาต์ดั้งเดิมแล้วคัดลอกส่วน "ตำแหน่งที่อยู่"
วางส่วน "ที่พัก" ในรูปแบบส่วนท้ายแบบกำหนดเอง
กลับไปที่เค้าโครงเดิมและคัดลอกส่วนท้าย
จากนั้นวางส่วนท้ายด้านล่างส่วน "ที่พัก" ในรูปแบบส่วนท้ายที่กำหนดเอง
ลบส่วน “ที่พัก” และส่วนท้ายออกจากเค้าโครงเดิม
สุดท้าย ลบส่วนที่ว่างออกจากโครงร่างส่วนท้ายแบบกำหนดเอง
การตั้งค่าโมดูลแผนที่แบบเต็มความกว้าง
เพิ่มโมดูลแผนที่ใต้ข้อความเนื้อหา "สถานที่พัก"
จากนั้น เปิดการตั้งค่าโมดูลแผนที่ ตรวจสอบอีกครั้งว่าคุณได้เพิ่มคีย์ Google API ของคุณในการตั้งค่าแผนที่เพื่อให้สามารถแสดงแผนที่ได้
เพิ่มที่อยู่ศูนย์กลางแผนที่เพื่อให้แผนที่อยู่ในตำแหน่งที่ตั้ง สำหรับตัวอย่างนี้ เราจะตั้งค่าเป็นซานฟรานซิสโก แคลิฟอร์เนีย
ถัดไป เพิ่มหมุดลงในแผนที่
ป้อนที่อยู่พิน
การออกแบบขั้นสุดท้ายของโมดูลแผนที่ปกติ
นี่คือการออกแบบขั้นสุดท้ายด้วยโมดูลแผนที่ปกติ
ผลลัพธ์สุดท้าย
ทีนี้มาดูการออกแบบขั้นสุดท้ายของเรากัน
เค้าโครง 1 – โมดูลแผนที่แบบเต็มความกว้าง
เค้าโครง 2 – โมดูลแผนที่ปกติ
ความคิดสุดท้าย
โมดูลแผนที่แบบเต็มความกว้างและโมดูลแผนที่ปกติเป็นวิธีที่ง่ายในการเพิ่มองค์ประกอบการออกแบบที่สะดุดตาให้กับเพจของคุณ ไม่ต้องพูดถึงว่าจะให้ข้อมูลที่มีค่าแก่ผู้เยี่ยมชมเว็บไซต์ของคุณ คุณสามารถปรับแต่งส่วนเหล่านี้ได้อย่างง่ายดายโดยใช้การตั้งค่าโมดูล แถว และส่วนต่างๆ และสามารถใช้ร่วมกับองค์ประกอบการออกแบบอื่นๆ บนหน้าเพื่อสร้างเค้าโครงแบบไดนามิกสำหรับเว็บไซต์ของคุณ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่โมดูลแผนที่สามารถทำได้ ลองดูบทช่วยสอนนี้เพื่อเพิ่มการสลับแผนที่แบบคงที่ให้กับเทมเพลตเพจ
คุณใช้โมดูลเมนูแบบเต็มความกว้างหรือโมดูลเมนูปกติบนเว็บไซต์ของคุณหรือไม่ หรือทั้งคู่? เราชอบที่จะได้ยินจากคุณในความคิดเห็น!