วิธีสร้างการเปลี่ยนพื้นหลังไล่ระดับที่สวยงามด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

ดาวน์โหลดส่วนฮีโร่ฟรี

สมัครสมาชิกช่อง Youtube ของเรา

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

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

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

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

ดาวน์โหลด

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

ขั้นตอนทั่วไป

เพิ่มมาตราใหม่

ระยะห่าง

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

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

เพิ่มแถวใหม่

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

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของคอนเทนเนอร์ส่วน

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

ระยะห่าง

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

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

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

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

มาเริ่มเพิ่มโมดูลกันเถอะ! อันดับแรกที่เราต้องการคือ Text Module ที่มีเนื้อหา H1

การตั้งค่าข้อความ H1

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

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องข้อความสี: #000000
• ขนาดข้อความของหัวเรื่อง: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ตและโทรศัพท์)
• การเว้นวรรคหัวเรื่อง: 0.7vw

ขนาด

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

• ความกว้าง: 48% (เดสก์ท็อป), 60% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

ออกแบบโมดูลให้สมบูรณ์โดยเพิ่มระยะขอบบน

• ขอบบน: 10vw

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

ไปยังโมดูลถัดไป! เพิ่มโมดูลตัวแบ่งและตรวจสอบให้แน่ใจว่าเปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

เส้น

เปลี่ยนสีเส้นต่อไป

• สีของเส้น: #000000

ขนาด

ไปที่การตั้งค่าการปรับขนาดและใช้การตั้งค่าต่อไปนี้:

• น้ำหนักตัวแบ่ง: 0.1vw
• ความกว้าง: 10% (เดสก์ท็อป), 16% (แท็บเล็ต), 25% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองในขนาดหน้าจอต่างๆ ด้วยเช่นกัน

• ด้านบน: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• Padding ด้านล่าง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความอื่น เพิ่มเนื้อหาย่อหน้าที่คุณเลือก

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

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

• แบบอักษรข้อความ: เปิด Sans
• การจัดตำแหน่งข้อความ: Justify
• ความสูงของบรรทัดข้อความ: 2.3em

ขนาด

แก้ไขความกว้างและการจัดตำแหน่งโมดูลในการตั้งค่าขนาดถัดไป:

• ความกว้าง: 30% (เดสก์ท็อป), 54% (แท็บเล็ต), 70% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

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

เพิ่มสำเนา

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

การจัดตำแหน่ง

ไปที่แท็บออกแบบแล้วเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

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

แก้ไขการตั้งค่าปุ่มด้วย

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.8vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.8vw (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 1px
• รัศมีเส้นขอบของปุ่ม: 1px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต

ระยะห่าง

และเพิ่มค่าการเว้นวรรคแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ขอบบน: 2vw (เดสก์ท็อป), 8vw (แท็บเล็ตและโทรศัพท์)
• ขอบล่าง: 10vw
• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)
• Padding ขวา: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)

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

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

สร้างการเปลี่ยนโฮเวอร์พื้นหลังไล่ระดับสี #1

ส่วน

พื้นหลังไล่ระดับสีเริ่มต้น

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

• สี 1: #d1d1ff
• สี 2: #f7f7f7
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

โฮเวอร์พื้นหลังไล่ระดับสี

แก้ไขพื้นหลังการไล่ระดับสีเมื่อวางเมาส์เหนือ

• สี 1: #f7f7f7
• สี 2: #ffc1c7
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

แถว

พื้นหลังไล่ระดับสีเริ่มต้น

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

• สี 1: #7032ff
• สี 2: rgba (255,255,255,0)
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 10%
• ตำแหน่งสุดท้าย: 10%

โฮเวอร์พื้นหลังไล่ระดับสี

แก้ไขพื้นหลังการไล่ระดับสีเมื่อวางเมาส์เหนือ

• สี 1: rgba(255,255,255,0)
• สี 2: #ff324a
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 90%
• ตำแหน่งสุดท้าย: 90%

