การควบคุมอัตราส่วนทองคำในการออกแบบ

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

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

มาหาข้อมูลเพิ่มเติม

อัตราส่วนทองคำคืออะไร?

อัตราส่วนทองเท่ากับประมาณ

1.618.

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

คุณสามารถคำนวณอัตราส่วนทองคำโดยใช้ลำดับ Fibonacci เริ่มต้นด้วย 0 และ 1 เพิ่มพวกเขาเพื่อรับ 1 จากนั้นเพิ่ม 1 และ 1 เพื่อรับ 2 เพิ่มตัวเลขสองหมายเลขสุดท้าย: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. เมื่อคุณหารจำนวนที่มากขึ้นตามหมายเลขก่อนหน้า

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

รูปภาพได้รับความอนุเคราะห์: Lucas และ Dynamic Wang บน Unsplash และ Milena Carolina dos Santos Mangueira

สัญลักษณ์φ (PHI) แสดงถึงอัตราส่วนทางคณิตศาสตร์ที่เป็นเอกลักษณ์ที่ชาวกรีกโบราณค้นพบประมาณ 300 ปีก่อนคริสตศักราช พวกเขาเรียกมันว่า "สัดส่วนของพระเจ้า" เชื่อว่ามันเผยให้เห็นความสมดุลและความงามทางสายตาพิเศษ

ทำไมมันถึงสำคัญ: จากอาคารเก่าไปจนถึงการออกแบบเว็บ

ชาวกรีกใช้อัตราส่วนนี้สำหรับวัดพาร์เธนอนและปิรามิดอียิปต์ติดตามการวัดเหล่านี้ ศิลปินอย่าง Leonardo da Vinci ศึกษาสัดส่วนเหล่านี้มานานหลายปี Da Vinci ดึง“ Vitruvian Man” ที่มีชื่อเสียงแสดงอัตราส่วนทองคำในร่างกายมนุษย์

ภาพที่เป็นตัวแทน

นักออกแบบที่มีชื่อเสียงยังคงใช้สิ่งนี้ โลโก้ของ Apple ใช้สัดส่วนอัตราส่วนทองคำ โลโก้ Twitter Bird ในอดีตตามการวัดเหล่านี้ นิตยสารวางเนื้อหาที่สำคัญที่จุดอัตราส่วนทองคำแทนที่จะอยู่ตรงกลาง

รูปภาพมารยาท: Widewalls & Design Shack

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

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

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

เหตุใดการออกแบบของคุณจึงรู้สึก“ ปิด” (และวิธีการแก้ไขปัญหานี้)

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

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

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

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

อัตราการก่อวินาศกรรมของผู้ใช้ที่ผิดพลาดเพียงใด

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

ตอนนี้พิจารณาหนึ่งที่ใช้ 43 เปอร์เซ็นต์หรือ 67 เปอร์เซ็นต์ของพื้นที่ ที่ดูไม่สมดุลและยุ่งเหยิง

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

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

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

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

วิธีคำนวณสัดส่วนอัตราส่วนทองคำ

คุณไม่จำเป็นต้องมีคณิตศาสตร์แฟนซี เพียงจำไว้ว่า 62 และ 38 ตัวเลขเหล่านี้เพิ่มขึ้นมากถึง 100 ดังนั้นพวกเขาจึงทำงานเป็นเปอร์เซ็นต์

แบ่งพื้นที่ใด ๆ โดยให้ 62% ไปยังส่วนที่ใหญ่กว่าและ 38% ไปยังส่วนที่เล็กกว่า เว็บไซต์ของคุณกว้าง 1,000 พิกเซล สร้างเนื้อหาหลักของคุณ 620 พิกเซล วางแถบด้านข้างของคุณที่ 380 พิกเซล อัตราส่วนทองคำที่สมบูรณ์แบบ

มีส่วน 500 พิกเซลสูง พื้นที่หลักของคุณได้รับ 310 พิกเซล ส่วนที่เหลือได้รับ 190 พิกเซล

