วิธีเปลี่ยนพื้นหลังไล่ระดับบนโฮเวอร์ด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

คงที่

โฮเวอร์

ดาวน์โหลดภาพประกอบฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

เพิ่มมาตรา #1

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

คอลัมน์ 1 สีพื้นหลังเริ่มต้น

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

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

คอลัมน์ 1 โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังนี้เมื่อโฮเวอร์

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

พื้นหลังไล่ระดับคอลัมน์ 1

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

• สี 1: rgba(255,255,255,0)
• สี 2: rgba(16,0,201,0.8)
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เชิงเส้น
• คอลัมน์ 1 ทิศทางการไล่ระดับสี: 50deg
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 20%

คอลัมน์ 2 สีพื้นหลัง

เพิ่มสีพื้นหลังของคอลัมน์ 2 ด้วย

• คอลัมน์ 2 สีพื้นหลัง: #ffffff

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: PX
• กำหนดความกว้าง: 2000px
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 2: 6vw (เดสก์ท็อป), 120px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 2: 6vw (เดสก์ท็อป), 120px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 2 ด้านซ้าย: 5vw (เดสก์ท็อป), 80px (แท็บเล็ต), 50px (โทรศัพท์)
• คอลัมน์ที่ 2 ด้านขวา: 5vw (เดสก์ท็อป), 80px (แท็บเล็ต), 50px (โทรศัพท์)

กล่องเงา

และให้เงากล่องที่บอบบางแก่แถวเช่นกัน

• ความชัดเจนของกล่องเงาเบลอ: 100px
• ความแรงของการกระจายเงาของกล่อง: -10px

การเปลี่ยนผ่าน

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

• ระยะเวลาการเปลี่ยนภาพ: 1100ms

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูลรูปภาพในคอลัมน์แรกและอัปโหลดไฟล์ ' divi-gradient-background-on-hover-illustration-1.png ' ซึ่งคุณจะพบได้ในโฟลเดอร์ซิปที่คุณดาวน์โหลดไว้ที่ตอนต้นของโพสต์นี้

พื้นหลังไล่โทนสี

ไปที่การตั้งค่าพื้นหลังของ Image Module นี้และเพิ่มพื้นหลังไล่ระดับสี เราใช้สีโปร่งใสสีเดียวอีกครั้งเพื่อให้สีอื่นๆ แสดงได้

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

ระยะห่าง

จากนั้น เพิ่มการเสริมด้านบนแบบกำหนดเองให้กับโมดูล

• แผ่นรองด้านบน: 14vw

เพิ่มโมดูลข้อความชื่อเรื่องลงในคอลัมน์ 2

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

ต่อคอลัมน์ที่สอง! โมดูลแรกที่เราจะต้องมีคือโมดูลข้อความชื่อ ไปข้างหน้าและเพิ่มเนื้อหาหัวข้อที่เลือก

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

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

• แบบอักษรของหัวเรื่อง: Abril Fatface
• หัวเรื่องข้อความสี: #000000
• ขนาดข้อความของหัวเรื่อง: 4vw (เดสก์ท็อป), 60px (แท็บเล็ต), 40px (โทรศัพท์)

เพิ่มโมดูลข้อความคำอธิบายลงในคอลัมน์ 2

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

โมดูลที่สองที่เราต้องการคือโมดูลข้อความอื่น เพิ่มเนื้อหาที่เลือก

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

จากนั้นไปที่การตั้งค่าข้อความและเปลี่ยนการวางแนวข้อความ

• การวางแนวข้อความ: Justify

ขนาด

ปรับความกว้างในการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 73% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

สุดท้าย เพิ่มระยะขอบบนและล่างแบบกำหนดเองให้กับโมดูลเพื่อสร้างช่องว่าง

