ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับหน่วยขั้นสูงของ Divi 5

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

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

มาดำน้ำกันเถอะ

หน่วยขั้นสูงใน Divi 5 คืออะไร?

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

เป็นการเปลี่ยนแปลงเล็กน้อยในตัวสร้างภาพที่รองรับหน่วย CSS ทั้งหมดด้วยการสนับสนุนใหม่สำหรับตัวแปร fit-content, UNSET, CALC (), CLAMP () และตัวแปร CSS

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

สำรวจหน่วยขั้นสูงใน Divi 5

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

หน่วย CSS ใน Divi 5

หน่วยขั้นสูงเปิดจานเต็มของหน่วย CSS ไกลเกินกว่าพิกเซลและเปอร์เซ็นต์ ใช้ Viewport Width (VW) - ตั้งค่าความกว้างของส่วนเป็น 80VW และจะใช้เวลา 80% ของความกว้างของวิวพอร์ต (ในแนวนอน) ปรับขนาดได้อย่างสมบูรณ์จากเดสก์ท็อปไปยังมือถือ

Root EM (REM) ผูกขนาดกับขนาดตัวอักษรรากของไซต์ - แนวคิดสำหรับการพิมพ์ที่สอดคล้องกันเช่น 4.5REM สำหรับส่วนหัว

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

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

calc () เป็นเครื่องคิดเลขแบบไดนามิก

ฟังก์ชั่น CACL () เป็นเหมือนเครื่องคิดเลขขนาดเล็กที่สร้างขึ้นใน Divi มันช่วยให้คุณผสมหน่วยกับการดำเนินการ - การเพิ่มการลบการคูณและการหาร - สำหรับผลลัพธ์แบบไดนามิก ตัวอย่างคลาสสิกคือ Calc (100% - 50px) ซึ่งตั้งค่าความกว้างของส่วนเป็น 100% และลบ 50 พิกเซล หากองค์ประกอบของคุณอยู่ในระดับส่วนกลาง 25px จากทั้งสองฝ่ายจะลดลง

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

หนีบ () สำหรับการควบคุมของเหลว

ฟังก์ชั่น CLAMP () ช่วยให้คุณควบคุมขนาดที่ปรับได้อย่างราบรื่นในขนาดหน้าจอ มันใช้สามค่า: ขนาดต่ำสุดขนาดที่ต้องการและขนาดสูงสุด ตัวอย่างที่ดีคือ แคลมป์ (36px, 4vw, 48px)

ซึ่งหมายความว่าขนาดเริ่มต้นที่ 36px เพิ่มขึ้นตาม 4% ของความกว้างของวิวพอร์ต แต่ไม่เคยสูงกว่า 48px มันยอดเยี่ยมสำหรับข้อความเช่นโมดูลหัวเรื่องที่ดูดีทั้งบนโทรศัพท์ขนาดเล็กและหน้าจอขนาดใหญ่ CLAMP () ทำให้มั่นใจได้ว่าการออกแบบของคุณจะมีความสมดุลและอ่านได้ไม่ว่าจะเป็นอุปกรณ์

ตัวแปร CSS สำหรับความยืดหยุ่นทั่วโลก

ตัวแปร CSS (หรือคุณสมบัติที่กำหนดเอง) ให้คุณกำหนดค่าที่ใช้ซ้ำได้เช่น -ขนาดใหญ่: 5EM ในตัวเลือกชุดรูปแบบของ Divi หรือการตั้งค่าหน้าฟิลด์ CSS เมื่อเพิ่มตัวแปร CSS ใน Divi 5 ให้แน่ใจว่าได้ใส่ไว้ในองค์ประกอบหลักเช่นนี้:

:root {
--font-size:5em;
}

เมื่อกำหนดแล้วคุณสามารถวาง var (-ขนาดใหญ่) ลงในฟิลด์ขนาดข้อความของหัวเรื่องเพื่อนำไปใช้

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

ค่าไร้หน่วย

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

