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

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

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

ไปกันเถอะ!

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

การทำความเข้าใจความแตกต่างระหว่างคุณสมบัติ

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

ความกว้าง – ความกว้าง ที่แท้จริงขององค์ประกอบการออกแบบ หากเป็น 100% ก็กว้างเท่าที่คอนเทนเนอร์อนุญาต ความกว้างมักแสดงโดยใช้ % เปอร์เซ็นต์ความกว้างที่ต่ำลง องค์ประกอบของการออกแบบก็จะยิ่งแคบลง

ความกว้างสูงสุด – ความกว้าง สูงสุดมีอำนาจเหนือความกว้าง หากกำหนดความกว้างของโมดูลไว้ที่ 100% โมดูลจะยึดตามค่านั้น ตราบเท่าที่ ยังคงต่ำกว่าค่าความกว้างสูงสุด เมื่อถึงค่าความกว้างสูงสุดแล้ว จะไม่เกินค่าดังกล่าว

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

เปลี่ยนความกว้าง

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

การเปลี่ยนความกว้างสูงสุด

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

ไม่เกิน

เกิน

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

Min Height – ความสูงขั้นต่ำที่คุณต้องการกำหนดให้กับองค์ประกอบ หากค่านี้มากกว่าอินพุตความสูง อินพุตความสูงต่ำสุดจะมีผลเหนือกว่า

ความสูง – กำหนดความสูงจริงที่คุณต้องการกำหนดให้กับองค์ประกอบ

ความสูงสูงสุด – ค่านี้จะกลายเป็นความสูงใหม่เมื่อความสูงเกินค่าที่กำหนดให้กับความสูง

เปลี่ยนความสูงขั้นต่ำ

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

เปลี่ยนความสูง

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

ไม่เกิน

เกินกว่า

เปลี่ยนความสูงสูงสุด

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

การเปลี่ยนความกว้างสูงสุดของแถว

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

การเปลี่ยนความกว้างสูงสุดทั่วโลก

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

เปลี่ยนความกว้างสูงสุดสำหรับหนึ่งแถวโดยเฉพาะ

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

ให้โมดูลที่มีความสูงเท่ากัน

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

การใช้อีควอไลเซอร์คอลัมน์

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

การกำหนดความสูงให้กับแต่ละโมดูล

อีกวิธีหนึ่งในการเข้าถึงคือการกำหนดความสูงที่กำหนดไว้ล่วงหน้าให้กับโมดูลที่คุณกำลังเพิ่ม

การจัดแนวเนื้อหาภายในโมดูล

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

display: flex;
flex-wrap: wrap;
align-content: center;

การเลือกความสูงหรือความกว้างขององค์ประกอบการออกแบบ & เปลี่ยนโอเวอร์โฟลว์เป็น Scroll

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

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

การสร้างส่วนฮีโร่แบบเต็มหน้าจอในทุกขนาดหน้าจอ

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

• ส่วนสูง: 100vh

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

display: flex;
flex-wrap: wrap;
align-content: center;

ความคิดสุดท้าย

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

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