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

1 สร้างโครงสร้างขององค์ประกอบ
เพิ่มส่วน # 1
การเว้นวรรค
เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าที่คุณกำลังดำเนินการ เปิดการตั้งค่าส่วนและเปลี่ยนค่าช่องว่างในขนาดหน้าจอต่างๆ
- ช่องว่างภายในบน: 80px (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)
- ช่องว่างภายในด้านล่าง: 80px

เพิ่มบรรทัดใหม่
โครงสร้างคอลัมน์
เพิ่มแถวใหม่ต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลให้เปิดพารามิเตอร์บรรทัดและใช้การเปลี่ยนแปลงต่อไปนี้กับพารามิเตอร์การกำหนดขนาด:
- ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 90%
- ความกว้างสูงสุด: 1580px

การเว้นวรรค
จากนั้นเพิ่มระยะขอบบนและล่างที่กำหนดเอง
- ขอบบน: 200px
- ขอบล่าง: 200px

เพิ่มโมดูลข้อความในคอลัมน์ 1
เพิ่มเนื้อหา H2
ถึงเวลาเพิ่มโมดูลโดยเริ่มจากโมดูลข้อความในคอลัมน์ 1 ป้อนเนื้อหา H2 ที่คุณต้องการ

การตั้งค่าข้อความ H2
ไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H2 ดังนี้:
- ตำแหน่งตำรวจ 2: รายไตรมาส
- ส่วนหัว 2 ขนาดตัวอักษร: 80px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
- ความสูงของบรรทัดที่ 2 ของหัว: 1.2em

การเว้นวรรค
จากนั้นเพิ่มระยะขอบล่างบนแท็บเล็ตและโทรศัพท์
- ระยะขอบล่าง: 50 พิกเซล (แท็บเล็ตและโทรศัพท์เท่านั้น)

เพิ่มโมดูลข้อความในคอลัมน์ 2
เพิ่มเนื้อหา
ไปที่คอลัมน์ที่สองกัน โมดูลแรกที่เราต้องการคือโมดูลข้อความที่มีเนื้อหาคำอธิบาย

การตั้งค่าข้อความ
สลับไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความตาม:
- แบบอักษรของข้อความ: ห้องโดยสาร
- รูปแบบตัวอักษรข้อความ: ตัวพิมพ์ใหญ่
- สีข้อความ: # 000000
- ขนาดตัวอักษร: 18px (เดสก์ท็อป), 15px (แท็บเล็ต), 13px (โทรศัพท์)
- การเว้นวรรคตัวอักษร: 3px (เดสก์ท็อป), 1px (แท็บเล็ตและโทรศัพท์)
- ความสูงของบรรทัดข้อความ: 3em

เพิ่มโมดูลการแยกเข้ากับคอลัมน์ 2
ความชัดเจน
โมดูลถัดไปและสุดท้ายที่เราต้องการในคอลัมน์นี้คือโมดูลแยก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก“ แสดงตัวคั่น”
- แสดงตัวแยก: ใช่

ออนไลน์
จากนั้นเปลี่ยนสีเส้นของโมดูล
- สีของเส้น: # 000000

ปรับขนาด
จากนั้นทำการเปลี่ยนแปลงบางอย่างกับพารามิเตอร์การปรับขนาด
- น้ำหนัก Divider: 3px
- ความกว้าง: 28%

การเว้นวรรค
นอกจากนี้เรายังเพิ่มอัตรากำไรขั้นต้น
- ขอบบน: 10px

เพิ่มส่วน # 2
การเว้นวรรค
ไปยังส่วนปกติถัดไป ลบช่องว่างด้านบนเริ่มต้นจากส่วน
- การเสริมด้านบน: 0px

ล้น
ยังซ่อนโอเวอร์โฟลว์
- ล้นแนวนอน: ซ่อน
- แนวตั้งล้น: ซ่อน

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

ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลเพิ่มเติมให้เปิดพารามิเตอร์ line เข้าถึงพารามิเตอร์การกำหนดขนาดและทำการแก้ไขต่อไปนี้:
- ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
- ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
- ความกว้าง: 90%
- ความกว้างสูงสุด: 1580px