หน่วยขั้นสูงทำงานอย่างไรใน Divi 5

หน่วยขั้นสูงใน Divi 5 นำระดับการควบคุมใหม่เข้าสู่ตัวสร้างภาพโดยตรงทำให้ง่ายต่อการสร้างการออกแบบที่ตอบสนองและตอบสนองได้ง่าย คุณสามารถพิมพ์ได้ทันทีในหน่วย CSS ฟังก์ชั่นหรือตัวแปร - เช่น vw, calc () หรือ clamp () - และดูผลลัพธ์ นี่คือวิธีการทำงานของหน่วยขั้นสูงใน Divi

ความกว้างของส่วนที่ตอบสนองด้วย CALC ()

สมมติว่าคุณต้องการส่วนที่ครอบคลุม 80% ของความสูงของวิวพอร์ต แต่จะลบช่องว่างภายในและด้านล่าง นำทางไปยังแท็บการออกแบบของส่วนค้นหา ฟิลด์ความสูง และเพิ่ม CALC (80VH - 60PX) ลงในสนาม

การคำนวณนี้ช่วยให้ส่วนสามารถปรับขนาดได้อย่างคล่องแคล่วด้วยวิวพอร์ตรักษา 80% ของความสูงของวิวพอร์ตในขณะที่ลบ 30px ออกจากด้านบนและด้านล่าง

การพิมพ์ของเหลวด้วยแคลมป์ ()

แคลมป์ () มีประโยชน์หากคุณต้องการหัวที่เติบโตด้วยขนาดหน้าจอ แต่อ่านได้ ในแท็บการออกแบบของโมดูลหัวเรื่องตั้งค่าขนาดข้อความส่วนหัวเป็น แคลมป์ (52px, 2VW, 36px)

สิ่งนี้ตั้งค่าข้อความที่ 52px ปรับขนาดขึ้นอยู่กับ 2% ของความกว้างของวิวพอร์ตและปิดขนาดที่ 36px - ส่งการพิมพ์ที่ตอบสนองและตอบสนองได้อย่างง่ายดาย

ขนาดตัวอักษรที่ขับเคลื่อนด้วยตัวแปร

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

คุณสามารถเพิ่ม ตัวเลือกธีม หรือ การตั้งค่าหน้า ภายใต้ ขั้นสูง> CSS ที่กำหนดเอง :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับหน่วยขั้นสูง

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

เริ่มง่าย

หากคุณยังใหม่กับการใช้ฟังก์ชั่นและตัวแปร CSS ให้ง่ายขึ้นด้วยหน่วยที่คุ้นเคยเช่นพิกเซล (PX) หรือเปอร์เซ็นต์ (%) จากนั้นทดสอบด้วย CALC () สำหรับการปรับแบบไดนามิกขั้นพื้นฐาน ตัวอย่างเช่นลอง Calc (100% - 40px) สำหรับความกว้างส่วนก่อนที่จะดำน้ำในตัวหนีบ () หรือตัวแปร CSS สิ่งนี้จะสร้างความมั่นใจโดยไม่ทำให้คุณมีอายุตั้งแต่เนิ่นๆ

ใช้ประโยชน์จากตัวแปรสำหรับสไตล์ทั่วไป

กำหนดตัวแปร CSS ในตัวเลือกชุดรูปแบบเพื่อความสอดคล้องทั่วทั้งไซต์ ตัวอย่างเช่นการตั้งค่า –Gutter: 30px ช่วยให้คุณนำการเว้นวรรคกลับมาใช้ใหม่ในส่วนแถวและโมดูล ตัวแปร CSS ยังดีสำหรับการตั้งค่าขนาดข้อความที่สม่ำเสมอสำหรับหัวเรื่องทั้งหมดของคุณ หนึ่งแก้ไขอัปเดตทุกอย่างเร่งกระบวนการออกแบบและทำให้การออกแบบของคุณเหนียวแน่น

ทดสอบการตอบสนอง

