วิธีขยายโมดูลแผนที่ของคุณบน Scroll ด้วยเอฟเฟกต์การเลื่อนของ Divi

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

มาเริ่มกันเลย!

แอบมอง

นี่คือตัวอย่างสิ่งที่เราจะออกแบบ

เค้าโครง 1

เค้าโครง 2

สิ่งที่คุณต้องการในการเริ่มต้น

ก่อนที่เราจะเริ่มต้น ให้ติดตั้งและเปิดใช้งานธีม Divi และตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุดบนเว็บไซต์ของคุณ

ตอนนี้คุณพร้อมที่จะเริ่มแล้ว!

วิธีขยายโมดูลแผนที่ของคุณบน Scroll ด้วยเอฟเฟกต์การเลื่อนของ Divi

เค้าโครง 1

สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า

เริ่มกันโดยใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับการออกแบบนี้ เราจะใช้ Acai Bowl Landing Page จาก Acai Bowl Layout Pack

เพิ่มหน้าใหม่ลงในเว็บไซต์ของคุณและตั้งชื่อ จากนั้นเลือกตัวเลือกเพื่อใช้ Divi Builder

เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือกเรียกดูเลย์เอาต์

ค้นหาและเลือกหน้า Landing Page ของ Acai Bowl

เลือก ใช้เค้าโครงนี้ เพื่อเพิ่มเค้าโครงในเพจของคุณ

ตอนนี้เราพร้อมที่จะสร้างการออกแบบของเราแล้ว

เพิ่มโมดูลแผนที่

เรากำลังจะเพิ่มโมดูลแผนที่ในส่วน "มาเยี่ยมเรา" บนหน้า Landing Page เริ่มต้นด้วยการเพิ่มแถวใหม่ด้วยคอลัมน์เดียว

เพิ่มโมดูลแผนที่ในแถวใหม่

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

จากนั้นเพิ่มพินใหม่

กำหนดที่อยู่หมุดแผนที่ อีกครั้ง เราจะตั้งค่านี้เป็น San Fransisco, California สำหรับบทช่วยสอนนี้

การตั้งค่าการออกแบบ

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

• ความสูง: 300px

จากนั้น เปิดการตั้งค่าเส้นขอบและเพิ่มมุมมนให้กับแผนที่

• มุมโค้งมน: 22px

เพิ่มเอฟเฟกต์การเลื่อน

ตอนนี้การออกแบบโมดูลแผนที่ของเราเสร็จสมบูรณ์แล้ว เพื่อให้เราสามารถเพิ่มเอฟเฟกต์การเลื่อนได้ ย้ายไปที่แท็บขั้นสูง จากนั้นไปที่เอฟเฟกต์การเลื่อน ภายใต้ Scroll Transform Effects เลือกแท็บปรับขนาดขึ้นและลง

เปิดใช้งานการปรับขนาดขึ้นและลง ซึ่งจะช่วยให้โมดูลแผนที่ของเรามีขนาดเพิ่มขึ้นเมื่อคุณเลื่อนหน้าลงมา

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

• ขนาดเริ่มต้น: 80%
• ระดับกลาง: 90%
• ระดับสิ้นสุด: 100%

สุดท้าย ตั้งค่าเอฟเฟกต์การเคลื่อนไหวให้ทำงานตรงกลางองค์ประกอบ

• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

การออกแบบขั้นสุดท้าย

นี่คือการออกแบบขั้นสุดท้ายสำหรับเค้าโครงแรกของเรา

เค้าโครง 2

สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า

สำหรับเค้าโครงที่สอง เราจะใช้เค้าโครงหน้าติดต่อจาก Acai Bowl Layout Pack เดียวกัน มาเริ่มกันเลย.

เพิ่มหน้าใหม่ลงในเว็บไซต์ของคุณและตั้งชื่อ จากนั้นเลือกตัวเลือกเพื่อใช้ Divi Builder

เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือกเรียกดูเลย์เอาต์

ค้นหาและเลือกหน้าติดต่อ Acai Bowl

เลือก ใช้เค้าโครงนี้ เพื่อเพิ่มเค้าโครงในเพจของคุณ

ตอนนี้เราพร้อมที่จะสร้างการออกแบบของเราแล้ว

แก้ไขการตั้งค่าแถว

ขั้นแรก ให้ย้ายแถวที่มีโมดูลแผนที่ไปยังส่วนด้านบน ด้านล่างที่อยู่

จากนั้นแก้ไขเค้าโครงแถวเป็นสองคอลัมน์

เปิดการตั้งค่าแถว จากนั้นเปิดการตั้งค่าคอลัมน์ 1

เพิ่มสีพื้นหลัง

• พื้นหลัง: #442854

สุดท้าย ไปที่แท็บการออกแบบและเปิดการตั้งค่าเส้นขอบ เพิ่มมุมโค้งมนที่มุมล่างซ้ายและขวา

• มุมโค้งมน – ซ้ายล่าง: 300px
• มุมโค้งมน – ด้านล่างขวา: 300px

แก้ไขการตั้งค่าส่วน

เปิดการตั้งค่าส่วนสำหรับส่วนที่มีโมดูลแผนที่ ไปที่การตั้งค่าพื้นหลัง จากนั้นเพิ่มมาสก์พื้นหลัง

• มาสก์พื้นหลัง: มุมหยด
• สีหน้ากาก: #FFFFFF
• การแปลงหน้ากาก: แนวตั้งและกลับด้าน

ใส่รูปภาพ

ขั้นแรก เพิ่มโมดูลรูปภาพลงในคอลัมน์ถัดจากโมดูลแผนที่

จากนั้นเพิ่มภาพโปร่งใสของ acai bowl ลงในโมดูล คุณควรมีป้ายกำกับนี้ในไลบรารีสื่อของคุณเป็น acai-bowl-34.png หากคุณใช้เค้าโครงหน้า Landing Page ของ Acai Bowl สำหรับเค้าโครง 1

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

ถัดไปตั้งค่าการหมุน

• การหมุนเริ่มต้น: 180
• การหมุนตรงกลาง: 90
• สิ้นสุดการหมุน: 0

การออกแบบแผนที่

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

• ใช้ตัวกรองระดับสีเทา: ใช่
• ปริมาณตัวกรอง Greyscale (%): 100

ถัดไป แก้ไขความสูงภายใต้แท็บการปรับขนาด

• ความสูง: 600px

ภายใต้การตั้งค่าระยะห่าง เพิ่มระยะขอบ

• ระยะขอบบน: 5px
• ระยะขอบล่าง: 5px
• ระยะขอบซ้าย: 5px
• ระยะขอบขวา: 5px

จากนั้นเพิ่มมุมมนที่มุมล่างซ้ายและขวา

• มุมโค้งมน – ล่างซ้าย: 300px
• มุมโค้งมน – ด้านล่างขวา: 300px

เพิ่มเอฟเฟกต์การเลื่อน

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

สุดท้าย ปรับแต่งสเกล

• ขนาดเริ่มต้น: 90%
• ระดับกลาง: 95%
• ระดับสิ้นสุด: 100%

การออกแบบขั้นสุดท้าย

นี่คือการออกแบบขั้นสุดท้ายสำหรับเค้าโครง 2

ผลลัพธ์สุดท้าย

ทีนี้มาดูการทำงานของเลย์เอาต์ทั้งสองของเรา

เค้าโครง 1

เค้าโครง 2

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

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