กฎด่วนสำหรับชิ้นส่วนเว็บไซต์

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

ปุ่มทำงานในลักษณะเดียวกัน ความกว้าง 100 พิกเซลหมายถึงความสูง 60 พิกเซล คอลัมน์ข้อความของคุณกว้าง 600 พิกเซล หยุดเพิ่มเนื้อหาประมาณ 370 พิกเซลลง จากนั้นเพิ่มส่วนถัดไปของคุณ

มันดูใช่มั้ย

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

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

นักออกแบบข้อผิดพลาดในอัตราส่วนทองคำที่พบบ่อย

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

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

นักออกแบบหลายคนรอบ 1.618 เป็นตัวเลขที่ง่ายเช่น 1.5 หรือ 1.7 สมองของคุณสังเกตเห็นความแตกต่างระหว่าง 62% ถึง 60% และช่องว่างขนาดเล็กนั้นมีผลต่อความสามัคคีที่คุณกำลังสร้างขึ้น

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

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

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

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

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

เหตุใดผู้สร้างหน้าหลายหน้าจึงเพิกเฉยต่ออัตราส่วนทองคำ?

ผู้สร้างหน้าโตขึ้นรอบ ๆ การคิดโปรแกรมเมอร์ นักพัฒนารักตัวเลขที่แบ่งออกอย่างหมดจด สิบสองคอลัมน์สี่ส่วนแยกห้าสิบห้าสิบ

บริษัท ผู้สร้างหลายแห่งเชื่อว่าผู้ใช้ควรควบคุมตัวเลือกการออกแบบของตนเองอย่างแท้จริง พวกเขาไม่ต้องการผลักดันทฤษฎีความงามที่เฉพาะเจาะจงเกี่ยวกับผู้ที่อาจชอบวิธีการที่แตกต่างกัน นักออกแบบบางคนเกลียดอัตราส่วนทองคำและชอบระบบสัดส่วนอื่น ๆ ทำไมต้องบังคับใช้หลักการทางคณิตศาสตร์หนึ่งเมื่อความคิดสร้างสรรค์เติบโตขึ้นในตัวเลือก?

ปัญหาทางเทคนิคที่แท้จริงนั้นยุ่งเหยิงกว่าปรัชญาการออกแบบ อัตราส่วนทองคำสร้างทศนิยมแปลก ๆ ที่ทำลายอุปกรณ์เก่า ลองสร้างกริดที่ตอบสนองซึ่งคอลัมน์หนึ่งมีความกว้าง 61.8% ทำความสะอาดเปอร์เซ็นต์เช่น 25% หรือ 33% ทำงานได้อย่างคาดการณ์ไว้ในทุกอุปกรณ์

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

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

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

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

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

Divi คืออะไร?

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

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

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

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

สร้างเว็บไซต์โดยไม่ต้องปวดหัว

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

Divi Ai นำความสะดวกสบายของ AI เข้าสู่ผืนผ้าใบการออกแบบของคุณ คุณสามารถสร้างข้อความ

ภาพ

รหัส,

และส่วนหน้าทั้งหมดโดยใช้ Divi AI

คุณสามารถแก้ไขรูปภาพที่มีอยู่ของคุณได้โดยเพียงแค่อธิบายสิ่งที่คุณต้องการ

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

หรือให้ Divi AI สร้างเลย์เอาต์ที่กำหนดเองตามคำอธิบายทางธุรกิจของคุณ

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

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

รับ Divi

Divi 5: ขั้นตอนต่อไป

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

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

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

อะไรดีขึ้น? มีอะไรใหม่?