ระบบมุมมองที่ตอบสนองของ Divi เป็นวิธีที่ยอดเยี่ยมในการออกแบบการออกแบบของคุณในหลายขนาดหน้าจอ หลังจากใช้หน่วยเช่น VW หรือ CLAMP () สลับระหว่างเดสก์ท็อปแท็บเล็ตและมุมมองมือถือเพื่อให้แน่ใจว่าเค้าโครงของคุณปรับได้อย่างราบรื่น ชุดหัวตั้งเป็นแคลมป์ (20px, 3VW, 40px) อาจดูสมบูรณ์แบบบนเดสก์ท็อป แต่อาจต้องปรับหน้าจอขนาดเล็กดังนั้นทดสอบเพื่อให้แน่ใจ

อย่าซับซ้อนเกินไป

แม้ว่าคุณจะสามารถทำรังได้เช่น Calc (แคลมป์ (20px, 5VW, 50PX) - 10px) คุณควรยึดติดกับสูตรง่ายๆอย่างน้อยในขณะที่คุณกำลังเรียนรู้ ความซับซ้อนที่มากเกินไปสามารถชะลอการทำงานและทำให้การแก้ไขปัญหายากขึ้นเมื่อสิ่งต่าง ๆ ไม่ปรากฏตามที่ควร ยึดติดกับการคำนวณที่สะอาดและมีจุดประสงค์เพื่อทำให้ชีวิตง่ายขึ้น

ทำไมหน่วยขั้นสูงยกระดับ Divi 5

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

• Freedom Creative: การผสมหน่วยฟังก์ชั่นและตัวแปรปลดล็อคเลย์เอาต์ที่ใช้เวลานานกว่าเพื่อให้ได้มาใน Divi รุ่นก่อนหน้า สูตรที่เรียบง่ายช่วยให้คุณสามารถปรับความสูงความกว้างขนาดตัวอักษรและอื่น ๆ ความยืดหยุ่นนี้ช่วยให้คุณสร้างได้ดีขึ้นและทำงานได้เร็วขึ้นทั้งหมดภายในตัวสร้างภาพ
• การออกแบบที่ตอบสนองได้ดีขึ้น: หน่วยขั้นสูงเปลี่ยน divi ไปสู่การออกแบบของเหลวที่ปรับตัวได้อย่างง่ายดาย การใช้ VW หรือ CLAMP () ทำให้มั่นใจได้ว่าไซต์ของคุณจะรู้สึกเป็นธรรมชาติในอุปกรณ์ใด ๆ ลดความจำเป็นในการแทนที่ด้วยตนเองและส่งมอบประสบการณ์ที่ขัดเงา
• มันคือการพิสูจน์ในอนาคต: หน่วยขั้นสูงสอดคล้องกับภารกิจของ Divi 5 เพื่อปรับปรุงการสร้างภาพให้ทันสมัยสำหรับเว็บของวันนี้ ด้วยการยอมรับพลังเต็มรูปแบบของ CSS Divi 5 จะช่วยให้คุณมีเครื่องมือที่จำเป็นในการสร้างเว็บไซต์ที่ทันสมัย มันไม่ได้เกี่ยวกับการติดตามเท่านั้น มันเกี่ยวกับการอยู่ข้างหน้าเส้นโค้งด้วยเครื่องมือที่สะท้อนสิ่งที่นักพัฒนามืออาชีพใช้

ดาวน์โหลด Divi 5 Alpha ล่าสุด

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

พร้อมที่จะเห็นตัวเองหรือยัง? ดาวน์โหลด Divi 5 Alpha ตอนนี้และเริ่มทดลองกับหน่วยขั้นสูง เล่นกับ VW และ VH สำหรับระยะห่างของวิวพอร์ต, ทดสอบแคลมป์ () สำหรับการพิมพ์หรือตั้งค่าตัวแปรเพื่อคิดใหม่ว่าคุณสร้างอย่างไร เป็นโอกาสที่จะผลักดันการออกแบบของคุณต่อไปและค้นพบสิ่งที่เป็นไปได้