การสร้างระบบปรับขนาดและระยะห่างด้วยตัวแปรการออกแบบ Divi 5

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ที่คุณสร้าง แต่ขอแนะนำให้คุณระงับการย้ายเว็บไซต์ที่มีอยู่ (ตอนนี้)

ทำไมต้องใช้ระบบปรับขนาดและระยะห่าง

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

สมัครสมาชิกช่อง YouTube ของเรา

1. กำหนดตัวแปรตัวเลขหนึ่งครั้ง (เช่น 16px หรือแคลมป์ (16px, 4vw, 48px))
2. กำหนดให้กับโมดูล/องค์ประกอบที่ตั้งไว้ล่วงหน้า
3. หรือกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า (เช่นระยะห่างหรือขนาด)
4. อัปเดตตัวแปรในภายหลังและดูการเปลี่ยนแปลงที่สะท้อนให้เห็นทั่วทั้งไซต์
5. ใช้ CSS น้อยลงโดยรวมสำหรับหน้าเพรียวบาง

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

ขนาดองค์ประกอบช่องว่างภายในและระยะขอบ

แต่ละองค์ประกอบเว็บมีสามองค์ประกอบที่มีผลต่อระยะห่างและขนาดโดยรวม:

• ขนาดองค์ประกอบ : ขนาดเนื้อหาหลักขององค์ประกอบที่กำหนดโดยความกว้างและความสูง
• Padding : พื้นที่เพิ่มภายในองค์ประกอบเพิ่มพื้นที่ที่คลิกได้และขนาดภาพ
• มาร์จิ้น : พื้นที่เพิ่มนอกองค์ประกอบผลักมันออกไปจากองค์ประกอบอื่น ๆ

ตัวอย่างที่เป็นประโยชน์สำหรับองค์ประกอบ Divi

โดยทั่วไปนี่คือวิธีที่คุณคาดหวังว่าจะใช้ช่องว่างภายในและอัตรากำไรขั้นต้นใน Divi:

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

ค่าระยะห่างเริ่มต้นของ Divi

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

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

1. ไปที่องค์ประกอบใด ๆ และค้นหากลุ่มตัวเลือก ระยะห่าง ภายใต้ แท็บการออกแบบ
2. เปิดกลุ่มตัวเลือกเริ่มต้นและตั้งค่าช่องว่างภายในและล่างเป็น 0 (ศูนย์)
3. บันทึกระยะห่างเริ่มต้น OG ที่ตั้งไว้ล่วงหน้าเพื่อใช้ทั่วทั้งไซต์กับทุกองค์ประกอบ

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

ใช้สเกลระยะห่าง 8 จุด

สเกล 8-point เป็นรูปแบบเค้าโครงที่ค่าระยะห่างถูกสร้างขึ้นโดยใช้การเพิ่มขึ้น 8 ดังนั้นแทนที่จะใช้ค่าโดยพลการเช่น 13px หรือ 27px คุณติดกับค่า 8, 16, 24, 32, 40, 48 และอื่น ๆ

ระบบนี้ช่วย:

• รักษาจังหวะแนวตั้งและแนวนอนโดยใช้รูบริกที่สอดคล้องกัน
• ตรวจสอบให้แน่ใจว่ามีระยะห่างอย่างหมดจดข้ามจุดพัก
• เร่งความเร็วในการตัดสินใจ (ตัวเลือกน้อยลง = การออกแบบที่เร็วขึ้น)

คุณสามารถใช้สเกลใน PX หรือ REM ขึ้นอยู่กับความชอบหรือประเภทของสเกล ตัวอย่างเช่น 16px กลายเป็น 1 rem เมื่อขนาดตัวอักษรฐานคือ 16px

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

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

วิธีสร้างระบบปรับขนาดและระยะห่าง

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

ขั้นตอนที่ 1: สร้างตัวแปรตัวเลขในตัวจัดการตัวแปรการออกแบบ

Divi 5 แนะนำอินเทอร์เฟซภาพสำหรับการกำหนดค่าตัวเลขที่ใช้ซ้ำได้ ตัวแปรหมายเลขแต่ละตัวรวมถึง:

1. ชื่อที่เรียกคืนได้ง่าย (เช่น Gap-SM, Text-H1) ที่ไม่นานเกินไป
2. ค่าตัวเลขหรือฟังก์ชัน calc () หรือแคลมป์ ()
3. หน่วย CSS (PX, REM, %, VW ฯลฯ )

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

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

และนี่คือสิ่งที่ดูเหมือนว่าจะมีสิ่งนี้กรอกข้อมูลในตัวจัดการตัวแปร

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

ขั้นตอนที่ 2: การวางแผนระบบระยะห่าง 8 จุดของคุณ

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

• หัวเรื่องย่อหน้าปุ่ม
• หัวเรื่องเล็ก ๆ หัวเรื่องขนาดใหญ่ย่อหน้า
• ไอคอนย่อหน้า
• การ์ดที่มีหลายองค์ประกอบ

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

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

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

ขั้นตอนที่ 3: กำหนดตัวแปรหมายเลขให้กับกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า

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

Wireframe with placeholder เนื้อหาและขนาดตัวอักษร/ตัวอักษรในสถานที่

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

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

ตอนนี้เราต้องการประเมินระยะห่างเริ่มต้นที่ใช้ในการออกแบบ ในการทำเช่นนี้คุณสามารถดูแผนภูมิก่อนหน้านี้ในโพสต์และเปรียบเทียบกับสิ่งที่เราเกิดขึ้นภายในส่วนฮีโร่ เห็นได้ชัดว่ามีส่วน (#1) และสองแถว (#2 และ#3) สำหรับตอนนี้เราจะตั้งค่าการจัดเรียงแถวบน/ล่างเริ่มต้นเป็นศูนย์

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

• เดสก์ท็อป : ชุดช่องด้านบนและล่างตั้งค่าเป็น Space-xxxl
• แท็บเล็ต : ชุดช่องว่างด้านบนและล่างตั้งไว้ที่ Space-xxl
• มือถือ : ชุดช่องว่างด้านบนและล่างตั้งค่าเป็น Space-XL

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

ขั้นตอนที่ 4: ระยะห่างของโมดูล

สิ่งต่อไปที่ต้องทำคือการเว้นระยะห่างระหว่างโมดูลภายในส่วน/แถว กุญแจสำคัญคือการเลือกวิธีที่สอดคล้องกันในการใช้ระยะห่างกับโมดูล

คุณมีตัวเลือกคุณสามารถแยกระยะห่างได้หลายวิธี:

• ใช้ระยะห่างในระยะขอบด้านบน
• ใช้ระยะห่างเพื่อขอบด้านล่าง
• ใช้ระยะห่างอย่างสม่ำเสมอระหว่างขอบด้านบนและขอบด้านล่าง

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

ภายในส่วนนี้เราใช้ 0px กับส่วนบนและล่างเพื่อดูโมดูลทั้งหมดเหล่านี้โดยไม่ต้องระยะห่างเริ่มต้น

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

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

คุณจะใช้ Divi 5 สำหรับการปรับขนาดและระยะห่างอย่างไร?

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

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ที่คุณสร้าง