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