การพิมพ์แบบเรียงซ้อนเพื่อสร้างการออกแบบส่วนหัวที่ไม่ซ้ำกัน 5 แบบใน Divi

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

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

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

แอบมอง

มาดู 5 แบบกันครับ

การออกแบบ #1

การออกแบบ #2

การออกแบบ #3

การออกแบบ #4

การออกแบบ #5

เริ่มต้น

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

เพื่อลดความซับซ้อนของกระบวนการสร้างการออกแบบทั้ง 5 แบบ ฉันจะทำซ้ำส่วนต่างๆ เพื่อเริ่มต้นการออกแบบครั้งต่อไป ดังนั้นจึงเป็นการดีที่สุดที่จะสร้างการออกแบบเหล่านี้โดยเริ่มจากอันแรก

การออกแบบหัวเรื่อง #1

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

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

ไปที่การตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

เพิ่มภาพพื้นหลัง (กว้างอย่างน้อย 1920px)
ไล่สีพื้นหลังด้านซ้าย: #ffffff
พื้นหลังไล่ระดับสีขวาสี: rgba(255,255,255,0)
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ถัดไป อัปเดตการตั้งค่าแถวดังนี้:

พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0)
ไล่สีพื้นหลังด้านขวา: #ffffff
ความกว้างที่กำหนดเอง: 100%
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

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

แทนที่เนื้อหาจำลองในกล่องเนื้อหาด้วยส่วนหัว h2 ที่อ่านว่า "การออกแบบ" ดังนี้:

<h2>design</h2>

จากนั้นอัปเดตการตั้งค่าที่เหลือดังนี้:

หัวข้อ 2 แบบอักษร: ไคโร
หัวข้อ 2 น้ำหนักแบบอักษร: ปกติ
รูปแบบตัวอักษรของหัวเรื่อง 2: ตัวพิมพ์ใหญ่ (TT)
หัวเรื่อง 2 ขนาดข้อความ: 8vw
ความกว้าง: 58% (เดสก์ท็อป), 16% (แท็บเล็ต), 18% (สมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ศูนย์
ระยะขอบที่กำหนดเอง: -10vw ด้านบน, -10vw ด้านล่าง

ค่าความกว้างที่กำหนดเองรวมกับขนาดข้อความส่วนหัว 8vw เป็นกุญแจสำคัญในการออกแบบนี้ ความกว้างที่กำหนดเองจะบีบข้อความเพื่อให้แต่ละตัวอักษรวางซ้อนกัน ค่าเปอร์เซ็นต์ความกว้างเปลี่ยนแปลงอย่างมากในแท็บเล็ตเนื่องจากขนาดคอลัมน์ที่ถือโมดูลข้อความเปลี่ยนจาก 1/3 เป็นเต็มความกว้าง การตั้งค่าข้อความส่วนหัวเป็นหน่วยความยาว vw (ความกว้างวิวพอร์ต) จะทำให้ข้อความปรับขนาดได้อย่างสมบูรณ์แบบด้วยขนาดหน้าต่างเบราว์เซอร์

สุดท้าย มาปิดท้ายการออกแบบด้วยเส้นขอบด้านขวาและด้านซ้ายกัน

ความกว้างของเส้นขอบขวา: 4px
ความกว้างของเส้นขอบด้านซ้าย: 4px

นี่คือผลลัพธ์สุดท้าย

การออกแบบหัวเรื่อง #2

สำหรับตัวอย่างต่อไปนี้ ฉันจะปรับแต่งการออกแบบเล็กน้อยเพื่อให้ข้อความส่วนหัวแตกเป็นครึ่งและซ้อนกันแทนที่จะเรียงซ้อนกันทีละตัวอักษร ฉันจะเพิ่มหัวข้อย่อยภายใต้หัวข้อหลักเพื่อดูอีก

ในกล่องเนื้อหาให้เพิ่มหัวข้อ h3 ต่อไปนี้:

<h3>our process</h3>

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

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

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

หัวเรื่อง 2 ขนาดข้อความ: 10vw
ความกว้าง: 100% (เดสก์ท็อป), 32% (แท็บเล็ต), 33% (สมาร์ทโฟน)
แบบอักษรหัวเรื่อง 3: Ubuntu Condensed
การจัดแนวข้อความหัวเรื่อง 3: Center
หัวเรื่อง 3 ขนาดข้อความ: 32px (เดสก์ท็อป), 20px (แท็บเล็ต), 16px (สมาร์ทโฟน)

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

มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): -5vw สูงสุด, -10vw
Custom Margin (สมาร์ทโฟน): -5vw Top, -12vw

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

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

Custom Padding (เดสก์ท็อป): 5vw บน, 5vw ด้านล่าง
Custom Padding (แท็บเล็ต): 0vw บน, 0vw ด้านล่าง

