วิธีจัดแนวเนื้อหาใน Divi . ในแนวตั้ง

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

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

การทำความเข้าใจ Flex และ Divi

คุณสมบัติ CSS ของ Flex (หรือ Flexbox) เป็นเพียงวิธีการวางตำแหน่งองค์ประกอบในสแต็กแนวนอนและ/หรือแนวตั้ง (คล้ายกับตาราง) ยกเว้นคุณสมบัติ flex ที่แตกต่างจากตารางทั่วไปตรงที่ให้คุณสร้างกล่องที่ปรับหรือ "flex" ตามขนาดของเนื้อหาที่อยู่ในนั้นได้

Divi ใช้คุณสมบัติ flex ทุกครั้งที่คุณเลือก "Equalize Column Heights" เป็นการตั้งค่าแถวของคุณ วิธีนี้ทำให้แน่ใจได้ว่าขนาดของคอลัมน์ทั้งหมดจะปรับตามขนาดของคอลัมน์ที่มีเนื้อหามากที่สุด และเนื่องจาก "Equalize Column Heights" เปิดใช้งานการยืดหยุ่นสำหรับคอนเทนเนอร์แถว คุณจึงสามารถใช้ประโยชน์จากสิ่งนั้นได้โดยการเพิ่ม css ลงในคอลัมน์ของคุณเพื่อปรับเนื้อหาของแต่ละคอลัมน์ (หรือกล่อง)

ตัวอย่างเช่น หากคุณเพิ่ม “margin: auto” ให้กับคอลัมน์ใดๆ ในแถว เนื้อหาของคอลัมน์นั้น (ไม่ว่าจะเป็นโมดูลอย่างน้อยหนึ่งโมดูล) จะกลายเป็นศูนย์กลางในแนวตั้ง

นอกจากนี้ หากคุณเพิ่ม “align-items:center;” ในแถวของคุณ คอลัมน์ทั้งหมดของคุณ (และเนื้อหา) จะจัดกึ่งกลางในแนวตั้ง

แน่นอนว่ายังมีการใช้งานคุณสมบัติ flex ในการออกแบบเว็บอีกมากมายพร้อมกับ CSS ขั้นสูงที่คุณสามารถนำไปใช้กับธีมของคุณได้ แต่สำหรับบทช่วยสอนนี้ ฉันต้องการทำให้ทุกอย่างเรียบง่าย

สิ่งนี้จำเป็นจริงหรือ?

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

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

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

โหลดเค้าโครงที่สร้างไว้ล่วงหน้าไปยังเพจของคุณ

ในการเริ่มต้น ฉันจะใช้เค้าโครงหน้าผลงานของบริษัทออกแบบตกแต่งภายใน เพื่อให้ได้เลย์เอาต์นี้บนเพจของคุณ ให้สร้างเพจใหม่ จากนั้นตั้งชื่อเพจของคุณ คลิก "ใช้ Divi Builder" จากนั้น "ใช้ Visual Builder" จากนั้นเลือกตัวเลือก “Choose a Premade Layout” จากนั้นเลือก Interior Design Company Layout Pack จากป๊อปอัป Load From Library สุดท้าย เลือกหน้าพอร์ตโฟลิโอจากรายการเลย์เอาต์และคลิก "ใช้เลย์เอาต์นี้"

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

วิธีที่ 1: วิธีการจัดแนวเนื้อหาในแนวตั้งโดยใช้ Flex และ Auto Margin

เปิดการตั้งค่าแถวของแถวที่สองบนหน้า (การตั้งค่าที่อยู่ใต้แถวที่มีชื่อหน้าโดยตรง) ภายใต้การตั้งค่าการออกแบบให้เปิดกลุ่มตัวเลือกการปรับขนาดและสังเกตว่า "Equalize Column Heights" เปิดใช้งานอยู่แล้ว ซึ่งหมายความว่าตอนนี้แถวมีคุณสมบัติ flex (“display: flex;”) ที่เพิ่มเข้าไป

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

margin: auto;

ตอนนี้เนื้อหาในคอลัมน์ที่สองได้เปลี่ยนไปเป็นศูนย์กลางในแนวตั้ง

ทำให้เนื้อหาอยู่ในแนวเดียวกัน

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

margin: auto auto 0;

การจัดแนวเนื้อหาในแนวตั้งสำหรับคอลัมน์ทั้งหมดในแถวของคุณ

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

align-items: center;

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

align-items: flex-end;

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

จากนั้นขยายองค์ประกอบหลัก css ไปยังแถวทั้งหมดทั่วทั้งหน้า (หรือส่วน) เพื่อจัดกึ่งกลางเนื้อหาทั้งหมดของทุกคอลัมน์ในหน้าในแนวตั้ง

ตอนนี้ทุกอย่างมีศูนย์กลางในแนวตั้ง

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

วิธีที่ 2: การจัดแนวเนื้อหาในแนวตั้งโดยใช้ Column Flex Direction

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

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

กลับไปที่แถวของเราในตัวอย่างที่แล้ว เปิดการตั้งค่าแถวและนำ CSS ที่กำหนดเองออกโดยคลิกขวาที่ CSS ที่กำหนดเองแล้วคลิก "รีเซ็ตสไตล์ CSS ที่กำหนดเอง"

จากนั้นเพิ่ม CSS ต่อไปนี้ภายใต้องค์ประกอบหลักของคอลัมน์ 2:

display: flex;
flex-direction: column;
justify-content: center;

หรือถ้าฉันต้องการจัดแนวเนื้อหาให้อยู่ด้านล่างสุด ก็แค่เปลี่ยน "justify-content: center" เป็น "justify-content: flex-end"

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

การทำ Blurbs ด้วยจำนวนข้อความในแนวตั้งที่หลากหลาย

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

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

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

ตอนนี้ฉันต้องไปที่การตั้งค่าแถวและ "ปรับความสูงของคอลัมน์ให้เท่ากัน"

ตอนนี้ฉันเพิ่มข้อมูลโค้ด CSS เพื่อจัดแนวเนื้อหาและเปลี่ยนการออกแบบได้แล้ว

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

align-items: center;

หรือเปลี่ยนเป็นด้านล่างเพื่อให้ชิดด้านล่าง

align-items: flex-end;

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

คอลัมน์ 1 องค์ประกอบหลัก CSS:

margin: auto auto 0;

คอลัมน์ 3 องค์ประกอบหลัก CSS:

margin: 0 auto auto;

แล้วเลย์เอาต์หนึ่งคอลัมน์ล่ะ

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

แอปพลิเคชั่นมากมาย

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

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

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

อย่าลังเลที่จะแบ่งปันความคิดและความคิดเห็นของคุณด้านล่าง

ไชโย!