ตัวแบ่งส่วนยังคงเป็นองค์ประกอบการออกแบบยอดนิยมบน Divi มีตัวคั่นหลายสไตล์รวมถึงตัวเลือกที่มีประโยชน์บางอย่างที่ทำให้ง่ายต่อการเพิ่มการเปลี่ยนและพื้นหลังที่เป็นเอกลักษณ์ให้กับเพจของคุณ
ในบทช่วยสอนนี้ เราจะใช้ตัวแบ่งส่วนแตกต่างออกไปเล็กน้อย Divi ช่วยให้คุณปรับความสูงและเค้าโครงของตัวแบ่งแต่ละตัวได้ ซึ่งช่วยให้เราสามารถวางตำแหน่งตัวคั่นไว้เหนือพื้นที่หรือเนื้อหาบางส่วนในส่วนนั้นได้ ด้วยการใช้ตัวเลือกโฮเวอร์สำหรับความสูงของตัวแบ่ง เราสามารถเพิ่มเอฟเฟกต์โฮเวอร์ที่ไม่ซ้ำใครซึ่งเผยให้เห็น เนื้อหา ซ่อนไว้บางส่วน วิธีนี้ใช้ได้ผลดีในการดึงดูดความสนใจไปที่คำกระตุ้นการตัดสินใจหรือปุ่มเฉพาะที่คุณต้องการให้ผู้คนคลิก ผู้เข้าชม คลิก.
ขอเริ่มต้น
ผลตัวอย่าง
สิ่งที่คุณต้องเริ่มต้น
ในการเริ่มต้นคุณต้องมีสิ่งต่อไปนี้:
- Le ธีม Divi ติดตั้งและใช้งานอยู่
- หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นบน front-end (ตัวสร้างภาพ)
- ภาพจำลองบางส่วนที่จะใช้ในการออกแบบ ฉันจะใช้รูปภาพที่มีพื้นหลังโปร่งใสจากไฟล์ แพ็คเค้าโครงร้านน้ำผลไม้ .
หลังจากนั้นคุณก็พร้อมที่จะเริ่ม!
การใช้การออกแบบเอฟเฟกต์โฮเวอร์ความสูงของตัวแบ่งส่วนใน Divi
การสร้างส่วนและบรรทัด
เริ่มต้นด้วยการสร้างหัวข้อปกติด้วยแถวสองคอลัมน์
ก่อนเพิ่มโมดูลให้เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:
การไล่ระดับพื้นหลังด้านซ้าย: #73ba57
การไล่ระดับพื้นหลังด้านขวา: #2a4c23
ความกว้าง: 80%
ความกว้างสูงสุด: 1080px
การจัดตำแหน่งมาตรา: ศูนย์
แต่คุณยังสามารถเลือกโทนสีที่คุณชอบตามภาพของคุณได้อีกด้วย โทนสีของฉันคือ # fff200 - # e09900 ในการไล่ระดับสี
เพิ่มชื่อส่วน
หากต้องการเพิ่มชื่อส่วน ให้สร้างโมดูลข้อความและอัปเดต เนื้อหา ของร่างกายด้วยส่วนหัว h2 ต่อไปนี้:
น้ำผลไม้
จากนั้นอัปเดตรูปวาดดังนี้:
หัวเรื่อง 2 ตัวอักษร: Lato
หัวเรื่องขนาดข้อความ 2: 80px
หัวเรื่อง 2 ระยะห่างระหว่างตัวอักษร: -5px
ระยะขอบ: -50px ที่ด้านบน -40px ที่ด้านล่าง
ดัชนี Z: -1
ระยะขอบที่กำหนดเองและดัชนี z จะทำให้ข้อความอยู่ด้านหลังรูปภาพที่เราจะเพิ่มในขั้นตอนถัดไป
ใส่รูปภาพ
ภายใต้โมดูลข้อความที่มีหัวเรื่องในคอลัมน์ 1 ให้เพิ่มโมดูลรูปภาพ จากนั้นอัปโหลดภาพที่มีพื้นหลังโปร่งใส ฉันใช้รูปภาพเค้าโครงร้านน้ำผลไม้ 240px คูณ 300px
ปรับการจัดตำแหน่งของภาพให้อยู่ตรงกลาง
การเพิ่มคำกระตุ้นการตัดสินใจในคอลัมน์ 2
ในคอลัมน์ 2 เพิ่มการเรียกไปยังโมดูลการดำเนินการ
เพิ่ม URL ลิงค์ปุ่มเพื่อให้แน่ใจว่าปุ่มนั้นปรากฏขึ้น
พื้นหลัง CTA และสไตล์ชื่อเรื่อง
จากนั้นอัพเดตพารามิเตอร์การออกแบบต่อไปนี้:
สีพื้นหลัง: #ffffff
สีข้อความ:
แบบอักษรของชื่อ: Lato
นโยบายน้ำหนักของชื่อเรื่อง: หนัก
ลักษณะแบบอักษรของชื่อเรื่อง: TT
ขนาดตัวอักษรหัวเรื่อง: 18px
จัดรูปแบบปุ่ม CTA
อัพเดตการออกแบบปุ่มดังต่อไปนี้:
สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: # e09900
ความกว้างชายแดนของปุ่ม: 0 px
ใส่สไตล์ CTA border
จากนั้นเพิ่มเส้นขอบเพื่อใส่เฟรมโมดูลดังนี้:
ความกว้างของเส้นขอบ: 10px
สีของเส้นขอบ: rgba (224,145,0,0.25)
เพิ่มเอฟเฟกต์เลื่อนความสูงของตัวแบ่งเพื่อแสดงคำกระตุ้นการตัดสินใจ
ตอนนี้ถึงเวลาเพิ่มเอฟเฟกต์การเลื่อนความสูงของส่วนแบ่งส่วนเพื่อแสดงคำกระตุ้นการตัดสินใจ ในการดำเนินการนี้เราต้องสร้างตัวแบ่งส่วนของเราก่อน
การเพิ่มตัวคั่นด้านบน
เปิดพารามิเตอร์ส่วนและตัวคั่นด้านบนด้วยพารามิเตอร์ต่อไปนี้
รูปแบบตัวแบ่งด้านบน: ดูภาพหน้าจอสีของตัวแบ่งด้านบน: # 73ba57 ความสูงของตัวแบ่งด้านบน: 70% (ค่าเริ่มต้น), 0% (hovered)
พลิกตัวแบ่งด้านบน: แนวนอน
โปรดทราบว่าความสูงของตัวคั่นเริ่มต้นด้วยความสูงเริ่มต้นที่ 70% แล้วเลื่อนไปที่ความสูงของ 0% ในแบบโรลโอเวอร์
การเพิ่มตัวแบ่งที่ต่ำกว่า
จากนั้นเพิ่มตัวคั่นล่างที่คล้ายกับส่วนที่มีพารามิเตอร์ต่อไปนี้
รูปแบบตัวแบ่งด้านบน: ดูภาพหน้าจอสีของตัวแบ่งด้านบน: # 73ba57 ความสูงของตัวแบ่งด้านบน: 70% (ค่าเริ่มต้น), 0% (hovered)
พลิกตัวแบ่งด้านบน: แนวนอน
เค้าโครงตัวแบ่ง: ที่ด้านบนของส่วน เนื้อหา
ตัวคั่นพื้นหลังนี้เริ่มต้นด้วยความสูง 70% ซึ่งเปลี่ยนเป็น 0% เมื่อวางเมาส์เหนือ อย่างไรก็ตามเนื่องจากตัวเลือกเค้าโครงตัวคั่นถูกตั้งค่าไว้ที่ด้านบนสุดของเนื้อหาตัวคั่นส่วนจะซ่อนส่วนล่างของคำกระตุ้นการตัดสินใจในคอลัมน์ 1 จากนั้นเมื่อวางเมาส์เหนือส่วนที่เหลือของ l คำกระตุ้นการตัดสินใจถูกเปิดเผย
ตรวจสอบผลลัพธ์จนถึงตอนนี้
เพิ่มเอฟเฟกต์โฮเวอร์เงาของกล่องเพื่อการเปลี่ยนแปลงและการออกแบบที่ไม่เหมือนใคร
สำหรับการเปลี่ยนและการออกแบบที่ไม่เหมือนใครเราสามารถเพิ่มเอฟเฟกต์การเลื่อนเงาของกล่องที่จะเกิดขึ้นพร้อมกันกับเอฟเฟกต์โฮเวอร์ความสูงของตัวแบ่ง ในการดำเนินการนี้ให้เพิ่มเงาของกล่องต่อไปนี้ในส่วน
Box Shadow: ดูภาพหน้าจอ
ตำแหน่ง Shadow Box แนวนอน: 0px
ตำแหน่ง Shadow Box แนวตั้ง: 0px
แรงเงากล่องเงา: 0px (ค่าเริ่มต้น), 150px (โฮเวอร์)
สีเงาของกล่อง: #73ba57
ชะลอระยะเวลาของการเปลี่ยนแปลง
สำหรับขั้นตอนสุดท้ายขอชะลอระยะเวลาของการเปลี่ยนแปลง
ระยะเวลาของการเปลี่ยนแปลง: 700ms
ผลสุดท้าย
นี่คือผลลัพธ์สุดท้ายบนเดสก์ท็อป
จากสิ่งที่เราได้ทำไปข้างต้นคุณจะสามารถปรับแต่งการแสดงผลบนมือถือและแท็บเล็ตได้
คิดสุดท้าย
หวังว่าบทช่วยสอนนี้จะให้แรงบันดาลใจแก่คุณในการสร้างเอฟเฟกต์เลื่อนความสูงของตัวแบ่งส่วนที่ไม่เหมือนใครเพื่อเปิดเผยเนื้อหา ในความเป็นจริงการปรับความสูงของตัวแบ่งแบบลอยสามารถเป็นองค์ประกอบการออกแบบที่โดดเด่น และตัวอย่างการออกแบบจะช่วยให้คุณเริ่มสำรวจและออกแบบของคุณเองได้
หวังว่าจะได้ยินจากคุณในความคิดเห็น
เพื่อสุขภาพของคุณ!