นี่คือผลลัพธ์สุดท้าย

การออกแบบหัวเรื่อง #3

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

ทำซ้ำส่วนการออกแบบที่สองแล้วอัปเดตการตั้งค่าโมดูลดังนี้:

ขั้นแรกให้ลบส่วนหัว h3 ในกล่องเนื้อหา

แบบอักษรหัวเรื่อง 2: Ubuntu Condensed
หัวเรื่อง 2 ขนาดข้อความ: 6vw
ความกว้าง: 54% (เดสก์ท็อป), 16.4% (แท็บเล็ต), 17.5% (สมาร์ทโฟน)
การจัดตำแหน่งโมดูล: ซ้าย (ค่าเริ่มต้น)

หากต้องการปรับให้เหมาะกับอุปกรณ์เคลื่อนที่ ให้อัปเดตระยะห่างต่อไปนี้:

มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): -15vw Bottom
Custom Margin (สมาร์ทโฟน): -17vw Bottom

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

แพ็ดดิ้งที่กำหนดเอง: 2vw บน, 2vw ล่าง, 10vw ซ้าย

จากนั้นเพิ่มเส้นขอบให้กับแถวเพื่อชมเส้นขอบของโมดูล

ความกว้างขอบด้านบน: 4px
ความกว้างขอบล่าง: 4px

ตอนนี้เหลือเพียงลากโมดูลของเราไปที่คอลัมน์ด้านซ้ายของแถว

ตรวจสอบผลสุดท้าย

การออกแบบหัวเรื่อง #4

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

ขั้นแรกให้อัปเดตการตั้งค่าแถวเพื่อกำจัดช่องว่างภายในด้านซ้าย

จากนั้นอัปเดตการตั้งค่าโมดูลข้อความให้มีดังต่อไปนี้:

สีพื้นหลัง: #5b7796
สีข้อความ: เบา
หัวข้อ 2 แบบอักษร: ไคโร
ส่วนหัว 2 ลักษณะแบบอักษร: default
หัวเรื่อง 2 ขนาดข้อความ: 10vw

ขนาดข้อความ: 5vw
Custom Padding: 2vw บน, 2vw ล่าง, 4vw ซ้าย, 4vw ขวา

คืนค่าลักษณะเส้นขอบเป็นค่าเริ่มต้น จากนั้นอัปเดตการตั้งค่าเส้นขอบใหม่ดังนี้:

ความกว้างของขอบด้านขวา: 0.2em
สีขอบขวา: #ffffff

ความกว้างขอบล่าง: 0.2em
สีขอบขวา: #ffffff

อย่างที่คุณอาจสังเกตเห็น ค่า 0.2em สำหรับเส้นขอบอาจดูเล็กน้อย เนื่องจากค่า em ขึ้นอยู่กับค่าฟอนต์เนื้อหา ซึ่งเราเปลี่ยนเป็น 5vw โดยเฉพาะด้วยเหตุนี้ เนื่องจากเราต้องการปรับความกว้างของเส้นขอบตามขนาดของส่วนหัว เราจึงต้องกำหนดหน่วยความยาว vw ให้กับข้อความเนื้อหาซึ่งจะปรับขนาดตามขนาดเบราว์เซอร์

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

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 20px
ตำแหน่งแนวตั้งของกล่องเงา: 20px
สีเงา: #5b7796
ตำแหน่งเงาของกล่อง: เงาด้านนอก

จากนั้นอัปเดตขนาดของโมดูลสำหรับมือถือ

ความกว้าง: 50% (เดสก์ท็อป), 13% (แท็บเล็ต), 16% (สมาร์ทโฟน)

สำหรับขั้นตอนสุดท้าย ให้นำช่องว่างภายในและเส้นขอบของแถวออก

จากนั้นตรวจสอบผลลัพธ์สุดท้าย

การออกแบบหัวเรื่อง #5

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

ขั้นแรก เปิดโมดูลข้อความและเพิ่มข้อความต่อไปนี้ภายใต้หัวข้อ h2 ของคุณ:

<h3>our process</h3>

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

รูปแบบตัวอักษรของหัวเรื่อง 2: ตัวพิมพ์ใหญ่ (TT)
ความกว้าง: 94% (เดสก์ท็อป), 29% (แท็บเล็ต), 29% (สมาร์ทโฟน)

จากนั้นอัปเดตระยะห่างดังนี้:

มาร์จิ้นที่กำหนดเอง: -8vw บน -5vw ล่าง
แพ็ดดิ้งที่กำหนดเอง: 4vw ด้านบน, 4vw ด้านล่าง

นี่คือผลลัพธ์สุดท้าย

ตอบสนอง

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

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!