• การสร้างเฟรมเวิร์กเสร็จสมบูรณ์ จะกำจัดรหัสย่อเก่า ๆ ทุกอย่างทำงานบนรหัสที่ใช้บล็อกใหม่ที่โหลดเร็วขึ้นและทำงานได้ดีขึ้น
• การแก้ไขคลิกเดียว ช่วยให้คุณคลิกส่วนใดส่วนหนึ่งของหน้าเพื่อแก้ไขทันที ไม่มีการล่าสัตว์สำหรับไอคอนขนาดเล็กหรือขุดผ่านเมนูอีกต่อไป
• เบรกพอยต์ที่ปรับแต่งได้ ช่วยให้คุณมีขนาดหน้าจอเจ็ดขนาดแทนสาม คุณสามารถเปลี่ยนแต่ละคนให้เหมาะกับความต้องการที่แน่นอนของคุณ
• การสนับสนุนหน่วยขั้นสูง ช่วยให้คุณใช้ calc (), clamp (), min (), max () และหน่วย CSS ใหม่ทั้งหมดในตัวสร้าง
• ตัวแปรการออกแบบ ช่วยให้คุณประหยัดสีแบบอักษรขนาดรูปภาพข้อความและลิงก์ในที่เดียว เปลี่ยนพวกเขาเพียงครั้งเดียวและพวกเขาจะอัปเดตทุกที่บนเว็บไซต์ของคุณ
• กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า ช่วยให้คุณบันทึกและนำรูปแบบกลับมาใช้ใหม่สำหรับเส้นขอบฟอนต์เงาและระยะห่าง งานเหล่านี้ในส่วนต่าง ๆ ของเว็บไซต์ของคุณ
• แถวซ้อนกัน ช่วยให้คุณวางแถวในแถวอื่น ๆ คุณสามารถสร้างเลย์เอาต์ที่ซับซ้อนโดยไม่ต้องมีส่วนพิเศษ
• กลุ่มโมดูล รวมหลายโมดูลเป็นหนึ่งหน่วย สิ่งนี้ทำให้เลย์เอาต์ที่ซับซ้อนจัดการได้ง่ายขึ้น คุณยังสามารถสร้างโมดูลที่กำหนดเองได้
• พื้นที่ทำงานหลายแผง ช่วยให้คุณวางแผงที่คุณต้องการ คุณสามารถทำงานกับการตั้งค่าหลายครั้งในเวลาเดียวกัน
• การจัดการแอตทริบิวต์ ช่วยให้คุณควบคุมได้อย่างแน่นอนเมื่อคุณคัดลอกวางและรีเซ็ตรูปแบบเนื้อหาและที่ตั้งไว้ล่วงหน้าระหว่างชิ้นส่วนต่าง ๆ
• โหมดแสง/มืด ช่วยให้คุณเลือกธีมที่ง่ายขึ้นในดวงตาของคุณในขณะที่คุณทำงาน
• การปรับขนาดผ้าใบ ช่วยให้คุณปรับขนาดพื้นที่ทำงานของคุณเพื่อดูว่าเว็บไซต์ของคุณมีหน้าจอที่แตกต่างกันอย่างไร ไม่จำเป็นต้องเปลี่ยนโหมดตัวอย่าง
• การปรับปรุงประสิทธิภาพ ทำให้หน้าโหลดเร็วขึ้นแสดงผลได้เร็วขึ้นและรู้สึกราบรื่นขึ้นเมื่อคุณกำลังสร้าง

ลอง Divi 5 วันนี้

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

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

วิธีใช้อัตราส่วนทองคำโดยใช้ Divi 5

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

การออกแบบตัวแปรช่วยให้คุณบันทึกและนำค่ากลับมาใช้ใหม่ในเว็บไซต์ของคุณ พวกเขาสร้าง DNA Identity Identity ของเว็บไซต์ของคุณ Divi 5 มีหกประเภท: สี, แบบอักษร, รูปภาพ, สตริงข้อความ, ลิงก์และตัวเลข แต่ละคนมีบทบาทเฉพาะ:

• ตัวแปรสี มีสีแบรนด์พื้นหลังสีข้อความและเฉดสีอื่น ๆ ที่ใช้ทั่วทั้งไซต์
• ตัวแปรตัวอักษร ทำให้แบบอักษรสอดคล้องกันสำหรับหัวเรื่องข้อความร่างกายและองค์ประกอบพิเศษ
• ตัวแปรรูปภาพ เก็บกราฟิกทั่วไปเช่นโลโก้หรือรูปแบบพื้นหลังเพื่อใช้งานง่าย
• ตัวแปรสตริงข้อความ บันทึกเนื้อหาที่ใช้ซ้ำได้เช่นคำขวัญผู้ติดต่อและบันทึกทางกฎหมาย
• ตัวแปรลิงค์ เก็บ URL ที่คุณใช้บ่อยเช่นโซเชียลมีเดียหรือหน้าคีย์
• ตัวแปรตัวเลข จัดการการวัดเป็นพิกเซลเปอร์เซ็นต์, EMS, REMS และหน่วยชมวิวและทำงานกับฟังก์ชั่น CSS เช่น CALC () เพื่อรักษาสัดส่วนที่เหมาะสมบนหน้าจอใด ๆ

การตั้งค่าตัวแปรอัตราส่วนทองคำของคุณ

เปิดแดชบอร์ด Divi 5 ของคุณและค้นหาไอคอนตัวจัดการตัวแปรในแถบด้านซ้าย

คลิกเพื่อเปิดแผงตัวแปร เพิ่มสีตัวอักษรรูปภาพข้อความและตัวแปรลิงค์ของคุณ

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

ตัวแปรตัวอักษร

• ขนาด H1: แคลมป์ (47px, 4.7vw, 76px)
  • ขั้นต่ำ 47px: แม้ในโทรศัพท์ที่เล็กที่สุด (กว้าง 320px) H1 ของคุณยังคงมีขนาดใหญ่พอที่จะสร้างลำดับชั้น สิ่งที่เล็กกว่าจะสูญเสียผลกระทบเป็นหัวข้อหลัก
  • 4.7VW ค่ากลาง: หน่วยความกว้างวิวพอร์ตนี้ทำให้มาตราส่วนข้อความได้อย่างราบรื่น ที่ความกว้างหน้าจอ 1000px, 4.7VW = 47px ที่ 1600px มันเติบโตเป็น 75px
  • สูงสุด 76px: เราได้รับสิ่งนี้โดยการคูณ 18px × 1.618 สามครั้ง (18 × 1.618 × 1.618 × 1.618 = 76.244px)
• ขนาด H2: แคลมป์ (29px, 3.5vw, 47px)
  • ขั้นต่ำ 29px: ทำให้ H2 มีขนาดเล็กกว่า H1 บนมือถืออย่างเห็นได้ชัด
  • การปรับขนาด 3.5VW: สัดส่วนขนาดเล็กกว่า H1 ตามสัดส่วนเพื่อรักษาลำดับชั้น
  • สูงสุด 47px: 76px ÷ 1.618 = 47.122px
• ขนาด H3: แคลมป์ (18px, 2.9VW, 29px)
  • ขั้นต่ำ 18px: จับคู่ขนาดข้อความบนมือถือเพื่อประหยัดพื้นที่แนวตั้ง
  • 2.9VW Scaling: เติบโตขึ้นเบา ๆ มากกว่าหัวเรื่องที่ใหญ่กว่า
  • 29px สูงสุด: 47px ÷ 1.618 = 29.124px
• ขนาด H4: แคลมป์ (14px, 2.2vw, 22.4px): หารต่อไป ~ 29px ÷ 1.618 = 17.994px แต่เราตั้งค่าต่ำสุดเป็น 22.4px สำหรับการอ่านได้
• ขนาด H5: แคลมป์ (13px, 1.8vw, 18px): ขนาดตัวอักษรพื้นฐานของเรา 18px เหมาะอย่างสมบูรณ์ในระดับที่นี่
• ขนาดข้อความร่างกาย: แคลมป์ (16px, 1.6vw, 18px): ฐาน 18px มาตรฐานที่การคำนวณทั้งหมดเกิดจาก

