วิธีสร้างหัวข้อที่มีชีวิตชีวาสำหรับโปรเจ็กต์ Divi ถัดไปของคุณ

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

ไปกันเถอะ!

ดูตัวอย่าง

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

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

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

ระยะห่าง

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

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

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

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

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

สีพื้นหลัง

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

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

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

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

• สี 1: #0031c4
• สี 2: #00aeff
• คอลัมน์ 1 ทิศทางการไล่ระดับสี: 125deg

ขนาด

เปลี่ยนระยะห่างของแถวของคุณด้วยเพื่อให้แน่ใจว่าจะใช้ความกว้างทั้งหมดของหน้าจอ

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

สุดท้าย เปลี่ยนการตั้งค่าการเว้นวรรคตามขนาดหน้าจอต่างๆ:

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

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

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

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

• หัวข้อที่ 2 น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษรของหัวเรื่อง 2: ตัวพิมพ์ใหญ่
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ: 150px
• ส่วนหัว 2 ความสูงของบรรทัด: 1.25em
• หัวเรื่อง 2 Text Shadow ความยาวแนวตั้ง: -0.55em
• หัวเรื่อง 2 สีเงาข้อความ: rgba(0,255,255,0.25)

ระยะห่าง

การทับซ้อนระหว่างคอลัมน์จะแตกต่างกันบนเดสก์ท็อป แท็บเล็ต และโทรศัพท์ ในการสร้างการทับซ้อน เราจะทำการเปลี่ยนแปลงการตั้งค่าการเว้นวรรคของโมดูลข้อความของเรา:

• ขอบบน: 325px (เดสก์ท็อป), 150px (แท็บเล็ตและโทรศัพท์)
• ขอบล่าง: 325px, -120px (แท็บเล็ต), -110px (โทรศัพท์)
• ระยะขอบขวา: -100% (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

กรอง

สุดท้ายแต่ไม่ท้ายสุด เราจะใช้โหมดผสมผสานเพื่อสร้างความแตกต่างของสีสำหรับข้อความที่แสดงขึ้น

• โหมดผสมผสาน: โอเวอร์เลย์

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

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

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

• หัวข้อ 3 น้ำหนักแบบอักษร: กึ่งหนา
• หัวเรื่อง 3 สีข้อความ: #00aeff
• หัวเรื่อง 3 ขนาดข้อความ: 60px
• หัวเรื่อง 3 ระยะห่างตัวอักษร: -3px

ระยะห่าง

สร้างพื้นที่บางส่วนโดยเพิ่มระยะขอบด้านล่าง ถัดไป:

• ขอบล่าง: 50px

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

ตัวแบ่งสี

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

• ตัวแบ่งสี: #00ffff

ขนาด

จากนั้น แก้ไขการตั้งค่าการปรับขนาด:

• ส่วนสูง: 56px
• ความกว้าง: 75%

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

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

ดำเนินการต่อโดยเพิ่มโมดูลข้อความคำอธิบายโดยใช้การตั้งค่าข้อความต่อไปนี้:

• ขนาดตัวอักษร: 17px
• ความสูงของบรรทัดข้อความ: 1.3em
• การวางแนวข้อความ: Justify

ขนาด

เปลี่ยนการตั้งค่าการปรับขนาดต่อไป:

• ขนาด: 70% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

เพิ่มช่องว่างด้านล่างโมดูลนี้โดยใช้ระยะขอบด้านล่างเช่นกัน:

• ขอบล่าง: 50px

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

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

โมดูลสุดท้ายที่เราต้องการในคอลัมน์นี้คือโมดูลปุ่ม หลังจากเพิ่ม CTA แล้ว ให้เปลี่ยนการตั้งค่าปุ่ม:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 17px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #00aeff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: -1px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

และเพื่อให้ปุ่มดูสะอาดตายิ่งขึ้น เราจะเพิ่มส่วนเสริมด้วย:

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

กล่องเงา

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

• ความชัดเจนของเงากล่อง: 54px
• ความแรงของการกระจายเงาของกล่อง: -8px
• เงาสี: rgba(0,0,0,0.3)

ส่วนโคลน

เปลี่ยนสำเนาทั้งหมด

ในการสร้างส่วนที่สอง เราจะทำการโคลนส่วนที่เราได้สร้างไว้แล้ว จากนั้นจึงเปลี่ยนสำเนาทั้งหมด

เปลี่ยนสีพื้นหลังของแถว

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

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

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

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

• สี 1: #5f00a8
• สี 2: #9000ff

เปลี่ยนชื่อส่วนเงาสี

เรากำลังจับคู่ Text Shadow Color กับจานสีใหม่ของเราด้วย:

• หัวเรื่อง 2 สีเงาข้อความ: rgba(255,0,255,0.24)

เปลี่ยนการตั้งค่าการเว้นวรรคชื่อเรื่อง

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

• ระยะขอบขวา: -110% (เดสก์ท็อป)

เปลี่ยนหัวเรื่อง ข้อความ โมดูล Text Color

จากนั้น เปลี่ยนสีข้อความของโมดูลข้อความชื่อในคอลัมน์ 2

• หัวเรื่อง 3 สีข้อความ: #9000ff

เปลี่ยนสีตัวแบ่ง

ในทำนองเดียวกัน ทำให้สีของตัวแบ่งตรงกับการออกแบบ

• สี: #ff00ff

เปลี่ยนสีพื้นหลังของปุ่ม

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

• สีพื้นหลังของปุ่ม: #9000ff

ดูตัวอย่าง

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

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

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