Divi: วิธีสร้างส่วน Fluid Hero

คุณต้องการสร้างส่วนฮีโร่ใน Divi อันไหนไหลแทนการตอบสนองแบบเดิม?

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

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

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

การสำรวจ

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

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

สร้างหน้าใหม่ด้วย Divi Builder

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

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi ผู้ก่อสร้าง

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

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

อ่าน: Divi: วิธีสร้างส่วนฮีโร่ด้วยโมดูลส่วนหัวแบบเต็ม

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

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

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

• ไล่ระดับหยุด:
  • 30%: #ff2000
  • 30%: #121212
• ทิศทางการไล่ระดับสี: 45deg

ภายใต้แท็บ ออกแบบ, อัปเดตช่องว่างภายใน:

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

สร้างไลน์

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

การตั้งค่าสาย

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

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

สร้างข้อความส่วนหัวต่อเนื่องที่มีเส้นขอบ

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

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

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

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

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

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

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

ภายใต้แท็บ ระดับสูงวางข้อมูลโค้ด CSS ต่อไปนี้:

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

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

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

อัปเดตการเติม mod ดังนี้:

• Padding: ที่ 1 (บน, ล่าง, ซ้ายและขวา)

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

• ความกว้างของเส้นขอบ: 1em
• สีเส้นขอบ: #ffffff
• ขอบด้านล่างสี: clear
• ขอบซ้ายสี: ชัดเจน

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

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

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

• ความกว้างสูงสุด: 6,5cm
• ส่วนสูง: 3,25 em
• ความกว้างของเส้นขอบ: 0,5em
• สีเส้นขอบ: #ff2000

ในการวางตำแหน่งขอบเน้นเสียง ให้เพิ่มตำแหน่งสัมบูรณ์โดยมีค่าออฟเซ็ตเท่ากับความกว้างของเส้นขอบในโมดูลข้อความหัวเรื่อง (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,6 em

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

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

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

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

ถัดไป อัปเดตข้อความของปุ่มเป็น "7 วันฟรี Tral"

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

ต่อไป เราต้องเพิ่มขนาดฟอนต์ใหม่ที่เหมาะกับปุ่ม 

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

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

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

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

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

• ใช้ขนาดที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ff2000
• ไล่ระดับหยุด:
  • สี 1 25%: ใส
  • สี 2 25%: #ffffff
• ทิศทางการไล่ระดับสี: 45 องศา

• ปุ่ม:
• ความกว้างของเส้นขอบ: 0 พิกเซล
• รัศมีเส้นขอบ: 0 พิกเซล
• แบบอักษร: มอนต์เซอร์รัต
• น้ำหนักตัวอักษร: หนา
• สไตล์: ตัวเอียง
• แสดงไอคอนปุ่ม : ใช่
• ไอคอน: ลูกศรรูปสามเหลี่ยมไปทางขวา (ดูภาพหน้าจอ)
• ตำแหน่งไอคอน: ขวา

• ระยะขอบ: 8em (ขวา)
• ช่องว่างภายใน: 0,2em (บนและล่าง), 1,5em (ซ้าย), 1em (ขวา)

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

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

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

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

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

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

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

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

ผลสุดท้าย

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

ดูสิ่งนี้ด้วย: Divi: วิธีใช้มาสก์และรูปแบบพื้นหลังสำหรับส่วนฮีโร่

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

ดาวน์โหลด DIVI ทันที !!!

สรุป

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

หวังว่าเทคนิคนี้จะช่วยเพิ่มทักษะการออกแบบที่มีประโยชน์สำหรับโครงการในอนาคต

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...