การใช้โมดูลข้อความของ Divi เพื่อสร้างองค์ประกอบบล็อกในการออกแบบหน้า Divi ของคุณ

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

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

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

สีพื้นหลัง

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 280px (เดสก์ท็อป), 150px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านล่าง: 280px (เดสก์ท็อป), 150px (แท็บเล็ตและโทรศัพท์)

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

กล่องเนื้อหา

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

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

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

• แบบอักษรของหัวเรื่อง 2: Source Code Pro
• รูปแบบตัวอักษรของหัวเรื่อง 2: ตัวพิมพ์ใหญ่
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ: 100px
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 24px

ระยะห่าง

ลดช่องว่างที่ด้านบนโดยใช้ระยะขอบด้านบนติดลบบางส่วน

• อัตรากำไรขั้นต้น: -50px

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

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

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

• แบบอักษรข้อความ: Source Code Pro
• สีข้อความ: #ffffff
• การวางแนวข้อความ: Justify

ขนาด

ลดความกว้างของโมดูลข้อความด้วย

• ความกว้าง: 68%

ระยะห่าง

และสุดท้ายแต่ไม่ท้ายสุด ให้สร้างช่องว่างระหว่างโมดูลข้อความนี้กับโมดูลก่อนหน้าในการตั้งค่าการเว้นวรรค

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

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

กล่องเนื้อหา

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

สีพื้นหลัง

เพิ่มสีพื้นหลังสีดำให้กับโมดูลข้อความ

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

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

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

• แบบอักษรข้อความ: Source Code Pro
• การวางแนวข้อความ: ซ้าย
• สีข้อความ: เบา

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

จากนั้นทำการเปลี่ยนแปลงเพิ่มเติมในการตั้งค่าลิงก์

• รูปแบบตัวอักษรของลิงก์: ตัวพิมพ์ใหญ่ & ขีดเส้นใต้
• ลิงก์ขีดเส้นใต้สี: #ffffff
• ลิงก์สีข้อความ: #edf000
• ขนาดข้อความลิงก์: 16px
• ระยะห่างระหว่างตัวอักษรของลิงก์: 3px

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

ชื่อ H3 ในกล่องเนื้อหาของเราต้องการการตั้งค่าต่อไปนี้:

• หัวข้อ 3 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• หัวเรื่อง 3 ขนาดข้อความ: 33px

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

ดำเนินการต่อโดยเปิดการตั้งค่าข้อความ H4 และทำการเปลี่ยนแปลงที่นั่นด้วย

• หัวเรื่อง 4 สีข้อความ: #4f4f4f
• หัวเรื่อง 4 ขนาดข้อความ: 19px
• หัวเรื่อง 4 ระยะห่างตัวอักษร: -1px

ขนาด

ในการสร้างรูปร่างที่เราต้องการ เราจะลดความกว้างของโมดูลข้อความต่อไป

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

ระยะห่าง

เราจะต้องเปลี่ยนการตั้งค่าการเว้นวรรคด้วย

• ระยะขอบซ้าย: 200px (แท็บเล็ต)
• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ชายแดน

จากนั้น ให้เพิ่มเส้นขอบเล็กๆ ให้กับโมดูลข้อความ

• ความกว้างของเส้นขอบ: 2px
• สีขอบ: #424242

กล่องเงา

และปิดท้ายด้วยการเพิ่มเงากล่องที่มีสีสัน

• ตำแหน่งแนวนอนของกล่องเงา: 19px
• ตำแหน่งแนวตั้งเงาของกล่อง: 16px
• ความแรงของการกระจายเงาของกล่อง: -4px
• สีเงา: #f2ff00

Clone Block Text Module สองครั้ง & วางในคอลัมน์ 3

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

การปรับเปลี่ยนโมดูลข้อความสีแดง

เปลี่ยนสีข้อความลิงก์

เปิดโมดูลข้อความแรกในคอลัมน์ที่สามและเปลี่ยนสีลิงก์

• ลิงค์สีข้อความ: #e02b20

เปลี่ยนระยะห่าง

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

• ขอบบน: -150px (เดสก์ท็อป), -20px (แท็บเล็ต), 50px (โทรศัพท์)

เปลี่ยนสีเงาของกล่อง

เปลี่ยน Box Shadow Color เป็นสีเดียวกับที่ใช้สำหรับข้อความลิงก์

• สีเงา: #e02b20

การปรับเปลี่ยนโมดูลข้อความสีน้ำเงิน

เปลี่ยนสีข้อความลิงก์

เปลี่ยนสีลิงก์ของโมดูลข้อความที่สองในคอลัมน์ที่สามด้วย

• ลิงค์สีข้อความ: #0ff3ff

เปลี่ยนขนาด

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

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

เปลี่ยนระยะห่าง

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

• ขอบบน: -20px (เดสก์ท็อป), -30px (แท็บเล็ต), 50px (โทรศัพท์)
• ระยะขอบซ้าย: -160px (เดสก์ท็อป), 200px (แท็บเล็ต), 0px (โทรศัพท์)

เปลี่ยนสีเงาของกล่อง

ในการดำเนินการให้เสร็จสิ้น ให้เปลี่ยนสีเงาของกล่องเป็นสีน้ำเงินเดียวกับที่ใช้สำหรับข้อความลิงก์ เท่านี้ก็เสร็จเรียบร้อย!

• สีเงา: #0ff3ff

ดูตัวอย่าง

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

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

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