วิธีปรับลำดับการเรียงคอลัมน์ของ Divi บนอุปกรณ์มือถือ

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

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

มาเริ่มกันเลย!

การสร้างเนื้อหา

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

บนหน้าใหม่ คลิกเพื่อใช้ Divi Builder และเปิดใช้ Visual Builder

จากตัวสร้างภาพ ให้เลือกเค้าโครง 2 คอลัมน์ (1/2 – 1/2)

เพิ่มโมดูลรูปภาพในคอลัมน์แรกภายในแถวของคุณ

ภายใต้การตั้งค่ารูปภาพ ให้อัปโหลดและแทรกรูปภาพ (ฉันใช้รูปภาพขนาด 770 x 433 จาก unsplash.com)

ถัดไป ให้แทรกโมดูลข้อความในคอลัมน์ที่สองของแถวของคุณ

ภายใต้ การตั้งค่าข้อความทั่วไป ให้เพิ่มข้อความของคุณลงในกล่องข้อความเนื้อหา

บันทึก

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

จากตัวสร้างภาพ ทำซ้ำแถวที่มี 2 คอลัมน์เดียวกันโดยคลิกที่ไอคอนแถวที่ซ้ำกัน

ในแถวที่สองของคุณ (แถวที่ซ้ำกันที่คุณเพิ่งสร้างขึ้น) ให้ลากโมดูลรูปภาพไปที่คอลัมน์ที่สองแล้วลากโมดูลข้อความไปที่คอลัมน์แรก

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

คอลัมน์ 1 (รูปภาพ)
คอลัมน์ 2 (ข้อความ)
คอลัมน์ 1 (ข้อความ)
คอลัมน์ 2 (รูปภาพ)

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

สองวิธีในการเปลี่ยนลำดับการเรียงคอลัมน์บนมือถือ

1: การเปลี่ยนลำดับการเรียงคอลัมน์บนมือถือโดยใช้คุณสมบัติ "ปิดการใช้งาน" ของ Divi

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

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

ใช้ Visual Builder ทำซ้ำแถวที่สอง

ก่อนที่เราจะแก้ไขแถวที่ซ้ำกันใหม่ ให้เปิดการตั้งค่าแถวในแถวที่สอง

ภายใต้ การตั้งค่าแถวทั่วไป ให้เลือกเพื่อปิดใช้งานแถวบนโทรศัพท์และแท็บเล็ต

บันทึก

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

ลากเนื้อหาโมดูลข้อความไปที่คอลัมน์ที่สอง แล้วลากโมดูลรูปภาพไปที่คอลัมน์แรก

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

บันทึก

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

แค่นั้นแหละ!

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

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

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

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

2. การเปลี่ยนลำดับการเรียงคอลัมน์บนมือถือโดยใช้คลาส CSS

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

จากแดชบอร์ด wordpress ของคุณ ไปที่ Divi → Theme Customizer → CSS เพิ่มเติม และเพิ่ม CSS ต่อไปนี้:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

บันทึกและเผยแพร่

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

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

ตอนนี้เรามี CSS ของเราแล้ว มาปรับใช้คลาสเหล่านี้กับเพจของเรากัน

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

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

ใช้ Visual Builder เปิดการตั้งค่าแถวสำหรับแถวที่สอง

ในการตั้งค่าแถว ใต้แท็บ CSS ให้เพิ่มสิ่งต่อไปนี้:

เพิ่ม "custom_row" ลงในกล่องข้อความ CSS Class (ห่อแถวของคุณในกล่องดิ้น)

เพิ่ม “second-on-mobile” ลงในช่องข้อความ CSS Class ของคอลัมน์ 1 (สิ่งนี้จะเปลี่ยนลำดับของคอลัมน์ 1 เพื่อแสดงวินาทีบนมือถือ ชื่อคลาสควรทำให้จำได้ง่าย )

เพิ่ม "first-on-mobile" ลงในช่องข้อความ CSS Class ของคอลัมน์ 2 (สิ่งนี้จะเปลี่ยนลำดับของคอลัมน์ 2 เพื่อแสดงก่อนบนมือถือ)

หมายเหตุ: การเพิ่มคลาสการเรียงลำดับในแต่ละคอลัมน์เป็นสิ่งสำคัญ

ตอนนี้เรามาดูผลลัพธ์กัน สังเกตบนมือถือว่าคอลัมน์แถวที่สองมีการเปลี่ยนแปลงเพื่อแสดงเหมือนกับแถวแรกอย่างไร สิ่งนี้จะสร้างกระแสที่สอดคล้องกันของรูปภาพ → ข้อความ → รูปภาพ → ข้อความ

การเปลี่ยนลำดับการเรียงคอลัมน์ของเลย์เอาต์ใดๆ โดยใช้คลาส CSS

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

เพียงทำตามขั้นตอนเดียวกับที่คุณทำมาก่อน ในการตั้งค่าแถวของคุณ ภายใต้แท็บ CSS ให้เพิ่มคลาส “custom_row” ลงในแถวและเพิ่มคลาสการสั่งซื้อของคุณ (“first-on-mobile”, “second-on-mobile”, “third-on-mobile”) ไปยังแต่ละคอลัมน์ของคุณ อย่าลืมเพิ่มคลาสให้กับแต่ละคอลัมน์ของคุณ เพื่อให้ทุกคอลัมน์มีค่าการสั่งซื้อที่กำหนดไว้

แค่นั้นแหละ!

วิธีที่ต้องการ

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

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

ข้อควรพิจารณาเกี่ยวกับ SEO

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

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!