วิธีสร้างความสูงของคอลัมน์ที่เท่ากันด้วย FlexBox ใน Divi 5

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

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

ความสูงของคอลัมน์เท่ากันใน Divi 4

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

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

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

วิธีการที่ flexbox ใน divi 5 ที่อยู่คอลัมน์เท่ากัน

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

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

วิธีสร้างความสูงของคอลัมน์ที่เท่ากันใน Divi 5

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

ขั้นตอนที่ 1: สร้างการออกแบบของคุณ

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

เมื่อกล่องโต้ตอบส่วนใหม่ปรากฏขึ้นให้เลือก เค้าโครงสามคอลัมน์ ภายใต้ คอลัมน์เท่ากัน

เพิ่ม โมดูลกลุ่ม ในคอลัมน์แรก

ถัดไปเพิ่ม โมดูลไอคอน ลงในโมดูลกลุ่มในคอลัมน์แรก

เลือก ไอคอนตรวจสอบ ในแท็บเนื้อหา

ในแท็บ การออกแบบ ตั้ง ค่าสีไอคอน เป็น #2EA3F2 และ ขนาดไอคอน เป็น 36px

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

พิมพ์ การออกแบบเว็บ เป็นชื่อใน แท็บเนื้อหา

ในแท็บการออกแบบให้เลือก H5 เป็น ระดับหัวเรื่อง อินเตอร์ เป็น ตัวอักษรหัวเรื่อง และ สื่อ เป็น น้ำหนักตัวอักษรหัวเรื่อง ตั้งค่า รูปแบบตัวอักษรหัวเรื่อง เป็น ตัวพิมพ์ใหญ่ การจัดตำแหน่งข้อความด้าน ซ้าย สีข้อความหัว เป็น #000000 และเก็บ ขนาดข้อความหัวเรื่อง ไว้ที่ขนาดเริ่มต้นที่ 16px

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

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

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

ขั้นตอนที่ 2: คอลัมน์ซ้ำซ้อน

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

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

ก่อนที่เราจะไปยังขั้นตอนต่อไปให้คลิกที่คอลัมน์แรกและเพิ่มระยะห่าง 25px ให้กับทุกด้านของคอลัมน์ของเรา

นอกจากนี้เราจะเพิ่ม รัศมีเส้นขอบ 15px และ ความกว้างของเส้นขอบ 1px ด้วย #666666 เป็นสี

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

ขั้นตอนที่ 3: กำหนดค่าการตั้งค่า FlexBox สำหรับความสูงเท่ากัน

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

ถัดไปตรวจสอบให้แน่ใจว่า แถว ถูกเลือกภายใต้ ทิศทางเลย์เอาต์ เริ่มต้น ภายใต้ เนื้อหาที่เหมาะสม และเลือก การยืด ภายใต้ รายการจัดเรียง สิ่งนี้จะบอก Divi 5 เพื่อรักษาโครงสร้างคอลัมน์จัดเรียงรายการทั้งหมดภายในแถวไปทางซ้ายและเติมพื้นที่ว่างภายในคอนเทนเนอร์หลัก

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

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

โมดูลทั้งหมดภายในกลุ่มจะถูกยืดออกเพื่อเติมเต็มพื้นที่ที่มีอยู่และปุ่มนอกกลุ่มจะถูกจัดแนวที่ด้านล่าง

ขั้นตอนที่ 4: ทดสอบการตอบสนอง

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

คลิกเพื่อดูตัวอย่างเลย์เอาต์ของคุณใน มุมมองแท็บเล็ต อย่างที่คุณเห็น FlexBox เก็บคอลัมน์ซ้อนกันแบบเคียงข้างกัน

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

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

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

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

กรณีการใช้งานทั่วไป

ระบบ FlexBox ของ Divi 5 ทำให้การสร้างความสูงของคอลัมน์ที่เท่าเทียมกันหลากหลายและมีประสิทธิภาพสำหรับกรณีการใช้งานที่หลากหลาย ด้านล่างนี้เป็นวิธีการทั่วไปที่ระบบ FlexBox ของ Divi 5 ส่องแสง:

1. รายชื่อผลิตภัณฑ์

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

2. ส่วนที่โดดเด่น

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

3. กริดพอร์ตโฟลิโอ

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

การดาวน์โหลด

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

ทำความคุ้นเคยกับฟีเจอร์ FlexBox ของ Divi 5 วันนี้

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

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