การสร้างระบบระยะห่างที่ใช้ช่องว่างด้วย Divi 5

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

ด้วยตัวแปรการออกแบบใหม่ของ Divi 5 และคุณสมบัติ FlexBox ตอนนี้คุณสามารถสร้างระบบระยะห่างที่ใช้ช่องว่างได้โดยตรงใน Visual Builder ไม่จำเป็นต้องมีการเข้ารหัสแบบกำหนดเอง มาดูกันเถอะ!

เหตุใดวิธีการเว้นวรรคแบบดั้งเดิมจึงสั้น

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

คุณตั้งค่าระยะขอบ 30px บนบล็อกข้อความเดียว จากนั้นคุณต้องการพื้นที่รอบ ๆ ปุ่มดังนั้นคุณจึงเพิ่ม 20px

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

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

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

คุณสมบัติของช่องว่างทำให้ระยะห่างง่ายขึ้นอย่างไร

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

เมื่อเปิดใช้งาน FlexBox คุณจะได้รับการควบคุมช่องว่างสองแบบ: แนวนอนและแนวตั้ง ตั้งค่าช่องว่างแนวนอนเป็น 24px และองค์ประกอบเด็กทั้งหมดได้รับพื้นที่ 24px ระหว่างพวกเขาในแนวนอน ตั้งค่าช่องว่างแนวตั้งเป็น 15px และองค์ประกอบที่ซ้อนกันจะได้รับพื้นที่แนวตั้ง 15px

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

วิธีดั้งเดิมทำให้ตัวเลือกการเว้นระยะแบบสุ่ม: 10px ที่นี่, 20px, 40px ที่อื่น ค่าที่กระจัดกระจายเหล่านี้ทำให้เกิดความไม่สอดคล้องกันและทำให้ยากที่จะรู้ว่าระยะห่างใดที่ใช้ คุณสมบัติช่องว่างลบการคาดเดาโดยใช้กฎที่สอดคล้องกันหนึ่งรายการสำหรับองค์ประกอบทั้งหมด

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

ระบบระยะห่างที่ใช้ช่องว่างพร้อมตัวแปร Flexbox และตัวแปรการออกแบบเป็นวิธีที่ดีกว่ามาก

วิธีการตั้งค่าระบบช่องว่างใน Divi 5

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

1. สร้างตัวแปรระยะห่าง

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

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

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

เริ่มต้นด้วยหน่วยระยะห่างพื้นฐานของคุณ นักออกแบบส่วนใหญ่ทำงานกับ 8-12px เป็นรากฐานของพวกเขา แต่คุณสามารถเลือก 4px, 10px หรืออะไรก็ตามที่เหมาะกับจังหวะการออกแบบของคุณ คุณสามารถใช้หน่วยขั้นสูงได้ที่นี่นอกเหนือจากเพียงพิกเซล ตัวอย่างเช่นเราเริ่มต้นด้วย REM แทนที่จะเป็นพิกเซล (สมมติว่าเบราว์เซอร์เริ่มต้น 1REM = 16PX):

• Gap XS: 0.75Rem (~ 12px สำหรับความสัมพันธ์ที่แน่นหนาสำหรับคอลัมน์ที่มีไอคอนและข้อความเท่านั้น)
• Gap S: 1.25Rem (~ 20px สำหรับคอลัมน์ที่มีบล็อกข้อความ)
• Gap M: 2Rem (~ 32px สำหรับกล่องคุณลักษณะคอลัมน์บริการ)
• GAP L: 3REM (~ 48PX สำหรับส่วนเนื้อหาหลัก, เค้าโครงแถบด้านข้าง)

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

ใช้แคลมป์เพื่อสร้างช่องว่างที่ปรับขนาดได้

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

• ช่องว่างคอลัมน์แนวนอน: แคลมป์ (16px, 2VW, 32px) (สำหรับช่องว่างแนวนอนระหว่างการ์ดคุณสมบัติ ฯลฯ )
• ช่องว่างคอลัมน์แนวตั้ง: แคลมป์ (16px, 1.5VW, 32px) (สำหรับช่องว่างแนวตั้งระหว่างการ์ดคุณสมบัติ ฯลฯ )

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

ตัวอย่างเช่นช่องว่างคอลัมน์แนวนอน: แคลมป์ (16PX, 2VW, 32PX) ช่องว่างสเกลด้วยความกว้างของหน้าจอ (2VW = 2% ของวิวพอร์ต) มันจะไม่ต่ำกว่า 16px บนหน้าจอขนาดเล็กหรือสูงกว่า 32px บนหน้าจอขนาดใหญ่ สิ่งนี้ทำให้ระยะห่างสมดุลโดยไม่มีจุดพักหรือการสืบค้นสื่อ

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

2. เปิดใช้งานเลย์เอาต์ FlexBox ในส่วนของคุณ

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

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

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

3. ใช้ค่าช่องว่างโดยใช้ตัวแปรของคุณ

