ความสามารถในการจัดแนวแนวตั้ง เนื้อหา เมื่อสร้างเว็บไซต์ด้วย Divi สามารถเป็นส่วนเสริมที่มีประโยชน์ให้กับเครื่องมือออกแบบของคุณได้ บางครั้งบทบัญญัติบางประการกำหนดให้ เนื้อหา ถูกจัดวางในแนวตั้งในรูปแบบต่างๆ (กึ่งกลาง, ล่าง, ด้านบน) ความต้องการที่พบบ่อยที่สุดคือการตั้งศูนย์กลางของคุณ เนื้อหา แนวตั้ง
ให้สัมผัสที่ยอดเยี่ยมของการเว้นวรรคที่สมมาตรซึ่งมีประโยชน์เมื่อใช้เค้าโครงหลายคอลัมน์สำหรับเนื้อหาของคุณ นอกจากนี้เนื้อหาที่จัดกึ่งกลางในแนวตั้งยังคงเน้นที่ความกว้างของเบราว์เซอร์ที่แตกต่างกันทำให้ไม่ต้องยุ่งยากในการใช้ช่องว่างภายในหรือระยะขอบที่กำหนดเองเพื่อให้ได้การตอบสนองที่ใกล้เคียงกัน
ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเพิ่มข้อมูลโค้ด CSS เล็กๆ สองสามรายการในคอลัมน์ใดๆ เพื่อจัดแนวเนื้อหาในแนวตั้ง ฉันจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจาก Divi สำหรับตัวอย่างวิธีการทำ หากคุณไม่ค่อยรู้เรื่อง CSS มากนัก คุณก็ไม่ต้องกังวล มันจะค่อนข้างง่ายที่จะใช้กับเลย์เอาต์ของคุณเองในไม่กี่วินาที
ทำความเข้าใจเกี่ยวกับ Flex และ Divi
คุณสมบัติ css Flex (หรือ Flexbox) เป็นเพียงวิธีการวางตำแหน่งรายการในแนวนอนและ / หรือแนวตั้ง (เหมือนกับตาราง) ยกเว้นไม่เหมือนกับตารางแบบดั้งเดิมคุณสมบัติ flex ช่วยให้คุณสร้างกล่องที่จะปรับขนาดของเนื้อหาที่มีอยู่
Divi ใช้คุณสมบัติ flex ทุกครั้งที่คุณเลือก "Equalize Column Heights" เป็นพารามิเตอร์แถว วิธีนี้ช่วยให้มั่นใจได้ว่าขนาดของคอลัมน์จะปรับตามขนาดของคอลัมน์ที่มีเนื้อหามากที่สุด และเนื่องจาก “ปรับความสูงของคอลัมน์ให้เท่ากัน” ช่วยให้สามารถยืดหยุ่นสำหรับคอนเทนเนอร์แถว คุณจึงสามารถใช้ประโยชน์จากมันได้อย่างง่ายดายโดยการเพิ่ม CSS ลงในคอลัมน์ของคุณเพื่อปรับเนื้อหาของแต่ละคอลัมน์ (หรือพื้นที่)
ตัวอย่างเช่นหากคุณเพิ่ม "margin: auto" ลงในคอลัมน์ในแถวเนื้อหาของคอลัมน์นั้น (ไม่ว่าจะเป็นโมดูลอย่างน้อยหนึ่งโมดูล) จะกลายเป็นศูนย์กลางในแนวตั้ง
นอกจากนี้หากคุณเพิ่ม "align-items: center" ในบรรทัดของคุณคอลัมน์ทั้งหมด (และเนื้อหาของพวกเขา) จะอยู่กึ่งกลางในแนวตั้ง
แน่นอนว่ายังมีประโยชน์อื่น ๆ อีกมากมายสำหรับคุณสมบัติ Flex ในการออกแบบเว็บรวมถึง CSS ขั้นสูงที่คุณสามารถนำไปใช้กับธีมของคุณได้ แต่สำหรับบทแนะนำนี้ฉันต้องการให้มันง่าย
จำเป็นจริงๆหรือ
ในทางเทคนิคไม่ คุณสามารถจัดแนวเนื้อหา / โมดูลในคอลัมน์ในแนวตั้งโดยใช้ระยะห่างที่กำหนดเอง (ช่องว่างภายในและระยะขอบ) ตัวอย่างเช่นคุณสามารถใช้ตัวเลือกระยะห่างของ Divi เพื่อให้คอลัมน์เท่ากับช่องว่างด้านบนและด้านล่างเพื่อจัดกึ่งกลางโมดูลในแนวตั้งในคอลัมน์ คุณยังสามารถเพิ่มเฉพาะช่องว่างด้านบนลงในคอลัมน์เพื่อจัดแนวเนื้อหาด้านล่าง อย่างไรก็ตามคุณอาจต้องปรับระยะห่างเมื่ออัปเดตเพจของคุณด้วยเนื้อหาเพิ่มเติม นอกจากนี้อาจเป็นเรื่องยากที่จะรักษาการจัดตำแหน่งนี้ไว้ในความกว้างของเบราว์เซอร์ที่แตกต่างกัน
ดังนั้นหากคุณกำลังมองหาวิธีจัดเนื้อหาในแนวตั้งโดยไม่ต้องคิดถึงการเว้นวรรคที่กำหนดเองฉันคิดว่าคุณจะพบว่ามีประโยชน์
เริ่มกันเลย!
โหลดเค้าโครงที่กำหนดไว้ล่วงหน้าบนหน้าของคุณ
ในการเริ่มต้นฉันจะใช้เค้าโครงจากกลุ่มผลงาน บริษัท ออกแบบตกแต่งภายใน ในการรับเค้าโครงนี้บนเพจของคุณให้สร้างเพจใหม่ จากนั้นตั้งชื่อเพจของคุณ คลิกที่“ Use Divi Builder” จากนั้นคลิก“ Use Visual Builder” จากนั้นเลือกตัวเลือก "เลือกเค้าโครงพื้นฐาน" จากนั้นเลือกชุดเค้าโครง บริษัท ออกแบบตกแต่งภายในจากหน้าต่างป๊อปอัปโหลดจากไลบรารี สุดท้ายเลือกหน้าผลงานจากรายการเค้าโครงและคลิก "ใช้เค้าโครงนี้"
เมื่อโหลดเค้าโครงบนหน้าของคุณคุณก็พร้อมที่จะไป
วิธีที่ 1: วิธีจัดแนวเนื้อหาโดยใช้ Flex และ Auto Margin
เปิดการตั้งค่าบรรทัดสำหรับบรรทัดที่สองของเพจ (อันที่อยู่ใต้บรรทัดที่มีชื่อเพจโดยตรง) ภายใต้การตั้งค่าการออกแบบให้เปิดกลุ่มตัวเลือกการปรับขนาดและสังเกตว่า "ปรับสมดุลคอลัมน์ความสูง" ใช้งานอยู่แล้ว ซึ่งหมายความว่าตอนนี้บรรทัดมีการเพิ่มคุณสมบัติ flex (“ display: flex;”)
ตอนนี้ไปที่การตั้งค่าของแท็บขั้นสูงสำหรับแถวเดียวกันและเพิ่มข้อมูลโค้ด css ต่อไปนี้ในช่องรายการขององค์ประกอบหลักของคอลัมน์ 2
margin: auto; |
ตอนนี้เนื้อหาของคอลัมน์ที่สองถูกย้ายไปที่กึ่งกลางแนวตั้ง
จัดตำแหน่งเนื้อหาให้ต่ำลง
หากคุณต้องการจัดเรียงเนื้อหาของคุณที่ด้านล่างเพื่อให้โมดูลทั้งหมดสแต็คที่ด้านล่างของคอลัมน์ของคุณคุณสามารถปรับค่าระยะขอบดังนี้
margin: auto 0; |
การจัดตำแหน่งแนวตั้งของเนื้อหาสำหรับทุกคอลัมน์ในแถวของคุณ
แทนที่จะเพิ่ม "ระยะขอบ: อัตโนมัติ" ให้กับแต่ละคอลัมน์ทีละคอลัมน์คุณยังสามารถจัดกึ่งกลางเนื้อหาของคอลัมน์ทั้งหมดในแถวของคุณในแนวตั้งได้โดยการเพิ่มข้อมูลโค้ดต่อไปนี้ในองค์ประกอบหลักของการตั้งค่าแถวของคุณ
align-items: center; |
หรือถ้าคุณต้องการให้เนื้อหาทั้งหมดของคอลัมน์อยู่ในแนวเดียวกันที่ด้านล่างคุณสามารถเพิ่มข้อความที่ตัดตอนมานี้:
align-items: flex-end; |
และอย่าลืมว่าคุณสามารถใช้ประโยชน์จากคุณสมบัติ Extend Styles ของ Divi ได้โดยคลิกขวาที่องค์ประกอบหลักด้วยข้อมูลโค้ด CSS ของคุณแล้วคลิกที่ "ขยายองค์ประกอบหลัก"
จากนั้นขยายองค์ประกอบ CSS หลักนี้ไปยังบรรทัดทั้งหมดของหน้า (หรือส่วน) เพื่อจัดกึ่งกลางเนื้อหาทั้งหมดของแต่ละคอลัมน์ในหน้าแนวตั้ง
ตอนนี้ทุกอย่างอยู่กึ่งกลางแนวตั้ง
แต่คุณอาจสังเกตเห็นว่าสีพื้นหลังของคอลัมน์สีขาวไม่ครอบคลุมความสูงทั้งหมดของแถวอีกต่อไป เนื่องจากเราได้เพิ่ม "margin: auto" ลงในคอลัมน์ ในการแก้ไขปัญหานี้คุณสามารถเปลี่ยนสีพื้นหลังของเส้นเป็นสีขาวและลบการเติมออกจากเส้น แต่ฉันจะแสดงวิธีจัดกึ่งกลางเนื้อหาคอลัมน์ของคุณโดยไม่ต้องเปลี่ยนระยะขอบ
วิธีที่ 2: จัดแนวเนื้อหาในแนวตั้งโดยใช้ทิศทางการโค้งงอของคอลัมน์
ในวิธีแรกเราใช้ประโยชน์จากคุณสมบัติ flex ที่เพิ่มเข้ามาในแถว สิ่งนี้ทำให้แต่ละคอลัมน์ของเราเป็น "กล่องยืดหยุ่น" ที่สามารถจัดแนวในแนวตั้งได้โดยเพียงแค่ปรับระยะขอบ
แต่ยังมีวิธีปรับทิศทางแบบยืดหยุ่นในการจัดแนวเนื้อหาคอลัมน์โดยไม่สูญเสียเอฟเฟกต์“ Equalize Column Height” ซึ่งทำให้คอลัมน์ (และพื้นหลังคอลัมน์) มีขนาดเท่ากัน ในการทำเช่นนี้เราจะเพิ่ม CSS สองสามบรรทัดลงในคอลัมน์ของเราเพื่อให้โมดูลทั้งหมดในคอลัมน์เรียงซ้อนกันในแนวตั้งแล้วจัดกึ่งกลาง
กลับไปที่บรรทัดของเราในตัวอย่างก่อนหน้านี้ เปิดการตั้งค่าแถวและลบ css ที่กำหนดเองที่คุณอาจมีโดยคลิกขวาที่ CSS ที่กำหนดเองแล้วคลิก "รีเซ็ตสไตล์ CSS ที่กำหนดเอง"
จากนั้นเพิ่ม CSS ต่อไปนี้ภายใต้คอลัมน์ 2 ซึ่งเป็นองค์ประกอบหลัก:
แสดง: ดิ้น; ทิศทางดิ้น: คอลัมน์; ปรับเนื้อหา: ศูนย์;
หรือถ้าฉันต้องการจัดเนื้อหาที่ด้านล่างเพียงแค่แทนที่ "ปรับเนื้อหา: กลาง" ด้วย "ปรับเนื้อหา: ดิ้นปลาย"
สิ่งที่ยอดเยี่ยมเกี่ยวกับการตั้งค่านี้คือถ้าเนื้อหาของฉันอยู่กึ่งกลางในแนวตั้งและถึงความกว้างของแถวเนื้อหาจะอยู่กึ่งกลาง
สร้าง blurbs (สรุป) ด้วยจำนวนข้อความที่จัดเรียงตามแนวตั้งที่แตกต่างกัน
การทำให้เนื้อหาคอลัมน์ของคุณอยู่กึ่งกลางแนวตั้งก็มีประโยชน์สำหรับการนำเสนอเช่นกัน ดังที่คุณทราบ ไม่ใช่คำประกาศทั้งหมดจะมีจำนวนข้อความที่ใช้กับ d . ที่แน่นอนเขียน ฟังก์ชั่นหรือบริการ การวางภาพเบลอเหล่านี้ให้อยู่ตรงกลางในแนวตั้งสามารถสร้างการออกแบบที่สวยงามสำหรับเลย์เอาต์ของคุณได้
สำหรับตัวอย่างนี้ฉันจะจัดแนวภาพเบลอให้ตรงกับเค้าโครงหน้าแรกของ Digital Payments
ฉันจะเพิ่มเนื้อหาในปริมาณที่แตกต่างกันไปในภาพเบลอก่อนเพื่อให้การแสดงที่เป็นจริงมากขึ้นว่าไซต์อาจมีลักษณะอย่างไร
ตอนนี้ฉันต้องไปที่การตั้งค่าบรรทัดและ "ความสูงของคอลัมน์ให้กลมกลืน"
ตอนนี้ฉันสามารถเพิ่มตัวอย่าง CSS เพื่อปรับเนื้อหาของฉันและแก้ไขการออกแบบได้
ภายใต้แท็บขั้นสูงของการตั้งค่าแถวของคุณเราสามารถจัดกึ่งกลางเนื้อหาของคอลัมน์ในแนวตั้งได้โดยการเพิ่มสิ่งต่อไปนี้ในองค์ประกอบหลัก:
align-items: center; |
หรือเปลี่ยนโดยทำตามเพื่อจัดเรียงบรรทัด
align-items: flex-end; |
คุณสามารถรีเซ็ตสไตล์ CSS ที่กำหนดเองของคุณและเพิ่มระยะขอบที่กำหนดเองต่อไปนี้เพื่อจัดแนวคอลัมน์ด้านล่างแรกและคอลัมน์ด้านบนที่จัดแนวที่สาม
องค์ประกอบหลัก CSS คอลัมน์ 1:
margin: auto auto 0; |
องค์ประกอบหลัก CSS คอลัมน์ 3:
margin: 0 auto auto; |
แล้วเค้าโครงคอลัมน์เดียวล่ะ?
ในทางเทคนิคคุณไม่จำเป็นต้องมี CSS หรือข้อมูลโค้ดแบบยืดหยุ่นเพื่อจัดเนื้อหาคอลัมน์ของคุณในแนวตั้ง สิ่งที่คุณต้องทำคือตรวจสอบให้แน่ใจว่าคุณมีระยะห่างด้านบนและด้านล่างของเนื้อหา (หรือโมดูล) เท่ากัน โดยส่วนใหญ่แล้วผู้ใช้ต้องการเนื้อหาแนวตั้งที่เน้นเค้าโครงที่มีหลายคอลัมน์เนื่องจากต้องการให้เนื้อหาที่อยู่ติดกันเรียงกันอย่างลงตัว
นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้ซึ่งจะแสดงวิธีจัดองค์ประกอบในบรรทัดเดียวกันบน Divi
