วิธีการออกแบบส่วน Fluid Hero ใน Divi

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

วิธีการออกแบบส่วน Fluid Hero ใน Divi

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

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

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

• ไล่สีพื้นหลังด้านซ้าย: #ff2000
• ไล่สีพื้นหลังด้านขวา: #121212
• ทิศทางการไล่ระดับสี: 45deg
• ตำแหน่งเริ่มต้น: 30%
• ตำแหน่งสุดท้าย: 0%

ใต้แท็บการออกแบบ ให้อัปเดตการเติม:

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

สร้างแถว

ถัดไป เพิ่มแถวหนึ่งคอลัมน์ในส่วน

การตั้งค่าแถว

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 1700px
• ความสูงขั้นต่ำ: 100vh (เดสก์ท็อป) ไม่มี (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

สร้างข้อความหัวเรื่องแบบไหลพร้อมเส้นขอบ

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

เพิ่มโมดูลข้อความ

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

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

ภายใต้แท็บเนื้อหา อัปเดตเนื้อหาเนื้อหาด้วย HTML ต่อไปนี้:

<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>

ในการทำให้องค์ประกอบการออกแบบเป็นแบบไหล ขั้นแรกเราต้องเพิ่มขนาดฟอนต์ของรูทแบบไหลลงในโมดูลโดยใช้ฟังก์ชัน CSS Clamp() ใต้แท็บขั้นสูง ให้วางข้อมูลโค้ด CSS ต่อไปนี้:

font-size: clamp(32px, 4.1vw, 70px);

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

ภายใต้แท็บการออกแบบ ให้อัปเดตการตั้งค่าการออกแบบข้อความหัวเรื่องต่อไปนี้:

• ประเภทหัวเรื่อง: H1
• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักตัวอักษรของหัวเรื่อง: หนัก
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 1em
• การเว้นวรรคหัวเรื่อง: 0.1em
• ความสูงของบรรทัดหัวเรื่อง: 1.2em

นอกจากนี้ ให้อัปเดตการแพ็ดโมดูลดังนี้:

• Padding: 1em (บน, ล่าง, ซ้าย, ขวา)

ในการสร้างการออกแบบเส้นขอบของไหล ให้อัปเดตสิ่งต่อไปนี้:

• ความกว้างของเส้นขอบ: 1em
• สีเส้นขอบ: #ffffff
• ขอบด้านล่างสี: โปร่งใส
• ขอบซ้ายสี: โปร่งใส

การสร้างเส้นขอบสำเนียง

ในการสร้างกรอบเน้นเสียง เราสามารถทำซ้ำโมดูลข้อความที่มีอยู่ได้

นำเนื้อหาที่มีอยู่ออกและอัปเดตการตั้งค่าการออกแบบดังนี้:

• ความกว้างสูงสุด: 6.5em
• ส่วนสูง: 3.25em
• ความกว้างของเส้นขอบ: 0.5em
• สีเส้นขอบ: #ff2000

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

ในการวางตำแหน่งขอบเน้นเสียง ให้เพิ่มตำแหน่งสัมบูรณ์ด้วยออฟเซ็ตที่เท่ากับความกว้างของเส้นขอบในโมดูลข้อความส่วนหัว (1em) ภายใต้แท็บขั้นสูง ให้อัปเดตตัวเลือกตำแหน่งต่อไปนี้:

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนขวา
• ออฟเซ็ตแนวตั้ง: 1em
• ออฟเซ็ตแนวนอน: 1em

สร้างข้อความคำบรรยายของเหลว

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

เพิ่มโมดูลข้อความใหม่

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

คุณสามารถเพิ่มข้อความเติมได้สองสามประโยคดังนี้:

• เนื้อหาในร่างกาย: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์

เพิ่มขนาดตัวอักษรรูทของไหล

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

font-size: clamp(14px, 1.4vw, 24px);

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

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

• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• สีข้อความ: #ffffff
• ขนาดข้อความ: 1em
• ความสูงของบรรทัดข้อความ: 1.6em

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

• ความกว้างสูงสุด: 19 นาที
• ระยะขอบ: ล่าง 2 ม., ซ้ายอัตโนมัติ, ขวา 5 ม.

สร้างปุ่มของเหลว

ในการสร้างปุ่มของเหลว ให้เพิ่มโมดูลปุ่มใหม่ด้านล่างโมดูลข้อความคำบรรยาย

จากนั้นอัปเดตข้อความของปุ่มเป็น "ทดลองใช้ฟรี 7 วัน"

เพิ่มขนาดตัวอักษรรูทของไหล

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

font-size: clamp(20px, 2.35vw, 40px);

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

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

• การจัดตำแหน่งปุ่ม: ขวา

• สีข้อความของปุ่ม: #ff2000
• ปุ่มไล่ระดับพื้นหลังซ้ายสี: โปร่งใส
• ปุ่มไล่ระดับสีพื้นหลังด้านขวา: #ffffff
• ทิศทางการไล่ระดับสี: 45deg
• ตำแหน่งเริ่มต้น: 25%
• ตำแหน่งสุดท้าย: 0%
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: หนัก
• รูปแบบตัวอักษรของปุ่ม: ตัวเอียง
• ไอคอนปุ่ม: ลูกศรสามเหลี่ยมขวา (ดูภาพหน้าจอ)
• ตำแหน่งไอคอนปุ่ม: ซ้าย

• Margin: 8em ขวา
• Padding: บน 0.2em, ด้านล่าง 0.2em, 1.5em ซ้าย, 1em ขวา

สร้างภาพสำหรับส่วนฮีโร่

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

เปิดการตั้งค่ารูปภาพและอัปโหลดรูปภาพ

การตั้งค่าการออกแบบภาพ

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

• การจัดตำแหน่งรูปภาพ: ซ้าย (เดสก์ท็อปและแท็บเล็ต), กึ่งกลาง (โทรศัพท์)
• ความกว้างสูงสุด: 48% (เดสก์ท็อปและแท็บเล็ต), 70% (โทรศัพท์)
• ช่องว่างภายใน: 4% เหลือ

สุดท้าย กำหนดตำแหน่งที่แน่นอนให้กับรูปภาพด้วยออฟเซ็ตโดยใช้หน่วยความยาว vmin ดังนี้:

• ตำแหน่ง: Absolute (เดสก์ท็อปและแท็บเล็ต), ญาติ (โทรศัพท์)
• ตำแหน่ง: ซ้ายบน (เดสก์ท็อปและแท็บเล็ต)
• Vertical Offset 30vmin (เดสก์ท็อปและแท็บเล็ต), 0px (โทรศัพท์)

ผลสุดท้าย

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

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

รองรับเบราว์เซอร์

ฟังก์ชัน CSS clamp() (ใช้สำหรับขนาดฟอนต์แบบไหลในบทช่วยสอนนี้) ได้รับการสนับสนุนอย่างดีอย่างน่าประหลาดใจจากเบราว์เซอร์หลักๆ ทั้งหมด ยกเว้น IE มีบั๊กแปลกๆ ของซาฟารีที่ไม่ปรับขนาดแบบไดนามิกเมื่อปรับหน้าต่างเบราว์เซอร์ แต่แสดงอย่างถูกต้องเมื่อโหลดหน้าเว็บ ในการแก้ไขปัญหานี้ สิ่งที่คุณต้องทำก็คือให้แต่ละโมดูลมีความสูงขั้นต่ำเป็น 0vw

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

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

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

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

ไชโย!