สร้างการเปลี่ยนโฮเวอร์พื้นหลังไล่ระดับสี #2

ส่วน

พื้นหลังไล่ระดับสีเริ่มต้น

สู่ตัวอย่างที่สอง! เปิดการตั้งค่าส่วนและเพิ่มพื้นหลังการไล่ระดับสีต่อไปนี้:

• สี 1: #f7f7f7
• สี 2: #eceaff
• ทิศทางการไล่ระดับสี: 156deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

โฮเวอร์พื้นหลังไล่ระดับสี

เพิ่มพื้นหลังการไล่ระดับสีที่แตกต่างกันเมื่อวางเมาส์เหนือ:

• สี 1: #ffeaec
• สี 2: #f7f7f7
• ทิศทางการไล่ระดับสี: 204deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

แถว

พื้นหลังไล่ระดับสีเริ่มต้น

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

• สี 1: #a932ff
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ล่างซ้าย
• ตำแหน่งเริ่มต้น: 14%
• ตำแหน่งสุดท้าย: 14%

โฮเวอร์พื้นหลังไล่ระดับสี

เปลี่ยนพื้นหลังการไล่ระดับสีของแถวบนโฮเวอร์ตามลำดับ:

• สี 1: #ff324a
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: บนซ้าย
• ตำแหน่งเริ่มต้น: 14%
• ตำแหน่งสุดท้าย: 14%

คอลัมน์

พื้นหลังไล่ระดับสีเริ่มต้น

ไปที่การตั้งค่าคอลัมน์และเพิ่มพื้นหลังไล่ระดับสีต่อไปนี้:

• สี 1: #a932ff
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: บนขวา
• ตำแหน่งเริ่มต้น: 14%
• ตำแหน่งสุดท้าย: 14%

โฮเวอร์พื้นหลังไล่ระดับสี

แก้ไขพื้นหลังการไล่ระดับสีคอลัมน์เมื่อวางเมาส์เหนือ:

• สี 1: #ff324a
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ล่างขวา
• ตำแหน่งเริ่มต้น: 14%
• ตำแหน่งสุดท้าย: 14%

สร้างการเปลี่ยนการเลื่อนพื้นหลังไล่ระดับ #3

ส่วน

พื้นหลังไล่ระดับสีเริ่มต้น

สู่ตัวอย่างต่อไปและสุดท้าย! เปิดการตั้งค่าส่วนและใช้พื้นหลังไล่ระดับสีต่อไปนี้:

• สี 1: #ffc1c7
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านบน
• ตำแหน่งเริ่มต้น: 45%
• ตำแหน่งสุดท้าย: 45%

โฮเวอร์พื้นหลังไล่ระดับสี

แก้ไขพื้นหลังการไล่ระดับสีของส่วนเมื่อวางเมาส์เหนือ

• สี 1: #ffc1c7
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ซ้าย
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

แถว

พื้นหลังไล่ระดับสีเริ่มต้น

เปิดการตั้งค่าแถวถัดไปและเพิ่มพื้นหลังการไล่ระดับสีต่อไปนี้:

• สี 1: #d3dfff
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านล่าง
• ตำแหน่งเริ่มต้น: 45%
• ตำแหน่งสุดท้าย: 45%

พื้นหลังไล่ระดับโฮเวอร์

แก้ไขพื้นหลังการไล่ระดับสีตามลำดับ:

• สี 1: #d3dfff
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ขวา
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

คอลัมน์

พื้นหลังไล่ระดับสีเริ่มต้น

สุดท้ายแต่ไม่ท้ายสุด เพิ่มพื้นหลังการไล่ระดับสีของคอลัมน์ เท่านี้ก็เรียบร้อย!

• สี 1: #f7f7f7
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 41%
• ตำแหน่งสุดท้าย: 41%

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์สุดท้ายของตัวอย่างทั้งสามที่เราสร้างขึ้นใหม่ตลอดบทช่วยสอนนี้กัน!

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

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

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

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