วิธีการทับซ้อนแถวแนวนอนกับ Divi

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

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

ไปกันเถอะ!

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

ดูตัวอย่าง

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

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

สิ่งแรกที่คุณต้องทำคือดาวน์โหลดฟอนต์ลายมือ Mightype ด้วยมือจาก AF studio ฟรี ไปที่ลิงก์ต่อไปนี้และเปิดใช้งานการดาวน์โหลดฟรีผ่านอีเมล

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 250px
• แผ่นรองด้านล่าง: 250px

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

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

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

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

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

• สี 1: #ffffff
• สี 2: rgba(0,255,233,0.25)
• ประเภทการไล่ระดับสีของคอลัมน์: เรเดียล
• ทิศทางรัศมีของคอลัมน์: ซ้าย
• ตำแหน่งเริ่มต้นของคอลัมน์: 59%
• ตำแหน่งสิ้นสุดคอลัมน์: 59%
• วางคอลัมน์ไล่ระดับเหนือภาพพื้นหลัง: ใช่

รูปแบบพื้นหลังคอลัมน์ 1

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

เมื่อคุณอัปโหลดรูปแบบแล้ว ให้ใช้การตั้งค่าภาพพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลังของคอลัมน์: ขนาดจริง
• ทำซ้ำภาพพื้นหลังของคอลัมน์: Space

การจัดแนวแถว

เปิดใช้งานการจัดตำแหน่งแถวด้านขวาด้วย

ขนาด

เรายังใช้การตั้งค่าการปรับขนาดแบบกำหนดเองบางอย่างสำหรับแถวนี้:

• ใช้ความกว้างที่กำหนดเอง: ใช่
• ความกว้างที่กำหนดเอง: 950px

ระยะห่าง

นี่คือค่าการเว้นวรรคที่คุณต้องเพิ่มต่อไป:

• ขอบล่าง: 100px
• ระยะขอบขวา: -30px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ชายแดน

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเส้นขอบที่ด้านบน ด้านซ้าย และด้านล่างของแถวของคุณ:

• ความกว้างของเส้นขอบ: 14px
• สีเส้นขอบ: #000000
• รูปแบบเส้นขอบด้านซ้าย: Double

เพิ่มโมดูลข้อความชื่อเรื่อง

เพิ่ม H2 Copy

ตอนนี้เราสามารถเริ่มเพิ่มโมดูลของเราได้แล้ว! เพิ่มชื่อโมดูลข้อความและตรวจสอบให้แน่ใจว่าสำเนาของคุณเป็น H2

สีพื้นหลัง

เราจะขัดจังหวะเส้นขอบด้านซ้ายของแถวของเราด้วยการเพิ่มสีพื้นหลังสีขาวลงในโมดูลข้อความ

อัปโหลดแบบอักษร Mightype

ค้นหาแบบอักษร Mightype บนคอมพิวเตอร์ของคุณ จากนั้นอัปโหลดไปยังไลบรารีแบบอักษรของคุณโดยคลิกที่ปุ่มอัปโหลดในรายการแบบอักษรของคุณ

เลือกไฟล์ฟอนต์ Mightype ตั้งชื่อฟอนต์ของคุณ แล้วอัปโหลดไปที่ไลบรารีฟอนต์ของคุณ

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

เมื่อคุณเพิ่มแบบอักษรใหม่แล้ว ให้ทำการเปลี่ยนแปลงอื่นๆ ในการตั้งค่าข้อความ H2:

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

ระยะห่าง

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

• ขอบบน: 200px
• ขอบล่าง: 100px
• ระยะขอบซ้าย: -35%
• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px

โหมดผสมผสาน

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

เพิ่มโมดูลข้อความคำอธิบาย

สีพื้นหลัง

ด้านล่างชื่อโมดูลข้อความ ไปข้างหน้าและเพิ่มโมดูลข้อความคำอธิบายด้วยสีพื้นหลังสีขาว

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

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

• ขนาดตัวอักษร: 22px (เดสก์ท็อป), 18px (แท็บเล็ต), 15px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em
• การวางแนวข้อความ: ศูนย์

ขนาด

ลดขนาดของโมดูลข้อความนี้เป็น '96%' ถัดไป

ระยะห่าง

เพิ่มระยะห่างด้วย:

• ขอบล่าง: 200px
• ระยะขอบซ้าย: -50%
• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px

โหมดผสมผสาน

และใช้โหมดผสมผสาน 'ทวีคูณ' ที่นี่ด้วย

โคลนโรว์

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

เปลี่ยนการตั้งค่าแถว

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

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

• สี 2: rgba(255,187,0,0.33)
• ทิศทางรัศมีของคอลัมน์: ขวา

การจัดแนวแถว

เราต้องการให้แถวปรากฏอีกด้านหนึ่ง นั่นคือเหตุผลที่เราจะเลือกการจัดตำแหน่งแถวด้านซ้าย

ระยะห่าง

เรากำลังปรับการตั้งค่าการเว้นวรรคด้วย:

• ระยะขอบซ้าย: -25% (แท็บเล็ตและโทรศัพท์)

ชายแดน

ลบเส้นขอบด้านซ้ายที่ใช้กับแถวของคุณและนำไปใช้กับด้านขวาแทน:

• ความกว้างของเส้นขอบขวา: 14px
• สีขอบขวา: #000000
• รูปแบบเส้นขอบขวา: สองเท่า

เปลี่ยนการตั้งค่าโมดูลข้อความชื่อเรื่อง

ระยะห่าง

เปลี่ยนการตั้งค่าการเว้นวรรคของโมดูลข้อความชื่อของคุณ ถัดไป:

• ระยะขอบซ้าย: 52% (เดสก์ท็อปและแท็บเล็ต), 58% (โทรศัพท์)
• ระยะขอบขวา: -52% (เดสก์ท็อปและแท็บเล็ต), 58% (โทรศัพท์)

เปลี่ยนการตั้งค่าข้อความคำอธิบาย

ระยะห่าง

สุดท้ายแต่ไม่ท้ายสุด โมดูลข้อความคำอธิบายต้องการค่าระยะห่างอื่นๆ ด้วยเช่นกัน:

• ระยะขอบซ้าย: 50%
• ระยะขอบขวา: -50%

ดูตัวอย่าง

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

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

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