วิธีการสั่งซื้อองค์ประกอบใหม่ในจุดพักที่แตกต่างกันใน Divi 5

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

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

ทำไมคุณถึงต้องการจัดลำดับองค์ประกอบใหม่

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

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

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

Flexbox ของ Divi 5 ทำให้การจัดลำดับใหม่ง่ายขึ้นได้อย่างไร

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

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

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

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

คู่มือทีละขั้นตอนเพื่อตอบสนองการเรียงลำดับใหม่ใน Divi 5

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

1. ตั้งค่าเบรกพอยต์ที่กำหนดเองทั้งเจ็ดของคุณ

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

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

คุณจะเห็นโทรศัพท์ (ต่ำกว่า 767px), โทรศัพท์กว้าง (ต่ำกว่า 860px), แท็บเล็ต (ต่ำกว่า 980px), แท็บเล็ตกว้าง (ต่ำกว่า 1024px), เดสก์ท็อป (มากกว่า 981px), ไวด์สกรีน (มากกว่า 1280px) และกว้างพิเศษ (มากกว่า 1440px)

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

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

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

2. เข้าถึงตัวควบคุม Flex

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

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

เลื่อนลงเพื่อค้นหาฟิลด์ทิศทางเค้าโครง สิ่งนี้จะกำหนดลำดับและวิธีการที่คอลัมน์ปรากฏขึ้น (เคียงข้างกันหรือสูงกว่าและด้านล่างซึ่งกันและกัน)

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

3. โครงสร้างเค้าโครงปรับแต่งสำหรับขนาดหน้าจอแต่ละขนาด

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

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

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

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

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

4. คอลัมน์ใหม่เรียงลำดับข้ามจุดพัก

การใช้ค่าการสั่งซื้อเป็นวิธีที่ยอดเยี่ยมในการตัดสินใจสั่งซื้อองค์ประกอบลูกของคอนเทนเนอร์ Flex (มักจะเป็นคอลัมน์) ในขนาดหน้าจอที่หลากหลาย แท็บคำสั่งซื้อในการตั้งค่าแถวให้ตัวเลขแต่ละคอลัมน์ที่บอกเบราว์เซอร์“ แสดงคอลัมน์นี้ในตำแหน่ง 1 อันนี้ในตำแหน่งที่ 2” และอื่น ๆ ตัวเลขที่ต่ำกว่าจะปรากฏขึ้นก่อนและตัวเลขที่สูงขึ้นจะปรากฏล่าสุด เรียบง่ายอย่างนั้น

คุณสามารถใช้คำสั่งซื้อ“ 0” หรือตัวเลขลบเช่น“ -1” เพื่อบังคับให้เนื้อหาเฉพาะปรากฏขึ้นก่อนโดยไม่คำนึงถึงค่าอื่น ๆ

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

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

ปรับแต่งคำสั่งซื้อบนแท็บเล็ตและโทรศัพท์มือถือ

ตอนนี้สลับไปที่เบรกพอยต์แท็บเล็ตโดยใช้อุปกรณ์สลับ และเปลี่ยนคำสั่งซื้อคอลัมน์:

ตั้งค่าคอลัมน์ 6 (คำสั่งเรียกเข้า) เป็น“ 3” ดังนั้นจึงปรากฏในแถวกลาง ออกจากคอลัมน์ 1 และ 2 ตามคอลัมน์ 3 เป็น 4 และส่วนที่เหลือตามที่ต้องการ ผู้ใช้แท็บเล็ตจะเห็นคำกระตุ้นการตัดสินใจของคุณทันทีหลังจากข้อเสนอที่มีมูลค่าตามด้วยรายละเอียดการสนับสนุน

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

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

ควบคุมว่าทุกอย่างซ้อนกับ Divi 5

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

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