ฟังก์ชั่นแคลมป์ () ช่วยให้ข้อความปรับขนาดได้อย่างราบรื่นระหว่างหน้าจอ ใช้เวลาสามค่า: ขนาดที่เล็กที่สุดสำหรับโทรศัพท์ค่ากลางสำหรับการปรับขนาดและใหญ่ที่สุดสำหรับเดสก์ท็อป เราใช้ Viewport Width (VW) อยู่ตรงกลางเพราะทำให้ข้อความเติบโตขึ้นเรื่อย ๆ เมื่อหน้าจอมีขนาดใหญ่ขึ้น ไม่มีการกระโดดอย่างฉับพลันระหว่างขนาด

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

ตัวแปรระยะห่าง

แต่ละค่าทวีคูณก่อนหน้าด้วย 1.618:

• Space XS: แคลมป์ (8px, 1vw, 10px)
  • ทำไมฐาน 10px: นี่คือการเชื่อมต่อเป้าหมายสัมผัสที่สะดวกสบายที่สุดบนมือถือ Industry Wisdom แนะนำเป้าหมายการสัมผัสขั้นต่ำ 44px และการขยาย 10px ทุกด้านรวมทั้งเนื้อหาจะพาคุณไปที่นั่น เล็กกว่า 10px ทำให้องค์ประกอบรู้สึกคับแคบ
  • ทำไมขั้นต่ำ 8px: บนโทรศัพท์ที่มีความกว้าง 360px แม้แต่ 10px ก็รู้สึกกว้างขวางเกินไป เราลดลงถึง 8px เพื่อเพิ่มพื้นที่เนื้อหาในขณะที่ทำให้องค์ประกอบแตกต่าง
  • ทำไม 1vw: เพิ่มระยะห่างตามสัดส่วนและให้คุณ 10px ที่ความกว้างหน้าจอ 1000px
• Space Small: แคลมป์ (13px, 1.6VW, 16.18px): เหมาะสำหรับการรองลงของปุ่มและระยะห่างของฟิลด์แบบฟอร์ม
• Space Medium: แคลมป์ (21px, 2.6vw, 26.18px): ยอดเยี่ยมสำหรับระยะห่างระหว่างบล็อกเนื้อหาที่เกี่ยวข้อง
• พื้นที่ขนาดใหญ่: แคลมป์ (34px, 4.2vw, 42.36px): สร้างห้องหายใจระหว่างส่วนสำคัญในขณะที่ปรับขนาดด้วยขนาดหน้าจอ
• Space XL: แคลมป์ (55px, 6.8VW, 68.54px): เหมาะสำหรับการขยายด้านบน/ล่างในส่วนของฮีโร่และบล็อกคุณสมบัติที่สำคัญ ส่วนของฮีโร่ต้องการช่องว่างภายในที่สำคัญแม้บนมือถือ ต่ำกว่า 50px เนื้อหาของฮีโร่รู้สึกคับแคบกับขอบ
• Space XXL: แคลมป์ (89px, 11vw, 110.89px): ใช้เท่าที่จำเป็น อาจจะสำหรับส่วนพิเศษที่ต้องการห้องหายใจที่น่าทึ่ง

ตัวแปรเลย์เอาต์

• ความกว้างคอลัมน์หลัก: 61.803%
  • เราได้อย่างไร: หาร 1 โดย 1.618 = 0.61803 (หรือ 61.803%)
  • ใช้สิ่งนี้สำหรับพื้นที่เนื้อหาหลักของคุณในรูปแบบคอลัมน์สองคอลัมน์ใด ๆ
• ความกว้างคอลัมน์รอง: 38.197%
  • ใช้สำหรับคอลัมน์แถบด้านข้างของคุณในแถวเดียวกัน
  • มาจาก 100% - 61.803% = 38.197%
• ความกว้างสูงสุดของคอนเทนเนอร์: 1165px
  • ข้อความจะอ่านยากเมื่อบรรทัดยืดเกิน 72 อักขระ
    • และสมมติว่า 10px เป็นขนาดข้อความขั้นต่ำความกว้างการอ่านที่ดีที่สุด (720px) ×อัตราส่วนทองคำ (1.618) = 1165px
  • นำไปใช้กับส่วนหลักหรือแถวที่ถือเนื้อหาของคุณ
