วิธีเพิ่มการสลับแผนที่แบบคงที่ไปยังเทมเพลตหน้า Divi ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตหน้าฟรี

หากต้องการใช้เทมเพลตหน้าเว็บฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

1. สร้างเทมเพลตหน้าภายในตัวสร้างธีม Divi

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตหน้าใหม่

เราจะเริ่มบทช่วยสอนนี้โดยไปที่ Divi Theme Builder และเพิ่มเทมเพลตหน้าใหม่

ใส่ Body Area ของ Template

จากนั้น ป้อนเนื้อหาของเทมเพลตโดยเลือก "สร้างเนื้อหาที่กำหนดเอง"

2. เพิ่มเนื้อหาหน้าไดนามิกไปยังส่วนของร่างกาย

การตั้งค่ามาตรา

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูล ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลเนื้อหาโพสต์ลงในคอลัมน์

เพื่อให้เนื้อหาของแต่ละหน้าแสดงแบบไดนามิก เราจะใช้โมดูลเนื้อหาโพสต์ภายในแถวนี้

3. สร้างการออกแบบหมุดแผนที่คงที่

เพิ่มแถว #2 ไปยัง Section

โครงสร้างคอลัมน์

ไปยังแถวถัดไป ซึ่งใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถว ไปที่แท็บออกแบบ และเปลี่ยนการตั้งค่าขนาดดังนี้:

• ความกว้าง: 90%
• ความกว้างสูงสุด:
  • เดสก์ท็อป: 600px
  • แท็บเล็ตและโทรศัพท์: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

คอลัมน์ 1 การตั้งค่า

สีพื้นหลัง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และใช้สีพื้นหลังสีดำ

• สีพื้นหลัง: #000000

ภาพพื้นหลัง

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

องค์ประกอบหลัก CSS

เพิ่มบรรทัดของโค้ด CSS ต่อไปนี้ในองค์ประกอบหลักของคอลัมน์ด้วย:

width: 80% !important;
max-height: 80vh;

ทัศนวิสัย

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

• ล้นแนวตั้ง: อัตโนมัติ

การตั้งค่าคอลัมน์ 2

องค์ประกอบหลัก CSS

เปิดการตั้งค่าคอลัมน์ 2 ถัดไป และใช้โค้ด CSS ต่อไปนี้กับองค์ประกอบหลัก:

width: 12% !important;

เพิ่มโมดูลแผนที่ไปยังคอลัมน์ 1

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลแผนที่ในคอลัมน์ 1 เพิ่มหมุดแผนที่ที่คุณเลือก

ขนาด

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:

• ความกว้าง: 88%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

ลบระยะขอบด้านล่างเริ่มต้นถัดไป

• ขอบล่าง: 0px

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เพิ่มเนื้อหา

เพิ่มโมดูล Blurb ใต้โมดูลแผนที่ในคอลัมน์ 1 ใช้เนื้อหาที่คุณเลือก

เลือกไอคอน

เลือกไอคอนถัดไป

การตั้งค่ารูปภาพ/ไอคอน

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าไอคอนดังนี้:

• สีไอคอน: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย

การตั้งค่าข้อความชื่อเรื่อง

จัดรูปแบบข้อความชื่อเรื่องถัดไป

• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 16px
• ความสูงของบรรทัดชื่อเรื่อง: 1.6em

การตั้งค่าข้อความเนื้อหา

จากนั้น แก้ไขการตั้งค่าข้อความเนื้อหาตามลำดับ:

• สีข้อความ: #ffffff
• ขนาดข้อความเนื้อหา:
  • เดสก์ท็อป: 16px
  • แท็บเล็ต: 14px
  • โทรศัพท์: 13px
• ความสูงของเส้นร่างกาย: 1.8em

ระยะห่าง

ใช้ค่าการเติมต่อไปนี้ด้วย:

• ช่องว่างภายในด้านบน: 70px
• ช่องว่างภายในด้านล่าง: 70px
• ช่องว่างภายในด้านซ้าย: 7%
• ช่องว่างภายในด้านขวา: 7%

แอนิเมชั่น

และลบแอนิเมชั่นโมดูลเริ่มต้นในการตั้งค่าแอนิเมชั่น

• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

เพิ่มโมดูล Blurb ลงในคอลัมน์ 2

ปล่อยให้กล่องเนื้อหาว่าง

ในคอลัมน์ 2 เราจะเพิ่ม Blurb Module โดยไม่มีเนื้อหา

เลือกไอคอน

เลือกไอคอนถัดไป

สีพื้นหลัง

จากนั้นเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #0045ff

การตั้งค่ารูปภาพ/ไอคอน

ไปที่แท็บออกแบบและจัดรูปแบบการตั้งค่าไอคอนตามลำดับ:

• สีไอคอน: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• การจัดตำแหน่งรูปภาพ/ไอคอน: กึ่งกลาง
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 25px

ขนาด

แก้ไขการตั้งค่าการปรับขนาดต่อไป

• ความกว้าง: 70px
• ส่วนสูง: 70px

ระยะห่าง

จากนั้นลบระยะขอบด้านล่างเริ่มต้น

• ขอบล่าง: 0px

กล่องเงา

ใส่เงากล่องด้วย

• ตำแหน่งแนวนอนของกล่องเงา: 6px
• ตำแหน่งแนวตั้งเงาของกล่อง: 6px
• เงาสี: rgba(0,0,0,0.3)

องค์ประกอบหลักและภาพนำเสนอ CSS

จากนั้นไปที่แท็บขั้นสูงและใช้โค้ด CSS ต่อไปนี้สำหรับองค์ประกอบหลัก:

display: flex;
justify-content: center;
align-items: center;

และเพิ่มโค้ด CSS บรรทัดนี้ลงในกล่อง Blurb Image:

margin-bottom: 0;

4. เพิ่มฟังก์ชั่นการสลับ

เพิ่มคลาส CSS ให้กับแถว #2

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

• คลาส CSS: map-toggle-row

เพิ่มคลาส CSS ให้กับโมดูล Blurb ในคอลัมน์ 2

เปิด Blurb Module ในคอลัมน์ 2 ถัดไปและใช้คลาส CSS ต่อไปนี้:

• CSS Class: map-toggle

เพิ่มโค้ดโมดูลด้านล่างโมดูล Blurb ในคอลัมน์ 2

จากนั้น เพิ่ม Code Module ด้านล่าง Blurb Module ในคอลัมน์ 2

เพิ่มแท็กสไตล์และสคริปต์

วางแท็กสไตล์และสคริปต์ลงในกล่องโค้ด

ใส่โค้ด CSS

เรากำลังใช้โค้ด CSS ต่อไปนี้ในแท็กสไตล์:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

ใส่รหัส JQuery

และโค้ด JQuery ต่อไปนี้ภายในแท็กสคริปต์:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

เพิ่มตำแหน่งคงที่พร้อมออฟเซ็ตแนวนอนไปที่แถว #2

สุดท้ายแต่ไม่ท้ายสุด เราจะต้องแก้ไขการตั้งค่าตำแหน่งของแถวที่สองตามลำดับ:

• ตำแหน่ง: คงที่
• ที่ตั้ง: Left Center
• ออฟเซ็ตแนวนอน:
  • เดสก์ท็อป: -500px
  • แท็บเล็ตและโทรศัพท์: -72%
• ดัชนี Z: 11

5. บันทึกการเปลี่ยนแปลงตัวสร้างหน้าและธีม

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

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

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