• ขอบบน: 2.5vw (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบด้านล่าง: 2.5vw (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1.2vw (เดสก์ท็อป), 14px (แท็บเล็ตและโทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับสี 1: #9ea6ff
• ไล่ระดับสี 2: rgba(16,0,201,0.8)
• ทิศทางการไล่ระดับสี: 78deg
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 30px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: -1px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• ช่องว่างภายในด้านซ้าย: 40px
• ช่องว่างภายในด้านขวา: 40px

กล่องเงา

และใช้เงากล่องที่ละเอียดอ่อนกับปุ่ม

• ความชัดเจนของเงากล่อง: 40px

เพิ่มส่วน #2

ระยะห่าง

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

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

เพิ่มแถว #2

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

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

คอลัมน์ 1 สีพื้นหลัง

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

• คอลัมน์ 1 สีพื้นหลัง: #ffffff

คอลัมน์ 2 สีพื้นหลังเริ่มต้น

เพิ่มสีพื้นหลังต่อไปนี้ในคอลัมน์ 2

• คอลัมน์ 2 สีพื้นหลัง: #ffffff

คอลัมน์ 2 โฮเวอร์สีพื้นหลัง

และเปลี่ยนสีพื้นหลังนี้เมื่อวางเมาส์ไว้

• คอลัมน์ 2 สีพื้นหลัง: #3d02ff

พื้นหลังไล่ระดับคอลัมน์ 2

เพิ่มพื้นหลังไล่ระดับสีให้กับคอลัมน์ด้วย

• สี 1: rgba(255,255,255,0)
• สี 2: #ff7700
• คอลัมน์ 2 ตำแหน่งเริ่มต้น: 20%

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: PX
• กำหนดความกว้าง: 2000px
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 1 ด้านบน: 6vw (เดสก์ท็อป), 120px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 1 ช่องว่างภายใน: 6vw (เดสก์ท็อป), 120px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 1 ช่องว่างภายในด้านซ้าย: 5vw (เดสก์ท็อป), 80px (แท็บเล็ต), 50px (โทรศัพท์)
• คอลัมน์ที่ 1 ด้านขวา: 5vw (เดสก์ท็อป), 80px (แท็บเล็ต), 50px (โทรศัพท์)

กล่องเงา

และเพิ่มเงากล่องเล็กๆ ให้กับแถวนี้ด้วย

• ความชัดเจนของกล่องเงาเบลอ: 100px
• ความแรงของการกระจายเงาของกล่อง: -10px

การเปลี่ยนผ่าน

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

• ระยะเวลาการเปลี่ยนภาพ: 1100ms

โมดูลข้อความซ้ำ & โมดูลปุ่มของแถว #1

เนื่องจากเรามีโมดูลทั้งหมดที่เราต้องการแล้วในหัวข้อก่อนหน้านี้ เราจะประหยัดเวลาด้วยการโคลนโมดูล

วางรายการที่ซ้ำกันในคอลัมน์ 1 ของแถว #2

และวางรายการที่ซ้ำกันในคอลัมน์แรกของแถวใหม่

เปลี่ยนเนื้อหา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาของโมดูลของคุณ

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

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

• สี 1: #ff653f
• สี 2: #0066ff
• ทิศทางการไล่ระดับสี: 39deg

Clone Image Module ของแถว #2

โคลน Image Module ที่คุณสามารถพบได้ในคอลัมน์แรกของแถวก่อนหน้าเช่นกัน

วางซ้ำในคอลัมน์ 2 ของแถว #2

และวางรายการที่ซ้ำกันในคอลัมน์ที่สองของแถวใหม่

เปลี่ยนภาพ

เปลี่ยนรูปภาพเป็นไฟล์ ' divi-gradient-background-on-hover-illustration-2.png ' ที่คุณพบได้ในโฟลเดอร์ซิปที่คุณดาวน์โหลดไว้ที่ตอนต้นของโพสต์นี้

เปลี่ยนพื้นหลังไล่ระดับ

สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนพื้นหลังการไล่ระดับสีของ Image Module

• สี 1: rgba(0,2,12,0.66)
• สี 2: rgba (255,255,255,0)
• ตำแหน่งสุดท้าย: 57%

ดูตัวอย่าง

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

คงที่

โฮเวอร์

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

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