• อัตราส่วนความสูงทอง: CALL (100% / 1.618)
  • สิ่งนี้สามารถใช้เป็นค่าในความสูงสำหรับกลุ่มโมดูล/โมดูลเช่นรูปภาพกล่องคำเรียกเข้ามาส่วนฮีโร่การ์ดสมาชิกในทีม ฯลฯ
  • สิ่งนี้จะสร้างสี่เหลี่ยมแทนสี่เหลี่ยมหรือรูปร่างแบบสุ่ม สมองของคุณพบว่าสัดส่วนเหล่านี้น่าดึงดูดอย่างเป็นธรรมชาติเช่นภาพถ่ายกรอบที่สมบูรณ์แบบ
  • เราจะได้รับสิ่งนี้ได้อย่างไร? อัตราส่วนทองคำบอกว่าถ้าความกว้าง = 1.618 ความสูง = 1 ดังนั้นถ้าความกว้าง = 100%ความสูง = 100%÷ 1.618 = 61.8% สูตรนี้ทำคณิตศาสตร์โดยอัตโนมัติ

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

การสร้างส่วนฮีโร่ที่มีอัตราส่วนทองคำ

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

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

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

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

ตัวเลือก 1: พื้นหลังสีทึบ

• คลิกที่ฟิลด์สีพื้นหลังและเลือกตัวแปรสีหลักของคุณจากดรอปดาวน์ สิ่งนี้ทำให้ส่วนฮีโร่ของคุณสอดคล้องกับเอกลักษณ์ของแบรนด์ของคุณ หากสีหลักของคุณเบาเกินไปสำหรับความคมชัดของข้อความให้ใช้ตัวแปรสีรองแทน ตรวจสอบให้แน่ใจว่าไม่ว่าสีใดที่คุณเลือกจะให้ความคมชัดเพียงพอสำหรับข้อความของคุณที่จะอ่านได้ ตามแรงบันดาลใจของเราเราจะเพิ่มการไล่ระดับสีพื้นหลังและสีหลักด้วยการหยุด 72% และที่ 90 °

ตัวเลือกที่ 2: พื้นหลังภาพ

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

การสร้างเค้าโครงสองคอลัมน์

เพิ่มแถวด้วยสองคอลัมน์

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

นอกจากนี้เรายังจะเปิดใช้งาน“ ใช้ความกว้างของรางน้ำที่กำหนดเอง” และตั้งค่าเป็น 1 สิ่งนี้จะช่วยให้เราใช้ระยะห่างจากอัตราส่วนทองคำระหว่างโมดูลของเรา

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

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

การตั้งค่าตัวอักษรที่ไหล

ในคอลัมน์หลักของคุณเพิ่มสองโมดูลหัวเรื่อง

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

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

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

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

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

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

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

จัดสไตล์คอลัมน์ที่ถูกต้อง

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

นอกจากนี้เรายังจะปรับความกว้างของภาพให้อยู่ที่ประมาณ 90% ดังนั้นมันจึงดูดีขึ้น

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

ผล

ต่อไปนี้เป็นผลลัพธ์:

ใช้การปรับขนาดผ้าใบของ Divi 5 เพื่อทดสอบการปรากฏตัวของฮีโร่ของคุณในขนาดหน้าจอที่แตกต่างกัน ฟังก์ชั่น CLAMP () ในตัวแปรของคุณควรจัดการการตอบสนองโดยอัตโนมัติ

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

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

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

การบำรุงรักษาอัตราส่วนทองคำทั่วทั้งไซต์ด้วยการตั้งค่ากลุ่มตัวเลือก

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

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

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

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

อัตราส่วนทองคำของคุณยังคงสอดคล้องกันโดยไม่ต้องทำงานด้วยตนเอง

คณิตศาสตร์เพื่อการออกแบบที่สวยงาม Divi 5 ทำให้ง่าย

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

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

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

คณิตศาสตร์ใช้งานได้ทุกที่ แต่ Divi 5 ทำให้การใช้งานได้อย่างสม่ำเสมอ