เมื่อคุณตั้งค่าตัวแปรช่องว่างของคุณในตัวจัดการตัวแปรของ Divi แล้วการใช้กับการตั้งค่าช่องว่าง FlexBox จะตรงไปตรงมาผ่านระบบเนื้อหาแบบไดนามิก นำทางไปยังการตั้งค่าเลย์เอาต์ของคุณและวางเมาส์เหนือฉลากในฟิลด์ช่องว่างแนวนอนหรือแนวตั้งเพื่อเปิดเผยไอคอนเนื้อหาแบบไดนามิก

คลิกที่ไอคอนเนื้อหาแบบไดนามิกเพื่อเปิดกล่องโต้ตอบการเลือกตัวแปร ตัวแปรช่องว่างที่บันทึกไว้ของคุณปรากฏในเมนูนี้

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

ช่องว่างหนีบ: ระหว่างคอลัมน์ Flex

ช่องว่างหนีบของคุณจะทำงานในระดับ“ คอนเทนเนอร์” ผ่านการตั้งค่า FlexBox ของ Divi

ใช้ช่องว่างคอลัมน์แนวนอน [แคลมป์ (16PX, 2VW, 32PX)] เมื่อคุณมีคอลัมน์จัดเรียงเคียงข้างกันเช่นการ์ดบริการสามใบในแถวเดียว เมื่อเลือกแล้ว Divi จะใช้กับการตั้งค่าช่องว่างโดยอัตโนมัติ ฟิลด์จะแสดงชื่อตัวแปรของคุณยืนยันการเชื่อมต่อ สิ่งนี้จะสร้างระยะห่างแนวนอนตามสัดส่วนระหว่างคอลัมน์ 1 คอลัมน์ 2 และคอลัมน์ 3 เมื่อตั้งทิศทางการจัดวางเป็นแถว

ใช้ช่องว่างคอลัมน์แนวตั้ง [แคลมป์ (16PX, 1.5VW, 32PX)] เมื่อทิศทางเค้าโครงของคุณถูกตั้งค่าเป็นคอลัมน์รายการซ้อนกันในแนวตั้ง สิ่งนี้จะเป็นสัดส่วนจากด้านบนลงล่างเมื่อทิศทางเค้าโครงถูกตั้งค่าเป็นคอลัมน์

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

ช่องว่างพื้นฐาน: เนื้อหาภายในแถว

ช่องว่างพื้นฐานของคุณควบคุมความสัมพันธ์ระหว่างชิ้นส่วนเนื้อหาภายในแต่ละคอลัมน์ เมื่อมีการติดตามส่วนหัวด้วยย่อหน้าและปุ่มในคอลัมน์เดียวกันให้พิจารณาใช้ Gap XS (0.75Rem) ระหว่างพวกเขา

พิจารณาการใช้ Gap S (1.25Rem) สำหรับกลุ่มเนื้อหาที่มีองค์ประกอบข้อความหลายรายการหรือ Gap L (3REM) หากคุณต้องการระยะห่างที่สำคัญระหว่างสองคอลัมน์โดยเฉพาะอย่างยิ่งหากทิศทางเค้าโครงของคอลัมน์ถูกตั้งค่าเป็นแถว

ข้อได้เปรียบของตัวแปรการออกแบบ

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

เมื่อคุณเปลี่ยนปรัชญาการเว้นวรรคให้อัปเดตตัวแปรในตัวจัดการตัวแปรเพื่ออัปเดตทุกช่องว่างที่ใช้ทั่วทั้งเว็บไซต์

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

4. ตั้งค่าช่องว่างที่ตอบสนองได้

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

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

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

ช่องว่างแนวตั้งที่ยึดตามแคลมป์หดตัวและเติบโตโดยอัตโนมัติเมื่อความกว้างของวิวพอร์ตเปลี่ยนไป บนหน้าจอโทรศัพท์ขนาดเล็ก 2VW เท่ากับประมาณ 7px แต่แคลมป์จะไม่เกินขั้นต่ำ 16px บนหน้าจอขนาดใหญ่ 2VW อาจหมายถึง 18px และบนหน้าจอที่ใหญ่กว่า 20px

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

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

นอกจากนี้คุณยังสามารถสร้างตัวแปรเฉพาะมือถือเช่น“ Gap Mobile S” หรือ“ Gap Mobile L” และนำไปใช้กับจุดพักโทรศัพท์และแท็บเล็ต อย่างไรก็ตามช่องว่างพื้นฐานและแคลมป์ทำงานได้ดีในกรณีส่วนใหญ่

5. บันทึกการกำหนดค่าของคุณเป็นที่ตั้งไว้ล่วงหน้า

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

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

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

คลิกและเลือก“ สร้างที่ตั้งไว้ล่วงหน้าจากสไตล์ปัจจุบัน” ตั้งชื่อตามสิ่งที่เลย์เอาต์ทำ:“ สามคอลัมน์กริด”“ กริดบริการ” หรือ“ แสดงการ์ด”

ที่ตั้งไว้ล่วงหน้าดำเนินการผ่านการกำหนดค่า FlexBox ไปยังคอนเทนเนอร์ใด ๆ มันไม่ได้คัดลอกสีพื้นหลังแบบอักษรหรือสไตล์การแสดงภาพอื่น ๆ

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

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

รับระยะห่างที่สมบูรณ์แบบทุกครั้งด้วย Divi 5

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

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