การเว้นวรรค
จากนั้นลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดออก
- การเสริมด้านบน: 0px
- ช่องว่างภายในด้านล่าง: 0px

การตั้งค่าคอลัมน์ 1
สีพื้นหลัง
จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 1 และเปลี่ยนสีพื้นหลัง
- สีพื้นหลัง: # f7f7f7

การเว้นวรรค
ตั้งค่าคอลัมน์ให้เสร็จสมบูรณ์โดยการเพิ่มค่าช่องว่างที่กำหนดเองบนหน้าจอขนาดต่างๆ
- ช่องว่างภายในบน: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
- ช่องว่างด้านล่าง: 200px (โต๊ะทำงาน), 100px (แท็บเล็ตและโทรศัพท์)
- ช่องว่างด้านซ้าย: 8%
- แพ็ดดิงขวา: 8%

การตั้งค่าคอลัมน์ 2
การเว้นวรรค
ดำเนินการต่อโดยเปิดการตั้งค่าในคอลัมน์ 2 ไปที่แท็บขั้นสูงและเพิ่มค่าช่องว่างภายในที่กำหนดเองบนหน้าจอขนาดต่างๆ
- ช่องว่างภายในสุด: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
- ช่องว่างภายในด้านล่าง: 200px
- ช่องว่างด้านซ้าย: 150 พิกเซล (โต๊ะทำงาน), 0 พิกเซล (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลการแยกเข้ากับคอลัมน์ 1
ความชัดเจน
ในคอลัมน์แรกโมดูลแรกที่เราต้องการคือโมดูลแยก ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก“ แสดงตัวคั่น”
- แสดงตัวแยก: ใช่

ออนไลน์
จากนั้นเปลี่ยนสีเส้นของโมดูล
- สีของเส้น: # 000000

ปรับขนาด
ทำการเปลี่ยนแปลงพารามิเตอร์การปรับขนาดด้วย
- น้ำหนัก Divider: 3px
- ความกว้าง: 50%

เพิ่มโมดูลข้อความในคอลัมน์ 1
เพิ่มเนื้อหา H3
โมดูลถัดไปที่เราต้องการในคอลัมน์ 1 คือโมดูลข้อความที่มีเนื้อหา H3

การตั้งค่าข้อความ H3
เปลี่ยนไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความ H3:
- ตำแหน่งตำรวจ 3: รายไตรมาส
- สีข้อความของรายการ 3: # 000000
- รายการ 3 ขนาดตัวอักษร: 50px (เดสก์ท็อป), 40px (แท็บเล็ต), 35px (โทรศัพท์)
- ความสูงของบรรทัดที่ 3 ของหัว: 1.1em

เพิ่มโมดูลข้อความในคอลัมน์ 2
เพิ่มเนื้อหา
ในคอลัมน์ที่สองโมดูลแรกที่เราต้องการคือโมดูลข้อความที่มีเนื้อหาคำอธิบายบางอย่าง

การตั้งค่าข้อความ
เปลี่ยนการตั้งค่าข้อความของโมดูลดังนี้:
- แบบอักษรของข้อความ: ห้องโดยสาร
- รูปแบบตัวอักษรข้อความ: ตัวพิมพ์ใหญ่
- ขนาดตัวอักษร: 18px (เดสก์ท็อป), 15px (แท็บเล็ต), 13px (โทรศัพท์)
- การเว้นวรรคตัวอักษร: 3px (เดสก์ท็อป), 1px (แท็บเล็ตและโทรศัพท์)
- ความสูงของบรรทัดข้อความ: 3em

เพิ่มโมดูลปุ่มไปยังคอลัมน์ 2
เพิ่มสำเนา
โมดูลถัดไปและสุดท้ายที่เราต้องการคือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

การตั้งค่าปุ่ม
จากนั้นจัดสไตล์ปุ่ม
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 20 พิกเซล
- สีข้อความปุ่ม: #ffffff
- สีพื้นหลังของปุ่ม: # 000000
- ความกว้างเส้นขอบของปุ่ม: 0px

- แบบอักษรของปุ่ม: รายไตรมาส
- น้ำหนักแบบอักษรของปุ่ม: หนา

การเว้นวรรค
เพิ่มช่องว่างภายในที่กำหนดเองด้วย
- การเสริมด้านบน: 50px
- ช่องว่างภายในด้านล่าง: 50px
- ช่องว่างด้านซ้าย: 100px
- ช่องว่างภายในขวา: 100px

ตำแหน่ง
และย้ายตำแหน่งปุ่มตาม:
- ตำแหน่ง: สัมบูรณ์
- ที่ตั้ง: ด้านล่างซ้าย

โคลนบรรทัดได้บ่อยเท่าที่จำเป็น
เมื่อคุณเสร็จสิ้นทั้งบรรทัดและโมดูลทั้งหมดแล้วคุณสามารถโคลนทั้งบรรทัดได้สามครั้ง

เปลี่ยนเนื้อหาทั้งหมด
ตรวจสอบให้แน่ใจว่าได้แก้ไขเนื้อหาทั้งหมดในบรรทัดที่ซ้ำกัน

2. ใช้เอฟเฟกต์การเลื่อน
ผลการเลื่อนแถวแรก
การเคลื่อนไหวในแนวนอน
เมื่อคุณเสร็จสิ้นทุกบรรทัดในส่วนของคุณแล้วก็ถึงเวลาเพิ่มเอฟเฟกต์การเลื่อน เปิดแถวแรกของส่วนและเพิ่มการเคลื่อนไหวในแนวนอน
- เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
- เริ่มชดเชย: -5
- ค่าชดเชยเฉลี่ย: 0 (ที่ 26%)
- ออฟเซ็ตสิ้นสุด: 0
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

จางเข้าและออก
ใช้เอฟเฟกต์เฟดขาเข้าและขาออก
- เปิดใช้งานจางหายไป: ใช่
- ความทึบเริ่มแรก: 100%
- ความทึบแสงเฉลี่ย: 100% (ที่ 50%)
- สิ้นสุดความทึบ: 0% (ถึง 53%)
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

ผลการเลื่อนแถวกลาง
การเคลื่อนไหวในแนวตั้ง
ต่อไปเราจะเพิ่มเอฟเฟกต์การเลื่อนให้กับเส้นทั้งหมดระหว่างบรรทัดแรกและบรรทัดสุดท้ายของส่วน ขั้นแรกให้ใช้การเคลื่อนไหวในแนวตั้ง:
- เปิดใช้งานการเคลื่อนไหวแนวตั้ง: ใช่
- เริ่มชดเชย: -4
- ค่าชดเชยเฉลี่ย: 0 (ที่ 26%)
- ออฟเซ็ตสิ้นสุด: 0
- เอฟเฟกต์ทริกเกอร์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

จางเข้าและออก
เปิดใช้งานเอฟเฟกต์จางหายเข้าและออก
- เปิดใช้งานจางหายไป: ใช่
- ความทึบเริ่มแรก: 0%
- ความทึบแสงเฉลี่ย: 100% (จาก 27% ถึง 50%)
- ส่วนท้ายชดเชย: 0 (ที่ 53%)
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

เอฟเฟกต์การเลื่อนบรรทัดสุดท้าย
การเคลื่อนไหวในแนวตั้ง
จากนั้นเปิดบรรทัดสุดท้ายของส่วนและเพิ่มการเคลื่อนไหวแนวตั้งต่อไปนี้:
- เปิดใช้งานการเคลื่อนไหวแนวตั้ง: ใช่
- เริ่มชดเชย: -4
- ค่าชดเชยเฉลี่ย: 0 (ที่ 26%)
- ออฟเซ็ตสิ้นสุด: 0
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

จางเข้าและออก
ด้วยเอฟเฟกต์จางขาเข้าและขาออกและคุณทำเสร็จแล้ว!
- เปิดใช้งานจางหายไป: ใช่
- ความทึบเริ่มแรก: 0%
- ความทึบแสงเฉลี่ย: 100% (จาก 27% ถึง 50%)
- สิ้นสุดความทึบ: 100% (ถึง 53%)
- ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ตรงกลางขององค์ประกอบ

ผลสุดท้าย
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ

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